/* ----------------------------------------------------------------------
	企業情報トップ
---------------------------------------------------------------------- */
img {
    object-fit: contain;
    vertical-align: top;
}


/* ----- ヘッダーエリア ----- */
.head_area {
    width: 100%;
    height: auto;
    /*background-color: rgba(0, 120, 83, 0.8);
    background-color: rgb(from var(--main-color) r g b / 80%);

    --color-white: #fff;*/
    --font-size-18_20: clamp(1.8rem, 0.9133rem + 1.1561vw, 2rem);
}

.head_area_inner {
	position: relative;
	z-index: 2;
	/*padding: 24px 0;*/
	/*background: linear-gradient(rgb(from var(--main-color) r g b / 80%), rgb(from var(--main-color) r g b / 80%)),url(/company/_img/pic_management-policy.jpg);*/
    /*background: url(/company/_img/pic_management-policy.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;*/
}

.head_area_inner.w940 {
	/*display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    */
}

.head_area_inner > div {
    margin: 0 auto;
}

.head_area_inner > div.layout {
    position: relative;
    
    display: grid;
    grid-template-columns: 67% 33%; 
}

.head_area_inner > div.layout > .main {
    position: relative;
}

.head_area_inner > div.layout > .main > .title {
    position: absolute;
    left: 0;
    top: 0;
}

.head_area_inner > div.layout > .main > .bg img {
    display: block;
}

.head_area_inner > div.layout > .main > .title .heading-simple {
	background-color: var(--main-color);
	color: var(--color-white);
    padding: 5px 20px;
}

.head_area_inner > div.layout > .caps {
    color: #fff;
    background-color: var(--main-color);
    display: flex;
    justify-content: center;
    align-items: center;

}


.head_area .heading-simple {
	font-size: var(--font-size-20);
}

.head_area .text_block .catch {
    font-size: clamp(1.6rem, 1.4968rem + 0.3226vw, 1.8rem);
    font-weight: bold;
    display: block;
    margin-bottom: 0.5em;
}

.head_area .heading-simple,
.head_area .description {
	background-color: var(--main-color);
	color: var(--color-white);
}

.head_area .description {
	font-size: clamp(1.1rem, 0.9968rem + 0.3226vw, 1.3rem);
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    /*word-break: keep-all;*/
}

.head_area .nav-local-group {
    margin-top: 20px;
}

.head_area .nav-local-group > * > .btn-round {
    padding: 0.6em 1.2em;
    font-size: 1.3rem;
}



/* ----- カテゴリーブロック ----- */
.category_area {
    margin-top: 30px;
}

.category_unit { margin-top: 30px; }
.category_unit + .category_unit { margin-top: 50px; }

.category_unit > .heading-simple.icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category_unit > .heading-simple.icon span.icon img {
    max-width: 36px;
    vertical-align: top;
}


/* ----- バナーブロック ----- */
.banner_unit {
    text-align: center;
}

.banner_unit > a {
    margin: 0 auto;
    text-decoration: none;
    color: #333;
    position: relative;
    display: block;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);

    display: inline-block;
}

.banner_unit > a > .img img {
    max-width: 100%;
}

.banner_unit > a > .img + .title {
    margin-top: 15px;
}

.banner-group {
    display: flex;
    justify-content: center;
    /* gap: 30px; */
    gap: clamp(24px, 4vw, 60px) clamp(8px, 4vw, 60px);
}




/* ------------------------------------------------------------
	939px以下
------------------------------------------------------------ */
@media screen and ( max-width : 939px ) {

    .head_area_inner > div.layout {
        display: block;
    }

    .head_area_inner > div.layout > .main > .bg img {
        width: 100%;
    }
    
    
    .head_area_inner > div.layout > .caps {
        /*position: static;
        padding: 24px 0;*/
        padding: 15px;

        justify-content: flex-start;
    }

    .head_area .nav-local-group {
        margin-top: 15px;
    }

    .head_area_inner.w940 {
        padding-left: 0;
        padding-right: 0;
    }

    .head_area .nav-local-group > * > .btn-round {
        font-size: 1.2rem;  
    }

    .head_area_inner > div.layout > .title .heading-simple {
        font-size: var(--font-size-16);
        padding: 8px 20px;

        
    }

    .head_area_inner > div.layout > .main > .title .heading-simple {
        font-size: var(--font-size-13);
    }

}


/* ------------------------------------------------------------
	767px以下
------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {
    
}

/* ------------------------------------------------------------
	639px以下
------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {
    
    .category_unit > .heading-simple.icon {
        font-size: 1.8rem;
        gap: 10px;
    }

    .category_unit > .heading-simple.icon span.icon img {
        max-width: 28px;
    }

    .category_unit .button-list {
        gap: 5px;
    }

    .category_unit .button-list > div > a {
        font-size: 1.2rem;
    }

    #category_about .button-list.div2 {
        grid-template-columns: 1fr 1fr;
    }
    
}


/* ------------------------------------------------------------
	479px以下
------------------------------------------------------------ */
@media screen and ( max-width : 479px ) {
    
    .head_area_inner > div.layout > .main > .title .heading-simple {
        padding: 4px 16px;
        font-size: var(--font-size-12);
    }

    
    /* ----- バナーブロック ----- */
    .banner_unit > a {
        max-width: 100%;
        padding: 10px;
    }

    .banner_unit > a > .img + .title {
        margin-top: 10px;
        font-size: 1.2rem;
    }
    
}


/* ------------------------------------------------------------
	374px以下
------------------------------------------------------------ */
@media screen and ( max-width : 374px ) {
    
    .head_area_inner > div.layout > .main > .title .heading-simple {
        padding: 2px 16px;
        font-size: var(--font-size-11);
    }
}

/* ------------------------------------------------------------
	359px以下
------------------------------------------------------------ */
@media screen and ( max-width : 359px ) {
    
}