/* ---header-------------------------------------------------- */
/* ---header-------------------------------------------------- */
/* ヘッダーは常に追尾 */
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
}

/* ヘッダー高さ分だけ本文を下げる */
body{
  padding-top: 90px;
}

/* 画像の長押し/保存/ドラッグ抑止（完全防止は不可だが抑制） */
img{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* 画像への直接操作を強めに無効化 */
}
/* リンク長押しのメニューも抑止（画像内リンク対策） */
a{
  -webkit-touch-callout: none;
}

/* クリックが必要な画像がある場合は、このクラスで例外化 */
img.allow-pointer{
  pointer-events: auto;
}

/* メニュー表示中は背景スクロールさせない */
html.isMenuOpen,
body.isMenuOpen{
  overflow: hidden;
}
body.isMenuOpen{
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  top: calc(-1 * var(--scroll-y, 0px));
  touch-action: none;
}
/* アンカーリンクがヘッダーに隠れないように（必要なら） */
html {
    scroll-padding-top: 90px;
}

header > .headerInner {
    height: 90px;

    /* ★ここが見切れ＆余白の主因：1155px → 1400px くらいへ */
    max-width: 1400px;

    /* ★左右余白は少し確保しつつ、幅を広く使う */
    width: min(96vw, 1400px);
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    /* ★“青の段差”対策：内側も同色にしておく */
    background-color: #0057B8;
}

/* ★ナビが詰まってるなら、PCだけ少し詰める（お好みで） */
.glbNav > ul > li > a {
    padding: 0 22px; /* 31.5px→22px程度に */
}
@media screen and (max-width: 1155px) {
    .glbNav > ul > li > a { padding: 0 16px; }
}

    header .toggle {
        width: 50px;
        height: 50px;
        display: block;
        position: fixed;
        top: 20px;
        right: 15px;
        border-radius: 10px;
        z-index: 9999;
    }

        header .toggle > a {
            display: block;
            width: 30px;
            height: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

            header .toggle > a > span:nth-child(1) {
                top: 0;
            }

            header .toggle > a > span:nth-child(2) {
                top: 50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
            }

            header .toggle > a > span:nth-child(3) {
                bottom: 0;
            }

            header .toggle > a > .toggle-line {
                width: 30px;
                height: 5px;
                border-radius: 9999px;
                background-color: #fff;
                -webkit-transition: all 0.6s;
                transition: all 0.6s;
                position: absolute;
            }

    header .nav-open > a > span:nth-child(1) {
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
        top: 15px;
    }

    header .nav-open > a > span:nth-child(2) {
        display: none;
    }

    header .nav-open > a > span:nth-child(3) {
        -webkit-transform: rotate(-225deg);
        transform: rotate(-225deg);
        top: 15px;
    }

    header .toggle.nav-open {
        border: none;
        background-color: transparent;
    }


/* ---glbNav------------------------------ */
.glbNav {
    align-self: flex-end;
}

    .glbNav > ul {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        height: 90px;
    }

        .glbNav > ul > li:hover {
            background-color: #fff;
            color: #0057B8;
        }

        .glbNav > ul > li > a {
            display: block;
            font-weight: bold;
            padding: 0 31.5px;
            height: 90px;
            line-height: 90px;
            color: #fff;
        }

        .glbNav > ul > li:hover a {
            color: #0057B8;
        }

        .glbNav > ul > .current {
            background-color: #fff;
            color: #0057B8;
        }

            .glbNav > ul > .current a {
                color: #0057B8;
            }

@media screen and (max-width: 1155px) {
    .glbNav > ul > li > a {
        padding: 0 20.5px;
    }
}

@media screen and (max-width: 890px) {
    .glbNav > ul > li > a {
        padding: 0 15.5px;
    }
}

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

/* ---sp-nav------------------------------ */
.sp-navWrap{
  display: none;
  position: fixed;
  top: 90px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 90px);
  overflow-y: auto;
  background-color: #0057B8;
  z-index: 9999;
}

.sp-nav > li {
    border-top: 1px solid #fff;
    text-align: center;
    position: relative;
    color: #fff;
}

    .sp-nav > li:last-child {
        border-bottom: 1px solid #fff;
    }

    .sp-nav > li > a {
        display: block;
        padding: 5vw;
    }

.sp-nav .menuWrap {
    top: unset;
    /* position: unset; */
    position: static;
}


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

    .sp-nav .menuWrap > .menu {
        -webkit-box-pack: center;
        justify-content: center;
    }

        .sp-nav .menuWrap > .menu > li {
            width: 47%;
        }

            .sp-nav .menuWrap > .menu > li + li + li {
                margin-top: 30px;
            }
}

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

    .sp-nav .menuWrap > .menu {
        padding: 20px 0;
    }

        .sp-nav .menuWrap > .menu > li {
            width: 75%;
            margin: auto;
        }

            .sp-nav .menuWrap > .menu > li + li,
            .sp-nav .menuWrap > .menu > li + li + li,
            .sp-nav .menuWrap > .menu > li + li + li + li {
                margin-top: 20px;
            }
}

/* ---langBtn-------------------- */

