.btn-purple {
  color: #fff;
  background-color: #6f42c1;
  border-color: #6f42c1;   
}

.btn-purple:hover {
  color: #fff;
  background-color: #612FBB;
  border-color: #612FBB;
}
.btn-check:focus + .btn-purple, .btn-purple:focus {
  color: #fff;
  background-color: #612FBB;
  border-color: #612FBB;
  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
.btn-check:checked + .btn-purple, .btn-purple:active + .btn-purple, .btn-purple:active, .btn-purple.active, .show > .btn-purple.dropdown-toggle {
  color: #fff;
  background-color: #612FBB;
  border-color: #612FBB;
}
.btn-check:checked + .btn-purple:focus, .btn-purple:active + .btn-purple:focus, .btn-purple:active:focus, .btn-purple.active:focus, .show > .btn-purple.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
.btn-purple:disabled, .btn-purple.disabled {
  color: #fff;
  background-color: #6f42c1;
  border-color: #6f42c1;
}

.aspect-ratio-block {
  background: #ccc;
  aspect-ratio: 5 / 3;
}


.btn-gray {
  color: #fff;
  background-color: #808080;
  border-color: #808080;   
}

.btn-gray:hover {
  color: #fff;
  background-color: #777777;
  border-color: #777777;
}
.btn-check:focus + .btn-gray, .btn-gray:focus {
  color: #fff;
  background-color: #777777;
  border-color: #777777;
  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
.btn-check:checked + .btn-gray, .btn-gray:active + .btn-gray, .btn-gray:active, .btn-gray.active, .show > .btn-gray.dropdown-toggle {
  color: #fff;
  background-color: #777777;
  border-color: #777777;
}
.btn-check:checked + .btn-gray:focus, .btn-gray:active + .btn-gray:focus, .btn-gray:active:focus, .btn-gray.active:focus, .show > .btn-gray.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
.btn-gray:disabled, .btn-gray.disabled {
  color: #fff;
  background-color: #808080;
  border-color: #808080;
}

.aspect-ratio-block {
  background: #ccc;
  aspect-ratio: 5 / 3;
}


/*支部事務局
---------------------------------------------------------------------------*/
.shibu {
	padding: 0 5px;	/*上下、左右へのボックス内の余白*/
}

/*質問*/
.shibu dt {
	border-radius: 10px;	/*枠を角丸にする指定*/
	margin-bottom: 20px;	/*下に空けるスペース*/
	background: linear-gradient(#fff, #f7f7f7);	/*背景グラデーション*/
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態の事。*/
	text-indent: -2em;				/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;		/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.shibu dt::before {
    font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f1ad";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #13a7d8;			/*アイコンの色*/
	padding-right: 1em;		/*アイコンとテキストの間の余白*/
}

/*回答*/
.shibu dd {
	padding: 5px 1em 30px 3em;		/*ボックス内の余白**/
}


/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/

/*bg1設定。サンプルテンプレートでは「スタッフ」と書いてあるマーク*/
.icon-staff {
    display: inline-block;	/*表示させる*/
	width: 6em;				/*幅。6文字(em)分。*/
	color: #fff;			/*文字色*/
	font-size: 0.8em;		/*文字サイズを90%に。*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 3px;		/*角を少しだけ丸くする*/
	margin-right: 1em;	/*アイコンの右側に空けるスペース*/
    vertical-align: top;/*上下の配置バランスの微調整*/
	background: #f32218;	/*背景色*/
}
    
/*bg2設定。サンプルテンプレートでは「一般」と書いてあるマーク*/
.icon-common {
        display: inline-block;	/*表示させる*/
	width: 6em;				/*幅。6文字(em)分。*/
	color: #fff;			/*文字色*/
	font-size: 0.8em;		/*文字サイズを90%に。*/
	text-align: center;		/*文字をセンタリング*/
	border-radius: 3px;		/*角を少しだけ丸くする*/
	margin-right: 1em;	/*アイコンの右側に空けるスペース*/
    vertical-align: top;/*上下の配置バランスの微調整*/
	background: #00A60B;	/*背景色*/
}


span.del {
  text-decoration-line: line-through;
  text-decoration-style:solid;
  text-decoration-color: red;
}


@page {
    size: A4 portrait;
    margin: 0mm;
}

.page{
	width: 210mm;
	height: 297mm;
	box-sizing: border-box;
	padding: 20mm;
}

.page{
	page-break-after: always;
}

.page:last-child{
	page-break-after: auto;
}

@media print{
	.no_print{
		display: none;
	}
}