@charset "UTF-8";

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

#mail_form dd,
#mail_form li {
    width: 100%;
}

}

@media screen and (min-width:1024px) {

    body {
        max-width: 1366px;
        margin: 0 auto;
    }

    body h2 .addLine::before,
    body h2 .addLine::after {
        display: none;
    }

    /* header,navigation*/

    header {
        max-width: 1366px;
        height: 80px;
        box-sizing: content-box;
    }

    #HeaderNav {
        height: 0;
        height: 81px;
    }

    #HeaderNav h1 {
        top: 27px;
        left: 10px;
        z-index: 9;
    }

    #HeaderNav h1 img {
        width: 100%;
    }

    #HeaderNav ul {
        display: block;
        border: none;
        transition: none;
        float: right;
        width: 100%;
        height: auto;
        line-height: 1;
        font-size: 0;
        text-align: right;
        padding-top: 0;
        margin: 0;
        top: 0;
        z-index: 1;
    }

    #HeaderNav ul li {
        display: inline-block;
        padding: 0;
        font-size: 16px;
    }

    #HeaderNav ul li:not(:last-child) {
        margin-right: 2.2%;
    }

    #HeaderNav ul .contact {
        line-height: 80px;
        border-radius: 0;
        height: 80px;
        padding: 0 15px;
    }

    #BurgerWrap {
        display: none;
    }

    /* スライダー */

    #SliderWrap h2 {
        font-size: 24px;
        line-height: 1.3;
        top: 273px;
        transform: translateX(-50%);
    }

    #Slider div {
        /* max-height: 648px; */
        min-height: 594px;
    }
    .slick-num {
        bottom: 40px;
        right: 42px;
        transform: translate(0, 0);
    }

    /* solution */

    #Solution {
        padding: 40px 0;
        background-size: 50%;
        background-position: top right;
    }

    #Solution h2 span:first-child,
    #Location .locationTtl span:first-child,
    #Services .servicesTtl span:first-child,
    #Voices .voicesTtl span:first-child,
    #FAQ h2 span:first-child,
    #mail_form h2 span:first-child,
    #confirm_field h2 span:first-child,
    #Thanks h2 span:first-child {
        font-size: 70px;
        height: 99px;
        position: relative;
        line-height: 99px;
        margin-bottom: 10px;
        display: inline-block;
    }

    #Solution h2 span:last-child,
    #Location .locationTtl span:last-child,
    #Services .servicesTtl span:last-child,
    #Voices .voicesTtl span:last-child,
    #FAQ h2 span:last-child,
    #mail_form h2 span:last-child,
    #confirm_field h2 span:last-child,
    #Thanks h2 span:last-child {
        font-size: 16px;
        display: inline-block;
        height: 24px;
        line-height: 24px;
    }

    #Solution h3 {
        font-size: 30px;
        margin: 0 0 60px;
    }

    #Solution h4 {
        font-size: 20px;
        margin-bottom: 50px;
        margin: 0 auto 50px auto;
        padding: 0;
        width: 456px;
        height: 40px;
        line-height: 40px;
        text-indent: 0.1em;
        text-align: center;
        display: block;
    }

    #Solution ul {
        width: 588px;
        margin-bottom: 50px;
        text-align: center;
    }

    #Solution ul li {
        width: 176px;
        height: 241px;
        display: inline-block;
        padding-top: 65px;
    }

    #Solution ul:nth-of-type(2) li:first-child {
        margin-bottom: 50px;
        vertical-align: top;
    }

    #Solution ul:first-of-type li:nth-child(2) {
        margin: 0 30px;
    }

    #Solution ul li span {
        font-size: 16px;
    }

    /* LOCATION */

    #Location {
        padding-top: 40px;
    }

    #Location .locationTtl {
        margin-bottom: 50px;
    }

    #LocationUl {
        transform: translateX(-8px);
        margin-bottom: 50px;
        text-align: center;
    }

    #LocationUl li {
        width: 20%;
        max-width: 166px;
        vertical-align: bottom;
        margin: 0;
    }

    #LocationUl li:nth-child(2) {
        background-size: 90px;
        background-position: top center;
        border-left: 2px solid #333;
        border-right: 2px solid #333;
    }

    #LocationUl li:nth-child(3) {
        background-size: 85px;
        background-position: top 15px center;
        transform: none;
        display: inline-block;
    }

    #LocationUl li:nth-child(4) {
        margin-bottom: 0;
        border-left: 2px solid #333;
        border-right: 2px solid #333;
    }

    #LocationUl li:nth-child(5) {
        margin-bottom: 0;
    }

    /* チェッカー と メーター */

    #CheckerWrap,
    #MeterWrap {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        text-align: center;
    }

    #Checker,
    #Meter {
        background-size: cover;
        color: white;
        overflow: hidden;
        padding: 30px 0;
    }

    #Checker h2,
    #Meter h2 {
        font-size: 20px;
        font-weight: 700;
        font-style: normal;
        margin: 0 0 30px 0;
    }

    #Checker h3,
    #Meter h3 {
        font-size: 18px;
        font-weight: 700;
        font-style: normal;
        margin-bottom: 15px;
    }

    #Checker p,
    #Meter p {
        font-weight: 400;
        font-style: normal;
        margin-bottom: 20px;
    }

    #Checker .example,
    #Meter .example {
        width: 272px;
        margin: 0 auto;
        text-align: left;
        /* border: solid 1px white; */
        border-radius: 10px;
        padding: 10px 0 11px;
    }

    #Checker .example span,
    #Meter .example span {
        display: inline-block;
        width: 50%;
        padding-top: 100px;
        white-space: nowrap;
        text-align: center;
        font-size: 16px;
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: top center;
    }

    #CheckerSummary .pcBr1,
    #CheckerSafety .pcBr1,
    #MeterSafety .pcBr1,
    #Review2 .pcBr1,
    #FAQ .pcBr1,
    #mail_form .pcBr1,
    #MeterSummary .pcBr1,
    #Thanks .pcBr1 {
        display: block;
    }


    #CheckerSafety .mbBr,
    #MeterSafety .mbBr,
    #MeterMerit .mbBr,
    #MeterSafety .mbBr,
    #SliderWrap .mbBr,
    #Example .mbBr,
    #Review .mbBr,
    #Review2 .mbBr,
    #CheckerSummary .mbBr,
    #MeterSummary .mbBr,
    #Voices .mbBr,
    #FAQ .mbBr,
    #mail_form .mbBr,
    #Thanks .mbBr {
        display: none;
    }

    #CheckerMerit .meritUl {
        margin-bottom: 0;
    }

    /* チェッカーを使うメリット */

    #CheckerSafety,
    #MeterSafety,
    #CheckerMerit,
    #MeterMerit {
        padding: 50px 0;
    }

    #CheckerSafety h3,
    #MeterSafety h3 {
        font-weight: bold;
    }

    #CheckerMerit .meritLi,
    #MeterMerit .meritLi {
        width: 100%;
        height: 450px;
    }

    #MeterMerit .meritUl {
        margin-bottom: 0;
    }

    #CheckerMerit .meritUl .meritLi p,
    #MeterMerit .meritUl .meritLi p {
        display: block;
        text-align: center;
        position: relative;
    }

    #CheckerMerit .meritUl .meritLi p em,
    #MeterMerit .meritUl .meritLi p em {
        font-style: normal;
        text-align: left;
        display: inline-block;
    }

    #MeterMerit .iconSort li:first-of-type {
        background-position: top 15px center;
    }

    #MeterMerit .iconSort li:nth-of-type(2) {
        background-position: top 25px center;
        background-size: 60px;
    }

    #MeterSummary {
        padding-top: 100px;
    }

    #MeterSummary .movieStart {
        margin-bottom: 100px;
    }

    /* データの活用例 お客様の声*/

    #Example,
    #Review,
    #Review2 {
        background-color: #E6EEF5;
        text-align: center;
        font-size: 20px;
    }

    #Example h2,
    #Review h2,
    #Review2 h2 {
        color: #1B579D;
        font-weight: 700;
        font-style: normal;
        font-size: 30px;
    }

    #Example ul,
    #Review ul,
    #Review2 ul {
        width: 95%;
        max-width: 1000px;
    }

    #Example ul li,
    #Review ul li,
    #Review2 ul li {
        border-radius: 10px;
        padding: 10px 20px 10px 58px;
    }

    #Example ul li:not(:last-child),
    #Review ul li:not(:last-child),
    #Review2 ul li:not(:last-child) {
        margin-bottom: 10px;
    }

    #Example ul li span,
    #Review ul li span,
    #Review2 ul li span {
        font-size: 20px;
        line-height: 1.85;
    }


    #Example ul li::after,
    #Review ul li::after,
    #Review2 ul li::after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url("../img/Common/checkMark.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 19px;
        left: 20px;
    }


    /* サービス概要 */

    #Services .movieStart,
    #Case01 .movieStart,
    #Case02 .movieStart {
        width: 640px;
        height: 360px;
    }

    #Services p {
        margin-bottom: 50px;
    }


    #CheckerSummary {
        margin-bottom: 100px;
    }

    #CheckerSummary h2 {
        font-size: 18px;
        text-align: center;
    }

    #CheckerSummary h2 span {
        font-size: 34px;
    }

    #CheckerSummary p,
    #MeterSummary p {
        font-size: 20px;
        display: block;
        text-align: center;
    }

    #CheckerSummary p span,
    #MeterSummary p span {
        display: inline-block;
        text-align: left;
    }

    #CheckerSummary .iconSort {
        width: 100%;
        margin-bottom: 80px;
        text-align: center;
    }

    #CheckerSummary .iconSort li {
        width: 16.6%;
        max-width: 166px;
    }

    #CheckerSummary .iconSort li:not(:last-child) {
        border-right: 2px solid #333;
    }

    #CheckerSummary .iconSort li span {
        font-size: 14px;
    }

    #MeterSummary .iconSort {
        width: 100%;
        margin-bottom: 80px;
    }

    #MeterSummary .iconSort li {
        text-indent: 0.1em;
        white-space: nowrap;
    }

    #MeterSummary .iconSort li:first-of-type {
        width: 86px;
        margin-right: 40.5px;
        background-size: 72px;
        text-indent: 0.1em;
    }

    #MeterSummary .iconSort li:nth-of-type(2) {
        width: 166px;
        background-size: 79px;
        border-left: 2px solid #333;
        border-right: 2px solid #333;
        margin-right: 40.5px;
    }

    #MeterSummary .iconSort li:nth-of-type(3) {
        background-size: 69px;
        width: 86px;
    }

    /* Voices */

    #Voices .voicesTtl span:first-child {
        display: inline-block;
    }

    #Voices .voicesTtl {
        margin-bottom: 40px;
    }

    #Voices .case01,
    #Voices .case02 {
        width: 100px;
        height: 100px;
        margin-bottom: 0;
        margin-right: 20px;
        vertical-align: bottom;
    }

    #Case02 {
        padding-top: 100px;
    }

    #Case01 .case01Inner,
    #Case02 .case02Inner {
        text-align: left;
        font-size: 0;
        display: inline-block;
        width: 70%;
        max-width: 1000px;
        position: relative;
        margin-bottom: 20px;
    }

    #Case01 .case01Outer,
    #Case02 .case02Outer {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    #Case01 h3,
    #Case02 h3 {
        font-size: 20px;
    }

    #Case01 .case01Inner h2,
    #Case02 .case02Inner h2,
    #Case01 .emphasis,
    #Case02 .emphasis {
        display: inline-block;
        margin: 0;
    }

    #Case01 .case01Inner h2,
    #Case02 .case02Inner h2 {
        line-height: 100px;
    }

    #Case01 .case01Inner span,
    #Case02 .case02Inner span {
        font-size: 16px;
        font-weight: bold;
    }

    #Voices .emphasis {
        text-align: center;
        margin-right: 10px;
    }

    #Voices h3 {
        margin-bottom: 50px;
        font-weight: bold;
    }

    #Voices .movieStart {
        margin-bottom: 50px;
    }

    #Voices .exampleWrap {
        width: 420px;
        margin-bottom: 100px;
    }

    #Voices .exampleWrap img {
        width: 200px;
    }

    #Voices .exampleWrap img:first-child {
        margin-right: 20px;
    }

    /* FAQ */

    #FAQ {
        text-align: center;
        padding: 50px 0;
    }

    #FAQ h2 {
        margin-bottom: 50px;
    }

    #FAQ dl {
        text-align: left;
        width: 80%;
        min-width: 640px;
        max-width: 1000px;
        margin: 0 auto 20px;
        font-size: 16px;
        cursor: pointer;
    }

    #FAQ dt {
        width: 100%;
        background-color: #1B579D;
        color: white;
        padding: 10px 0 10px 10px;
        border-radius: 5px;
        padding-left: 58px;
        text-indent: -0.85em;
        background-repeat: no-repeat;
        /** background-position: right 8px center; **/
        background-position: right 20px center;
        font-size: 18px;
    }

    #FAQ dt:last-child {
        margin-bottom: 0;
    }

    #FAQ dt::before {
        content: "Q. ";
        display: inline-block;
        font-size: 24px;
        font-family: poppins, sans-serif;
        font-weight: 400;
        font-style: normal;
        white-space: pre-wrap;
        margin-left: 20px;
    }

    #FAQ dd {
        width: auto;
    }

    #FAQ dd span {
        font-size: 16px;
        padding-left: 43px;
        white-space: normal;
    }

    #Solution,
    #Location,
    #Services,
    #MeterSummary,
    #Voices,
    #FAQ,
    #mail_form {
        padding-top: 100px;
    }

    #Solution::after,
    #Location::after,
    #Services::after,
    #MeterSummary::after,
    #Voices::after,
    #FAQ::after,
    #mail_form::after,
    #confirm_field::after,
    #Thanks::after {
        width: 50%;
        max-width: 683px;
        height: 337px;
    }

    /* メールフォーム */


    #Solution .inner,
    #Location .inner,
    #Services .inner,
    #Voices .inner,
    #FAQ .inner,
    #mail_form .inner,
    #confirm_field .inner,
    #Thanks .inner {
        width: 80%;
        max-width: 1000px;
        min-width: 640px;
        margin: 0 auto;
        text-align: left;
    }

    #mail_form .inner {
        width: 95%;
    }

    #mail_form {
        padding-bottom: 100px;
    }


    #mail_form h2 {
        text-align: left;
        margin-bottom: 50px;
    }

    #Solution .ttl,
    #Location .ttl,
    #Services .ttl,
    #Voices .ttl,
    #FAQ .ttl,
    #mail_form .ttl,
    #Thanks .ttl {
        margin-bottom: 10px;
    }

    #mail_form h2 em {
        width: auto;
        white-space: nowrap;
    }

    #Solution .addLine,
    #Location .addLine,
    #Services .addLine,
    #Voices .addLine,
    #FAQ .addLine,
    #mail_form .addLine,
    #confirm_field .addLine,
    #Thanks .addLine {
        position: relative;
        line-height: 1;
        display: block;
        /** text-indent: 137px; **/
        text-indent: 87px;
        margin-left: 5px;
    }

    #Solution .addLine::before,
    #Location .addLine::before,
    #Services .addLine::before,
    #Voices .addLine::before,
    #FAQ .addLine::before,
    #mail_form .addLine::before,
    #confirm_field .addLine::before,
    #Thanks .addLine::before {
        content: "";
        /** width: 120px; **/
        width: 70px;
        height: 1px;
        background-color: #333;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: block;
    }

    #mail_form dl {
        display: inline-block;
    }

    #mail_form .item01,
    #mail_form .item02 {
        display: block;
        width: 100%;
    }

    #mail_form .item01 li,
    #mail_form .item02 li {
        width: 190px;
        padding-left: 10px;
        margin: 0;
    }

    #mail_form .item01 li:nth-child(odd) {
        margin-left: 0;
    }

    #mail_form .item03,
    #mail_form .item04,
    #mail_form .item07,
    #mail_form .item08 {
        width: 48.5%;
        max-width: 485px;
    }

    #mail_form .item05 {
        width: 37%;
        max-width: 370px;
    }

    #mail_form .item06 {
        width: 60%;
        max-width: 600px;
    }

    #mail_form .item03,
    #mail_form .item05,
    #mail_form .item07 {
        margin-right: 3%;
    }

    #mail_form .item09 {
        width: 100%;
    }

    #mail_form .item03 dd,
    #mail_form .item03 input,
    #mail_form .item04 dd,
    #mail_form .item04 input,
    #mail_form .item05 dd,
    #mail_form .item05 input,
    #mail_form .item06 dd,
    #mail_form .item06 input,
    #mail_form .item07 dd,
    #mail_form .item07 input,
    #mail_form .item08 dd,
    #mail_form .item08 input,
    #mail_form .item09 dd,
    #mail_form .item09 textarea {
        width: 100%;
    }

    #mail_form input[type="text"],
    #mail_form input[type="tel"],
    #mail_form input[type="email"] {
        height: 50px;
    }

    #mail_form textarea {
        width: 100%;
        height: 200px;
    }

    #form_reset_button,
    #form_submit_button {
        position: static;
        transform: none;
    }

    #form_reset_button,
    #form_submit_button,
    #confirm_submit_button,
    #confirm_cancel_button {
        width: 40%;
        max-width: 400px;
        display: inline-block;
        text-indent: 0.1em;
        margin-bottom: 0;
        padding: 27px 0 26px;
    }

    #mail_form .agreement {
        font-weight: bold;
    }

    #form_reset_button,
    #confirm_submit_button {
        margin-left: 8%;
        margin-right: 4%;
    }

    #confirm_submit_button {
        margin-left: 0;
    }

    #mail_form .checkBox {
        width: 205px;
    }

    #mail_form .item05::before {
        top: 52px;
    }

    /* サンクスページ */

    body h2 .addLine::before {
        left: auto;
    }

    #Thanks {
        padding: 100px 0 70px;
        border-bottom: none;
        background-color: #f5f5f5;
        text-align: center;
        box-shadow: none;
    }

    #Thanks h2 {
        text-align: left;
        margin-bottom: 50px;
    }

    #Thanks main {
        border: none;
        padding: 50px 0;
        margin-bottom: 50px;
        transform: none;
        width: 90%;
    }

    #Thanks main span {
        display: inline-block;
        margin-bottom: 0;
    }

    #Thanks main span:nth-of-type(3),
    #Thanks main span:nth-of-type(4),
    #Thanks main span:nth-of-type(5) {
        margin-bottom: 20px;
    }

    #ReturnMain {
        width: 400px;
        margin: 0 auto;
        padding: 27px 0 26px;
        font-size: 18px;
        border-radius: 10px;
    }

    /* footer */

    footer {
        text-align: center;
    }

    footer .footerNav {
        display: block;
        height: 91.5px;
        background: linear-gradient(#1b579d 0%, #0e2c4f 100%);
        text-align: center;
    }

    footer .footerNav li {
        display: inline-block;
        line-height: 91.5px;
        font-size: 16px;
    }

    footer .footerNav li:not(:last-child) {
        margin-right: 30px;
    }

    footer .footerNav li a {
        color: white;
    }

    footer div {
        width: 97%;
        height: 124px;
        text-align: left;
        font-size: 0;
        position: relative;
        margin: 0 auto;
    }

    footer .logo,
    #Copyright {
        display: inline-block;
        margin: 0;
    }

    footer .logo {
        width: 96px;
        margin-top: 52px;
    }

    footer .logo svg {
        width: 96px;
        height: auto;
    }

    footer .footerNav2 {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 48%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }

    footer .footerNav2 li {
        font-size: 14px;
        padding: 0 10px;
        margin: 0;
        text-align: center;
        display: inline-block;
    }

    footer .footerNav2 li:not(:last-child) {
        margin: 0;
        border-right: 1px solid #222;
    }

    footer .footerNav2 li:first-child {
        padding-left: 0;
    }

    footer .footerNav2 li:last-child {
        padding-right: 0;
    }

    #Copyright {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    /* youtube */

    .modal-wrap {
        z-index: 9999;
    }

    #modal .modalBG {
        display: none;
    }

    #modal_close {
        width: 108.031px;
        height: 80px;
        font-family: poppins, sans-serif;
        font-size: 16px;
        font-weight: 500;
        font-style: normal;
        color: white;
        background-color: #1B579D;
        position: absolute;
        top: 0;
        right: 0;
        background-image: none;
        transition: all .4s;
    }
    #modal_close:hover {
        background-color: #192A51;
    }
}

