@charset "utf-8";

/*--------------------------------------------
サイトの基本設定
--------------------------------------------*/
html {
	scroll-behavior: smooth;
    scrollbar-gutter: stable;
}
body{
    font-family:'Noto Sans JP', sans-serif;
    font-weight: 500;
    color: #3e3a39;
    position: relative;
    --color-robot: #6d60a8;
    --color-hairo: #37a1db;
    --color-ene: #f9c000;
    --color-nourin: #74ba2b;
    --color-iryou: #eb7aa0;
    --color-utyu: #147fc3;
    --color-other: #999999;

    --color-main-mizu: #31a8c1;
    position: relative;
}
/* リンクの下線を無しにする */
a{
    text-decoration: none;
    color: initial;
}
/* a img:hover{
    opacity: 0.8;
}
 */
ul{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
img{
    width: 100%;
}
 .honbun{
    line-height: 30px;
    letter-spacing: 1px;
    margin-bottom: 0;
    @media (max-width:720px) {
        line-height: 22px;
        font-size: 14px;
    }
 }
 .sp-only{
    display: none;
}
@media (max-width: 720px)  {
.pc-only{
    display: none;
}
.sp-only{
    display: block;
}
}
.container{
    width: 1600px;
    max-width: 90%;
    margin: 0 auto;
}
.inner{
    max-width: 1360px;
    max-width: 90%;
    margin: auto;
   @media (max-width:720px){
    max-width: 100%;
   }
}



/* ヘッダー */
header{
    padding: 10px 0;
}
header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.h-logo{
    width: 28px;
}
h1{
    font-size: 18px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    @media (max-width:720px) {
        font-size: 14px;
    }
}
header .container > ul{
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    >li{
        padding: 18px;
        position: relative;
        z-index: 1;
        &:last-child{
            padding-right: 0;
        }
        a{
            color: #9fa0a0;
            &:hover{
                color: #757575;
            }
        }
    }
    @media (max-width:1200px) {
        display: none;
    }
}
/* フッター */
footer{
    margin-top: 100px;
    position: relative;
    @media (max-width:1200px) {
        padding: 0 0 60px;
    }
    @media (max-width:720px) {
        margin-top: 70px;
    }
/* QRコードエリア全体 */
.f-qr-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    padding: 25px 1em 25px;
    position: relative;
    z-index: 1;
    border-top: solid 1px #e6e6e6;
}

/* リンクブロック（カード部分） */
.f-qr-link {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 15px 30px 15px 15px; /* 右側に少しゆとりを持たせる */
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* 軽い影 */
    transition: all 0.3s ease; /* ホバー時のアニメーション用 */
    width: fit-content;
}

/* ホバー時の動き（少し浮き上がる） */
.f-qr-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    opacity: 1; /* 既存のaタグのopacityを上書き */
}

/* QRコード画像部分 */
.qr-img-wrap {
    width: 80px; /* 印刷も考慮した読み取りやすいサイズ */
    height: 80px;
    flex-shrink: 0;
    margin-right: 20px; /* テキストとの余白 */
}
.qr-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* テキスト部分 */
.qr-text-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.qr-title {
    font-size: 18px;
    font-weight: 600;
    color: #005197; /* メインカラー */
    margin-bottom: 4px;
}
.qr-action {
    font-size: 13px;
    color: #898989;
    font-weight: 500;
}

/* スマートフォン表示用の調整 */
@media (max-width: 720px) {
    .f-qr-area {
        gap: 15px;
        padding: 15px 1em 15px;
        flex-direction: column; /* スマホでは縦に並べる */
    }
    .f-qr-link {
        width: 100%;
        max-width: 350px; /* 既存のスマホボタンサイズに合わせる */
        padding: 12px 20px 12px 12px;
    }
    .qr-img-wrap {
        width: 65px;
        height: 65px;
        margin-right: 15px;
    }
    .qr-text-wrap{
        padding: 0 1em;
        flex-direction: initial;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }
    .qr-title {
        font-size: 16px;
    }
    .qr-action {
        font-size: 12px;
    }
}
    .f-link{
        height: auto;
        padding: 40px 1em 40px; /* 下部の余白を少し足すとバランスが良くなります */
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px; /* 5つ並ぶため、60pxから少し狭めるのがおすすめです */
        flex-wrap: wrap; /* ▼これを追加！（PCでもボタンを折り返させる設定）▼ */
        position: relative;
        margin: auto;
        &::after{
            content: "";
            position: absolute;
            z-index: -1;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,var(--color-main-mizu),#77a130,#e0aa19);
            opacity: 30%;
        }
        a{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 413px;
            height: 60px;
            font-size: 18px;
            font-weight: 600;
            color: #ffffff;
            background-color: #898989;
            position: relative;
            z-index: 1;
            border-radius: 20px;
            &::before{
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                left: 20px;
                background-color: #ffffff;
                width: 2px;
                height: 28px;
            }
            &::after{
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                right: 20px;
                background-image: url(../img/f-link-arrow.svg);
                width: 24px;
                height: 24px;
            }
            &:hover{
                opacity: 80%;
            }
            /* ▼ 「企業紹介ページ（TOP）」専用の家のアイコン（白） ▼ */
            &.icon-home::after {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%209l9-7%209%207v11a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%27%3E%3C%2Fpath%3E%3Cpolyline%20points%3D%279%2022%209%2012%2015%2012%2015%2022%27%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
            }
        }
        @media (max-width:720px) {
            flex-wrap: wrap;
            gap: 7px;
            a{
                width: 350px;
                height: 35px;
                font-size: 16px;
                font-weight: 500;
                border-radius: 10px;
                &::before{
                    content: "";
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    left: 20px;
                    background-color: #ffffff;
                    width: 2px;
                    height: 16px;
                }
                &::after{
                    right: 13px;
                    background-image: url(../img/f-link-arrow.svg);
                    width: 15px;
                    height: 15px;
                }
                &.icon-home::after {
                    background-size: cover;
                    width: 20px;
                    height: 20px;
                    right: 10px;
                }
            }
        }
    }
    .footer__lower{
        background-color: #f7f8f8;
        .container{
            width: 1100px;
            margin: 0 auto;
            padding: 
            2em 1em 2em;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            @media screen and (max-width: 800px) {
                justify-content: center;
            }

        }
        .address{
            display: flex;
            flex-flow: column;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            @media screen and (min-width: 992px) {
                flex-flow: inherit;
                align-items: center;
            }
            .logo {
                max-width: 147px;
                @media screen and (min-width: 992px) {
                    margin-right: 2em;
                }
            }
            .info{
                font-size: 13px;
            }
        }
        .snslist {
            max-width: 325px;
            margin: 0 auto;
            @media screen and (min-width: 768px) {
                margin-right: inherit;
                margin-left: inherit;
            }
            p {
                font-size: 11px;
                text-align: center;
            }
            .sns {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                width: 100%;
                li{
                    width: calc(20% - 1em);
                    a:hover{
                        opacity: 0.7;
                    }
                }
            }
        }
    }
}
small{
    text-align: center;
    display: block;
    padding-bottom: 3em;
    font-size: 12px;
    @media (max-width:1200px) {
        padding-bottom: 1.5em;
    }
}

