@charset "utf-8";

/* 写真でみるページ */
.office-photo .w-100 img {
    width: 100%;
}

.office-photo h3 {
    position: relative;
}

.office-photo h3:before {
    position: absolute;
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    padding: 0.5rem;
    background-color: #ececec;
    top: -0.5rem;
    left: -0.5rem;
    z-index: -1;
}

/* 数字でみるページ */
/* 見出し */
#company h2,
#environment h2,
#worker h2 {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    background-color: #f9bc69;
}

/* ページ内リンク */
.page-link .row .col {
    width: 32%;
}

/* グリッド */
#company .grid,
#environment .grid,
#worker .grid {
    display: grid;
    gap: 1rem;
}

/* グリッドの横幅 */
#company .grid {
    grid-template-columns: 1fr 2fr;
}
#environment .grid {
    grid-template-columns: 2fr 2fr 3fr;
}
#worker .grid {
    grid-template-columns: 1fr 1fr;
}

/* グリッドアイテム */
.grid-item {
    padding: 1.5rem;
    background-color: #fef6e4;
}

/* グリッドアイテム内の上下中央寄せ */
.grid-item-xy-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* company内の各グリッドアイテムの位置指定 */
#company .grid-item-a {
    grid-row: 1;
    grid-column: 1;
}
#company .grid-item-b {
    grid-row: 1/3;
    grid-column: 2;
}
#company .grid-item-c {
    grid-row: 2;
    grid-column: 1;
}

/* environment内の各グリッドアイテムの位置指定 */
#environment .grid-item-a {
    grid-row: 1;
    grid-column: 1;
}
#environment .grid-item-b {
    grid-row: 1;
    grid-column: 2;
}
#environment .grid-item-c {
    grid-row: 1;
    grid-column: 3;
}
#environment .grid-item-d {
    grid-row: 2;
    grid-column: 1/4;
}
#environment .grid-item-e {
    grid-row: 3;
    grid-column: 1/2;
}
#environment .grid-item-f {
    grid-row: 3;
    grid-column: 2/4;
}

/* worker内の各グリッドアイテムの位置指定 */
#worker .grid-item-a {
    grid-row: 1;
    grid-column: 1;
}
#worker .grid-item-b {
    grid-row: 1;
    grid-column: 2;
}
#worker .grid-item-c {
    grid-row: 2;
    grid-column: 1/3;
}
#worker .grid-item-d {
    grid-row: 3;
    grid-column: 1;
}
#worker .grid-item-e {
    grid-row: 3;
    grid-column: 2;
}
#worker .grid-item-f {
    grid-row: 4;
    grid-column: 1/3;
}
#worker .grid-item-g {
    grid-row: 5;
    grid-column: 1/3;
}
#worker .grid-item-h {
    grid-row: 6;
    grid-column: 1;
}
#worker .grid-item-i {
    grid-row: 6;
    grid-column: 2;
}
#worker .grid-item-j {
    grid-row: 7;
    grid-column: 1/3;
}
#worker .grid-item-k {
    grid-row: 8;
    grid-column: 1;
}
#worker .grid-item-l {
    grid-row: 8;
    grid-column: 2;
}

/* 文字横のメダル */
.gold-medal:before {
    content: url(./../../images/about-exis/parts_gold-medal.png);
    margin-right: 0.5rem;
    vertical-align: middle;
}
.silver-medal:before {
    content: url(./../../images/about-exis/parts_silver-medal.png);
    margin-right: 0.5rem;
    vertical-align: middle;
}
.bronze-medal:before {
    content: url(./../../images/about-exis/parts_bronze-medal.png);
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* 文字横の数字 */
.number-four:before {
    content: url(./../../images/about-exis/parts_number-4.png);
    margin-right: 1rem;
    vertical-align: middle;
}
.number-five:before {
    content: url(./../../images/about-exis/parts_number-5.png);
    margin-right: 1rem;
    vertical-align: middle;
}
.number-six:before {
    content: url(./../../images/about-exis/parts_number-6.png);
    margin-right: 1rem;
    vertical-align: middle;
}
.number-seven:before {
    content: url(./../../images/about-exis/parts_number-7.png);
    margin-right: 1rem;
    vertical-align: middle;
}

/* リスト装飾 */
#worker ul li {
    color: #f35e0d;
}
#worker ul li span {
    color: #2e2e2e;
    font-weight: bold;
}

/* イラスト群の幅調整 */
.illust-set {
    width: 80%;
}

/* レスポンシブ */
@media (max-width: 1000px) {
    #company .grid,
    #environment .grid,
    #worker .grid {
        grid-template-columns: 1fr;
    }

    #company .grid-item-a,
    #company .grid-item-b,
    #company .grid-item-c,
    #environment .grid-item-a,
    #environment .grid-item-b,
    #environment .grid-item-c,
    #environment .grid-item-d,
    #environment .grid-item-e,
    #environment .grid-item-f,
    #worker .grid-item-a,
    #worker .grid-item-b,
    #worker .grid-item-c,
    #worker .grid-item-d,
    #worker .grid-item-e,
    #worker .grid-item-f,
    #worker .grid-item-g,
    #worker .grid-item-h,
    #worker .grid-item-i,
    #worker .grid-item-j,
    #worker .grid-item-k,
    #worker .grid-item-l {
        grid-row: auto;
        grid-column: auto;
    }
}

@media (min-width: 701px) {
    .tb-none {
        display: none;
    }
}

@media (max-width: 700px) {
    /* ページ内リンク */
    .page-link .row .col {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* 装飾イラストを小さく */
    #company .sub-illust img,
    #environment .sub-illust img,
    #worker .sub-illust img {
        max-width: 70px;
    }

    /* 見出しを小さく */
    #company h2 img,
    #environment h2 img,
    #worker h2 img {
        max-width: 250px;
    }

    .illust-set {
        width: 100%;
    }

    .sp-none {
        display: none;
    }
}