.glbNav .langBtnWrap {
    position: relative;
    border-radius: 2px;
    border: 1px solid #fff;
    border-radius: 50px;
    background: #0057B8;
    margin-left: 10px;
}

    .glbNav .langBtnWrap::before {
        position: absolute;
        top: 50%;
        right: 10px;
        width: 0;
        height: 0;
        padding: 0;
        content: "";
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #fff;
        pointer-events: none;
    }

    .glbNav .langBtnWrap:hover {
        background: #fff;
    }

    .glbNav .langBtnWrap > .langBtn {
        width: 85px;
        height: 35px;
        padding-left: 22px;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        text-indent: 0.01px;
        text-overflow: ellipsis;
        border: none;
        background: transparent;
        background-image: none;
        box-shadow: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

.glbNav > ul > li:hover > .langBtn {
    color: #0057B8;
}

.glbNav > ul > .langBtnWrap:hover::before {
    border-top: 6px solid #0057B8;
    background-color: #fff;
}

.glbNav .langBtnWrap > .langBtn::-ms-expand {
    display: none;
}

/* ---menu-------------------- */

.menuWrap {
    display: none;
    position: absolute;
    width: 100%;
    /* background: #fff; */
    background: rgba(250, 250, 250, 0.98);
    left: 0;
    z-index: 1;
    top: 90px;
    box-shadow: 1px 1px 4px #ccc;
}

    .menuWrap > .menu {
        display: -webkit-box;
        display: flex;
        color: #0057B8;
        max-width: 965px;
        margin: 0 0 0 auto;
        flex-wrap: wrap;
        padding: 50px 0;
    }

        .menuWrap > .menu > li {
            width: 32%;
            display: -webkit-box;
            display: flex;
            margin-left: 10px;
        }

            .menuWrap > .menu > li + li + li + li {
                margin-top: 30px;
            }

/* ---footer-------------------------------------------------- */
footer {
    background-color: #0057B8;
    font-size: 14px;
    line-height: 1.3;
}

footer .mark {
    display: none;
}

footer .footerNav .lev2 a::before {
    content: "> ";
}

    footer .footerInner {
        padding-top: 30px;
    }

    footer .footer-top {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        width: 95%;
        max-width: 1155px;
        margin: auto;
    }

    footer .logo {
        padding-top: 25px;
    }

    footer .footerNav {
        display: -webkit-box;
        display: flex;
        /* justify-content: space-around; */
        width: calc(100% - 215px);
        margin-left: 30px;
    }

    footer p {
        width: 100%;
    }

    footer .footerNav p,
    footer .footerNav a {
        color: #fff;
    }

    footer .footerNav > li {
        width: 25%;
    }

        footer .footerNav > li + li {
            margin-left: 10px;
        }

            footer .footerNav > li + li + li {
                width: 20%;
                width: calc(50%/3);
            }

    footer .footerNav .lev2 {
        margin-top: 20px;
        font-size: 14px;
    }

        footer .footerNav .lev2 > li {
            display: -webkit-box;
            display: flex;
        }

            footer .footerNav .lev2 > li + li {
                margin-top: 10px;
            }

    footer .footer-bottom {
        width: 100%;
        padding: 30px 0;
        margin-top: 30px;
        background-color: #fff;
        color: #0057B8;
    }

        footer .footer-bottom .addressWrap {
            max-width: 1155px;
            width: 95%;
            display: -webkit-box;
            display: flex;
            margin: auto;
            -webkit-box-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            justify-content: space-between;
        }

        footer .footer-bottom address {
            width: 100%;
        }

            footer .footer-bottom address p + p {
                margin-top: 10px;
            }

        footer .footer-bottom small {
            display: flex;
            align-items: center;
        }

            footer .footer-bottom small .logo_pmark {
                max-width: 46px;
                margin-right: 15px;
            }

    footer .footerNav .footerCurrent {
        color: #7AC7CE;
    }

@media screen and (max-width: 768px) {
    footer .logo {
        padding-top: 0;
    }

    footer .footerNav {
        flex-wrap: wrap;
        width: 60%;
        margin-left: 20px;
    }

        footer .footerNav > li {
            width: 50%;
        }

            footer .footerNav > li + li {
                margin-left: 0;
            }

                footer .footerNav > li + li + li {
                    width: 50%;
                }

        footer .footerNav .lev2 {
            display: none;
        }

    footer .footer-bottom .addressWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    footer .footer-bottom address {
        text-align: center;
    }

    footer .footer-bottom small {
        margin-top: 20px;
    }
}

@media screen and (max-width: 500px) {
    footer .footerNav {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin-left: 0;
    }

        footer .footerNav > li {
            width: 100%;
        }

            footer .footerNav > li + li + li {
                width: 100%;
            }

    footer .spVisible {
        display: block;
    }
}

/* ===index.html===================================================== */

/* ---billboard-------------------------------------------------- */
.billboard {
    background-image: url("../img/pixta_50890545_L.jpg");
    background-size: cover;
    height: 450px;
    background-position: center;
}

/* ---news-------------------------------------------------- */

.news .contentsWrap {
    margin-top: 32px;
    max-width: 1180px;
}

.news .newsList > .newsList-item {
    display: -webkit-box;
    display: flex;
    padding: 30px 30px 30px 45px;
    border-bottom: 1px dashed #000;
}

    .news .newsList > .newsList-item.odd {
        background-color: #f3f5f6;
    }

.news .newsList .newsList-date {
    color: #0057B8;
    font-size: 17px;
    letter-spacing: 1px;
}

.news .newsList .newsList-text {
    margin-left: 65px;
    align-self: center;
}

.news .btn > a {
    background: -webkit-gradient(linear, left top, left bottom, from(#3f90f9), to(#0057B8));
    background: linear-gradient(to bottom, #3f90f9, #0057B8);
}

@media screen and (max-width: 768px) {
    .news .newsList > .newsList-item {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    .news .newsList .newsList-text {
        margin-left: 0;
        margin-top: 20px;
    }
}

/* ---featured-------------------------------------------------- */

.featured .contentsWrap {
    margin-top: 32px;
    max-width: 1180px;
}

.featured .boxes {
    justify-content: space-around;
}

.featured .boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.featured .boxes > .box {
    width: 38%;
    margin-bottom: 30px;
}

    .featured .boxes > .box:nth-child(1)::before {
        background-image: url("../img/top_more_001.png");
    }

    .featured .boxes > .box:nth-child(3)::before {
        background-image: url("../img/top_more_002.png");
    }
    
    .featured .boxes > .box:nth-child(4)::before {
        background-image: url("../img/top_more_003.png");
    }

    .featured .boxes > .box:nth-child(2)::before {
        background-image: url("../img/top_more_004.png");
    }

    .featured .boxes>.box:nth-child(5)::before {
        background-image: url("../img/top_more_005.png");
    }

    .featured .boxes>.box:nth-child(6)::before {
        background-image: url("../img/top_more_006.png");
    }

    .featured .boxes > .box {
        margin-bottom: 45px;
    }    

    .featured .boxes > .box.contact {
        background-color: #0057B8;
        position: relative;
    }

        .featured .boxes > .box.contact .boxInner {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 100%;
        }

        .featured .boxes > .box.contact .imageWrap {
            background-color: #0057B8;
            max-width: 67px;
            margin: auto;
        }

    .featured .boxes > .box .viewMore {
        display: -webkit-box;
        display: flex;
        padding: 15px 20px;
        -webkit-box-pack: justify;
        justify-content: space-between;
        background-color: #373838;
        letter-spacing: 1px;
    }

        .featured .boxes > .box .viewMore > p {
            color: #fff;
        }

    .featured .boxes > .box.contact .text {
        text-align: center;
        color: #fff;
        margin-top: 25px;
    }

    .featured .boxes > .box .viewMore > .arrow::after {
        content: "→";
        color: #fff;
    }

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

    .featured .boxes > .box {
        width: 48%;
    }

        .featured .boxes > .box + .box + .box {
            margin-top: 45px;
        }
}

@media screen and (max-width: 767px) {
    .featured .boxes {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
    }

        .featured .boxes > .box {
            width: 80%;
        }

            .featured .boxes > .box + .box {
                margin-top: 45px;
            }
}

@media screen and (max-width: 425px) {
    .featured .boxes > .box {
        width: 95%;
    }
}

/* ---support-------------------------------------------------- */

.support .contentsWrap {
    margin-top: 32px;
    max-width: 1020px;
}

.support .contents {
    background: #f6f8fb;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    padding: 36px 40px;
    text-align: center;
    margin-top: 0;
    line-height: 1.9;
    color: #333;
}

.support .download {
    margin: 28px auto 0;
    text-align: center;
}

    .support .download > a {
        background: linear-gradient(135deg, #0b3a6b 0%, #1a5fa8 100%);
        color: #fff;
        padding: 16px 48px;
        display: inline-block;
        border-radius: 999px;
        font-weight: 700;
        text-decoration: none;
        transition: transform .15s, box-shadow .15s;
        box-shadow: 0 4px 12px rgba(0,0,0,.12);
    }

    .support .download > a:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,.18);
    }

/* ===privacy-policy.html===================================================== */
/* ---privacyPolicy-------------------------------------------------- */

.privacyPolicy .contentsWrap + .contentsWrap {
    margin-top: 120px;
}

.privacyPolicy .list {
    margin-top: 50px;
}

    .privacyPolicy .list.right {
        text-align: right;
        margin-top: 100px;
    }

    .privacyPolicy .list > li + li {
        margin-top: 35px;
    }

    .privacyPolicy .list > li > dl > dt {
        font-size: 16px;
        font-weight: bold;
    }

    .privacyPolicy .list > li > dl > dd > dl {
        margin-top: 20px;
    }

        .privacyPolicy .list > li > dl > dd > dl > dt {
            line-height: 2;
        }

        .privacyPolicy .list > li > dl > dd > dl > dd {
            padding-left: 27px;
        }

            .privacyPolicy .list > li > dl > dd > dl > dd a {
                color: #0057B8;
            }

/* ===product-documentation.html===================================================== */
.productDocumentation .imageWrap img {
    width: 20%;
    height: auto;
}

/* ---productDocumentation-------------------------------------------------- */

.productDocumentation .contents {
    /*border-top: 1px solid #B3B2B3;*/
}

.productDocumentation .list {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #B3B2B3;
}

    .productDocumentation .list > li + li {
        margin-top: 40px;
    }

    .productDocumentation .list dt {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 3px;
    }

    .productDocumentation .list dd {
        margin-top: 10px;
        color: #0057B8;
    }

        .productDocumentation .list dd + dd {
            margin-top: 20px;
        }

        .productDocumentation .list dd > a {
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
        }

@media screen and (max-width: 500px) {
    .productDocumentation .spVisible {
        display: block;
    }
}

/* ===company-outline.html===================================================== */
/* ---companyOutline-------------------------------------------------- */

.companyOutline .list > .itemWrap {
    display: -webkit-box;
    display: flex;
}

    .companyOutline .list > .itemWrap + .itemWrap {
        margin-top: 40px;
    }

.companyOutline .list .description {
    width: 20%;
    padding-bottom: 10px;
    align-self: flex-end;
    color: #4E4D4E;
    border-bottom: 1px solid #323434;
}

.companyOutline .list .detail {
    width: 80%;
    padding: 0 0 5px 10px;
    border-bottom: 1px solid #CBCCCC;
}

.companyOutline .list-bottom {
    margin-top: 55px;
    padding-top: 60px;
    border-top: 1px dotted #0057B8;
}

    .companyOutline .list-bottom .detail {
        display: -webkit-box;
        display: flex;
    }

    .companyOutline .list-bottom .itemWrap + .itemWrap {
        -webkit-box-pack: end;
        justify-content: flex-end;
    }

.companyOutline .date {
    margin-right: 60px;
}

@media screen and (max-width: 500px) {
    .companyOutline .date {
        margin-right: 20px;
    }
}


/* ===inquiry-form.php===================================================== */
/* ---inquiryForm-------------------------------------------------- */

.inquiryForm .formAttention {
    margin-top: 100px;
}

.inquiryForm .contentsWrap .mark {
    margin-left: 10px;
    padding: 3px 10px;
    background-color: transparent;
}

    .inquiryForm .contentsWrap .mark::before {
        width: 20px;
        height: 20px;
        background-color: #E45928;
        content: "";
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

.inquiryForm .thanksText {
    margin-top: 80px;
}

/* ---↓form-------------------- */
.inquiryForm .formWrap {
    position: relative;
}

    .inquiryForm .formWrap::before,
    .inquiryForm form .formItem-accept::before,
    .inquiryForm form .formItem-confirm::before {
        content: "";
        position: absolute;
        top: 0;
        width: 200%;
        height: 1px;
        max-width: 1180px;
        border-top: 1px solid #B3B2B3;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .inquiryForm .formWrap.bd_t0::before {
        border-top: none;
    }

.inquiryForm form {
    outline: none;
    padding-top: 30px;
    margin-top: 20px;
}

    .inquiryForm form .formItem + .formItem {
        margin-top: 45px;
    }

    .inquiryForm form select {
        border: none;
        width: 100%;
        color: #6F7170;
    }

    .inquiryForm form input,
    .inquiryForm form .inputWrap p {
        border: 1px solid #B3B2B3;
        padding: 20px 0 20px 10px;
        min-height: 62px;
    }

    .inquiryForm form input,
    .inquiryForm form select,
    .inquiryForm form .inputWrap p {
        width: 100%;
    }

::-webkit-input-placeholder {
    color: #6F7170;
}

::-moz-placeholder {
    color: #6F7170;
}

:-ms-input-placeholder {
    color: #6F7170;
}

::-ms-input-placeholder {
    color: #6F7170;
}

::placeholder {
    color: #6F7170;
}

/* ▼IE10・IE11用 */
:-ms-input-placeholder {
    color: #6F7170;
}

/* ▼Chrome・Safari・Opera用(※1：Edgeでも有効) */
::-webkit-input-placeholder {
    color: #6F7170;
}

/* ▼Firefox18以前用(※2) */
:-moz-placeholder {
    color: #6F7170;
}
/* ▼Firefox19以上用(※3) */
::-moz-placeholder {
    color: #6F7170;
    opacity: 1;
}

/* ▼CSS4標準(予定)の記述 */
::-webkit-input-placeholder {
    color: #6F7170;
}

::-moz-placeholder {
    color: #6F7170;
}

:-ms-input-placeholder {
    color: #6F7170;
}

::-ms-input-placeholder {
    color: #6F7170;
}

::placeholder {
    color: #6F7170;
}

.inquiryForm form textarea,
.inquiryForm form .inputWrap p {
    border: 1px solid #B3B2B3;
    padding: 20px 0 20px 10px;
    outline: none;
    max-width: 100%;
    width: 100%;
}

.inquiryForm form .inputWrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 10px;
}

.inquiryForm form .formItem-postalCode .inputWrap {
    -webkit-box-pack: stretch;
    justify-content: stretch;
}

.inquiryForm form .formItem-postalCode input,
.inquiryForm form .formItem-postalCode p {
    width: 170px;
}

.inquiryForm form .formItem-address .inputWrap {
    -webkit-box-align: stretch;
    align-items: stretch;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.inquiryForm form .formItem-address input,
.inquiryForm form .formItem-address p {
    margin-top: 20px;
}

.inquiryForm form .formItem-address .selectWrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 300px;
    max-height: 62px;
    padding: 20px 0 20px 10px;
    /* padding-left: 10px; */
    border: 1px solid #B3B2B3;
    color: #6F7170;
}

    .inquiryForm form .formItem-address .selectWrap::before {
        display: inline-block;
    }

    .inquiryForm form .formItem-address .selectWrap p {
        padding: 15px 0 15px 0;
        border: none;
    }

    .inquiryForm form .formItem-address .selectWrap p {
        margin: 0;
        min-height: auto;
    }


.inquiryForm form .formItem-name input {
    width: 49%;
    max-width: 525px;
}

.inquiryForm form .lead {
    margin-left: 10px;
    color: #6F7170;
}

.inquiryForm form .formItem-number {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

    .inquiryForm form .formItem-number .tel,
    .inquiryForm form .formItem-number .fax {
        width: 49%;
    }

    .inquiryForm form .formItem-number .inputWrap {
        -webkit-box-pack: stretch;
        justify-content: stretch;
    }

    .inquiryForm form .formItem-number input {
        width: 37%;
    }

.inquiryForm form .formItem-submit {
    margin-top: 90px;
    padding-top: 45px;
    border-top: 1px solid #B3B2B3;
}

.inquiryForm form .formItem-accept {
    position: relative;
    padding-top: 55px;
    margin-top: 85px;
}

    .inquiryForm form .formItem-accept .text a {
        color: #0057B8;
    }

    .inquiryForm form .formItem-accept .acceptWrap {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        margin-top: 35px;
        font-size: 18px;
    }

        .inquiryForm form .formItem-accept .acceptWrap:hover {
            opacity: 0.8;
        }

    .inquiryForm form .formItem-accept input {
        display: inline-block;
        position: relative;
        width: 30px;
        height: 30px;
        padding: 0;
        background-color: #CBCCCC;
        border: none;
        margin-right: 20px;
        min-height: auto;
    }

        .inquiryForm form .formItem-accept input:checked::before {
            position: absolute;
            display: inline-block;
            width: 30px;
            height: 30px;
            content: "✔︎";
            text-align: center;
            line-height: 30px;
            color: #fff;
        }

    .inquiryForm form .formItem-accept #checked:hover {
        opacity: 1;
    }

    .inquiryForm form .formItem-accept #checked input::before {
        position: absolute;
        display: inline-block;
        width: 30px;
        height: 30px;
        content: "✔︎";
        text-align: center;
        line-height: 30px;
        color: #fff;
    }

.inquiryForm form .formItem-confirm {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    padding-top: 55px;
    margin-top: 85px;
    -webkit-box-pack: center;
    justify-content: center;
}

    .inquiryForm form .formItem-confirm .text {
        width: 100%;
        text-align: center;
    }

    .inquiryForm form .formItem-confirm .inputWrap {
        max-width: 300px;
        width: 100%;
        position: relative;
        color: #0057B8;
        background-color: #fff;
        border-radius: 9999px;
        border: 3px solid #0057B8;
        -webkit-box-pack: center;
        justify-content: center;
        opacity: 0.6;
    }

    .inquiryForm form .formItem-confirm .btnSubmitWrap {
        margin-left: 50px;
    }

    .inquiryForm form .formItem-confirm .inputWrap.is-active {
        opacity: 1;
        background-color: #0057B8;
    }

    .inquiryForm form .formItem-confirm .btnBackWrap.is-active,
    .inquiryForm form .formItem-confirm .btnSubmitWrap.is-active {
        margin-top: 20px;
    }


    .inquiryForm form .formItem-confirm .btnBackWrap.is-active {
        background-color: #CBCCCC;
        border: 3px solid #CBCCCC;
    }

    .inquiryForm form .formItem-confirm .inputWrap.is-active:hover {
        opacity: 0.8;
    }

    .inquiryForm form .formItem-confirm .inputWrap > span {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        width: 100%;
        border: none;
    }

    .inquiryForm form .formItem-confirm input {
        width: 100%;
        padding: 18px 0;
        font-size: 16px;
        color: #0057B8;
        letter-spacing: 1px;
        display: inline-block;
        border-radius: 9999px;
        background-color: inherit;
        border: none;
    }

        .inquiryForm form .formItem-confirm input.is-active {
            color: #fff;
        }

    .inquiryForm form .formItem-confirm .arrow {
        position: absolute;
        right: 10px;
        color: #0057B8;
    }

        .inquiryForm form .formItem-confirm .arrow.is-active {
            color: #fff;
        }

.inquiryForm form .formItem .errorMessage {
    color: #F00;
    width: 100%;
    margin-top: 10px;
}


@media screen and (max-width: 1180px) {
    .inquiryForm .formWrap::before,
    .inquiryForm form .formItem-accept::before,
    .inquiryForm form .formItem-confirm::before {
        width: 100%;
    }
}

@media screen and (max-width: 890px) {
    .inquiryForm form .formItem-number {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

        .inquiryForm form .formItem-number .tel,
        .inquiryForm form .formItem-number .fax {
            width: 100%;
        }

        .inquiryForm form .formItem-number .fax {
            margin-top: 20px;
        }
}

@media screen and (max-width: 768px) {
    .inquiryForm form .formItem-confirm {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

        .inquiryForm form .formItem-confirm .inputWrap {
            margin: 20px auto;
        }
}

@media screen and (max-width: 500px) {
    .inquiryForm form .formItem-number input {
        width: 60%;
    }

    .inquiryForm form .formItem-number .inputWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: start;
        align-items: flex-start;
    }

    .inquiryForm form .lead {
        margin: 5px 0 0 0;
    }
}
/* ---↑form-------------------- */

/* ===product-menu.html===================================================== */
/* ---productMenu-------------------------------------------------- */
.productMenu .boxes > .box {
    width: 48%;
}

    .productMenu .boxes > .box::before {
        padding-top: 73.448%;
    }

    .productMenu .boxes > .box + .box + .box {
        margin-top: 45px;
    }

    .productMenu .boxes > .box .titleWrap {
        top: 40%;
    }

        .productMenu .boxes > .box .titleWrap h3 {
            font-size: 25px;
        }

        .productMenu .boxes > .box .titleWrap p {
            font-size: 18px;
        }

    .productMenu .boxes > .box:nth-child(1)::before {
        /* background-image: url("../img/top_more_001.png"); */
        background-image: url("../img/pro_001.png");
    }

    .productMenu .boxes > .box:nth-child(2)::before {
        /* background-image: url("../img/top_more_002.png"); */
        background-image: url("../img/pro_002.png");
    }

    .productMenu .boxes > .box:nth-child(3)::before {
        /* background-image: url("../img/top_more_003.png"); */
        background-image: url("../img/pro_003.png");
    }

    .productMenu .boxes > .box:nth-child(4)::before {
        /* background-image: url("../img/top_more_004.png"); */
        background-image: url("../img/pro_004.png");
    }

    .productMenu .boxes > .box:nth-child(5)::before {
        /* background-image: url("../img/top_more_005.png"); */
        background-image: url("../img/pro_005.png");
    }

    .productMenu .boxes > .box:nth-child(6)::before {
        /* background-image: url("../img/top_more_006.png"); */
        background-image: url("../img/pro_006.png");
    }

@media screen and (max-width: 890px) {
    .productMenu .boxes > .box .titleWrap h3 {
        font-size: 22px;
    }

    .productMenu .boxes > .box .titleWrap p {
        font-size: 14px;
    }
}

@media screen and (max-width: 767px) {
    .productMenu .boxes {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
    }

        .productMenu .boxes > .box {
            width: 80%;
        }

            .productMenu .boxes > .box + .box {
                margin-top: 45px;
            }
}

@media screen and (max-width: 767px) and (min-width: 500px) {
    .productMenu .boxes > .box .titleWrap h3 {
        font-size: 25px;
    }

    .productMenu .boxes > .box .titleWrap p {
        font-size: 18px;
    }
}

@media screen and (max-width: 425px) {
    .productMenu .boxes > .box {
        width: 100%;
    }

        .productMenu .boxes > .box .titleWrap h3 {
            font-size: 17px;
        }
}

/* ===orderette.html===================================================== */
/* ---orderette-------------------------------------------------- */

.orderette .section {
    padding-bottom: 0;
}

.orderette .contentsWrap {
    max-width: none;
    width: 100%;
}

.orderette .productWrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* ---productKv-------------------------------------------------- */
.orderette .productKv {
    position: relative;
    background-image: url("../img/pos_000.png");
    background-position: center;
    background-size: cover;
    /* padding-top: 27.83%; */
    padding: 10px 9% 15px 0;
}

    .orderette .productKv .productKvInner {
        max-width: 670px;
        width: 100%;
        /* right: 9%;
  top: 0; */
        margin-left: auto;
    }

    .orderette .productKv .headingWrap {
        line-height: 1;
    }

    .orderette .productKv h3 {
        font-size: 81px;
        font-weight: bold;
        text-align: right;
        color: #0057B8;
    }

        .orderette .productKv h3 span {
            font-size: 40px;
            color: #0057B8;
        }

    .orderette .productKv .headingWrap p {
        margin-top: 20px;
        text-align: right;
        font-size: 29px;
        color: #0057B8;
    }

        .orderette .productKv .headingWrap p span {
            margin-top: 15px;
            display: block;
            line-height: 1.5;
            font-size: 19px;
            color: #0057B8;
        }


    .orderette .productKv .labelInfo {
        /* position: absolute;
  bottom: 15px;
  right: 30px; */
        position: relative;
        display: -webkit-box;
        display: flex;
        margin-top: 50px;
        -webkit-box-pack: end;
        justify-content: flex-end;
        z-index: 10;
    }

        .orderette .productKv .labelInfo .right {
            margin-left: 20px;
        }

        .orderette .productKv .labelInfo a {
            /* display: block; */
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
            justify-content: center;
            background-color: #6EB057;
            color: #fff;
            /* padding: 5px 37px; */
            padding: 2px 3px;
            font-size: 18px;
            text-align: center;
        }

        .orderette .productKv .labelInfo .left a {
            width: 290px;
        }

        .orderette .productKv .labelInfo .right a {
            width: 350px;
        }


        .orderette .productKv .labelInfo span {
            display: inline-block;
            color: #fff;
        }

        .orderette .productKv .labelInfo .arrow {
            max-width: 35px;
            width: 100%;
            margin-left: 10px;
            line-height: 1.3;
        }

.orderette .spBg {
    display: none;
}


/* ---point-------------------------------------------------- */
.orderette .point .imageWrap {
    position: relative;
        max-width: 210px;
        max-height: 215px;
        width: 100%;
        border: 1px solid #939599;
    }

.orderette .point .item {
    display: -webkit-box;
    display: flex;
}

    .orderette .point .item + .item {
        margin-left: 20px;
    }

.orderette .point .text {
    margin-left: 20px;
}

.orderette .point .list {
    margin-top: 10px;
}
/* ---hardImage-------------------------------------------------- */
.orderette .hardImage {
    background-color: #F1F1F1;
}

    .orderette .hardImage .imageWrap {
        width: 100%;
    }

    .orderette .hardImage .spVisible {
        display: none;
    }
/* ---basicScreen-------------------------------------------------- */
/* .orderette .basicScreen p{
  font-size: 14px;
} */

.orderette .basicScreen .left {
    max-width: 430px;
    align-self: flex-start;
}

    .orderette .basicScreen .left .text {
        margin-top: 20px;
        line-height: 2;
    }

.orderette .basicScreen .right {
    width: 100%;
    max-width: 570px;
    margin-left: 50px;
}

    .orderette .basicScreen .right h4 {
        /* font-size: 22px; */
        color: #fff;
        text-align: center;
        letter-spacing: 3px;
        background-color: #0057B8;
    }

    .orderette .basicScreen .right .list {
        border-bottom: 1px solid #4E4F51;
        padding-bottom: 10px;
    }

        .orderette .basicScreen .right .list > li {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #4E4F51;
        }

            .orderette .basicScreen .right .list > li span {
                color: #0057B8;
                font-size: 18px;
            }

/* ---entrySystem-------------------------------------------------- */
.orderette .entrySystem {
    background-color: #F1F1F1;
}

    .orderette .entrySystem .productWrap {
        /* align-items: center; */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        max-width: 1250px;
    }

        .orderette .entrySystem .productWrap .text {
            max-width: 1050px;
            align-self: center;
            margin-top: 30px;
        }

/* ---selfRegister-------------------------------------------------- */
.orderette .selfRegister {
    position: relative;
    background-image: url("../img/sel_001.png");
    background-position: center;
    background-size: cover;
    /* height: 386px; */
    padding-top: 27%;
}

    .orderette .selfRegister h2 {
        position: absolute;
        top: 50px;
        left: 200px;
        top: 6%;
        left: 14%;
        font-size: 81px;
        color: #fff;
    }

/* ---productCommonBox-------------------------------------------------- */
.orderette .productCommonBox .imageWrap {
    border: 1px solid #939599;
}

/* ---client-------------------------------------------------- */
.orderette .client .text {
    margin-top: 20px;
}

@media screen and (max-width: 676px) {
    .orderette .productSection .spVisible {
        display: block;
    }
}


/* ---payment-------------------------------------------------- */
.orderette .payment .imageWrap {
    margin-top: 20px;
}

@media screen and (max-width: 1075px) {
    .orderette .pcVisible {
        display: none;
    }

    .orderette .productKv {
        padding-right: 20px;
        background-position: -180px;
    }
}

@media screen and (max-width: 1023px) {
    .orderette .productWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
    }

    .orderette .optionBoxes {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        -webkit-box-align: unset;
        align-items: unset;
    }

    .orderette .point .item {
        display: -webkit-box;
        display: flex;
        max-width: 653px;
        width: 100%;
    }

        .orderette .point .item + .item {
            margin: 20px 0 0 0;
        }

    .orderette .basicScreen .productWrap {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
    }

    .orderette .selfRegister h2 {
        font-size: 51px;
    }
}

@media screen and (max-width: 890px) {
    .orderette .optionBoxes {
        justify-content: space-around;
    }
}

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

    .orderette .productKv {
        background-image: url("../img/pos_000_0.png");
        height: 606px;
    }

        .orderette .productKv .labelInfo {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            -webkit-box-align: end;
            align-items: flex-end;
        }

            .orderette .productKv .labelInfo .right {
                margin: 10px 0 0 0;
            }

    .orderette .spBg {
        display: block;
        position: absolute;
    }

        .orderette .spBg.productLogo {
            top: 6%;
            left: 2%;
        }

        .orderette .spBg.phone {
            bottom: 0;
            left: 0;
        }

    .orderette .optionBoxes {
        justify-content: space-around;
    }
}

@media screen and (max-width: 768px) {
    .orderette .productKv {
        background-position: -160px;
    }

        .orderette .productKv h3 {
            font-size: 50px;
        }

            .orderette .productKv h3 span {
                font-size: 24px;
            }

        .orderette .productKv .headingWrap p {
            font-size: 19px;
        }

        .orderette .productKv .labelInfo {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            flex-direction: column;
            -webkit-box-align: end;
            align-items: flex-end;
        }

            .orderette .productKv .labelInfo .right {
                margin: 10px 0 0 0;
            }

    .orderette .spBg.productLogo {
        top: 6%;
        left: 3%;
        width: 100px;
    }

    .orderette .optionBoxes {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .orderette .basicScreen .productWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    .orderette .basicScreen .left {
        align-self: center;
    }

    .orderette .basicScreen .right {
        margin: 20px 0 0 0;
    }

    .orderette .selfRegister h2 {
        font-size: 41px;
    }
}

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

    /* .orderette .basicScreen .productWrap{
    flex-direction: column;
  }

  .orderette .basicScreen .left{
    align-self: unset;
  }

  .orderette .basicScreen .right{
    margin: 20px 0 0 0 ;
  }

  .orderette .selfRegister h2 {
    font-size: 41px;
  } */
}

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

    .orderette .productKv h3 {
        font-size: 39px;
    }

        .orderette .productKv h3 span {
            font-size: 20px;
        }

    .orderette .spBg.productLogo {
        left: 1%;
    }

    .orderette .point .imageWrap {
        max-width: 119px;
    }

        .orderette .point .imageWrap img {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

    .orderette .hardImage .spVisible {
        display: block;
    }

    .orderette .selfRegister {
        padding-top: 40%;
    }

        .orderette .selfRegister h2 {
            top: 2%;
            left: 7%;
            font-size: 31px;
        }
}

@media screen and (max-width: 424px) {
    .orderette .productKv {
        height: 466px;
    }

        .orderette .productKv h3 {
            font-size: 28px;
        }

            .orderette .productKv h3 span {
                font-size: 14px;
            }

    .orderette .spBg.productLogo {
        top: 4%;
        width: 20vw;
    }

    .orderette .productKv .headingWrap p {
        font-size: 17px;
    }

        .orderette .productKv .headingWrap p span {
            font-size: 17px;
        }

    .orderette .productKv .labelInfo a {
        font-size: 14px;
    }

    .orderette .productKv .labelInfo .left a {
        width: 230px;
    }

    .orderette .productKv .labelInfo .right a {
        width: 270px;
    }
}

/* ===-sparette.html===================================================== */
/* ---sparette-------------------------------------------------- */
/* ---productKv-------------------------------------------------- */
.sparette .section {
    padding-bottom: 0;
}

.sparette .productKv {
    background-image: url("../img/spa_000.png");
    padding-bottom: 240px;
}

    .sparette .productKv h3 {
        color: #E84C38;
        background: -webkit-linear-gradient(top, #E8034F, #F69475);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

        .sparette .productKv h3 span {
            color: #CE232D;
            background: -webkit-linear-gradient(top, #CE232D, #DB3732);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

/* ---point-------------------------------------------------- */
.sparette .point .item {
    display: -webkit-box;
    display: flex;
}

    .sparette .point .item + .item {
        margin-top: 30px;
    }

    .sparette .point .item .imageWrap {
        max-width: 520px;
        width: 100%;
    }

    .sparette .point .item .text {
        margin-left: 30px;
        min-width: 350px;
        width: 48%;
    }

/* ---machines-------------------------------------------------- */
.sparette .machines .productWrap {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
}

.sparette .machines .card {
    max-width: 240px;
    width: 22.8%;
    background-color: #fff;
}

    .sparette .machines .card + .card {
        margin-left: 20px;
    }

    .sparette .machines .card:nth-child(5) {
        margin-left: 0;
    }

    .sparette .machines .card + .card + .card + .card + .card {
        margin-top: 20px;
    }

    .sparette .machines .card .imageWrap {
        width: 83%;
        margin: auto;
    }

    .sparette .machines .card .name {
        text-align: center;
        font-weight: bold;
    }

    .sparette .machines .card .cardBottom {
        min-height: 165px;
        padding: 14px 21px 25px;
        margin-top: 10px;
        background-color: #0057b8;
        color: #fff;
    }

/* ---processing-------------------------------------------------- */
.sparette .processing .box {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 40px;
    background-color: #fff;
    border: 1px solid #0057B8;
}

.sparette .processing .text {
    font-size: 19px;
    line-height: 2;
    color: #0057B8;
}

.sparette .processing .imageWrap {
    margin-left: 10px;
}

.sparette .processing .top .text {
    max-width: 248px;
}

.sparette .processing .top .imageWrap {
    width: 72%;
    max-width: 690px;
}

.sparette .processing .bottom {
    display: -webkit-box;
    display: flex;
    background-color: #0057B8;
}

    .sparette .processing .bottom .text {
        max-width: 560px;
        color: #fff;
    }

/* ---productCommonBox-------------------------------------------------- */
.sparette .productCommonBox .wrap {
    max-width: 580px;
    margin-left: 60px;
}

.sparette .productCommonBox .imageWrap {
    width: 49%;
}

.sparette .productCommonBox .text {
    padding-top: 0;
    margin-top: 40px;
    line-height: 2;
    margin-left: 0;
}

/* ---other-------------------------------------------------- */
.sparette .other .productWrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: space-evenly;
    justify-content: space-evenly;
}

.sparette .other .box {
    max-width: 430px;
}

    .sparette .other .box + .box {
        margin-left: 30px;
    }

.sparette .other .imageWrap {
    min-height: 332px;
}

.sparette .other .text {
    margin-top: 40px;
}

    .sparette .other .text p {
        line-height: 1.9;
    }

.sparette .other .checkBoxes {
    margin-top: 10px;
    padding-top: 10px;
    padding-right: 20px;
    border-top: 1px solid #939599;
}

.sparette .other .checkText {
    font-size: 14px;
}

/* ---case-------------------------------------------------- */
.sparette .case .box + .box {
    margin-top: 30px;
}

.sparette .case .headingWrap {
    padding-top: 25px;
    background-color: #fff;
}

.sparette .case h4 {
    color:#000;
    border: 1px solid #0057B8;
    max-width: 420px;
    margin: auto;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 19px;
}

.sparette .option .optionBox:last-child {
    border: none;
}

@media screen and (max-width: 1075px) {
    .sparette .machines .card .cardBottom {
        min-height: 190px;
    }
}

@media screen and (max-width: 1023px) {
    .sparette .machines .card .cardBottom {
        min-height: 215px;
    }
}

@media screen and (max-width: 890px) {
    .sparette .productKv h3 {
        padding-top: 30px;
        font-size: 42px;
    }

    .sparette .kv .productLogo {
        top: 131%;
    }

    .sparette .productWrap {
        -webkit-box-pack: center;
        justify-content: center;
    }

    .sparette .machines .card {
        max-width: 50%;
        width: 40.8%;
    }

    .sparette .machines .card + .card + .card {
        margin-top: 20px;
    }

    .sparette .machines .card:nth-child(2n) {
        margin-left: 20px;
    }

    .sparette .machines .card:nth-child(2n-1) {
        margin-left: 0px;
    }

    .sparette .other .imageWrap {
    min-height: 49%;
}
}

@media screen and (max-width: 676px) {
    .sparette .kv .productKv h3 span {
        font-size: 27px;
    }
}

@media screen and (max-width: 768px) {
    .sparette .other .imageWrap {
        min-height: 41%;
    }


    .sparette .point .item {
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

        .sparette .point .item .text {
            margin: 30px 0 0 0;
            width: 100%;
            min-width: 1px;
        }

    .sparette .processing .box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
    }

    .sparette .processing .top .text {
        max-width: none;
    }

    .sparette .processing .bottom .text {
        max-width: none;
    }

    .sparette .processing .imageWrap {
        margin: 20px 0 0 0;
    }

    .sparette .other .productWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-align: center;
        align-items: center;
    }

    .sparette .other .box + .box {
        margin: 40px 0 0 0;
    }
}

@media screen and (max-width: 767px) {
    .sparette .productCommonBox .wrap {
        margin: 40px 0 0 0;
    }
}

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

    .kv .productKv {
        background-position: -380px;
    }

    .kv .productLogo span {
        font-size: 20px;
    }

    .kv .productKv {
        background-position: -380px;
    }

    .kv .productLogo span {
        font-size: 20px;
    }

    .sparette .productKv h3 {
        font-size: 38px;
    }

    .sparette .kv .productKv h3 span {
        font-size: 16px;
    }

    .sparette .kv .productLogo {
        top: 171%;
        width: 100px;
        height: 100px;
    }

    .sparette .machines .card {
        max-width: none;
        width: 90%;
    }

        .sparette .machines .card + .card {
            margin-top: 20px;
        }

        .sparette .machines .card:nth-child(2n) {
            margin-left: 0px;
        }

        .sparette .machines .card .cardBottom {
            min-height: 170px;
        }
}

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

    .sparette .case h4 {
        max-width: 296px;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
    }
}

/* ===-hq-net.html===================================================== */
/* ---hqNet-------------------------------------------------- */
/* ---productKv-------------------------------------------------- */
.hqNet .section {
    padding-bottom: 0;
}

.hqNet .productKv {
    background-image: url("../img/manage_000.png");
    padding-bottom: 245px;
}

.hqNet .kv .productKv h3 {
    margin-left: 4%;
    padding-top: 20px;
    font-size: 55px;
    color: #273055;
}

    .hqNet .kv .productKv h3 span {
        font-size: 41px;
        color: #273055;
    }

.hqNet .kv .productLogo {
    width: 170px;
    height: 170px;
}

@media screen and (max-width: 1250px) {
    .hqNet .kv .productLogo {
        top: 131%;
    }
}

@media screen and (max-width: 1075px) {
    .hqNet .kv .productKv h3 span {
        font-size: 34px;
    }

    .hqNet .kv .productLogo {
        /* top: 171%; */
        right: 9%;
        left: unset;
    }
}

@media screen and (max-width: 890px) {
    .hqNet .kv .productKv h3 {
        padding-top: 30px;
        font-size: 42px;
    }

    .hqNet .kv .productLogo {
        top: 131%;
    }
}

@media screen and (max-width: 764px) {
    .hqNet .spVisible {
        display: block;
    }
}

@media screen and (max-width: 676px) {
    .hqNetv .kv .productKv h3 span {
        font-size: 27px;
    }
}

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



    .hqNet .kv .productKv h3 {
        font-size: 35px;
    }

        .hqNet .kv .productKv h3 span {
            font-size: 16px;
        }

    .hqNet .kv .productLogo {
        top: 171%;
        width: 100px;
        height: 100px;
    }
}

