@charset "UTF-8";
/*----------------------------
companysearch
----------------------------*/

.companysearch{
    & dl{
        margin-bottom:0;
    }
    & dt{
        font-weight: 500;
    }
    & dd{
        margin-bottom:0;
    }
}
@media screen and (max-width: 767.98px){
    & dt{
        background:var(--my-light);
    }
}
.companysearch_contact{
    border:5px solid var(--my-light);
}

.map {
    position: relative;
    width: 100%;
   
    & iframe{
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
      }
  }

.my-btn2.line{
    & a{
        background:#00B900;
        line-height: 1!important;
        border-bottom:3px solid color-mix(in srgb, #00B900 80%, black);
    }
}
.company-words.area{
    display: flex;
    flex-wrap: wrap;
}

div[id*="companysearch"] div.map{
    aspect-ratio: 546/506;
    max-width: 546px;
    width: 60%;
    margin: 0 auto;
    background: url(/lib/wp-content/themes/mytheme/assets/images/company/map.png) 50% 50% no-repeat;
    background-size: cover;
    position: relative;
}
div[id*="companysearch"] div.map span a:before,
div[id*="companysearch"] div.map span.map_kyushuokinawa a:after{
    content: "";
    display: block;
    position: absolute;
    transition: 0.2s;
    background: #fff;
    opacity: 0;
}
div[id*="companysearch"] div.map span a:hover:before,
div[id*="companysearch"] div.map span.map_kyushuokinawa a:hover:after{
    opacity: 0.2;
}
div[id*="companysearch"] div.map span.map_hokkaido a:before{
    top: 0;
    right: 0;
    width: 28%;
    height: 22%;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 30% 88%, 30% 100%, 0 100%);
}
div[id*="companysearch"] div.map span.map_tohoku a:before{
    top: 23.5%;
    right: 7.5%;
    width: 20.5%;
    height: 31%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 20% 65%, 0 65%);
}
div[id*="companysearch"] div.map span.map_kanto a:before{
    top: 54%;
    right: 7.5%;
    width: 20%;
    height: 30%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 71% 100%, 71% 64%, 57% 64%, 57% 100%, 18% 100%, 18% 85%, 0 85%, 0 72%, 18% 72%, 18% 50%, 0 50%);
}
div[id*="companysearch"] div.map span.map_hokuriku a:before{
    top: 43.5%;
    right: 24%;
    width: 27%;
    height: 19%;
    clip-path: polygon(17% 0, 37% 0, 37% 14%, 86% 14%, 86% 0, 100% 0, 100% 58%, 37% 58%, 37% 100%, 0 100%, 0 70%, 17% 70%);
}
div[id*="companysearch"] div.map span.map_tokai a:before{
    top: 54%;
    right: 24%;
    width: 17%;
    height: 30%;
    clip-path: polygon(0 0, 78% 0, 78% 51%, 100% 51%, 100% 72%, 78% 72%, 78% 85%, 100% 85%, 100% 100%, 0 100%);
}
div[id*="companysearch"] div.map span.map_kinki a:before{
    top: 56.5%;
    left: 39%;
    width: 20%;
    height: 32.5%;
    clip-path: polygon(0 0, 51% 0, 51% 18%, 100% 18%, 100% 100%, 25% 100%, 25% 51%, 0 51%);
}
div[id*="companysearch"] div.map span.map_chugoku a:before{
    top: 56.5%;
    left: 24%;
    width: 15.5%;
    height: 16.5%;
}
div[id*="companysearch"] div.map span.map_shikoku a:before{
    top: 75%;
    left: 24%;
    width: 18%;
    height: 14%;
}
div[id*="companysearch"] div.map span.map_kyushuokinawa a:before{
    top: 56.5%;
    left: 0;
    width: 22%;
    height: 33%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 45% 100%, 45% 38.5%, 0 38.5%);
}
div[id*="companysearch"] div.map span.map_kyushuokinawa a:after{
    top: 91%;
    left: 9.5%;
    width: 5.5%;
    height: 9%;
}

div[id*="companysearch"] div.map span a i{
    display: block;
    position: absolute;
    font-style: normal;
    background: #fff;
    border: 2px solid #000;
    border-radius: 100px;
    padding: 8px 10px;
    color: #000;
    font-weight: 500;
    min-width: 130px;
    text-align: center;
    transform: translate(0, -22px);
    transition: 0.2s;
    white-space: nowrap;
}
div[id*="companysearch"] div.map span a:hover i{
    background: #000;
    color: #fff;
}
div[id*="companysearch"] div.map span.map_hokkaido a i{
    top: 9%;
    right: -29%;
}
div[id*="companysearch"] div.map span.map_tohoku a i{
    top: 38%;
    right: -22%;
}
div[id*="companysearch"] div.map span.map_kanto a i{
    top: 68%;
    right: -22%;
}
div[id*="companysearch"] div.map span.map_hokuriku a i{
    top: 35%;
    right: 35%;
}
div[id*="companysearch"] div.map span.map_tokai a i{
    top: 92%;
    right: 0%;
}
div[id*="companysearch"] div.map span.map_kinki a i{
    top: 98%;
    right: 27%;
}
div[id*="companysearch"] div.map span.map_chugoku a i{
    top: 48%;
    right: 60%;
}
div[id*="companysearch"] div.map span.map_shikoku a i{
    top: 98%;
    right: 55%;
}
div[id*="companysearch"] div.map span.map_kyushuokinawa a i{
    top: 82%;
    right: 95%;
}

@media screen and (max-width: 790px){
    div[id*="companysearch"] div.map span a i{
        min-width: 100px;
        transform: translate(-15px, -19px);
    }
}
@media screen and (max-width: 680px){
    div[id*="companysearch"] div.map{
        width: 90%;
        aspect-ratio: auto;
        background: none;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        max-width: none;
    }
    div[id*="companysearch"] div.map span{
        display: block;
        margin: 5px !important;
        width: calc(33.3% - 10px);
        box-sizing: border-box;
    }
    div[id*="companysearch"] div.map span a{
    }
    div[id*="companysearch"] div.map span a:before,
    div[id*="companysearch"] div.map span.map_kyushuokinawa a:after{
        display: none;
    }
    div[id*="companysearch"] div.map span a i{
        position: static;
        transform: translate(0, 0);
    }
}
@media screen and (max-width: 500px){
    div[id*="companysearch"] div.map span{
        width: calc(50% - 10px);
    }
}

#companysearch3 .wrapper,
#companysearch6 .wrapper{
    text-align: center;
}
#companysearch3 .wrapper>div,
#companysearch6 .wrapper>div{
    display: inline-block;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}
#companysearch3 .wrapper>div span,
#companysearch6 .wrapper>div span{
    display: inline-block;
    margin: 5px;
}
#companysearch3 .wrapper>div span a,
#companysearch6 .wrapper>div span a{
    display: block;
    font-style: normal;
    background: #fff;
    border: 2px solid #000;
    border-radius: 100px;
    padding: 8px 10px;
    color: #000;
    font-weight: 500;
    min-width: 130px;
    text-align: center;
    transition: 0.2s;
}
#companysearch3 .wrapper>div span a:hover,
#companysearch6 .wrapper>div span a:hover{
    background: #000;
    color: #fff;
}