@media screen and (min-width:790px) {
    #MeterSummary .pcBr1 {
        display: none !important;
    }
}

@media screen and (min-width:1024px) {

    /* header */
    /* header {
        height: 110px;
    } */

    #HeaderNav h1 {
        left: 20px;
        top: 45px;
    }

    #HeaderNav ul li {
        line-height: 110px;
    }

    #HeaderNav ul li:not(:last-child) {
        margin-right: 40px;
    }

    #HeaderNav ul li:last-child {
        width: 110px;
        height: 110px;
    }

    #HeaderNav ul .contact {
        width: 100%;
        height: 100%;
        line-height: 110px;
        text-align: center;
    }

    /* Solution */

    #Solution {
        padding: 100px 0;
    }

    #Solution ul li {
    }

    #Solution ul {
        width: 80%;
    }

    #Solution ul:first-of-type li:first-child {
        display: inline-block;
        margin-right: 0;
    }

    #Solution ul:last-of-type {
        display: inline-block;
        width: 100%;
    }

    #Solution ul:last-of-type li {
        width: 200px;
        height: 265px;
        vertical-align: top;
        margin: 0;
    }

    #Solution ul:last-of-type li:first-child {
        vertical-align: top;
        margin: 0 30px 0 0;
    }

    #Solution ul:last-of-type li:nth-child(2) {
        margin-bottom: 0;
    }

    #Solution ul:last-of-type li:nth-child(3) {
        margin: 0 30px;
    }




    /* サンクスページ */
    #Thanks main span:nth-of-type(4),
    #Thanks main span:nth-of-type(5) {
        margin-bottom: 0;
        white-space: nowrap;
    }

    #Thanks {
        padding: 100px 0;
        border-bottom: none;
        background-color: #f5f5f5;
    }

    #Thanks .pcBr1 {
        display: none;
    }

    #Thanks .pcBr2 {
        display: block;
    }

    #Thanks .pcBr3 {
        display: none;
    }

    /* フッター */

    footer .footerNav {
        height: 183px;
    }

    footer .footerNav li {
        line-height: 183px;
    }

    footer .footerNav li:not(:last-child) {
        margin-right: 40px;
    }

    footer div {
        width: 92%;
        height: 124px;
        text-align: left;
        font-size: 0;
        position: relative;
        margin: 0 auto;
    }

    footer .logo,
    #Copyright {
        display: inline-block;
        margin: 0;
    }

    footer .logo {
        width: 96px;
        margin-top: 52px;
    }

    footer .logo svg {
        width: 96px;
        height: auto;
    }

    footer .footerNav2 {
        display: inline-block;
        text-align: left;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }

    footer .footerNav2 li {
        font-size: 16px;
        padding: 0 16px;
        margin: 0;
        text-align: center;
    }

    footer .footerNav2 li:not(:last-child) {
        margin: 0;
        border-right: 1px solid #222;
    }

    #Copyright {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    #modal_close {
        width: 110px;
        height: 110px;
    }
}

