@charset "utf-8";

/*お知らせブロック
---------------------------------------------------------------------------*/
.new-parts1 {
	margin-left: 1rem;	/*左に１文字分のスペース*/
	margin-right: 1rem;	/*右に１文字分のスペース*/
}

/*記事の下に空ける余白*/
.new-parts1 dd {
	padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new-parts1 dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0 1rem;		/*上下、左右へのブロック内の余白*/
	width: 6rem;			/*幅。６文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: #eee;		/*背景色*/
	color:#777;				/*文字色*/
}

/*icon-bg1-parts。サンプルテンプレートでは「●●●重要」と書いてあるマーク*/
.new-parts1 .icon-bg1-parts {
	background: #cd0000;	/*背景色*/
	color: #fff;				/*文字色*/
}

/*icon-bg2-parts。サンプルテンプレートでは「●●●サービス」と書いてあるマーク*/
.new-parts1 .icon-bg2-parts {
	background: #006acd;	/*背景色*/
	color: #fff;				/*文字色*/
}

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

	/*ブロック全体*/
	.new-parts1 {
		display: grid;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

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












/*h2タグ
---------------------------------------------------------------------------*/
#contents h2.titleset1-parts {
	font-size: 1.3rem;		/*文字サイズ。bodyで設定しているfont-sizeに対して1.3倍。*/
	padding: 0.4rem 1rem;	/*h2内の余白。上下、左右への順番。*/
	border-radius: 3px;		/*角を少しだけ丸くする指定。不要ならこの１行を削除します。*/
	background: #eee;		/*背景色*/
	color: #555;			/*文字色*/
}

/*左のアクセントラインの設定。不要ならブロックごと削除して下さい。*/
#contents h2.titleset1-parts::before {
	content: "";
	border-left: 0.3rem solid #999;		/*テキスト左側のアクセントラインの幅、線種、色*/
	padding-right: 1rem;				/*アクセントラインと、テキストとの間の余白*/
}


/*h3タグ
---------------------------------------------------------------------------*/
#contents h3.titleset1-parts {
	font-size: 1.2rem;		/*文字サイズ。bodyで設定しているfont-sizeに対して1.2倍。*/
	padding: 0.4rem 1rem;	/*h2内の余白。上下、左右への順番。*/
	border-radius: 3px;		/*角を少しだけ丸くする指定。不要ならこの１行を削除します。*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

/*左のアクセントラインの設定。不要ならブロックごと削除して下さい。*/
#contents h3.titleset1-parts::before {
	content: "";
	border-left: 0.3rem solid #999;		/*テキスト左側のアクセントラインの幅、線種、色*/
	padding-right: 1rem;				/*アクセントラインと、テキストとの間の余白*/
}










/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2-parts caption {
	font-weight: bold;		/*太字に*/
	padding: 0.2rem 1rem;	/*ボックス内の余白*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
	background: #aaa;		/*背景色*/
	color: #fff;			/*文字色*/
}

/*テーブルブロック設定*/
.ta2-parts {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;		/*テーブルの下に空けるスペース。２文字分。*/
	background: #fff;		/*テーブル全体の背景色*/
	color: #555;			/*テーブル全体の文字色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2-parts th, .ta2-parts td {
	padding: 1rem;		/*ボックス内の余白*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色。*/
}

/*th（左側）のみの設定*/
.ta2-parts th {
	width: 20%;			/*幅*/
	text-align: left;	/*左よせにする*/
	background: #eee;	/*背景色*/
}






/*Masonry
---------------------------------------------------------------------------*/
/*サムネを囲んでいるブロック全体*/
.masonry-grid {
  animation: opa1 0.2s 0.4s both;  /*0.4秒待機後、0.2秒かけてフェードイン*/
}

/* カラム幅：PC 4列 */
.grid-sizer,
.grid-item {
  width: calc(25% - 16px);
}

.grid-item {
  margin-bottom: 16px;
}

/* レスポンシブ：1000px 未満で 3列 */
@media (max-width: 1000px) {
  .grid-sizer,
  .grid-item {
    width: calc(33.333% - 16px);
  }
}

/* レスポンシブ：500px 未満で 2列 */
@media (max-width: 500px) {
  .grid-sizer,
  .grid-item {
    width: calc(50% - 16px);
  }
}

/* 中身共通 */
.grid-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.grid-item img,
.grid-item video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 画像・動画に軽いホバー演出 */
.grid-item img,
.media-wrapper {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.grid-item a:hover img,
.grid-item a:hover .media-wrapper {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 動画サムネ用ラッパー */
.media-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* サムネ動画 */
.thumb-video {
  display: block;
  width: 100%;
  height: auto;
}

/* 「?」アイコン */
.video-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #ff0000;  /*背景色*/
  color: #fff;  /*文字色*/
  font-size: 12px;  /*アイコンのサイズ*/
  width: 28px;  /*アイコンの幅*/
  line-height: 28px;  /*高さ*/
  text-align: center;
  border-radius: 100px;  /*円形にする*/
  pointer-events: none;
}