@font-face{
    font-family: 'Noto Sans BOLD';
    src: url(../font/NotoSansJP-Bold.ttf);
}
@font-face{
    font-family: 'Noto Sans SEMI';
    src: url(../font/NotoSansJP-SemiBold.ttf);
}
body {
    background-color: #FAFAFA;
    width: 100vw;
}

p,
a,
h4 {
    font-family: "Noto Sans JP", serif;
    font-weight: 500;
}

a {
    text-decoration: none;
}

label{
    font-family: "Noto Sans JP", serif;
}

.index-en-tit,
.index-jp-tit {
    background-color: white;
    width: fit-content;
    box-shadow: 2px 2px 5px gray;
}

.index-en-tit {
    padding: calc(13vw/19.2) calc(50vw/19.2);
    font-size: calc(15vw/19.2);
    font-weight: 600;
    margin-bottom: calc(15vw/19.2);
}

.index-jp-tit {
    padding: calc(30vw/19.2) calc(40vw/19.2);
    font-size: calc(30vw/19.2);
    letter-spacing: calc(2vw/19.2);
    font-weight: 600;
    margin-bottom: calc(10vw/19.2);
}

.top-space {
    margin-top: calc(30vw/19.2);
}

.fixed-box {
    position: fixed;
    width: 100vw;
    z-index: 10;
}

.top-menu {
    position: relative;
    display: grid;
    width: calc(1840vw/19.2);
    top: calc(25vw/19.2);
    left: calc(40vw/19.2);
    padding: calc(10vw/19.2);
    background-color: white;
    align-items: center;
    border-radius: 100vh;
    box-shadow: 2px 2px 5px gray;
}

.top-menu a {
    font-size: calc(15vw/19.2);
    font-weight: 600;
    margin: 0 calc(17vw/19.2);
    margin-top: calc(5vw/19.2);
    letter-spacing: calc(3vw/19.2);
}

.menu-logo {
    margin-left: calc(35vw/19.2);
    width: calc(220vw/19.2);
}

.menu-cell-box {
    position: absolute;
    right: 0;
    display: flex;
}

.menu-cell {
    color: black;
    line-height: calc(60vw/19.2);
    font-size: calc(20vw/19.2);
}

.menu-snack {
    display: flex;
    background-color: #F5BA00;
    color: white;
    border-radius: 100vh;
    padding: calc(5vw/19.2) calc(10vw/19.2) 0 calc(80vw/19.2);
}

.menu-circle {
    border: 1px solid white;
    border-radius: 50%;
    height: calc(40vw/19.2);
    padding: 0 calc(10vw/19.2) 0 calc(13vw/19.2);
    margin-top: calc(5vw/19.2);
}

.menu-circle p {
    line-height: calc(38vw/19.2);
}

.menu-snack-txt {
    margin-right: calc(20vw/19.2);
}

.menu-snack-entit {
    font-size: calc(15vw/19.2);
    margin-top: calc(10vw/19.2);
}

.menu-snack-jptit {
    font-size: calc(10vw/19.2);
    margin-top: calc(5vw/19.2);
}

.fixed-sns-box {
    position: absolute;
    bottom: -90vh;
    left: calc(40vw/19.2);
    width: calc(60vw/19.2);
    padding: calc(20vw/19.2) 0;
    background-color: white;
    border-radius: 100vh;
    justify-items: center;
    box-shadow: 2px 2px 5px gray;
}

.fixed-sns-box a {
    display: block;
}

.insta-logo {
    width: calc(30vw/19.2);
    margin-bottom: calc(20vw/19.2);
}

.youtube-logo {
    width: calc(30vw/19.2);
}

.fixed-right-box {
    position: absolute;
    bottom: -88vh;
    right: calc(60vw/19.2);
}

.find-box {
    background-color: white;
    display: flex;
    margin-bottom: calc(20vw/19.2);
    border-radius: 100vh;
    color: black;
    box-shadow: 2px 2px 5px gray;
}

.find-txt-box {
    font-size: calc(15vw/19.2);
    font-weight: 600;
    margin: calc(23vw/19.2) calc(110vw/19.2) calc(23vw/19.2) calc(50vw/19.2);
}

.contact-box {
    background-color: white;
    display: flex;
    border-radius: 100vh;
    color: black;
    box-shadow: 2px 2px 5px gray;
}

.contact-txt-box {
    margin: calc(14vw/19.2) calc(55vw/19.2) calc(10vw/19.2) calc(50vw/19.2);
}

