@charset "utf-8";
/* CSS Document */

/*トップページのメイン
---------------------------------------------------------------------------*/
/*画像ブロック*/

.bg-b {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
 	background-image: linear-gradient(90deg, #d9d9d980 2px, transparent 2px), linear-gradient(#d9d9d980 2px, transparent 2px);
 	background-position: 28px 25px;
	background-size: 42px 42px;
	height: 600px;
	line-height:60px;
	font-family:メイリオ,meiryo,ヒラギノ角ゴ pro w3,hiragino kaku gothic pro,sans-serif;
	color:#7E7E7E;
	margin-bottom: 100px;
	width: 100vw;
	margin: 0 calc(50% - 50vw);}
 

#bg-b h1{
	display: block;
	font-size:50px;
	line-height:60px;
	text-align:center;
	letter-spacing:5px;
	font-weight:bold;
}

#bg-b h2{
	margin-top: -40px;
	font-size:20px;
	line-height:40px;
	text-align:center;
	letter-spacing:0.15em;
	font-weight:bold;

}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
.new{
	margin-top: 100px;
}

#new dl {
	padding: 0px 20px;	/*上下、左右へのブロック内の余白*/
	margin-bottom: 100px;	/*ブロックの下(外側)に空ける余白*/
}
/*日付設定*/
#new dt {
	font-weight: bold;	/*太字にする設定。標準がいいならこの行削除。*/
	float: left;
	width: 8em;
}
/*記事設定*/
#new dd {
	padding-left: 8em;
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
	background: #F00;	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;
	line-height: 2;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}

.newicon2 {
	background: rgb(0, 38, 255);	/*背景色*/
	color: #FFF;		/*文字色*/
	font-size: 70%;
	line-height: 2;
	padding: 2px 5px;
	border-radius: 2px;
	margin: 0px 5px;
	vertical-align: text-top;
}



/*ライセンスエージェントとはのパーツ（※900px未満では１カラム）
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.list-half-parts .list-parts {
		display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	margin-bottom: 2rem;	/*ボックスの下に2文字分のスペースを空ける*/
	}

/*ブロック内のh4見出し*/
.list-half-parts .list-parts h4 {
	font-size: 1.2rem;	/*文字サイズを1.4倍*/
	text-align: center;		/*テキストをセンタリング*/
}

.list-half-parts p{
	text-align: center;		/*テキストをセンタリング*/
}

/*画像ブロック共通*/
.list-half-parts .image-l-parts img,
.list-half-parts .image-r-parts img {
	width: 50%;	/*画像幅*/
	margin: 0px 0px 30px 0px;
	}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {
		
		.list-half-parts .image-l-parts img,
		.list-half-parts .image-r-parts img {
		margin: 0px 0px 0px 0px;
	}

		/*２カラムを囲むブロック*/
		.list-half-parts .list-parts {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
							}
		
		/*画像ブロック共通*/
		.list-half-parts .image-l-parts, .list-half-parts .image-r-parts {
			width: 50%;			/*画像の幅*/
					}
		
		/*画像を右に配置する場合*/
		.list-half-parts .image-r-parts {
			margin-left: 2rem;	/*画像の左側に空けるスペース*/
		}
		
		/*画像を左に配置する場合*/
		.list-half-parts .image-l-parts {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

		/*テキストブロック*/
		.list-half-parts .text-parts {
			flex: 1;
		}

	}/*追加指定ここまで*/

/*事業内容
---------------------------------------------------------------------------*/
.list-grid7-parts .list-parts * {margin: 0;padding: 0;}

/*ブロック全体を囲むブロック*/
.list-grid7-parts {
	padding-top: 20px;	/*画像が少し上にずれるので適当に余白を確保*/
	margin-top: 100px;
}

/*ボックス１個あたり*/
.list-grid7-parts .list-parts {
    display: grid;
	position: relative;
	border-radius: 5px;		/*角を少しだけ丸く*/
	background: #fafafa;	/*背景色*/
	color: #555;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	padding: 2rem;			/*ボックス内の余白。２文字分。*/
	margin-bottom: 2rem;	/*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のh4見出し*/
.list-grid7-parts .list-parts h4 {
	text-align: center;		/*テキストをセンタリング*/
	margin-bottom: 0.5rem;	/*下に0.5文字分の余白を空ける*/
	line-height: 1.3rem;

}

/*ボックス内のp要素*/
.list-grid7-parts .list-parts p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;	/*行間を少し狭く*/
	text-align: center;		/*テキストをセンタリング*/
}

/*ボックス内のa要素*/
.list-grid7-parts .list-parts a {
	text-decoration-line: none;
}

/*ボックス内のfigure画像*/
.list-grid7-parts .list-parts figure {
	margin: 0 auto;
	width: 100px;			/*画像サイズ*/
	margin-top: -40px;		/*本来の場所より上にずらす*/
	margin-bottom: 1rem;	/*画像の下に空けるスペース*/
	border-radius: 50%;		/*円形にする*/
	overflow: hidden;
	background-image: linear-gradient(90deg, rgba(255, 55, 216, 1), rgba(161, 15, 255, 1));	/*背景色。画像に透過部分がある場合に見えます。*/
}

/*ボックス内のfigure画像（※アスペクト比を1:1にした場合）*/
.list-grid7-parts.square .list-parts figure {
	aspect-ratio: 1 / 1;	/*幅に対して高さを同じにする*/
}
.list-grid7-parts.square .list-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;			/*コンテナいっぱいにカバー、余分な部分はカット*/
	object-position: center;	/*中央部分を表示*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ブロック全体を囲むブロック*/
	.list-grid7-parts {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 2rem	/*ブロックの間に空けるマージン的な指定。２文字分。*/
	}

	/*ボックス内のfigure画像*/
	.list-grid7-parts .list-parts figure {
		width: 150px;		/*画像サイズ*/
		margin-top: -50px;	/*本来の場所より上にずらす*/
	}

	}/*追加指定ここまで*/