/* ---point-------------------------------------------------- */
.hqNet .point .productWrap > div {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
}

.hqNet .point p + p {
    margin-left: 4%;
}

.hqNet .point .top p:nth-child(2n-1) {
    margin-left: 0;
}

.hqNet .point .top p + p + p {
    margin-top: 30px;
}

.hqNet .point .top p span {
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    margin-right: 5px;
}

.hqNet .point .imageWrap {
    max-width: 500px;
    width: 48%;
    border: 1px solid #939599;
    background-color: #fff;
}

.hqNet .point .text {
    max-width: 500px;
    width: 48%;
}

.hqNet .point .bottom {
    margin-top: 60px;
}

@media screen and (max-width: 764px) {
    .hqNet .point .productWrap > div {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    .hqNet .point .top p:nth-child(2n-1) {
        max-width: none;
        width: 100%;
    }

    .hqNet .point .imageWrap {
        max-width: none;
        width: 100%;
        margin-left: 0;
    }

    .hqNet .point .text {
        max-width: none;
        width: 100%;
        margin: 30px 0 0;
    }
}


/* ===-mobile-online-menu.html===================================================== */
/* ---mom-------------------------------------------------- */
/* ---productKv-------------------------------------------------- */
.mom .section {
    padding-bottom: 0;
}

.mom .point .productWrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
}

