@charset "utf-8";
/* CSS Document */
/*サブビジュアル
---------------------------------------------------------------------------*/
#sub {
    height: 400px;
    position: relative;
    top: 0;
    left: 0;
    z-index: -0;
    background: url("../images/kv1.jpg") no-repeat center top /cover;
}
#sub::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
}
#sub h2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #FFF;
    font-size: 4.0rem;
    z-index: 10;
}
/*list-grid1-parts
---------------------------------------------------------------------------*/
.list-grid1-parts .list-parts * {
    margin: 0;
    padding: 0;
}
/*ブロック全体を囲むブロック*/
.list-grid1-parts {
    display: grid;
}
/*ボックス１個あたり*/
.list-grid1-parts .list-parts {
    display: grid;
    position: relative;
}
/*ボックス内のp要素*/
.list-grid1-parts .list-parts p {
    font-size: 0.85rem; /*文字サイズを85%に*/
    line-height: 1.5; /*行間を少し狭く*/
}
/*画面幅500px以上の追加指定*/
@media screen and (min-width:500px) {
    /*ブロック全体を囲むブロック*/
    .list-grid1-parts {
        grid-template-columns: repeat(2, 1fr); /*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
        gap: 1rem; /*ブロックの間に空けるマージン的な指定*/
    }
} /*追加指定ここまで*/
/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {
    /*ブロック全体を囲むブロック*/
    .list-grid1-parts {
        grid-template-columns: repeat(3, 1fr); /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
        gap: 1rem; /*ブロックの間に空けるマージン的な指定*/
    }
} /*追加指定ここまで*/
/*ボックス１個あたり*/
.list-grid1-parts .list-parts {
    padding: 1rem; /*ボックス内の余白*/
    background: #fff; /*背景色*/
    color: #555; /*文字色*/
    grid-template-rows: auto 1fr; /*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}
/*ボックス内のfigure画像*/
.list-grid1-parts .list-parts figure img {
    margin-bottom: 0.5rem; /*画像の下に空けるスペース*/
}
/*ボタン
---------------------------------------------------------------------------*/
.list-grid1-parts .btn-parts a {
    display: block;
    text-decoration: none;
    font-size: 1rem;
    text-align: center; /*テキストをセンタリング*/
    background: #555; /*背景色*/
    color: #fff; /*文字色*/
    padding: 5px 10px; /*ボタン内の余白*/
    margin-top: 1rem; /*ボタンの上に空けるスペース*/
}
/*アイコン
---------------------------------------------------------------------------*/
/*共通*/
.list-grid1-parts .icon-bg1-parts, .list-grid1-parts .icon-bg2-parts {
    overflow: hidden;
    position: absolute;
    left: -15px; /*左からの配置場所*/
    top: -15px; /*上からの配置場所*/
    font-size: 0.7rem; /*文字サイズ。70%*/
    width: 4em; /*幅*/
    line-height: 4em; /*高さ*/
    text-align: center; /*テキストをセンタリング*/
    border-radius: 50%; /*円形にする*/
}
/*icon-bg1-parts（サンプルだと「NEW」）*/
.list-grid1-parts .icon-bg1-parts {
    background: #ff3535; /*背景色*/
    font-size: 2.8rem;
    color: #fff; /*文字色*/
}
/*icon-bg2-parts（サンプルだと「UP」）*/
.list-grid1-parts .icon-bg2-parts {
    background: #358bff; /*背景色*/
    font-size: 2.8rem;
    color: #fff; /*文字色*/
}
#staff {
    margin: 50px 0;
}
#staff p {
    font-size: 1.6rem;
}
#staff .icon-bg1-parts_colorchange {
	background: #358bff;
}
#staff p {
	margin-bottom: 20px;
}
@media screen and (max-width:600px) {
    #sub {
        height: 250px;
    }
	#staff .list-parts {
		margin-bottom: 5%;
	}
}