/* パーツ　マップ */
.map-wrapper {
  position: absolute;
  width: fit-content;
  left: 44%;
    max-width: 20vw;
    @media (max-width:1360px) {
        left: auto;
        right: 10%;
    }
}

.map-image {
  width: 100%;
  max-width: 278px;
  height: auto;
  display: block;
}

.map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-area {
  fill: transparent;
  cursor: pointer;
}

.map-area:hover {
  /* fill: rgba(255, 255, 255, 0.25); */
}

.map-area.is-active {
  fill: rgba(255, 255, 255, 0.25);
}



/* 検索ツール　基礎 */
    form .serach_container{
        display: grid;
        grid-template-columns: auto 1fr;
        .left-container{
            border-right: solid 1px #dcdcdc;
            position: relative;
            max-width: 780px;
            flex-shrink: 0;
            width: fit-content;
            h3{
                position: absolute;
                left: 0;
                top: 0;
                font-size: 18px;
                font-weight: 600;
                margin: 0 0 10px 0;
            }
            .map-content{
                position: relative;
                height: 622px;
                padding-right: 35px;
                .inobe-map{
                    width: clamp(10px ,15vw, 256px);
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .zoom-up{
                    max-width: 46px;
                    position: absolute;
                    top: 50%;
                    left: 36%;
                    transform: translateY(-60%);
                    @media (max-width:1360px) {
                        left: 0;
                        right: 0;
                        margin: auto;
                        transform: translateX(-20px);
                    }
                }
                p{
                    position: absolute;
                    right: 0;
                    transform: translateX(90%);
                    bottom: 10%;
                    font-size: 13px;
                    @media (max-width:1360px) {
                        transform: initial;
                        bottom: -10%;
                    }
                }
            }
            .area-labels{
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 40px;
                @media (max-width:1360px) {
                    margin-top: 80px;
                }
            }
        }
        .right-container{
            padding-left: 30px;
            min-width: 510px;
            position: relative;
            .category{
                min-width: 0;
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                display: grid;
                grid-template-columns: repeat(4, minmax(auto, 167px));
                label{
                    aspect-ratio: 1 / 1;
                    min-width: 0;
                    border-radius: 10px;
                    border-radius: 10px;
                    color: #ffffff;
                    background-color: #7bbdd0;
                    transition: background-color 0.05s ease-out, box-shadow 0.05s  ease-out;
                    border: none;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: column;
                    input{
                        display: none;
                    }
                    &:first-child{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        flex-direction: column;
                        background-color: initial;
                        border: solid 1px #7bbdd0;
                        color: #3e3a39;
                        justify-content: center;
                        font-size: 18px;
                    }
                    &:nth-child(n+2){
                        cursor: pointer;
                    }
                    &.active:nth-child(n+2){
                        background-color: #0f7a9a;
                        box-shadow: 0 0 4px 0 #00000063;
                    }
                    &.cat-hairo{
                        img.cat-icon{
                            margin-top:27px;
                            max-width: min( 40%,69px) ;
                            @media (max-width:1560px) {
                                margin-top:17px;
                            }

                        }
                        .cat-name{
                            margin: 0 0 20px 0;
                            font-size: clamp(14px, 1vw , 18px);
                            @media (max-width:1560px) {
                                margin: 0 0 15px 0;
                            }
                        }
                    }
                    &.cat-robot{
                        img.cat-icon{
                            max-width:min( 75% , 127px);
                            margin-top: 15px;
                            @media (max-width:1560px) {
                                margin-top: 10px;
                            }
                        }
                        .cat-name{
                            margin: 0 0 20px 0;
                            font-size: clamp(12px, 1vw , 18px);
                            letter-spacing: -1px;
                            @media (max-width:1560px) {
                                font-size: 12px;
                                margin: 0 0 15px 0;
                            }
                            @media (max-width:1200px) {
                                
                            }
                        }
                    }
                    &.cat-ene{
                        img.cat-icon{
                            max-width:min(40%,58px);
                            margin-top: 25px;
                            @media (max-width:1560px) {
                                margin-top: 15px;
                            }
                        }
                        .cat-name{
                            text-align: center;
                            margin: 0 0 10px 0;
                            font-size: clamp(14px, 1vw , 18px);
                            letter-spacing: -2px;
                            @media (max-width:1560px) {
                                font-size: 12px;
                                margin: 0 0 10px 0;
                            }
                        }
                    }
                    &.cat-nourin{
                        img.cat-icon{
                            max-width:min(70%,110px);
                            margin-top: 20px;
                            @media (max-width:1560px) {
                                margin-top: 15px;
                            }
                        }
                        .cat-name{
                            margin: 0 0 20px 0;
                            font-size: clamp(14px, 1vw , 18px);
                            letter-spacing: -1px;
                            @media (max-width:1560px) {
                            margin: 0 0 15px 0;
                            }     
                        }
                    }
                    &.cat-iryou{
                        img.cat-icon{
                            max-width:min(50%,83px);
                            margin-top: 26px;
                            @media (max-width:1560px) {
                            margin-top: 16px;
                            }
                        }
                        .cat-name{
                            margin: 0 0 20px 0;
                            font-size: clamp(14px, 1vw , 18px);
                            letter-spacing: -1px;
                            @media (max-width:1560px) {
                                margin: 0 0 15px 0;
                            }
                        }
                    }
                    &.cat-utyu{
                        img.cat-icon{
                            max-width:min(45%,70px);
                            margin-top: 25px;
                            @media (max-width:1560px) {
                                margin-top: 15px;
                            }
                        }
                        .cat-name{
                            margin: 0 0 20px 0;
                            font-size: clamp(14px, 1vw , 18px);
                            letter-spacing: -1px;
                            @media (max-width:1560px) {
                                margin: 0 0 15px 0;
                            }
                        }
                    }
                    &.cat-other{
                        img.cat-icon{
                            max-width:min(50%,70px);
                            margin-top: 25px;
                            @media (max-width:1560px) {
                                margin-top: 15px;
                            }
                        }
                        .cat-name{
                            text-align: center;
                            margin: 0 0 20px 0;
                            font-size: clamp(14px, 1vw , 18px);
                            @media (max-width:1560px) {
                                line-height: 1.2;
                                margin: 0 0 15px 0;
                            }
                        }
                    }
                }
            }
            h3{
                font-size: 18px;
                font-weight: 600;
                margin: 0 0 10px 0;
            }
            .job-labels{
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-top: 40px;
            }
            .keyword-h3{
                margin-top: 2em;
            }
            .keyword-labels{
                display: grid;
                grid-template-columns: repeat(6, minmax(auto, 1fr));
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                flex-wrap: wrap;
                gap: 2px 25px;
                margin-top: 10px;
                label{
                    white-space: nowrap;
                }
            }
            #archive_freeword{
                margin-top: 20px;
                display: grid;
                grid-template-columns: auto 1fr;
                align-items: center;
                h3{
                    margin: 0 20px 0 0;
                    font-size: 18px;
                    padding-bottom: 2px;
                }
                input[type="text"]{
                    height: 50px;
                    padding: 0 10px;
                    border: solid 1px #dcdcdc;
                    border-radius: 10px;
                    font-size: 16px;
                    &:focus{
                        outline: none;
                        border-color: var(--color-main-mizu);
                    }   
                }
            }
            #archive_search_button{
                position: absolute;
                right: 0;
                bottom: 0;
                margin-top: 30px;
                display: flex;
                align-items: center;
                justify-content: end;
                input[type="reset"]{
                    color: #595757;
                    font-weight: 600;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    margin-right: 20px;
                    background-color: initial;
                    border: none;
                }
                input[type="submit"]{
                    width: 170px;
                    height: 50px;
                    background-color: var(--color-main-mizu);
                    color: #ffffff;
                    font-weight: 600;
                    border: none;
                    border-radius: 100px;
                    cursor: pointer;
                    transition: all 0.1s ease;
                    &:hover{
                        background-color: #218c99;
                    }
                }
            }
        }
    }
    img.area-search{
        max-width: 737px;
    }