.contact-txt-box p {
    font-size: calc(17vw/19.2);
    font-weight: 600;
}

.find-box-circle {
    width: calc(43vw/19.2);
    background-color: #F5BA00;
    border-radius: 50%;
    margin: calc(8vw/19.2);
    text-align: center;
}

.find-box-circle p {
    color: white;
    font-size: calc(15vw/19.2);
    line-height: calc(45vw/19.2);
}

.contact-box-circle {
    width: calc(43vw/19.2);
    background-color: #F5BA00;
    border-radius: 50%;
    margin: calc(8vw/19.2);
    margin-left: calc(27vw/19.2);
    text-align: center;
}

.contact-box-circle p {
    color: white;
    font-size: calc(15vw/19.2);
    line-height: calc(47vw/19.2);
}

.top-image-box {
    position: relative;
    width: 100vw;
    height: calc(1050vw/19.2);
    top: calc(50vw/19.2);
}

.top-image {
    position: absolute;
    border-radius: 50px 50px 50px 50px;
    width: calc(1820vw/19.2);
    left: calc(30vw/19.2);
}

.top-logo {
    position: absolute;
    width: calc(440vw/19.2);
    left: calc(740vw/19.2);
    top: calc(270vw/19.2);
}

.index-scroll-box {
    margin: calc(0vw/19.2) 0 calc(80vw/19.2) 0;
}

.index-scroll-image-box {
    width: fit-content;
    margin: auto;
}

.index-scroll-image {
    width: calc(600vw/19.2);
    margin: 0 calc(5vw/19.2);
}

.index-scroll-dots-box {
    height: calc(15vw/19.2);
    width: fit-content;
    margin: calc(10vw/19.2) auto;
}

.index-scroll-dot {
    display: inline-block;
    margin: 0 calc(2vw/19.2);
    border-radius: 50%;
    width: calc(15vw/19.2);
    height: calc(15vw/19.2);
    border: 1px solid #F5BA00;
}

.index-dot-hover {
    background-color: #F5BA00;
}

.index-about-box {
    position: relative;
    margin-bottom: calc(-5vw/19.2);
}

.index-about-image {
    width: 100vw;
}

.index-about-content {
    position: absolute;
    left: calc(850vw/19.2);
    top: calc(170vw/19.2);
}

.index-about-content p {
    color: black;
}

.index-about-txt {
    padding: calc(80vw/19.2) calc(30vw/19.2);
    background-color: white;
    width: calc(900vw/19.2);
}

.index-about-txt p {
    font-size: calc(18vw/19.2);
    line-height: calc(30vw/19.2);
}

.index-about-more-btn {
    display: block;
    border-radius: 100vh;
    border: 1px solid white;
    width: fit-content;
    padding: calc(20vw/19.2) calc(70vw/19.2);
    margin-top: calc(120vw/19.2);
}

.index-about-more-btn p {
    background-color: transparent;
    font-size: calc(15vw/19.2);
    letter-spacing: calc(2vw/19.2);
    color: white;
}

.index-about-more-btn:hover {
    background-color: #F5BA00;
    border: 1px solid #F5BA00;
    transform: scale(1.05);
    transition: 500ms;
}

/*PC----------------add1------------------------*/
.add1-index-about{
    display: flex;
    margin: calc(150vw/19.2);
}
.add1-index-about-content{
    border-radius: calc(20vw/19.2);
    box-shadow: #00000029 6px 6px 10px;
    background-color: white;
    width: calc(514vw/19.2);
    height: calc(680vw/19.2);
    margin: 0 calc(15vw/19.2);
}
.add1-index-about-image{
    border-radius: calc(20vw/19.2) calc(20vw/19.2) 0 0;
    width: calc(528vw/19.2);
    height: calc(330vw/19.2);
    margin-top: calc(-5vw/19.2);
}
.add1-index-about-text{
    text-align: center;
}
.add1-index-about-tit{
    color: #F5BA00;
    font-family: "Noto Sans BOLD";
    font-size: calc(40vw/19.2);
    font-weight: 800;
    margin: calc(60vw/19.2) 0 calc(30vw/19.2) 0;
}
.add1-index-about-txt{
    font-family: "Noto Sans SEMI";
    font-size: calc(25vw/19.2);
    font-weight: 600;
    line-height: calc(35vw/19.2);
}

.index-news-box {
    position: relative;
    background-color: #F5BA00;
    text-align: center;
    padding-bottom: calc(70vw/19.2);
}

