@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* メインビジュアル */
.p-mainVisual__video {
    object-position: center 15%;
}

/* 検索エリア */
.search-box-title {
    background: none;
    color: #b69d80;
    padding: 0;
    width: 100%;
    margin: auto auto 1.5em 1.7em;
    line-height: 1.2;
    position: relative;
    font-size: 1.4em;
}
.search-box-title span {
    font-size: .7em;
}
.search-box-title i {
    position: absolute;
    left: -1.2em;
    font-size: 1.5em;
    top: 56%;
    transform: translateY(-50%);
}

.search-wrap01 , .search-wrap02 {
    background: #9696960d;
    padding: 30px;
    border-radius: 15px;
}
.search-wrap01 .wp-block-group__inner-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.japan-map {
    width: 500px;
    height: 303px;
    position: relative;
}
.search-area {
    width: calc(100% - 530px);
}
.area-box {
    position: absolute;
}
.japan-map img {
    width: 46%;
    position: absolute;
    left: 21%;
    top: 0;
}
.hokkaido.area-box {
    top: 6.6%;
    left: 71%;
}
.touhoku.area-box {
    width: 29%;
    top: 19%;
    left: 71%;
}
.kantou.area-box {
    top: 46.2%;
    left: 60.9%;
    width: 39.2%;
}
.tyubu.area-box {
    top: 0;
    left: 0;
    width: 49%;
}
.kinki.area-box {
    top: 76.2%;
    left: 60.9%;
    width: 39.2%;
}
.tyugoku.area-box {
    top: 28.7%;
    left: 0;
    width: 29%;
}
.shikoku.area-box {
    top: 76.2%;
    left: 37.5%;
    width: 19.2%;
}
.kyusyu.area-box {
    top: 59.4%;
    left: 0;
    width: 19.2%;
}
.area:after {
    content: '';
    width: 45px;
    height: 21px;
    display: block;
}

.area-title {
    border-bottom: 1px solid #606060;
    margin-bottom: 5px;
}

.area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.area a {
    text-decoration: none;
    margin-bottom: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 21px;
    color: white;
    font-size: 12px;
}
.hokkaido .area a {
    background: #E19689;
}
.touhoku .area a {
    background: #A5BE94;
}
.kantou .area a {
    background: #A3A3E0;
}
.tyubu .area a {
    background: #F5AF73;
}
.kinki .area a {
    background: #C2A3C2;
}
.tyugoku .area a {
    background: #85B6C2;
}
.shikoku .area a {
    background: #d2be6a;
}
.kyusyu .area a {
    background: #ebaab2;
}

.search-title {
    margin-bottom: 5px;
}
.search-box {
    margin-bottom: 10px;
}
.search-box:last-child {
    margin-bottom: 0;
}
.search-list01 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.search-list02 {
    display: flex;
    justify-content: flex-start;
    gap: 0 7px;
    flex-wrap: wrap;
}
.search-list01 a , .search-list02 a {
    box-shadow: 0 2px 2px rgba(93, 93, 93, 0.12);
    background-color: #e2d3bc;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    width: 88px;
    height: 30px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #333;
}
.search-list02 a {
    background-color: #d9e2bc;
}

@media screen and (max-width: 974px){
    .search-wrap01 .wp-block-group__inner-container {
        justify-content: center;
    }
    .search-area {
        width: 100%;
        margin-top: 15px;
    }
    .search-list01 {
        justify-content: flex-start;
        gap: 0 7px;
    }
    .search-list01 a, .search-list02 a {
        width: calc(calc(100% - 35px) / 6);
    }
}

@media screen and (max-width: 750px){
    .search-wrap01, .search-wrap02 {
        padding: 15px;
    }
    .search-list01 a, .search-list02 a {
        width: calc(calc(100% - 21px) / 4);
    }
}

@media screen and (max-width: 600px){
    /* メインビジュアル */
    .p-mainVisual__video {
        object-position: 30% 15%;
    }

    .search-box-title {
        margin: auto auto 1em 1.7em;
    }
    .japan-map {
        width: 100%;
        height: auto;
        margin-bottom: 5px;
    }
    .japan-map img {
        display: none;
    }
    .area-box {
        width: 100%!important;
        position: static;
        margin-bottom: 10px;
    }
    .area {
        justify-content: flex-start;
        gap: 7px;
    }
    .area a {
        height: 30px;
        width: calc(calc(100% - 21px) / 4);
        border-radius: 30px;
        margin-bottom: 0;
    }
    .area:after {
        display: none;
    }
    .search-box-title {
        font-size: 1.2em;
    }
}