/* .mom .productKv{
  background-image: url("../img/mobile_000.png");
  padding-bottom: 245px;
  height: 410px;
} */

.mom .productKv.sp {
    padding-bottom: 245px;
    height: 410px;
    background-image: url("../img/mobile_000_sp.png");
}

    .mom .productKv.sp .productHeding > span {
        display: block;
    }

.mom .kv .productKv h3 span.head {
    position: relative;
    margin-top: 30px;
}

.mom .kv .productKv h3 span.head,
.mom .kv .productKv h3 span.green,
.mom .kv .productKv h3 span.orange {
    font-size: 60px;
}

.mom .green {
    color: #72A72D;
}

.mom .orange {
    color: #E7B725;
}

.mom .kv .productKv .headingWrap {
    padding-top: 40px;
}

.mom .kv .productKv .lead {
    color: #fff;
}

.mom .kv .productLogo span {
    font-size: 25px;
}

@media screen and (max-width: 1023px) {
    .mom .kv .productLogo {
        top: 110%;
    }
}

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

    .mom .productKv.sp {
        height: 500px;
        background-image: url("../img/mobile_000_sp.jpg");
        background-position: center;
    }

    .mom .kv .productLogo {
        top: 131%;
    }
}

@media screen and (max-width: 768px) {
    .mom .kv .productKv h3 span.head {
        position: relative;
        margin-top: 30px;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    .mom .kv .productLogo {
        top: 91%;
    }
}

@media screen and (max-width: 500px) {
    .mom .kv .productLogo {
        top: 102%;
        width: 100px;
        height: 100px;
    }

    .mom .productKv h3 span {
        font-size: 22px;
    }

    .mom .kv .productLogo span {
        font-size: 19px;
    }
}

/* ---screenImage-------------------------------------------------- */
.mom .screenImage .productWrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
}