.index-news-insta-box {
    padding-top: calc(230vw/19.2);
    margin: 0 auto calc(50vw/19.2) auto;
    width: calc(1300vw/19.2);
    min-width: 984px;
    display: flex;
}

.index-news-content {
    position: absolute;
    top: calc(80vw/19.2);
    left: calc(150vw/19.2);
}

.index-news-more-btn {
    display: block;
    border-radius: 100vh;
    border: 1px solid white;
    width: fit-content;
    padding: calc(20vw/19.2) calc(70vw/19.2);
    margin: 0 auto 0 auto;
}

.index-news-more-btn p {
    background-color: transparent;
    font-size: calc(15vw/19.2);
    letter-spacing: calc(2vw/19.2);
    color: white;
}

.index-search-box {
    background: linear-gradient(180deg, #FAFAFA 50%, #F5BA00 50%);
    position: relative;
}

.index-search-image {
    width: calc(1500vw/19.2);
    margin-left: calc(420vw/19.2);
    margin-top: calc(80vw/19.2);
    margin-bottom: calc(100vw/19.2);
}

.index-search-content {
    position: absolute;
    top: calc(465vw/19.2);
    left: calc(150vw/19.2);
}

.index-search-txt {
    display: inline-block;
    padding: calc(20vw/19.2) calc(30vw/19.2);
    margin-top: calc(25vw/19.2);
    background-color: white;
    width: calc(760vw/19.2);
}

.index-search-txt p {
    font-size: calc(19vw/19.2);
    line-height: calc(30vw/19.2);
}

.index-search-goonet {
    position: absolute;
    width: calc(400vw/19.2);
    margin-left: calc(35vw/19.2);
}

.index-search-carsensor {
    position: absolute;
    width: calc(400vw/19.2);
    margin-left: calc(460vw/19.2);
}

.index-search-btn {
    margin-top: calc(80vw/19.2);
}

footer {
    z-index: 5;
    background-color: #F5BA00;
    padding: calc(100vw/19.2) 0 calc(50vw/19.2) calc(370vw/19.2);
}

footer p,
footer a {
    color: white;
}

.footer-logo {
    width: calc(240vw/19.2);
    margin-right: calc(20vw/19.2);
}

.footer-insta {
    width: calc(40vw/19.2);
    margin-right: calc(15vw/19.2);
}

.footer-youtube {
    width: calc(40vw/19.2);
}

.footer-content {
    display: flex;
    margin-top: calc(0vw/19.2);
    margin-bottom: calc(40vw/19.2);
}

footer p {
    font-size: calc(19vw/19.2);
    line-height: calc(30vw/19.2);
}

.footer-number {
    margin: calc(25vw/19.2) 0;
}

.footer-space {
    width: calc(160vw/19.2);
}

.footer-left {
    margin-top: calc(35vw/19.2);
}

.footer-right {
    display: flex;
    flex-wrap: wrap;
    width: calc(650vw/19.2);
}

.footer-menu {
    font-size: calc(15vw/19.2);
    letter-spacing: calc(1vw/19.2);
    border-left: 1px white solid;
    border-bottom: 1px white solid;
    margin-top: calc(40vw/19.2);
    padding-top: calc(5vw/19.2);
    padding-bottom: calc(10vw/19.2);
    padding-left: calc(15vw/19.2);
    padding-right: calc(10vw/19.2);
    margin-right: calc(35vw/19.2);
}

.footer-map {
    width: calc(800vw/19.2);
    height: calc(200vw/19.2);
}

.footer-policy {
    margin-left: calc(220vw/19.2);
    font-size: calc(14vw/19.2);
    text-decoration: underline;
}

@media screen and (max-width: 1000px) {
    .PC-only {
        display: none;
    }

    p,
    a,
    h4, 
    h2,
    td,
    th{
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 500;
    }

    a {
        text-decoration: none;
    }

    .sp-header {
        display: flex;
        position: fixed;
        z-index: 30;
        background-color: white;
        padding-top: calc(30vw/3.9);
        width: 100%;
    }

    /* menu */
    .header-menu-btn-op {
        display: block;
        position: relative;
        background-color: white;
        width: calc(35vw/3.9);
        height: calc(40vw/3.9);
        margin: 0 calc(30vw/3.9) 0 calc(20vw/3.9);
        justify-content: center;
        align-items: center;
        z-index: 9990;
    }

    .header-open-btn-top,
    .header-open-btn-middle,
    .header-open-btn-bottom {
        position: absolute;
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        background-color: black;
    }

    .header-open-btn-top {
        top: calc(10vw/3.9);
    }

    .header-open-btn-middle {
        top: calc(19vw/3.9);
    }

    .header-open-btn-bottom {
        bottom: calc(10vw/3.9);
    }

    .header-menu p {
        letter-spacing: calc(1vw/12.8);
    }

    .header-menu a {
        text-decoration: none;
    }

    .header-menu-A {
        display: flex;
    }

    .ja-tit {
        font-weight: 900;
        color: black;
        font-size: calc(17vw/3.9);
        letter-spacing: calc(2vw/3.9);
        margin-top: calc(25vw/3.9);
        margin-bottom: calc(25vw/3.9);
        font-family: "Noto Sans JP", serif;
    }

    .header-menu-down {
        position: fixed;
        top: calc(30vw/3.9);
        left: 0;
        display: none;
        width: 100%;
        height: fit-content;
        background-color: transparent;
        overflow: scroll;
        z-index: 9995;
    }

    .header-menu-inner {
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .header-menu-inner::-webkit-scrollbar {
        display: none;
    }

    .header-menu-btn-clo {
        position: relative;
        top: 0;
        right: 0;
        width: calc(40vw/3.9);
        height: calc(40vw/3.9);
        margin: 0 calc(27vw/3.9) 0 calc(17vw/3.9);
        display: block;
        justify-content: center;
        align-items: center;
        z-index: 9997;
        background-color: white;
    }

    .header-close-btn-top,
    .header-close-btn-bottom {
        position: absolute;
        content: '';
        display: block;
        height: 1px;
        width: calc(40vw/3.9);
        background-color: black;
    }

    .header-close-btn-top {
        top: calc(20vw/3.9);
        transform: rotate(45deg);
    }

    .header-close-btn-bottom {
        top: calc(20vw/3.9);
        transform: rotate(-45deg);
    }

    .header-menu-btn {
        text-align: center;
        display: block;
        background-color: #F5BA00;
        border: 1px solid black;
    }

    #sp-op-menu-check,
    #sp-clo-menu-check {
        display: none;
    }
    .SP-header-cell-box{
        display: flex;
    }
    .SP-header-cell-box .header-menu-SNS{
        width: 50%;
    }
    /*------menu--------*/

    .SP-menu-top {
        padding: calc(70vw/19.2) calc(75vw/19.2);
    }

    .SP-menu-about p {
        font-size: calc(35vw/19.2);
        margin: calc(50vw/19.2) auto;
    }


    .index-en-tit{
        font-size: calc(15vw/3.9);
    }
    .index-jp-tit{
        font-size: calc(20vw/3.9);
    }
    .content-text{
        background-color:transparent;
    }
    .header-title{
        width: calc(200vw/3.9);
        margin-top: calc(-10vw/3.9);
    }

    .index-news-insta-box {
        display: block;
        min-width: 0px;
        width: fit-content;
        padding-top: calc(80vw / 3.9);
    }
    .sp-header h1 {
        font-size: calc(30vw/3.9);
    }
    .header-icon-box{
        display: flex;
        margin-left: calc(15vw/3.9);
    }
    .header-grass-icon{
        width: calc(30vw/3.9);
        height: calc(30vw/3.9);
        margin-right: calc(-15vw/9.2);
    }
    .header-tel-icon{
        width: calc(25vw/3.9);
        height: calc(30vw/3.9);
        margin-left: calc(30vw/9.2);
    }
    .header-icon-box p{
        font-size: calc(30vw/3.9);
    }
    .top-image-box{
        margin: 0;
        height: calc(380vw/3.9);
        position: relative;
    }
    .top-image{
        width: 100%;
        border-radius: 0;
        left: 0;
    }
    .top-title-txt{
        position: absolute;
        right: calc(10vw/3.9);
        font-size: calc(35vw/3.9);
        color: white;
        text-align: right;
    }
    .top-title1{
        top: calc(150vw/3.9);
    }
    .top-title2{
        top: calc(200vw/3.9);
    }
    .top-image-box p{
        position: absolute;
        transform: rotate(90deg);
        top: calc(380vw/3.9);
        left: calc(-30vw/3.9);
        font-size: calc(13vw/3.9);
        color: #FFFFFF;
    }
    .index-scroll-box{
        background-color: #FAFAFA;
        position: relative;
        z-index: 15;
        width: calc(330vw/3.9);
        height: calc(200vw/3.9);
        margin: 0 auto;
        overflow-x: scroll;
        padding-top: calc(20vw/3.9);
    }
    .index-scroll-box::-webkit-scrollbar {
        display: none;
    }
    .index-scroll-box-inner{
        display: flex;
    }
    .index-scroll-image-box{
        display: flex;
        width: calc(900vw/3.9);
    }
    .index-scroll-image-box a{
        width: fit-content;
        height: fit-content;
    }
    .index-scroll-image{
        width: calc(280vw/3.9);
        margin: 0 calc(20vw/3.9);
        height: calc(157vw/3.9);
        display: block;
    }
    .index-scroll-dots-box{
        width: calc(330vw/3.9);
        position: relative;
        z-index: 16;
        top: calc(-30vw/3.9);
    }
    .index-scroll-dot{
        width: 30%;
        margin: 0;
        border-radius: 100vh;
    }
    .index-about-box{
        top:calc(0vw/3.9);
    }
    .index-about-content{
        left: calc(30vw/3.9);
        width: calc(340vw/3.9);
    }
    .index-about-txt{
        width: fit-content;
    }
    .index-about-txt p{
        color: white;
        font-size: calc(13vw/3.9);
        line-height: calc(20vw/3.9);
    }
    .index-about-more-btn{
        margin: calc(30vw/3.9) auto 0 auto;
    }
    .index-about-more-btn p{
        font-size: calc(20vw/3.9);
    }
    .index-about-image{
        border-radius: 0;
    }

/*add*/
    .add1-index-about{
        display: block;
        margin: calc(55vw/3.9) auto;
    }
    .add1-index-about-content{
        width: calc(280vw/3.9);
        height: calc(370vw/3.9);
        margin: calc(25vw/3.9) auto;
    }
    .add1-index-about-image{
        width: calc(290vw/3.9);
        height: calc(180vw/3.9);
        margin-top: calc(-8vw/3.9);
        margin-left: calc(-2vw/3.9);
    }
    .add1-index-about-tit{
        font-size: calc(21vw/3.9);
        margin: calc(35vw/3.9) 0 calc(15vw/3.9) 0;
    }
    .add1-index-about-txt{
        font-size: calc(13vw/3.9);
        line-height: calc(20vw/3.9);
    }

    .index-news-more-btn p{
        font-size: calc(20vw/3.9);
    }
    .index-search-box {
        background: linear-gradient(180deg, #FAFAFA 20%, #F5BA00 20%, #F5BA00 70%, #FAFAFA 70%);
    }
    .index-search-en-tit{
        margin-top: calc(100vw/3.9);
    }
    .index-search-image{
        margin-top: calc(30vw/3.9);
        margin-left: calc(30vw/3.9);
        width: calc(360vw/3.9);
    }
    .index-search-btn{
        margin-top: 0;
        margin-bottom: calc(50vw/3.9);
        border-color: black;
    }
    .index-search-btn p{
        color: black;
    }
    .index-search-txt{
        margin: calc(100vw/3.9) calc(45vw/3.9) calc(15vw/3.9) calc(45vw/3.9);
        width: calc(300vw/3.9);
    }
    .index-search-txt p{
        color: black;
        font-size: calc(13vw/3.9);
        line-height: calc(20vw/3.9);
    }
    .index-search-goonet,.index-search-carsensor{
        position: static;
        width: calc(250vw/3.9);
        margin: calc(15vw/3.9) calc(40vw/3.9);
    }
    .index-search-goonet{
        margin-top: calc(40vw/3.9);
    }

    footer{
        padding: 0;
    }
    .footer-map{
        width: 100%;
        height: calc(130vw/3.9);
    }
    .footer-content,.footer-images{
        margin-left: calc(15vw/3.9);
    }
    .footer-content{
        display: block;
    }
    .footer-logo{
        margin-top: calc(30vw/3.9);
        width: calc(300vw/3.9);
    }
    .footer-left p{
        font-size: calc(15vw/3.9);
        line-height: calc(25vw/3.9);
        font-weight: 300;
    }
    .footer-insta,.footer-youtube{
        width: calc(25vw/3.9);
        margin-bottom: calc(30vw/3.9);
    }
    .footer-insta{
        margin-left: 0;
    }
    .footer-policy{
        margin-left: calc(15vw/3.9);
        font-size: calc(15vw/3.9);
        margin-top: calc(50vw/3.9);
    }
}

@media screen and (min-width: 1001px) {
    .SP-only {
        display: none;
    }
}