/* 
検索ツール　TOP ページ用
*/
#top_search{
    margin-top: 3em;
    .container{
        max-width: 98%;
        position: relative;
        background-color: #f8fcfd;
        padding: 45px 35px 45px 50px ;
        border-radius: 0 10px 10px 10px;
        border: solid 1px #efefef;
    }
    .container::before {
        content: "企業検索ツール";
        font-size: 17px;
        position: absolute;
        top: -41px;          /* はみ出し量 */
        left: -1px;          /* 枠線と揃える */
        padding: 8px 20px;
        background-color: #f8fcfd;
        border: solid 1px #efefef;
        border-bottom: none;
        border-radius: 10px 10px 0 0;
        font-weight: bold;
    }
    @media (max-width:1200px) {
        display: none;
    }
}

/* 検索ツール　ボタン・オーバーレイ設定 */

.openbtn{
    position: fixed;
    z-index: 9999;
    top: 70px;
    right: 0;
    cursor: pointer;
    width: 68px;
    height: 269px;
    display: block;
    background-color: #005197;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 10px 0 0 10px;
    &::before{
        content: '';
        position: absolute;
        width: 22px;
        height: 1px;
        background-color: #ffffff;
        top: 34px;
    }
    &::after{
        content: '';
        position: absolute;
        width: 22px;
        height: 1px;
        background-color: #ffffff;
        bottom: 34px;
    }
    @media (max-width:1200px) {
        display: none;
    }
}