.mom .screenImage .item {
    max-width: 320px;
    width: 31%;
}

.mom .screenImage .text {
    height: 45px;
    line-height: 45px;
    font-size: 21px;
    text-align: center;
    color: #fff;
    background-color: #333435;
}

.mom .screenImage .imageWrap {
    border: 1px solid #939599;
}

.mom .attention {
    max-width: 1050px;
    width: 100%;
    margin-top: 20px;
}

@media screen and (max-width: 767px) {
    .mom .screenImage .productWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    .mom .screenImage .item {
        max-width: none;
        width: 90%;
        margin: auto;
    }

        .mom .screenImage .item + .item {
            margin-top: 40px;
        }
}

/* ---menberCard-------------------------------------------------- */
.mom .menberCard .images {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    margin-top: 30px;
}

.mom .menberCard .imageWrap {
    max-width: 320px;
    width: 32%;
    margin: 0;
    border: 1px solid #939599;
}

    .mom .menberCard .imageWrap + .imageWrap {
        margin-left: 70px;
    }

@media screen and (max-width: 1075px) {
    .mom .menberCard .imageWrap {
        width: 47%;
    }

        .mom .menberCard .imageWrap + .imageWrap {
            margin-left: 30px;
        }
}

/* ===-solution.html===================================================== */
/* ---solution-------------------------------------------------- */
/* ---productKv-------------------------------------------------- */
.solution .section {
    padding-bottom: 0;
}

.solution .kv .productKv {
    background-image: url("../img/food_000.png");
    padding-bottom: 245px;
}

    .solution .kv .productKv h3 span {
        font-size: 55px;
        color: #E85C37;
    }

@media screen and (max-width: 1250px) {
    .solution .kv .productLogo {
        top: 171%;
    }
}

@media screen and (max-width: 1075px) {
    .solution .kv .productKv h3 span {
        font-size: 34px;
    }

    .solution .kv .productLogo {
        top: 171%;
        right: 9%;
        left: unset;
    }
}

@media screen and (max-width: 890px) {
    .solution .kv .productKv h3 {
        padding-top: 30px;
        font-size: 42px;
    }
}

@media screen and (max-width: 764px) {
    .solution .spVisible {
        display: block;
    }
}

@media screen and (max-width: 676px) {
    .solution .kv .productKv h3 span {
        font-size: 27px;
    }
}

@media screen and (max-width: 500px) {
    .solution .kv .productLogo {
        top: 248%;
        width: 100px;
        height: 100px;
    }
}


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

    .kv .productKv {
        background-position: -380px;
    }

    .solution .kv .productKv h3 {
        font-size: 35px;
    }

        .solution .kv .productKv h3 span {
            font-size: 21px;
        }



    .kv .productLogo span {
        font-size: 20px;
    }
}

/* ---productCommonBox-------------------------------------------------- */

.solution .productCommonBox .head {
    color: #0057b8;
    font-size: 23px;
}

.solution .productCommonBox .imageWrap {
    margin-left: 60px;
}

.solution .productCommonBox .text {
    max-width: 635px;
    margin: 0;
    line-height: 2;
    font-size: 16px;
}


@media screen and (max-width: 767px) {
    .solution .productCommonBox .imageWrap {
        margin: 40px 0 0 0;
    }

    .solution .productCommonBox .text {
        margin-top: 40px;
    }
}

@media screen and (max-width: 500px) {
    .solution .productCommonBox .head {
        font-size: 18px;
    }
}

/* ---menuPad-------------------------------------------------- */
.solution .menuPad .productKv {
    position: relative;
    background-image: url("../img/food_002.png");
    padding: 60px 0 140px;
}

.solution .menuPad.kv .productKv .headingWrap {
    -webkit-box-pack: end;
    justify-content: flex-end;
}

.solution .menuPad.kv .productKv h3 {
    color: #fff;
    font-size: 28px;
    margin: 0 20% 0 0;
    line-height: 1.8;
}

    .solution .menuPad.kv .productKv h3 span {
        color: #fff;
        font-size: 19px;
    }

.solution .menuPad.kv .productLogo {
    top: 6%;
    text-align: center;
    width: 115px;
    height: 115px;
}

    .solution .menuPad.kv .productLogo span {
        font-size: 26px;
    }

.solution .menuPadImage {
    top: 50%;
    left: 13%;
    -webkit-transform: translateY(8%);
    transform: translateY(8%);
    max-width: 420px;
    width: 70%;
}

@media screen and (max-width: 1180px) {
    .solution .menuPad.kv .productKv .headingWrap {
        -webkit-box-pack: start;
        justify-content: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        flex-direction: column-reverse;
        -webkit-box-align: start;
        align-items: flex-start;
        width: 95%;
        margin: auto;
    }
}

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

    .solution .menuPad.kv .productKv h3 {
        padding-top: 0px;
    }

    .solution .menuPad.kv .productLogo {
        top: 30%;
    }

    .solution .menuPad.kv .productKv h3 {
        font-size: 18px;
    }
}

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

    .solution .menuPad.kv .productKv h3 {
        width: 100%;
    }

        .solution .menuPad.kv .productKv h3 span {
            color: #fff;
            font-size: 14px;
        }

    .solution .menuPad.kv .productLogo {
        width: 100px;
        height: 100px;
        top: 100%;
    }

        .solution .menuPad.kv .productLogo span {
            font-size: 20px;
        }
}

@media screen and (max-width: 375px) {
    .solution .menuPad.kv .productKv h3 {
        font-size: 15px;
    }
}



