@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300;1,400&display=swap');

/* ゴシック系 */
body, table, th, td, p, li, div, span,dt,dd,
h1,h2,h3,h4,h5,h1 span,h2 span {
font-family:'Noto Sans JP', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

// <uniquifier>: Use a uniquifier for the class name
// <weight>: Use a value from 200 to 700

.oswald-<uniquifier> {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
@media screen and (min-width: 764px) {
    body {
        font-family: "Noto Sans JP", sans-serif , "Hiragino Kaku Gothic ProN";
        font-size: 16px;
    }
    #home-inv, #home-pro {
        /* padding-bottom: 9rem; */
    }

    .bg-dot {
        background: url(../img/common/bg-dot.jpg) repeat center top;
        background-size: 100%;
    }

    .wrapper {
        width: 100%;
        max-width: 1500px;
        margin: 0 auto;
    }

    .wrapper1 {
        width: 100%;
        max-width: 1500px;
    }

    .wrapper2 {
        background-image:
            radial-gradient(#7bded9 8%, transparent 8%),
            radial-gradient(#7bded9 8%, transparent 8%);
        background-size: 12px 12px;
        background-position: 0 0, 6px 6px;
        width: 100%;
        max-width: 100%;
    }
    .wrapper3_lattice {
        background: url(../img/common/lattice.png) repeat center top;
        background-size: 100%;
    }

    .wrapper4 {
        width: 100%;
        max-width: 1500px;
        margin: 0 auto;
    }

    h2 {
        color: #00479D;
        font-size: 25px;
        font-weight: 600;
        margin-top: 45px;
        margin-bottom: 0px;
    }

    h3 {
        color: #00479D;
        white-space:nowrap;
    }

    .pc {
        display: block !important;
    }

    .sp {
        display: none !important;
    }

    img {
        max-width: 100%;
    }
}

@media screen and (max-width: 769px) {
    .wrapper {
        width: 100%;
        max-width: 768px;
        margin: 0 auto;
    }

    .pc {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
}