@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* ======================================================
基本の設定はHP共通の設定を使用してイレギュラー部分のみ追記
・カテゴリートップにサイドメニュー表示
・見出し用アイコン
・本文内の画像配置、罫線など
====================================================== */

.gridParent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    height:600px;
    margin-top: 30px;
}

.gridParent .gridChild{
    display: block;
    position: relative;
    overflow: hidden;
}
.gridParent .gridChild1 {
    grid-area: 1 / 1 / 4 / 5;
}
.gridParent .gridChild2 {
    grid-area: 4 / 1 / 7 / 3;
}
.gridParent .gridChild3 {
    grid-area: 4 / 3 / 7 / 5;
}
.gridParent .gridChild4 {
    grid-area: 1 / 5 / 3 / 7;
}
.gridParent .gridChild5 {
    grid-area: 3 / 5 / 5 / 7;
}
.gridParent .gridChild6 {
    grid-area: 5 / 5 / 7 / 7;
}

.gridParent .gridChild::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transition: transform .25s ease;
}

.gridParent .gridChild1::after {
    background: url(/about/images/about_bg_1.png);  
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
.gridParent .gridChild2::after {
    background: url(/about/images/about_bg_2.jpg);
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
.gridParent .gridChild3::after {
    background: url(/about/images/about_bg_3.jpg);
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
.gridParent .gridChild4::after {
    background: url(/about/images/about_bg_4.jpg);
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
.gridParent .gridChild5::after {
    background: url(/about/images/about_bg_5.jpg);
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}
.gridParent .gridChild6::after {
    background: url(/about/images/about_bg_6.jpg);
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}

.gridParent .gridChild:hover::after,
.gridParent .gridChild:focus::after{
    transform: scale(1.1);
}

.gridParent .gridChild .gridChildTxt {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    bottom: 0;
    height: 4em;
    width: 100%;
    padding: 0 1em;
    background: linear-gradient(0.37turn, #00000033, #00000066);
    color: #FFF;
    text-align: right;
    font-size: 1.4em;
    font-weight: bold;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.3;
    z-index: 1;
}

/*===============
PC用調整
================*/
@media only screen and (min-width: 1122px),
print {

}

/*===============
タブレット用調整
================*/
@media only screen and (min-width: 768px) and (max-width: 1121px),
print {

}

/*===============
スマホ用調整
================*/
@media only screen and (max-width: 767px) {
    .gridParent {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(11, 1fr);
        height:max(125vh,600px);
        grid-column-gap: 10px;
    }

    .gridParent .gridChild{
        min-height: max(48px,6.5em);
    }
    
    .gridParent .gridChild1 {
        grid-area: 1 / 1 / 4 / 3; 
    }
    .gridParent .gridChild2 {
        grid-area: 4 / 1 / 7 / 2;
    }
    .gridParent .gridChild3 {
        grid-area: 4 / 2 / 7 / 3;
    }
    .gridParent .gridChild4 {
        grid-area: 7 / 1 / 10 / 2;
    }
    .gridParent .gridChild5 {
        grid-area: 7 / 2 / 10 / 3;
    }
    .gridParent .gridChild6 {
        grid-area: 10 / 1 / 12 / 3;
    }

    .gridParent .gridChild .gridChildTxt{
        padding-left: 0.5em;
        font-size: 1.1em;
        height: 4.5em;
    }
}