/* ---merit-------------------------------------------------- */
.solution .merit .productWrap {
    display: -webkit-box;
    display: flex;
    max-width: 930px;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.solution .merit .item {
    max-width: 224px;
}

.solution .merit .imageWrap {
    max-width: 160px;
    margin: auto;
}

.solution .merit .head {
    font-size: 23px;
    margin-top: 50px;
    text-align: center;
    color: #0057b8;
    font-weight: bold;
}

.solution .merit .text {
    line-height: 2;
}

@media screen and (max-width: 768px) {
    .solution .merit .productWrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .solution .merit .item {
        max-width: none;
    }

        .solution .merit .item + .item {
            margin-top: 40px;
        }
}

/* ---screenImage-------------------------------------------------- */
.solution .screenImage .item {
    display: -webkit-box;
    display: flex;
}

    .solution .screenImage .item .imageWrap {
        max-width: 510px;
        width: 50%;
    }

.solution .screenImage .checkBoxes {
    margin-left: 60px;
}

.solution .screenImage .imageBoxes {
    margin-top: 70px;
}

    .solution .screenImage .imageBoxes > .text {
        width: 100%;
    }

    .solution .screenImage .imageBoxes .images {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 20px;
    }

        .solution .screenImage .imageBoxes .images .text {
            height: 45px;
            line-height: 45px;
            font-size: 21px;
            text-align: center;
            color: #fff;
            background-color: #333435;
        }

    .solution .screenImage .imageBoxes .imageItem {
        max-width: 500px;
        width: 48%;
    }

        .solution .screenImage .imageBoxes .imageItem + .imageItem + .imageItem {
            margin-top: 30px;
        }

.solution .screenImage .productWrap > .text {
    margin-top: 20px;
}

@media screen and (max-width: 500px) {
    .solution .screenImage .item {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .solution .screenImage .checkBoxes {
        margin: 40px 0 0 0;
    }

    .solution .screenImage .imageBoxes .images {
        /* margin-top: 70px; */
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    .solution .screenImage .imageBoxes .imageItem {
        width: 100%;
    }

        .solution .screenImage .imageBoxes .imageItem + .imageItem {
            margin-top: 30px;
        }
}

/* ===-hotel-solution.html===================================================== */
/* ---hotelSolution-------------------------------------------------- */
/* ---productKv-------------------------------------------------- */
.hotelSolution .section {
    padding-bottom: 0;
}

.hotelSolution .productKv {
    background-image: url("../img/hotel_001.jpg");
    padding: 30px 0 285px;
}

.hotelSolution .kv .productKv .headingWrap {
    -webkit-box-pack: end;
    justify-content: flex-end;
}

.hotelSolution .kv .productKv h3 {
    margin-right: 9%;
}

    .hotelSolution .kv .productKv h3 span {
        font-size: 55px;
        color: #fff;
    }

.hotelSolution .kv .productLogo {
    left: 9%;
}

.hotelSolution .spVisible {
    display: none;
}

.hotelSolution .screenImage .images {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.hotelSolution .screenImage .imageItem {
    max-width: 500px;
    width: 48%;
}

.hotelSolution .screenImage .imageWrap {
    border: 1px solid #939599;
}

.hotelSolution .screenImage .imageItem .text {
    height: 45px;
    line-height: 45px;
    font-size: 21px;
    text-align: center;
    color: #fff;
    background-color: #333435;
}

.hotelSolution .screenImage p span {
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    align-items: center;
    padding-right: 5px;
}

.hotelSolution .screenImage .productWrap > .text {
    margin-top: 20px;
}

@media screen and (max-width: 1250px) {
    .hotelSolution .kv .productLogo {
        top: 171%;
    }
}

@media screen and (max-width: 1075px) {
    .hotelSolution .kv .productKv h3 span {
        font-size: 34px;
    }

    .hotelSolution .kv .productLogo {
        top: 171%;
        right: 9%;
        left: unset;
    }
}

@media screen and (max-width: 890px) {
    .hotelSolution .productKv h3 {
        padding-top: 30px;
        font-size: 42px;
    }

    .hotelSolution .kv .productLogo {
        top: 201%;
    }
}

@media screen and (max-width: 676px) {
    .hotelSolution .kv .productKv h3 span {
        font-size: 25px;
    }
}

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

    .hotelSolution .spVisible {
        display: block;
    }

    .hotelSolution .kv .productKv .headingWrap {
        -webkit-box-pack: start;
        justify-content: flex-start;
    }

    .hotelSolution .kv .productKv {
        background-position: -380px;
    }

    .hotelSolution .productKv h3 {
        font-size: 38px;
    }

    .hotelSolution .kv .productLogo {
        top: 171%;
        width: 100px;
        height: 100px;
    }

        .hotelSolution .kv .productLogo span {
            font-size: 20px;
        }

    .hotelSolution .screenImage .images {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    .hotelSolution .screenImage .imageItem {
        width: 100%;
    }

        .hotelSolution .screenImage .imageItem + .imageItem {
            margin-top: 40px;
        }
}

/* ===-greeting.html===================================================== */
/* ---greeting-------------------------------------------------- */
.greeting section {
    padding-bottom: 120px;
}

.outlineList .list .item {
    border-top: 4px solid #0057b8;
}

    .outlineList .list .item + .item {
        margin-top: 240px;
    }

.outlineList .list h3 {
    padding-top: 20px;
    font-size: 26px;
    text-align: left;
}

.outlineList .list .contents {
    display: -webkit-box;
    display: flex;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dotted #000;
}

.outlineList .list .texts {
    width: 100%;
}

.outlineList .list .lead {
    font-size: 24px;
    letter-spacing: 1px;
    color: #0057B8;
}

.outlineList .list .text {
    margin-top: 10px;
}

.outlineList .list .name {
    margin-top: 70px;
    text-align: right;
}

    .outlineList .list .name > span {
        font-size: 31px;
    }

.outlineList .list .imageWrap {
    max-width: 330px;
    width: 100%;
    margin-left: 74px;
}

@media screen and (max-width: 889px) {
    .greeting .outlineList .spNone {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .outlineList .list .contents {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }

    .outlineList .list .imageWrap {
        margin: 20px auto 0;
    }
}

/* ===-introductryExample.html===================================================== */
/* ---introductryExample-------------------------------------------------- */
.introductryExample .list h3 {
    font-size: 21px;
}

.introductryExample .outlineList .list .contents {
    padding-top: 40px;
    display: block;
}

.introductryExample .outlineList .list .item + .item {
    margin-top: 115px;
}

.introductryExample .outlineList .list .qa + .qa {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px dotted #000;
}

.introductryExample .qa dt {
    display: -webkit-box;
    display: flex;
    font-size: 23px;
    letter-spacing: 3px;
    color: #0057B8;
}

.introductryExample .qa dd {
    display: -webkit-box;
    display: flex;
    margin-top: 30px;
    font-size: 16px;
}

.introductryExample .qa .qaMark {
    max-width: 46px;
    width: 100%;
    margin-right: 22px;
}

.introductryExample .outlineList .list .item .discList {
    margin-top: 20px;
}

    .introductryExample .outlineList .list .item .discList > li {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: start;
        align-items: flex-start;
    }

        .introductryExample .outlineList .list .item .discList > li + li {
            margin-top: 10px;
        }

.introductryExample .outlineList .list .item .disc {
    min-width: 10px;
    display: block;
    line-height: 15px;
}

.introductryExample .list .map {
    width: 100%;
    border: 1px solid #939599;
    margin: 80px auto 0;
    max-width: none;
}

/* ===-sales-agent.html===================================================== */
.salesAgent .discList {
    list-style: none;
}

.salesAgent .outlineList .list .item .discList {
    margin-top: 20px;
}

    .salesAgent .outlineList .list .item .discList > li {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: start;
        align-items: flex-start;
    }

        .salesAgent .outlineList .list .item .discList > li + li {
            margin-top: 10px;
        }

.salesAgent .outlineList .list .item .disc {
    min-width: 10px;
    display: block;
    line-height: 15px;
}

/* ===-company-information-menu.html===================================================== */

.companyOutlineMenu .boxes > .box:nth-child(1)::before {
    background-image: url("../img/comtop_001.png");
}

.companyOutlineMenu .boxes > .box:nth-child(2)::before {
    background-image: url("../img/comtop_002.png");
}

.companyOutlineMenu .boxes > .box:nth-child(3)::before {
    background-image: url("../img/comtop_003.png");
}

.companyOutlineMenu .boxes > .box:nth-child(4)::before {
    background-image: url("../img/comtop_004.png");
}


/* 最後に削除 */
@media screen and (max-width: 1440px) {
}

/* ua対応 */

.safari .orderette .productKv h3 span {
    width: 100%;
    display: inline-block;
}

@media screen and (max-width: 500px) {
    .iphone .mom .kv .productLogo span {
        padding-left: 3px;
    }
}

.ie .mark {
    padding: 0 8px;
    position: relative;
    background-color: #0057B8;
    border-radius: 9999px;
    width: 15px;
    height: 15px;
}

    .ie .mark::before {
        content: ">";
        background-color: transparent;
        color: #fff;
        width: 15px;
        height: 15px;
        /* border-radius: 9999px; */
        position: absolute;
        display: inline-block;
        text-align: center;
        line-height: 15px;
        top: 0px;
        left: 1px;
    }

.ie .suquareMark::before {
    top: 44%;
}

.ie .featured .boxes .box > a {
    position: relative;
    display: block;
}

.ie .featured .boxes > .box .titleWrap {
    top: -245%;
}

.ie .boxes > .box .titleWrap {
    left: 0;
    transform: translateX(0%);
}

.ie .news .newsList .newsList-text {
    word-break: break-all;
    white-space: pre-line;
}

.ie .orderette .entrySystem .productWrap .text {
    width: 100%;
}

.ie .orderette .entrySystem .productWrap .imageWrap {
    width: 100%;
}

.ie .optionBox {
    align-self: flex-start;
}

.ie .orderette .point .text {
    width: 70%;
}

.ie .orderette .point .imageWrap {
    min-width: 210px;
}

.ie .solution .merit .item {
    width: 100%;
}

.ie .solution .productCommonBox .text {
    width: 100%;
}

.ie .productCommonBox .productWrap .wrap {
    width: 100%;
}

.ie .sparette .other .productWrap {
    justify-content: center;
}

.ie .sparette .other .box {
    width: 100%;
}

.ie .sparette .processing .box .text {
    width: 100%;
}

@media screen and (max-width: 764px) {
    .ie .hqNet .point .productWrap > div {
        display: block;
    }
}

.ie .checkBoxWrap {
    width: 100%;
}

.ie .checkBoxes {
    width: 100%;
}

.ie .introductryExample .qa .qaMark {
    min-width: 46px;
}

.ie .inquiryForm form .formItem-number .inputWrap {
    justify-content: flex-start;
}

.ie .inquiryForm .formWrap::before,
.ie .inquiryForm form .formItem-accept::before,
.ie .inquiryForm form .formItem-confirm::before {
    width: 100%;
    max-width: 1180px;
    left: 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

.ie .inquiryForm form .formItem-postalCode .inputWrap {
    justify-content: flex-start;
}

.ie .inquiryForm form .formItem-confirm .confirm.is-active {
    background-color: #0057B8;
}

.ie .inquiryForm form .formItem-confirm .arrow {
    transform: translateY(-47%);
}

.ie .inquiryForm form .formItem-confirm .btn_submit.is-active {
    background-color: #0057B8;
}

.ie .inquiryForm form .formItem-confirm .btn_back.is-active {
    background-color: #CBCCCC;
}

.ie .inquiryForm form .formItem-address .selectWrap.prefecture-confirm {
    padding: 0 0 0 10px;
}

.ie .inquiryForm form .inputWrap.fax-confirm p {
    min-height: 66px;
}

.android .mark {
    padding: 9px;
    position: relative;
    background-color: #0057B8;
    border-radius: 9999px;
}


    .android .mark::before {
        content: ">";
        background-color: unset;
        color: #fff;
        width: 15px;
        height: 15px;
        /* border-radius: 9999px; */
        position: absolute;
        display: inline-block;
        text-align: center;
        line-height: 15px;
        top: 0;
        left: 2px;
    }

* {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.row {
    display: flex;
    flex-direction: row;
}

    .row > * {
        min-width: 0;
    }

.col {
    display: flex;
    flex-direction: column;
}

    .col > * {
        max-width: 100%;
    }

    .responsive-video {
        width: 100%;
        max-width: 800px;
        /* 最大幅を指定 */
        height: auto;
        display: block;
        margin: 0 auto;
    }

        /* Basic Reset & Body Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    
        body {
            font-family: 'Noto Sans JP', sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f8f8;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    
        .container {
            max-width: 1000px;
            /* 必要に応じてコンテンツの最大幅を調整 */
            margin: 0 auto;
            padding: 20px;
        }
    
        .section-padding {
            padding: 40px 0;
        }
    
        /* Header/Hero Section - kumoregi1.jpg の上部に基づく */
        .hero-section {
            background: linear-gradient(to right, #e0f2f7, #bbdefb);
            /* チラシの淡い青のグラデーション */
            text-align: center;
            padding: 30px 20px 50px;
            position: relative;
            overflow: hidden;
            /* float要素を内包するため */
        }
    
        .hero-section .tagline {
            font-size: 1.2em;
            font-weight: bold;
            color: #007bff;
            /* タグラインの青色 */
            margin-bottom: 15px;
        }
    
        .hero-section .logo-title {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }
    
        .hero-section .logo {
            width: 100%;
            /* 必要に応じてサイズを調整 */
            height: auto;
            margin-right: 10px;
        }
    
        .hero-section h1 {
            font-size: 3em;
            color: #007bff;
            /* メインタイトルの青色 */
            font-weight: 700;
            letter-spacing: -1px;
            display: inline-block;
        }
    
        .hero-section h2 {
            font-size: 1.8em;
            color: #333;
            /* サブタイトルの濃い色 */
            font-weight: 700;
            margin-top: 10px;
        }
    
        /* Features Section - kumoregi1.jpg の中央部分 */
        .feature-item {
            display: flex;
            align-items: center;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
            padding: 20px;
        }
    
        .feature-item.feature-highlight {
            background-color: #e3f2fd;
            /* 特定の機能の薄い青色の背景 */
        }
    
        .feature-item .feature-text {
            flex: 2;
            padding-right: 20px;
            color: #333;
            font-size: 1.1em;
            line-height: 1.8;
        }
    
        .feature-item .feature-image {
            flex: 1;
            max-width: 250px;
            /* サイズを調整 */
            height: auto;
            display: block;
        }
    
        .price-info {
            text-align: center;
            margin: 30px 0;
            font-size: 1.3em;
            font-weight: bold;
            color: #555;
        }
    
        .price-info .price {
            font-size: 2.5em;
            color: #ff5722;
            /* 価格のオレンジレッド */
            font-weight: bold;
            margin: 0 5px;
        }
    
        .price-info .currency,
        .price-info .tax {
            font-size: 0.7em;
            vertical-align: super;
        }
    
        .sub-price-info {
            text-align: center;
            font-size: 1.1em;
            color: #666;
            margin-bottom: 40px;
        }
    
        .catering-types {
            background-color: #dcedc8;
            /* 薄い緑色の背景 */
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 30px;
            font-size: 1.1em;
            color: #388e3c;
            /* 濃い緑色のテキスト */
            font-weight: bold;
        }
    
        .catering-style-note,
        .mobile-order-note {
            text-align: center;
            font-size: 1.1em;
            color: #555;
            margin-bottom: 15px;
        }
    
        .service-details {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
    
        .service-card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
            flex: 1;
            min-width: 280px;
            /* レスポンシブ対応のため調整 */
            max-width: 32%;
            /* 1行あたりのカード数 */
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    
        .service-card h3 {
            color: #007bff;
            font-size: 1.4em;
            margin-bottom: 15px;
        }
    
        .service-card img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            margin-bottom: 15px;
        }
    
        .service-card p {
            font-size: 0.9em;
            color: #666;
            line-height: 1.6;
        }
    
        /* Why Choose Section - kumoregi2.jpg */
        .why-choose-section {
            background-color: #f0f4c3;
            /* 薄い黄色の背景 */
            text-align: center;
        }
    
        .why-choose-section h2 {
            font-size: 2em;
            color: #333;
            margin-bottom: 40px;
            font-weight: 700;
        }
    
        .points-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            margin-bottom: 40px;
        }
    
        .point-card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            padding: 30px;
            flex: 1;
            min-width: 280px;
            max-width: 30%;
            /* 1行あたりのカード数 */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: transform 0.3s ease;
        }
    
        .point-card:hover {
            transform: translateY(-5px);
        }
    
        .point-card .point-number {
            font-size: 1.1em;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 15px;
            background-color: #e3f2fd;
            padding: 5px 15px;
            border-radius: 20px;
        }
    
        .point-card img {
            max-width: 120px;
            /* アイコンサイズを調整 */
            height: auto;
            margin-bottom: 20px;
        }
    
        .point-card h3 {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 10px;
            line-height: 1.4;
        }
    
        .point-card p {
            font-size: 0.95em;
            color: #666;
            line-height: 1.6;
        }
    
        .connectivity-info {
            background-color: #e0f2f7;
            /* 薄い青色の背景 */
            padding: 25px;
            border-radius: 8px;
            margin: 30px auto;
            max-width: 800px;
            font-size: 1.1em;
            color: #007bff;
            font-weight: bold;
            line-height: 1.8;
        }
    
        .system-diagram {
            text-align: center;
            margin-top: 40px;
        }
    
        .system-diagram .diagram-image {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }
        
    
        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .hero-section h1 {
                font-size: 2.5em;
            }
    
            .hero-section h2 {
                font-size: 1.5em;
            }
    
            .feature-item {
                flex-direction: column;
                text-align: center;
            }
    
            .feature-item .feature-text {
                padding-right: 0;
                margin-bottom: 20px;
                text-align: center
            }
    
            .service-card,
            .point-card {
                max-width: 48%;
                /* 小画面では1行あたり2枚のカード */
            }
    
            .price-info .price {
                font-size: 2em;
            }

            .tablet_pos .feature-image {
                width: 50%;
                height: auto;
                object-fit: cover;
            }
        }

                @media (max-width: 480px) {
                    .hero-section h1 {
                        font-size: 2em;
                    }

                    .hero-section h2 {
                        font-size: 1.2em;
                    }
    
            .service-card,
            .point-card {
                max-width: 95%;
                /* 非常に小さな画面では1行あたり1枚のカード */
            }
    
            .price-info {
                font-size: 1.1em;
            }
    
            .price-info .price {
                font-size: 1.8em;
            }
    
            .catering-types,
            .connectivity-info {
                font-size: 1em;
                padding: 15px;
            }
        }
        


                /* Header Section - Top Bar */
                .header-section {
                    background-color: #007bff;
                    /* Blue background from flyer */
                    color: #fff;
                    padding-bottom: 20px;
                    /* Space for the hero image */
                }
        
                .header-top-bar {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 20px;
                    background-color: #0056b3;
                    /* Darker blue for the top bar */
                }
        
                .logo-esper {
                    height: 40px;
                    /* Adjust as needed */
                    width: auto;
                }
        
                .unipos-cloud-ticket {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    text-align: right;
                }
        
                .logo-unipos {
                    height: 30px;
                    /* Adjust as needed */
                    width: auto;
                    margin-bottom: 5px;
                }
        
                .unipos-cloud-ticket p {
                    margin: 0;
                    font-size: 1.5em;
                    font-weight: bold;
                    line-height: 1;
                }
        
                .unipos-cloud-ticket .subtitle {
                    font-size: 0.8em;
                    font-weight: normal;
                    opacity: 0.8;
                }
        
                .hero-image-area {
                    text-align: center;
                    margin-top: 20px;
                }
        
                .hero-ticket-machine {
                    max-width: 80%;
                    /* Adjust size */
                    height: auto;
                    border-radius: 8px;
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                }
        
                /* Installation Section */
                .installation-section h2 {
                    text-align: center;
                    font-size: 2em;
                    color: #333;
                    margin-bottom: 30px;
                }
        
                .installation-details {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 30px;
                    margin-bottom: 30px;
                }
        
                .detail-left,
                .detail-right {
                    flex: 1;
                    min-width: 300px;
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 8px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                    text-align: center;
                }
        
                .detail-image {
                    max-width: 100%;
                    height: auto;
                    margin-bottom: 15px;
                    border-radius: 4px;
                }
        
                .detail-image.large-image {
                    max-width: 80%;
                    /* Larger image within its container */
                }
        
                .dimensions {
                    display: flex;
                    justify-content: space-around;
                    font-size: 0.9em;
                    color: #666;
                    margin-top: 10px;
                }
        
                .dimensions p {
                    flex: 1;
                    text-align: center;
                    white-space: nowrap;
                    /* Prevent line breaks for dimensions */
                }
        
                .note {
                    font-size: 0.8em;
                    color: #888;
                    margin-top: 20px;
                }
        
                .power-consumption {
                    background-color: #e0f2f7;
                    /* Light blue background */
                    padding: 20px;
                    border-radius: 8px;
                    text-align: center;
                    max-width: 400px;
                    margin: 0 auto;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                }
        
                .power-consumption h3 {
                    font-size: 1.2em;
                    color: #007bff;
                    margin-bottom: 10px;
                }
        
                /* System Config Section */
                .system-config-section {
                    background-color: #f0f4c3;
                    /* Light yellow from flyer */
                }
        
                .system-config-section h2 {
                    text-align: center;
                    font-size: 2em;
                    color: #333;
                    margin-bottom: 30px;
                }
        
                .system-diagram {
                    text-align: center;
                }
        
                .diagram-image-kenbaiki {
                    max-width: 90%;
                    height: auto;
                    border: 1px solid #ddd;
                    border-radius: 8px;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
                }
        
                /* Top Screen Section */
                .top-screen-section {
                    background-color: #fff;
                }
        
                .top-screen-section h2 {
                    text-align: center;
                    font-size: 2em;
                    color: #333;
                    margin-bottom: 30px;
                }
        
                .top-screen-examples {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 30px;
                    margin-bottom: 30px;
                }
        
                .screen-example {
                    flex: 1;
                    min-width: 280px;
                    max-width: 30%;
                    background-color: #f9f9f9;
                    border-radius: 8px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
                    padding: 15px;
                    text-align: center;
                }
        
                .screen-image {
                    max-width: 100%;
                    height: auto;
                    border-radius: 4px;
                    margin-bottom: 10px;
                    border: 1px solid #eee;
                }
        
                .screen-example p {
                    font-size: 0.9em;
                    color: #555;
                    line-height: 1.5;
                }
        
                .top-screen-note {
                    text-align: center;
                    font-size: 0.9em;
                    color: #888;
                    margin-top: 20px;
                }
        
                /* Operation Screen Section */
                .operation-screen-section {
                    background-color: #e3f2fd;
                    /* Light blue from flyer */
                }
        
                .operation-screen-section h2 {
                    text-align: center;
                    font-size: 2em;
                    color: #333;
                    margin-bottom: 30px;
                }
        
                .operation-flow {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 20px;
                    margin-bottom: 30px;
                }
        
                .flow-step {
                    flex: 1;
                    min-width: 180px;
                    max-width: 50%;
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 8px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
                    text-align: center;
                }
        
                .flow-image {
                    max-width: 100%;
                    height: auto;
                    border-radius: 4px;
                    margin-bottom: 10px;
                    border: 1px solid #eee;
                }
        
                .flow-step p {
                    font-size: 0.9em;
                    color: #555;
                    font-weight: bold;
                }
        
                .menu-example {
                    background-color: #fff;
                    padding: 25px;
                    border-radius: 8px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                }
        
                .menu-example h3 {
                    font-size: 1.5em;
                    color: #007bff;
                    margin-bottom: 15px;
                    text-align: center;
                }
        
                .menu-items-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                    gap: 10px;
                    margin-bottom: 20px;
                }
        
                .menu-item {
                    background-color: #f0f0f0;
                    padding: 10px;
                    border-radius: 5px;
                    text-align: center;
                    font-size: 0.95em;
                    color: #333;
                    font-weight: bold;
                }
        
                .order-summary {
                    background-color: #fff;
                    border: 1px solid #ddd;
                    border-radius: 5px;
                    padding: 15px;
                    font-size: 1.1em;
                    color: #333;
                }
        
                .order-summary p {
                    margin-bottom: 5px;
                }
        
                .order-summary p:last-child {
                    font-weight: bold;
                    font-size: 1.2em;
                    color: #ff5722;
                }
        
                /* Call Monitor Section */
                .call-monitor-section {
                    background-color: #dcedc8;
                    /* Light green from flyer */
                }
        
                .call-monitor-section h2 {
                    text-align: center;
                    font-size: 2em;
                    color: #333;
                    margin-bottom: 30px;
                }
        
                .monitor-types {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 30px;
                }
        
                .monitor-type {
                    flex: 1;
                    min-width: 300px;
                    max-width: 48%;
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 8px;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                    text-align: center;
                }
        
                .monitor-type h3 {
                    font-size: 1.5em;
                    color: #007bff;
                    margin-bottom: 15px;
                }
        
                .monitor-image {
                    max-width: 100%;
                    height: auto;
                    border-radius: 4px;
                    margin-bottom: 10px;
                    border: 1px solid #eee;
                }
        
                /* Case Study Section */
                .case-study-section {
                    background-color: #f8f8f8;
                }
        
                .case-study-section h2 {
                    text-align: center;
                    font-size: 2em;
                    color: #333;
                    margin-bottom: 30px;
                }
        
                .case-studies-grid {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 30px;
                }
        
                .case-study-card {
                    flex: 1;
                    min-width: 300px;
                    max-width: 48%;
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 8px;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
                    text-align: center;
                }
        
                .case-study-card h3 {
                    font-size: 1.5em;
                    color: #007bff;
                    margin-bottom: 15px;
                }
        
                .case-study-image {
                    max-width: 100%;
                    height: auto;
                    border-radius: 4px;
                    border: 1px solid #eee;
                }
        
        
                /* Responsive Adjustments */
                @media (max-width: 768px) {
                    .header-top-bar {
                        flex-direction: column;
                        text-align: center;
                    }
        
                    .unipos-cloud-ticket {
                        align-items: center;
                        margin-top: 15px;
                    }
        
                    .installation-details,
                    .top-screen-examples,
                    .operation-flow,
                    .monitor-types,
                    .case-studies-grid {
                        flex-direction: column;
                        align-items: center;
                    }
        
                    .detail-left,
                    .detail-right,
                    .screen-example,
                    .flow-step,
                    .monitor-type,
                    .case-study-card {
                        max-width: 90%;
                    }
        
                    .power-consumption {
                        max-width: 90%;
                    }
        
                    .hero-ticket-machine,
                    .diagram-image-kenbaiki {
                        max-width: 100%;
                    }
        
                    .menu-items-grid {
                        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                    }
                }
        
                @media (max-width: 480px) {
                    .header-top-bar {
                        padding: 15px;
                    }
        
                    .unipos-cloud-ticket p {
                        font-size: 1.2em;
                    }
        
                    .unipos-cloud-ticket .subtitle {
                        font-size: 0.7em;
                    }
        
                    h2 {
                        font-size: 1.8em;
                    }
        
                    .section-padding {
                        padding: 30px 0;
                    }
        
                    .detail-left,
                    .detail-right,
                    .screen-example,
                    .flow-step,
                    .monitor-type,
                    .case-study-card {
                        padding: 10px;
                    }
        
                    .menu-example h3 {
                        font-size: 1.3em;
                    }
        
                    .menu-item {
                        padding: 8px;
                        font-size: 0.9em;
                    }
                }
                /* ==========================
   Header + Mobile menu (PC/スマホ共通の最適解)
   ========================== */

:root{
  --header-h: 90px;                 /* PC/スマホでヘッダー高さを統一 */
  --header-bg: #0057B8;             /* ヘッダーの青（ここだけ合わせればOK） */
}

/* ヘッダーは常に追尾 */
header{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 10000;
  background: var(--header-bg);     /* 青は外側だけで塗る */
}

/* 本文をヘッダー分下げる（PC/スマホでズレない） */
body{
  padding-top: var(--header-h);
}

/* アンカーリンクがヘッダーに隠れない */
html{
  scroll-padding-top: var(--header-h);
}

/* ヘッダー内側は透明にして「青が二重に塗られて段差」が出るのを防ぐ */
header .headerInner{
  height: var(--header-h);
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /* スマホでは100%で左右欠けを防ぐ */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 16px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* PCだけ中身を中央寄せして“見切れ”を防止 */
@media (min-width: 1100px){
  header .headerInner{
    padding: 0;
    width: min(96vw, 1400px);
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* ========== 三本線(toggle)の挙動をCSS側で安定 ========== */
/* PCでは三本線不要（グロナビ表示） */
@media (min-width: 769px){
  .toggle{ display: none !important; }
}
/* スマホでは常に表示（JSでfadeさせない前提） */
@media (max-width: 768px){
  .toggle{
    display: block !important;
    opacity: 1 !important;
  }
}

/* ========== SPメニューは fixed のオーバーレイにする ========== */
.sp-navWrap{
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--header-bg);
  z-index: 9999;
}

/* メニュー表示中は背景スクロール禁止 */
body.isMenuOpen{
  overflow: hidden;
}

/* ドロップダウンがヘッダーより下に潜らないように */
.menuWrap{ z-index: 10001; }
/* ==========================
   Header nav fix
   ========================== */

/* nav自体が下に寄る指定があるので中央寄せに戻す */
header .glbNav{
  align-self: center;
}

/* ヘッダー内は折り返さない（要素が多い場合は別途ブレークポイントで対応） */
header .headerInner{
  flex-wrap: nowrap;
}

/* グロナビ：行内折り返し防止 */
header .glbNav > ul{
  flex-wrap: nowrap;
  align-items: stretch; /* aのheightで揃えやすくする */
}

/* liが縮んで中で改行…を避ける */
header .glbNav > ul > li{
  flex: 0 0 auto;
}

/* aをflex中央寄せにして、"文字が少し上気味" を解消 */
header .glbNav > ul > li > a{
  display: flex;
  align-items: center;
  justify-content: center;

  height: var(--header-h, 90px);
  line-height: 1;              /* line-height:90px をやめる */
  white-space: nowrap;          /* 改行させない */

  padding: 0 22px;              /* ここは好みで調整 */
}

/* CTAボタン側も改行防止（念のため） */
.headerCta__btn{
  white-space: nowrap;
}
/* SPメニュー：文字色を白に固定（青背景で同化しないように） */
.sp-navWrap .sp-nav > li > a,
.sp-navWrap .sp-nav > li > a:visited {
  color: #fff;
  text-decoration: none;
}

.sp-navWrap .sp-nav > li > a:hover,
.sp-navWrap .sp-nav > li > a:active,
.sp-navWrap .sp-nav > li > a:focus {
  color: #fff;
  /* タップ/ホバー時に少しだけ差を出す（任意） */
  background: rgba(255, 255, 255, 0.08);
}

/* SPメニュー：.currentの白背景を打ち消して青背景＋白文字に */
.sp-navWrap .sp-nav > li.current {
  background-color: rgba(255, 255, 255, 0.15);
}
.sp-navWrap .sp-nav > li.current > a,
.sp-navWrap .sp-nav > li.current > a:visited {
  color: #fff;
}
/* =========================================================
   Header: 左側(ロゴ/TEL/資料/お問い合わせ)が潰れて消える対策
   - 左側は縮まない
   - タブレット幅からPCナビを畳んでハンバーガーへ
   ========================================================= */

header .logo,
header .headerCta {
  flex: 0 0 auto;
  flex-shrink: 0;
}

header .headerCta {
  white-space: nowrap;
}

/* ナビは「縮んでOK」(左を潰さないため) */
header .glbNav {
  flex: 1 1 auto;
  min-width: 0;
}

/* 1100px未満はPCナビを畳んでハンバーガー表示（←ここが効きます） */
@media (max-width: 1099px) {
  header .glbNav {
    display: none !important;
  }
  header .toggle {
    display: block !important;
  }

  /* もしタブレット幅でTELまで詰まるなら、TELだけ隠す（必要ならON） */
  /* header .headerCta__tel { display: none; } */
}

@media (min-width: 1100px) {
  header .glbNav {
    display: block;
  }
  header .toggle {
    display: none;
  }
}

/* （ついで）スマホメニューの文字が背景と同化する対策 */
.sp-nav > li > a,
.sp-nav > li > a:visited {
  color: #fff;
}
/* ==========================================================
   Header: 「狭めても消えない」 + 行間詰まり/見切れ対策
   ========================================================== */

:root{
  /* 90px固定だと詰まりやすい → 少しずつ可変 */
  --header-h: clamp(72px, 6vw, 90px);
}

html{ scroll-padding-top: var(--header-h); }
body{ padding-top: var(--header-h); }

/* 変な縮小を防ぐ：ロゴ/CTAは潰れない。ナビ側が先に縮む */
header > .headerInner{
  height: var(--header-h);
  gap: clamp(12px, 2vw, 32px);
  justify-content: flex-start;
  flex-wrap: nowrap;
}

header .headerLogo{ flex: 0 0 auto; }
header .headerLogo__img{
  height: clamp(34px, 3vw, 46px);
  width: auto;
}

/* glbNav を右寄せ + 省スペース時に潰れ役を担当 */
header .glbNav{
  margin-left: auto;
  flex: 1 1 auto;
  min-width: 0;
}

header .glbNav > ul{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(8px, 1vw, 18px);
}

header .glbNav > ul > li{ white-space: nowrap; }

header .glbNav > ul > li > a{
  height: var(--header-h);
  line-height: var(--header-h);
  font-size: clamp(12px, 1.05vw, 15px);
  padding: 0 clamp(10px, 1.2vw, 22px);
}

/* CTAがある場合は潰れないように */
header .headerCta{
  flex: 0 0 auto;
  flex-shrink: 0;
  gap: clamp(8px, 1vw, 14px);
}

/* 768直前でナビ末尾が見切れる“保険”：横スクロールで救済 */
@media (max-width: 860px) and (min-width: 769px){
  header .glbNav{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  header .glbNav::-webkit-scrollbar{ display: none; }
  header .glbNav > ul{ width: max-content; }
}

/* ハンバーガーがCTAに被る原因：fixedをやめて、ヘッダー内の要素にする */
.toggle{
  position: static;
  top: auto;
  right: auto;
  z-index: 2000;
}

/* SP切替時：ナビを隠して、トグルだけ右へ */
@media screen and (max-width: 768px){
  .toggle{ display: block; margin-left: auto; }
  .glbNav{ display: none; }
  .headerCta{ display: none; } /* ここを残すと被りが起きにくい */
  .sp-navWrap{
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
  }
  .sp-nav > li > a{ color: #fff; } /* SPメニュー文字が背景と同化する対策 */
  .sp-nav .menuWrap a{ color: #0057B8; } /* サブメニューは白背景なので青文字 */
}
/* SP：ハンバーガーをヘッダー青帯の中央に固定 */
@media screen and (max-width: 768px){

  header > .headerInner{
    position: relative;      /* これがないと absolute の基準がズレる */
    padding-right: 64px;     /* 右側に三本線の居場所を確保 */
  }

  header .toggle{
    display: block !important;
    position: absolute !important;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;

    width: 44px;             /* タップしやすいサイズ */
    height: 44px;
    z-index: 10001;
  }

  header .toggle a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;     /* 三本線の上下中央 */
    justify-content: center; /* 左右中央 */
  }
}
/* =====================================================================
   Patch (2026-01-28):
   - ハンバーガー（三本線）をヘッダーの縦中央に固定
   - 三本線のサイズ(30x30)と線間隔は維持（間隔が広がらないように）
   - display の制御は既存の @media に任せる（=PCで勝手に表示されない）
   ===================================================================== */
header .headerInner{
  position: relative;
}

/* トグル(タップ領域50x50)をヘッダー内で縦中央へ */
header .toggle{
  position: absolute;
  top: 50%;
  right: 16px;                 /* headerInner の左右padding(16px)に合わせる */
  transform: translateY(-50%);

  width: 50px;
  height: 50px;

  /* 以前の position:fixed / top:20px が残っていても負けないように */
  left: auto;
  margin: 0;
}

/* 三本線自体は 30x30 のまま（=線間隔が広がらない） */
header .toggle > a{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
}

/* =====================================================================
   Patch (2026-04-20): PCグローバルナビのプルダウンを個別表示へ変更
   - 従来: ヘッダー全幅の横長パネルで、各メニュー項目のサブを並べて表示
   - 変更後: 各メニュー項目の真下に、その項目専用の小さな縦型ドロップダウン
   - SP (.sp-nav) 側は従来どおり（影響を与えない）
   ===================================================================== */
@media (min-width: 1100px) {
  /* 親liを基準に絶対配置できるように */
  header .glbNav > ul > li { position: relative; }

  /* ドロップダウン本体：横幅いっぱいの帯から、コンパクトなパネルへ */
  header .glbNav .menuWrap {
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    min-width: 280px;
    padding: 10px 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    z-index: 10001;
  }

  /* 右端メニュー（その他 等）が画面外にはみ出ないよう右寄せに */
  header .glbNav > ul > li:nth-last-child(-n+2) .menuWrap {
    left: auto;
    right: 0;
    transform: none;
  }

  /* 項目リスト：横並びflex → 縦積みに */
  header .glbNav .menuWrap > .menu {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  header .glbNav .menuWrap > .menu > li {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 10px 22px;
    transition: background-color .15s ease;
  }

  header .glbNav .menuWrap > .menu > li + li + li + li { margin-top: 0; }

  header .glbNav .menuWrap > .menu > li:hover { background-color: #f3f7fc; }

  /* 矢印（.mark の青丸">"）は PC ドロップダウン内では非表示 */
  header .glbNav .menuWrap .mark { display: none !important; }
}

/* SP ハンバーガーメニュー内でも矢印（青丸 ">"）を非表示 + 左端の装飾線を除去 */
.sp-nav .menuWrap .mark { display: none !important; }
.sp-nav .menuWrap > .menu > li,
.sp-nav .menuWrap > .menu > li > a {
  border-left: 0 !important;
  background-image: none !important;
}
.sp-nav .menuWrap > .menu {
  border-left: 0 !important;
  background-image: none !important;
}

/* このブロックは @media (min-width: 1100px) の続きで閉じているので開け直しの保険 */
@media (min-width: 1100px) {
  header .glbNav .menuWrap .mark { display: none !important; }

  header .glbNav .menuWrap > .menu > li > a {
    flex: 1;
    display: block;
    color: #0057B8;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
  }
}

/* =====================================================================
   Patch (2026-04-20): Hero メッセージ自動ローテーション用フェード
   ===================================================================== */
.tpHero__title,
.tpHero__lead,
.tpHero__bulletsOneLine {
  transition: opacity 450ms ease, transform 450ms ease;
}
.tpHero__title.is-heroFade,
.tpHero__lead.is-heroFade,
.tpHero__bulletsOneLine.is-heroFade {
  opacity: 0;
  transform: translateY(6px);
}

/* =====================================================================
   Patch (2026-04-20): フッター刷新
   - 濃紺背景 / 4カラムサイトマップ / 右に会社情報カード / 下部リーガル
   ===================================================================== */
footer {
  background-color: #0057B8;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}

footer .footerInner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 0;
}

footer .footer-top {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 48px;
  align-items: flex-start;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  width: 100%;
  max-width: none;
}

/* ブランド列 */
footer .footerBrand .logo {
  padding: 0;
  margin: 0 0 14px;
  width: auto;
}
footer .footerBrand .logo img {
  max-width: 170px;
  height: auto;
}
footer .footerBrand__tag {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #fff;
  margin: 0;
}

/* ナビ（4カラム） */
footer .footerNav {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  margin: 0 !important;
  padding: 0;
  width: 100% !important;
}

footer .footerNav > li {
  width: auto !important;
  margin: 0 !important;
}

footer .footerNav > li + li,
footer .footerNav > li + li + li { margin-left: 0 !important; width: auto !important; }

footer .footerNav > li > p {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  width: auto;
}
footer .footerNav > li > p a {
  color: inherit;
  text-decoration: none;
}
footer .footerNav > li > p a:hover { opacity: 0.85; }

footer .footerNav .lev2 {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
footer .footerNav .lev2 > li {
  display: block;
  margin: 0 0 8px;
}
footer .footerNav .lev2 > li + li { margin-top: 8px; }
footer .footerNav .lev2 a {
  color: #fff;
  text-decoration: none;
  transition: opacity .15s ease;
}
footer .footerNav .lev2 a:hover { opacity: .8; }
footer .footerNav .lev2 a:hover { color: #fff; }
footer .footerNav .lev2 a::before { content: none; }

/* 右側：会社情報カード */
footer .footerCompany,
footer .footerCompany p {
  color: #fff !important;
}
footer .footerCompany {
  min-width: 220px;
}
footer .footerCompany__name {
  font-weight: 700;
  margin: 0 0 10px;
  font-size: 14px;
}
footer .footerCompany__addr,
footer .footerCompany__tel {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.7;
  width: auto;
}

footer .footerSocial {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
footer .footerSocial a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  transition: background-color .15s ease, transform .15s ease;
}
footer .footerSocial a:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

/* 下部リーガル：既存の白帯を打ち消して暗背景のまま */
footer .footer-bottom {
  background: transparent !important;
  color: rgba(255,255,255,0.7) !important;
  width: 100%;
  padding: 16px 0 26px;
  margin-top: 0;
}
footer .footer-bottom .footer-bottom__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
footer .footer-bottom__pmark img {
  width: 32px;
  height: auto;
  display: block;
}
footer .footer-bottom small {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-right: auto;
}
footer .footer-bottom__privacy {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 12px;
}
footer .footer-bottom__privacy:hover { color: #fff; }

/* タブレット */
@media (max-width: 960px) {
  footer .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  footer .footerNav {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* スマホ */
@media (max-width: 560px) {
  footer .footerInner { padding: 40px 20px 0; }
  footer .footerNav {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }
  footer .footer-bottom .footer-bottom__inner {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}