@media screen and (min-width:1080px) {
    /* チェッカー,メーター */

    #Location #Checker,
    #Location #Meter {
        text-align: left;
        position: relative;
        padding: 0;
        height: 640px;
    }


    #Checker .checkerInner,
    #Meter .meterInner {
        position: absolute;
        display: block;
        width: 93%;
        min-width: 491px;
        max-width: 533px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #Checker h2,
    #Meter h2 {
        font-size: 30px;
        margin-bottom: 60px;
    }

    #Checker h2 span,
    #Meter h2 span {
        font-size: 50px;
        border: 4px solid white;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 76px;
        display: inline-block;
        box-sizing: content-box;
        position: relative;
        margin-right: 4.2px;
        text-indent: 0.05em;
    }

    #Checker h2 span::before,
    #Meter h2 span::before {
        content: "";
        display: block;
        background-color: white;
        width: 45px;
        height: 4px;
        border-radius: 3px;
        transform: translate(-50%, -50%) rotate(45deg);
        position: absolute;
        left: 87px;
        bottom: -9px;
    }

    #Checker h3,
    #Meter h3 {
        font-size: 20px;
    }

    #Checker p,
    #Meter p {
        font-size: 20px;
        margin-bottom: 30px;
    }

    #Checker .example,
    #Meter .example {
        display: inline-block;
        width: 320px;
        border: none;
        padding: 0;
    }

    #Checker .example span,
    #Meter .example span {
        display: inline-block;
        width: 150px;
        background-size: 100%;
        padding-top: 165px;
        background-position: top;
    }

    #Checker .example span:first-child,
    #Meter .example span:first-child {
        margin-right: 20px;
    }

    #Checker .arrow,
    #Meter .arrow {
        transform: none;
        margin: 60px 20px 0 20px;
        display: inline-block;
        background-position: center;
        vertical-align: top;
    }

    #Checker .aws,
    #Meter .aws {
        display: inline-block;
        width: 101px;
        height: 60px;
        vertical-align: top;
        margin-top: 45px;
    }

    #Checker .aws img,
    #Meter .aws img {
        width: 100%;
        height: auto;
    }

    #Checker .mbBr,
    #Meter .mbBr {
        display: none;
    }

    /* CheckerSafety,MeterSafety */

    #CheckerSafety,
    #MeterSafety {
        padding: 50px 0;
        position: relative;
    }

    #CheckerSafety div {
        border-right: 1px solid #ccc;
    }

    #CheckerSafety p,
    #MeterSafety p {
        font-size: 20px;
    }

    #CheckerSafety h2,
    #MeterSafety h2 {
        font-size: 30px;
        line-height: 1.35;
    }

    #CheckerSafety h2 span,
    #MeterSafety h2 span {
        font-size: 40px;
    }

    #CheckerSafety h3,
    #MeterSafety h3 {
        font-size: 16px;
        letter-spacing: 0.05em;
        font-weight: bold;

    }

    #CheckerSafety .pcBr2 {
        display: none;
    }

    #MeterSafety .pcBr3 {
        display: block !important;
    }

    #MeterSafety .pcBr1 {
        display: none;
    }

    #MeterSafety .pcBr2 {
        display: block;
    }

    #CheckerSafety ul li,
    #MeterSafety ul li {
        display: inline-block;
        margin: 0;
        width: 160px;
    }

    #CheckerSafety ul li:not(:last-child),
    #MeterSafety ul li:not(:last-child) {
        margin-right: 20px;
    }

    #CheckerSafety ul li p,
    #MeterSafety ul li p {
        font-size: 14px;
        display: block;
        text-align: left;
        /* width: 141px; */
        width: 75%;
        margin: 0 auto;
    }

    #MeterSafety .pcBr2 {
        display: none;
    }

    /* merit */

    #CheckerMerit,
    #MeterMerit {
        padding: 0;
        margin: 50px 0 100px 0;
        text-align: left;
    }

    #CheckerMerit {
        border-right: 1px solid #ccc;
    }

    #CheckerMerit .ttlWrap div:first-child,
    #MeterMerit .ttlWrap div:first-child {
        margin: 0;
    }

    #CheckerMerit .ttlWrap div:first-child span:first-child,
    #MeterMerit .ttlWrap div:first-child span:first-child {
        font-size: 16px;
        margin: 0;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }

    #CheckerMerit .ttlWrap div,
    #MeterMerit .ttlWrap div {
        width: 100px;
        height: 100px;
    }

    #CheckerMerit .ttlWrap,
    #MeterMerit .ttlWrap {
        display: block;
        width: 520px;
        margin: 0 auto 20px;
    }

    #CheckerMerit .ttlWrap div,
    #MeterMerit .ttlWrap div {
        display: inline-block;

    }

    #CheckerMerit h2,
    #MeterMerit h2 {
        display: inline-block;
        margin: 20px 0 0 20px;
        vertical-align: top;
    }

    #CheckerMerit .meritLi,
    #MeterMerit .meritLi {
        text-align: center;
        width: 160px;
        margin: 0;
        display: inline-block;
        vertical-align: top;
    }

    #CheckerMerit .meritLi span,
    #MeterMerit .meritLi span {
        width: 100%;
        padding: 0;
    }

    #CheckerMerit ul,
    #MeterMerit ul {
        text-align: center;
        margin-bottom: 53.5px !important;
    }

    #CheckerMerit ul li:not(:last-child),
    #MeterMerit ul li:not(:last-child) {
        margin-right: 20px;
        margin-bottom: 20px;
    }

    #CheckerMerit .meritLi span,
    #MeterMerit .meritLi span {
        font-size: 16px;
        height: 40px;
        line-height: 40px;
    }

    #CheckerMerit .meritUl .meritLi p,
    #MeterMerit .meritUl .meritLi p {
        font-size: 16px;
        letter-spacing: 0;
    }

    #CheckerMerit .meritLi ul,
    #MeterMerit .meritLi ul {
        /* width: 160px; */
        width: 100%;
    }

    #CheckerMerit .meritLi ul li,
    #MeterMerit .meritLi ul li {
        font-size: 13px;
        line-height: 1.6;
        white-space: normal;
        margin-left: 13px;
        margin-right: 0;
        /* width: 160px; */
        width: calc(100% - 13px);
        margin-bottom: 10px;
    }

    #CheckerMerit .meritLi ul li,
    #MeterMerit .meritLi ul li {
        /* width: 160px; */
        width: 100%;
        width: calc(100% - 13px);
        display: inline-block;
    }

    #CheckerMerit .meritLi ul li::before,
    #MeterMerit .meritLi ul li::before {
        top: 6.5px;
        left: -10px;
    }

    #CheckerWrap .iconSort,
    #MeterWrap .iconSort {
        width: 100%;
    }

    #CheckerWrap .iconSort li,
    #MeterWrap .iconSort li {
        width: 25%;
        margin: 0 !important;
        font-size: 14px;

    }

    #CheckerWrap .iconSort li:not(:nth-child(4n)),
    #MeterWrap .iconSort li:not(:nth-child(4n)) {
        border-right: 1px solid #ccc;
    }

    #CheckerWrap .iconSort li:nth-child(-n+4),
    #MeterWrap .iconSort li:nth-child(-n+4) {
        border-bottom: 1px solid #ccc;
        /* background-position: top 0 center; */
        padding-bottom: 25px;
    }

    #CheckerWrap .iconSort li:nth-child(-n+4) span,
    #MeterWrap .iconSort li:nth-child(-n+4) span{
        bottom: 20px;
    }

    /* mail_form */

    #mail_form .item01 dt,
    #mail_form .item02 dt {
        display: inline-block;
        vertical-align: top;
        line-height: 130px;
        margin: 0 50px;
    }

    #mail_form .item02 {
        line-height: 1;
        padding: 0;
    }

    #mail_form .item02 dt {
        margin-bottom: 0;
        line-height: 66px;
    }

    #mail_form .item01 dd {
        width: 58%;
        margin-top: 15px;
    }

    #mail_form .item02 dd {
        margin: 20px 0 0 15px;
        padding: 0;
    }

    #mail_form .item01::after {
        top: 38px;
        right: 30px;
    }

    #mail_form .item02::after {
        right: 30px;
        top: 25px;
    }

    /* thanks */
    #Thanks main {
        max-width: 1000px;

    }

}