.overlay_wrapper{
    position: fixed;
    z-index: 1000;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s .1s;
     &.active{
    opacity: 1;
    pointer-events: auto; 

    }
    .overlay{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: -2;
        width: 100%;
        pointer-events: none;
        background: #7dbed1;
        opacity: 60%;
        min-height: 100dvh;
        @supports (height: 100dvh){
            .hero{min-height:100dvh;} /* 対応してたらこちらを採用 */
        }
    }
}
/* スマホ用　下部固定メニュー */
.sp-nav,.close{
    display: none;
}
@media (max-width:1200px) {
    .sp-nav{
        position: fixed;
        bottom: 0;
        z-index: 1100;
        width: 100%;
        display: block;
        background-color: #005197;
        color: #ffffff;

        ul{
            height: 60px;
/*             padding: 10px 0;
 */            display: grid;
            grid-template-columns: repeat(3,1fr);
            li{
                display: flex;
                align-items: center;
                justify-content: center;
                border-right: solid 1px #ffffff;
                &:last-child{
                    border: none;
                }
                &:nth-child(2){
                    a{
                        color: #ffffff;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
            li.In-page-link{
                display: flex;
                justify-content: space-around;
                .page-top,.page-bottom{
                    width: 18px;
                    display: flex;
                    align-items: center;
                }
                .page-bottom{
                    transform: rotate(180deg);
                }
            }
        }
    }
}
.sp-nav{

}

/* 
検索ツール　サイド・スマホ用　コンテナ部分
*/
.serch_nav{
    position: fixed;
    z-index: 1000;
    top: 0;
    right: -700px;
    width: 700px;
    background: #f8fcfd;
    transition: all 0.3s;
    overflow-y: scroll;
    padding: 60px 0;
   -ms-overflow-style: none;
     scrollbar-width: none;
     box-shadow: 0 0 10px 0 #00000017;
    height: 100dvh;
}
@supports (height: 100dvh){
    .serch_nav{height:100dvh;} /* 対応してたらこちらを採用 */
}
.serch_nav::-webkit-scrollbar{
    display: none;
}

.serch_nav.active{
    right: 0;
    @media (max-width:1200px) {
        .close{
            position: fixed;
            z-index: 1100;
            top: 20px;
            right: 20px;
            display: block;
            width: 25px;
            height: 25px;
            border: solid 1px #226db6;
            border-radius: 50px;
            background-color: #f8fcfdd3;
            span:first-child{
                position: relative;
                display: block;
                width: 14px;
                height: 1px;
                background-color: #226db6;
                top: 46%;
                left: 20%;
                transform: rotate(45deg);
            }
            span:last-child{
                position: relative;
                display: block;
                width: 14px;
                height: 1px;
                background-color: #226db6;
                top: 43%;
                left: 20%;
                transform: rotate(-45deg);
            }
        }
    }
}

.serch-tool-container{
    max-width: 445px;
    margin-left: 90px;
    h2{
        color: #005197;
        font-size: 22px;
        font-weight: 500;
        display: block;
        width: fit-content;
        margin: auto;
        letter-spacing: 2px;
        position: relative;
        &::before{
            content: '';
            position: absolute;
            width: 1px;
            height: 100%;
            background-color: #005197;
            left: -2em;
        }
        &::after{
            content: '';
            position: absolute;
            width: 1px;
            height: 100%;
            background-color: #005197;
            right: -2em;
        }

    }
    .serch-area{
        margin-top: 4em;
        h3{
            font-size: 18px;
            font-weight: 600
        }
    }
}
@media (max-width:1200px) {
    .serch_nav{
        right: -100%;
        width: 100%;
        max-width: 700px;
        padding: 50px 0 110px;
    }
    .serch-tool-container{
        max-width: 445px;
        width: 90%;
        margin:auto;
        h2{
            font-size: 16px;
        }
        .serch-area{
            margin-top: 3em;
            h3{
                font-size: 16px;
                font-weight: 600
            }
        }
    }
}


/* 検索ツール　サイド・スマホ用　中身（基礎をベースに整える） */
.serch_nav form .serach_container{
    display: block;
    .left-container{
        border-right: none;
        border-bottom: solid 1px #dcdcdc;
        padding-bottom: 50px;
        h3{
            position: initial;
        }
        .map-content{
            height: auto;
            padding: 0;
            .inobe-map{
                display: block;
                position: initial;
                transform: translateY(0);
                margin:1em auto 0;
                max-width: 220px;
            }
            .zoom-up{
                position: initial;
                display: block;
                transform: translate(0) rotate(90deg);
                margin:1em auto 0;
                max-width: 35px;
            }
            p{
                right: 20px;
                transform: translateX(90%);
                bottom: -20px;
                font-size: 12px;
            }
        }
        .area-labels{
            display: grid;
            grid-template-columns: repeat(5,1fr);
            margin-top: 40px;
            row-gap: 2px;
        }
        /* 検索マップ */
        .map-wrapper {
            position: relative;
            display: block;
            margin: auto;
            left: 0;
            margin-top: 1em;
        }
    }
    .right-container{
        padding-left: 0px;
        padding-top: 50px;
        min-width: 0;
        .category{
            padding: 0;
            grid-template-columns: 1fr;
            label{
                aspect-ratio: auto;
                height: 90px;
                &:first-child{
                    border: none;
                    height: fit-content;
                    margin-bottom: 10px;
                    @media (max-width: 1200px) {
                        font-size: 16px;
                    }
                }
                    flex-direction: initial;
                    justify-content: flex-start;
                    div{
                        width: 150px;
                        text-align: center;
                        img.cat-icon{
                            margin: 0;
                        }


                }
                .cat-name{
                    margin: 0!important;
                    font-size: 16px;
                }
                &.cat-hairo{
                    img.cat-icon{
                        max-width: 66px;
                    }
                }
                &.cat-robot{
                    img.cat-icon{
                        max-width:117px;
                    }
                }
                &.cat-ene{
                    img.cat-icon{
                        max-width:58px;
                    }
                }
                &.cat-nourin{
                    img.cat-icon{
                        max-width:100px;
                    }
                }
                &.cat-iryou{
                    img.cat-icon{
                        max-width:60px;
                    }
                }
                &.cat-utyu{
                    img.cat-icon{
                        max-width:60px;
                    }
                }
                &.cat-other{
                    img.cat-icon{
                        max-width:65px;
                    }
                }
            }
        }
        .keyword-labels{
            grid-template-columns: repeat(4, minmax(auto, 1fr));
            row-gap: 2px;
            label{
                white-space: nowrap;
            }
        }
        #archive_freeword{
            margin-top: 40px;
            grid-template-columns: 1fr;
            h3{
                margin: 0 0 10px 0;
                font-size: 18px;
                padding-bottom: 2px;
            }
            input[type="text"]{
                height: 50px;
                padding: 0 10px;
                border: solid 1px #dcdcdc;
                border-radius: 10px;
                font-size: 16px;
            }
        }
        #archive_search_button{
            position: initial;
            justify-content: center;
            gap: 14px;
            margin-top: 80px;
            input[type="reset"]{
                margin-left: 30px;
            }
        }
    }
    @media (max-width:1200px) {
    .left-container{
        padding-bottom: 50px;
        width: 100%;
        h3{
            font-size: 16px;
        }
        .map-content{
            height: auto;
            padding: 0;
            .inobe-map{
                margin:1em auto 0;
                width: 220px;
            }
            .zoom-up{
            }
            p{
                right: 90px;
                transform: translateX(90%);
                bottom: -20px;
                font-size: 12px;
            }
        }
        .area-labels{
            font-size: 14px;
            grid-template-columns: repeat(4,1fr);
            margin-top: 50px;
            row-gap: 4px;
        }
        /* 検索マップ */
        .map-wrapper {
            max-width: fit-content;
            position: relative;
            display: block;
            margin: auto;
            left: 0;
            margin-top: 1em;
        }
    }
    .right-container{
        max-width: 100%;
        min-width: 0;
        .category{
            label{
                height: 70px;
                    div{
                        width: 120px;
                    }
                &.cat-hairo{
                    img.cat-icon{
                        max-width: 56px;
                    }
                }
                &.cat-robot{
                    img.cat-icon{
                        max-width:90px;
                    }
                }
                &.cat-ene{
                    img.cat-icon{
                        max-width:48px;
                    }
                }
                &.cat-nourin{
                    img.cat-icon{
                        max-width:80px;
                    }
                }
                &.cat-iryou{
                    img.cat-icon{
                        max-width:50px;
                    }
                }
                &.cat-utyu{
                    img.cat-icon{
                        max-width:50px;
                    }
                }
                &.cat-other{
                    img.cat-icon{
                        max-width:55px;
                    }
                }
            }
        }
        .keyword-h3{
            font-size: 16px;
        }
        .keyword-labels{
            margin-top: 14px;
            display: flex;
            gap: 4px 1.2em;
            font-size:14px;
            label{
                white-space: nowrap;
            }
        }
        #archive_freeword{
            h3{
                margin: 0 0 10px 0;
                font-size: 16px;
                padding-bottom: 2px;
            }
            input[type="text"]{
                height: 50px;
                padding: 0 10px;
                border: solid 1px #dcdcdc;
                border-radius: 10px;
                font-size: 16px;
            }
        }
        #archive_search_button{
            justify-content: center;
            gap: 14px;
            margin-top: 80px;

        }
    }
    }
}