@media screen and (min-width:1145px) {

    /* header */

    /* header {
        height: 120px;
    } */

    #HeaderNav ul li {
        line-height: 120px;
    }


    #HeaderNav ul .contact {
        line-height: 120px;
    }

    #HeaderNav h1 {
        left: 50px;
        top: 50px;
    }

    #HeaderNav ul li:last-child {
        width: 200px;
        height: 120px;
    }

    /* Slider */
    #SliderWrap h2 {
        top: 45%;
        transform: translate(-50%, -50%);
        font-size: 28px;
    }

    /* youtube */

    #modal_close {
        width: 200px;
        height: 120px;
    }
}

@media screen and (min-width:1200px) {

    #HeaderNav h1 {
        width: 150px;
        top: 44.375px;
    }

    #HeaderNav h1 svg {
        width: 100%;
        height: auto;
    }

    #CheckerSafety ul li,
    #MeterSafety ul li,
    #CheckerMerit .meritLi,
    #MeterMerit .meritLi {
        /* width: 181px; */
        width: calc((100% - 120px) / 3);
    }

    #CheckerMerit .meritLi ul li,
    #MeterMerit .meritLi ul li {
        font-size: 15px;
    }

    #CheckerMerit .ttlWrap,
    #MeterMerit .ttlWrap {
        width: 583px;
    }

}


@media screen and (min-width:1366px) {
    body {
        max-width: 100%;
        margin: 0 auto;
    }

    header {
        max-width: 100%;
    }

    #Slider div {
        /** max-height: 1080px;
        min-height: auto; **/
        max-height: calc(100vh - 120px);
        min-height: 648px;
    }


}