/* TOP 企業一覧 */
#top_archive{
    margin: 100px 0;
    h2{
        font-weight: 500;
        border-bottom: solid 1px #c0c0c0;
        display: block;
        width: fit-content;
        padding: 0.5em;
        margin: 0 auto 2.5em;
        text-align: center;
        line-height: 1.2;
        span{
            font-size: 15px;
            color: #868686;
        }
    }
    @media (max-width:1200px) {
        margin-top: 20px;
    }
}

/* 
パーツ　企業一覧
*/
 #top_archive .container,#result_archive .container{
    .inner{
        max-width: 1360px;
    }
    h2{
        letter-spacing: 2px;
        font-size: 22px;
        font-weight: 500;
        border-bottom: solid 1px #c0c0c0;
        display: block;
        width: fit-content;
        padding: 0.5em;
        margin: 0 auto 2.5em;
    }
    @media (max-width:720px) {
        h2{
            font-size: 16px;
        }
    }
}
.company_list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(324px, 1fr));
    gap: 20px;
    justify-content: center;
}
.company_item{
    transition: all 0.2s ease;
    &:hover{
        transform: translateY(-4px);
    }
    a{
        display: block;
        margin: auto;
        width: fit-content;
    }
    .thumbnail{
        width: 100%;
        aspect-ratio: 9 / 5;
        position: relative;
        .campany-cat-area{
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            flex-wrap: wrap;
        }
        .campany-cat{
            color: #ffffff;
            padding: 5px 10px;
            font-size: 14px;
            &.robot{
                background-color: #6d60a8;
            }
            &.ene{
                background-color: #f9c000;
            }
            &.hairo{
                background-color: #37a1db;
            }
            &.utyu{
                background-color: #147fc3;
            }
            &.nourin{
                background-color: #74ba2b;
            }
            &.iryou{
                background-color: var(--color-iryou);
            }
            &.other{
                background-color: var(--color-other);
            }
        }
        .item_img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            overflow: hidden;
        }
    }
    .area-area{
        display: flex;
        align-items: center;
    }
    .area{
        color:var(--color-main-mizu);
        font-weight: bold;
        margin: 6px 0 0 16px;
        &:nth-child(2){
            margin: 6px 0 0 8px;
        }
    }
    .company_name{
        font-size: 20px;
        font-weight: 600;
        margin: 0 0 0 16px;
        letter-spacing: 1px;
    }
    .item_content{
        padding: 15px;
        h4{
            font-size: 20px;
            margin: 0 0 10px 0;
        }
        p{
            font-size: 16px;
            margin: 0;
        }
    }
}
ul.page-numbers{
    margin-top: 100px;
    text-align: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    font-size: 17px;
    li{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border: solid 1px #ffffff;
        margin: 0;
        color: #3e3a39;
        border-radius: 100px;
        &:has(.current){
            background-color: #aed3e0;
            color: #ffffff;
            border: none;
        }
        &:has(.dots){
            border: none;
            width: auto;
            height: auto;
            cursor: default;
        }
        .prev{
            margin-right: 3em;
            font-size: 20px;
        }
        .next{
            margin-left: 3em;
            font-size: 20px;
        }
    }
    @media (max-width:720px) {
        margin-top: 70px;
        font-size: 16px;
        gap: 7px;
            li{
                width: 30px;
                height: 30px;
            .prev{
                margin-right: 1.8em;
                font-size: 16px;
            }
            .next{
                margin-left: 1.8em;
                font-size: 16px;
            }
        }
    }
}

/* 検索結果ページ */
#result_archive .container{
    h2{
        margin-top: 60px;
        margin-bottom: 0;
    }
}

/*
 企業紹介ページ
 */

 article{
    max-width: 1000px;
    width: 90%;
    margin:25px auto 0;
 } 

 section.company-top{
    .company-cat .category{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        &:has(li:nth-child(4)){
            grid-template-columns: repeat(4,1fr);
        }
        li{
            padding: 5px 10px;
            text-align: center;
            color: #ffffff;

            &.cat-hairo{
                background-color: var(--color-hairo);
            }
            &.cat-robot{
                background-color: var(--color-robot);
            }
            &.cat-ene{
                background-color: var(--color-ene);
                @media (max-width:720px) {
                    letter-spacing: -2px;
                    padding: 3px 3px;
                }
            }
            &.cat-nourin{
                background-color: var(--color-nourin);
            }
            &.cat-iryou{
                background-color: var(--color-iryou);
            }
            &.cat-utyu{
                background-color: var(--color-utyu);
            }
            &.cat-other{
                background-color: var(--color-other);
            }


        }
    }
    .company-image{
        width: 100%;
        height: 558px;
        overflow: hidden;
        padding-top: 13px;
        position: relative;
        &::before{
            content: "";
            position: absolute;
            z-index: -1;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,var(--color-main-mizu),#77a130,#e0aa19);
            opacity: 30%;
            }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .catch-copy{
        font-size: 26px;
        font-weight: 500;
        margin: 20px 0 0 0;
        color:#005197;
    }
    .company-intro{
        margin-top: 30px;
        display: flex;
        align-items: center;
        gap: 1.5em;
        line-height: 1.1;
        .company-area{
            font-size: 26px;
            border-right: solid 1px #9fa0a0;
            padding-right: 1em;
            padding-bottom:3px;
            color: var(--color-main-mizu);
            flex-shrink: 0;
            span:nth-of-type(2){
                margin-left: 8px;
            }
        }
        .company-name{
            font-size:34px;
            font-weight: 600;
            margin: 0;
            padding-bottom:3px;
        }
    }
    @media (max-width:900px) {
        .company-cat .category{
            font-size: 15px;
            li{
                padding: 3px 5px;
            }
        }
        .company-image{
            height: 400px;
            padding-top: 10px;
        }
        .catch-copy{
            font-size: 23px;
        }
        .company-intro{
            margin-top: 15px;
            .company-area{
                font-size: 23px;
                span{
                    display: inline-block;
                }
                span:nth-of-type(2){
                    margin-left: 0px;
                    margin-top: 3px;
                }
            }

            .company-name{
                font-size:28px;
            }
        }
    }
    @media (max-width:720px) {
        .company-cat .category{
            grid-template-columns: repeat(2,1fr);
            &:has(li:last-child:nth-child(3)){
                background-color: #ebebeb;
            }
            &:has(li:last-child:nth-child(4)){
                grid-template-columns: repeat(2,1fr);
                background-color: #ebebeb;
            }

            li{
                padding: 3px 10px;
                font-size: 13px;
            }
        }
        .company-image{
            height: 300px;
            padding-top: 10px;
        }
        .catch-copy{
            font-size: 18px;
            font-weight: 600;
            margin: 10px 0 0 0;
        }
        .company-intro{
            margin-top: 8px;
            gap: 1.3em;
            .company-area{
                font-size: 18px;
            }
            .company-name{
                font-size:24px;
            }
        }
    }
    @media (max-width:500px) {
        .company-image{
            height: 220px;
        }
    }
 }
section.company-about.noimg{
    display: block;
        .about-content{
            max-width: 100%;
        }
    .company-image02{
        display: none;
    }
}
 section.company-about{
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    .about-content{
        max-width: 600px;
        h3.section-title{
            margin-top: 0;
            font-size: 24px;
            color: #86c4d2;
            font-weight: bold;
            padding-left: 45px;
            position: relative;
            display: block;
            &::before{
                position: absolute;
                content:'';
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;

                width: 35px;
                height: 35px;
                background: linear-gradient(90deg,var(--color-main-mizu),#77a130,#e0aa19);
                opacity: 30%;
            }
        }
    }
    .company-image02{
        width: 340px;
        height: 265px;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    @media (max-width:1100px) {
        display: block;
        margin-top: 32px;
        .about-content{
            max-width: 100%;
            h3.section-title{
                font-size: 20px;
                padding-left: 40px;
                &::before{
                    width: 30px;
                    height: 30px;
                }
            }
        }
        .company-image02{
            margin:auto;
            margin-top: 20px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    @media (max-width:720px) {
        margin-top: 16px;
        .about-content{
            max-width: 100%;
            h3.section-title{
                font-size: 18px;
                padding-left: 25px;
                &::before{
                    width: 18px;
                    height: 18px;
                    bottom: 0;
                }
            }
        }
        .company-image02{
            margin:auto;
            margin-top: 20px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
 }

 section.company-comment{
    margin-top: 50px;
    overflow: hidden;
    h3.section-title2{
        font-size:22px;
        margin: 0;
        position: relative;
        padding-right: 1em;
        display: inline-block;
        color: #727171;
        &::after{
            content: '';
            position: absolute;
            top: 50%;
            left: 100%;
            width: 100vw;
            height: 1px;
            background-color: #727171;
        }
    }
    .content-wrapper.noimg{
        display: block;
        .comment-content{
            max-width: 100%;
        }
        .company-image03{
            display: none;
        }
    }
    .content-wrapper{
        display: flex;
        justify-content: space-between;
        .comment-content{
            max-width: 600px;
        }
        .company-image03{
            width: 340px;
            height: 265px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                margin-top: 1em;
            }
        }
    }
    .staff-comment{
        h3{
            font-size: 24px;
            color: #86c4d2;
            position: relative;
            padding-left: 80px;
            border-right: 2px solid #898989;
            border-bottom: 2px solid #898989;
            border-top: 0;
            border-left: 0;
            display: inline-block;
            padding: .6em .8em .6em 110px;
            background-color: #ffffff;
            &::after{
                content: '';
                position: absolute;
                left: 20px;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 58px;
                height: 44px;
                background-image: url(../img/megaphone.svg);
            }
        }
        .comment-body{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            background-color: #f5fafb;
            padding:3.5em 1.5em 1em 3.5em;
            margin-top: -60px;
            img{
                max-width: 147px;
            }
            .fukidashi{
                background-color: #ffffff;
                border: solid 1px #727171;
                padding: 1em 1.5em;
                max-width: 720px;
                position: relative;
                &::before {
                content: "";
                position: absolute;
                top: 40%;
                left: 0;
                border-style: solid;
                border-width: 0 40px 17px 0;
                border-color: transparent #727171 transparent transparent;
                translate: -100% -50%;
                }

                &::after {
                content: "";
                position: absolute;
                top: 40%;
                left: 0;
                border-style: solid;
                border-width: 0 35.1px 14.9px 0;
                border-color: transparent #ffffff transparent transparent;
                translate: -100% -50%;
                }
            }
        }
    }
    @media (max-width:1200px) {
        h3.section-title2{
            font-size:20px;
            padding-right: .8em;
        }
        .content-wrapper{
            display: block;
            .comment-content{
                max-width: 100%;
            }
            .company-image03{
                margin: auto;
            }
        }
        .staff-comment{
            margin-top: 1em;
            h3{
                font-size: 22px;
            }
            .comment-body{
                padding:3em 1em 1em 3em;
                margin-top: -55px;
                gap: 3em;
                img{
                    max-width: 120px;
                }
                .fukidashi{
                    padding: .8em 1.3em;
                    max-width: 720px;
                    &::before {
                    content: "";
                    position: absolute;
                    top: 40%;
                    left: 0;
                    border-style: solid;
                    border-width: 0 40px 17px 0;
                    border-color: transparent #727171 transparent transparent;
                    translate: -100% -50%;
                    }

                    &::after {
                    content: "";
                    position: absolute;
                    top: 40%;
                    left: 0;
                    border-style: solid;
                    border-width: 0 35.1px 14.9px 0;
                    border-color: transparent #ffffff transparent transparent;
                    translate: -100% -50%;
                    }
                }
            }
        }

    }
    @media (max-width:720px) {
        h3.section-title2{
            font-size:18px;
            padding-right: .5em;
        }
        .staff-comment{
            h3{
                font-size: 16px;
                border-right: 1px solid #898989;
                border-bottom: 1px solid #898989;
                padding: .6em .8em .6em 50px;
                &::after{
                    left: 10px;
                    width: 32px;
                    height: 25px;
                }
            }
            .comment-body{
                padding:1.5em 1em 1em 1.5em;
                margin-top: -35px;
                gap: 2em;
                img{
                    max-width: 80px;
                    margin-top: 1em;
                }
                .fukidashi{
                    padding: .5em .8em;
                    &::before {
                        top: 54px;
                        left: 0;
                        border-width: 0 26px 17px 0;
                    }

                    &::after {
                        top: 54px;
                        border-width: 0 22px 14.9px 0;
                    }
                }
            }
        }
    }
 }

 section.achievements{
    margin-top: 65px;
    .flex-content{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        &.noshien{
            grid-template-columns: 1fr;
        }
        &.noresults{
            grid-template-columns: 1fr;
        }
        h3{
            margin: 0 0 20px;
            background-color: #9fa0a0;
            color: #ffffff;
            display: block;
            width: fit-content;
            padding: 5px 1em;
            font-size:22px;
            font-weight: 500;
        }
        .shien{
            padding-right:45px;
            border-right: solid 1px #9fa0a0;
            a{
                color:var(--color-main-mizu);
                font-size:18px;
                position: relative;
                margin-top: 1em;
                display: block;
                width: fit-content;
                padding-right: 10px;
                &::after{
                    content:'';
                    position: absolute;
                    width: 19px;
                    height: 19px;
                    left: 100%;
                    top: 2px;
                    background: url(../img/link-icon.svg);
                    background-repeat: no-repeat;
                }
            }
            .honbun{
                padding-left: 1em;
                margin-top:0.5em;
                margin-bottom: 0;
            }
        }
        .jisseki{
            margin-left: 45px;
        }
    }
    .noshien{
        .jisseki{
            margin-left: 0;
        }
    }
    .noresults{
        .shien{
            padding-right: 0;
            border-right: none;
        }
    }
    @media (max-width:720px) {
        margin-top: 30px;
        .flex-content{
            display: grid;
            grid-template-columns: 1fr;
            h3{
                margin: 0 0 10px;
                padding: 3px 0;
                width: 150px;
                text-align: center;
                font-size:16px;
            }
            .shien{
                padding-right:0;
                border-right: none;
                a{
                    font-size:15px;
                    margin-top: .8em;
                    padding-right: 2px;
                    max-width: 92%;
                    &::after{
                        content:'';
                        position: absolute;
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            .jisseki{
                margin-top: 30px;
                margin-left: 0;
            }
        }
    }
 }

 section.info{
    margin-top: 40px;
    .info-wrapper{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 50px;
        background-color: #e6f1f5;
        padding: 24px 65px;
        position: relative;
        .info-name{
            font-size: 24px;
            letter-spacing: 1px;
            margin:0 0 10px;
        }
        .info-body p{
            font-size: 18px;
            margin: 0;
            line-height: 28px;
            font-weight: 300;
            .hp_url{
                transition: all 0.3s ease;
                display: block;
                width: fit-content;
                margin-top: 3px;
            }
            .hp_url:hover{
                text-decoration: underline;
                color: #005197;
            }
            .materials{
                display: block;
                width: fit-content;
                margin-top: 18px;
                font-size: 16px;
                color: #ffffff;
                position: relative;
                padding:0.5em 1.6em 0.5em 3.3em;
                background-color: #005197;
                border: solid 1px #005197;
                border-radius: 50px;
                transition: color .3s ease, background-color .3s ease;
                &::after{
                    content:'';
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    left: 1.2em;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    background: url(../img/file-icon-w.png);
                    background-size: cover;
                }
                &:hover{
                    background-color: #ffffff;
                    border: solid 1px #005197;
                    color: #005197;

                }
                &:hover::after{
                    background: url(../img/file-icon-b.png);
                    background-size: cover;
                }
            }
        }
        &::after{
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            left: 20px;
            background-color: #ffffff;
            width: 2px;
            height: calc(100% - 48px);
        }
        &::before{
            content: '';
            position: absolute;
            right: 20px;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: #ffffff;
            width: 2px;
            height: calc(100% - 48px);
        }
    }
    @media (max-width:720px) {
        margin-top: 30px;
        .info-wrapper{
            display: block;
            padding: 20px 30px;
            position: relative;
            .info-name{
                font-size: 18px;
                letter-spacing: 1px;
                margin: 0 0 10px;
            }
            .info-body p{
                font-size: 14px;
                line-height: 1.2;
                .hp_url{
                    margin-top: 5px;
                }
                .materials{
                    font-size: 14px
                }
            }
            &::after{
                left: 12px;
            }
            &::before{
                right: 12px;
            }
        }
    }
 }