@charset "utf-8";


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");


/*リセット*/
.contents dd {margin: 0;}

/*画像の設定*/
.contents img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*他*/
input {font-size: 1rem;}
section + section {
	margin-top: 3rem;
}

/* contents全体 */
.contents {
	width: 805px;
	background-color: #fff;
	padding: 0.3rem 0 1.5rem;		/* 上 左右 下 */
	margin:2rem auto 2rem;  /* 上 左右 下 */
	border-radius: 2px;		/*角を丸くする指定*/
	border: 1px solid #555;
	
}

.contents_sub {
	width: 780px;
}

.contents p{
	margin: 0 1rem;
	color: #333;
	font-weight:bold;
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
.contents a {
	color: #333;		/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
.contents a:hover, .infolist a:hover span:hover {
	opacity: 0.8;	/*色を80%だけ出す*/
	color: #006699;	/*文字色*/
}

/*h2タグ
---------------------------------------------------------------------------*/
/*h2タグ全体*/
.contents h2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 0.5rem;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	font-size: 1.2rem;		/*文字サイズ*/
	position: relative;		/*ulineを配置する為に必要な指定*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	border-bottom: 2px solid #ddd;	/*薄い色の線の幅、線種、色*/
}

/*アクセントラインの設定*/
.contents h2 .uline {
	display: inline-block;position: relative;
	padding: 10px 1rem;	/*h2内の余白。上下、左右への順番。*/
	bottom: -2px;		/*濃い線を薄い線に重ねる為の指定。枠線の幅と合わせます。*/
	border-bottom: 2px solid #006699;	/*濃い色の線の幅、線種、色*/
}

/*右側の装飾文字の設定*/
.contents h2 .small {
	font-size: 0.6em;
	opacity: 0.7;
	margin-right: 1rem;
}

/*トップページ「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
.new {
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	line-height: 2;		/*行間*/
	margin: 0;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	padding: 0 2rem;	/*上下、左右へのボックス内の余白*/
	border-radius: 2px;		/*角を丸くする指定*/
}

/*日付(dt)、記事(dd)共通設定*/
.new dt,
.new dd {
	padding: 0.7em 0;		/*上下、左右へのボックス内の余白*/
	border-bottom: 1px solid #ccc;
}

/*日付(dt)設定*/
.new dt {
	width: 14em;	/*幅。14文字(em)分。アイコン分も含んだ幅にします。*/
	display: flex;	/*flexボックスを使う指定*/
	justify-content: space-between;	/*日付とアイコンをそれぞれ端に寄せる*/
}

/*日付の横のマーク（共通設定）*/
.new dt span {
	display: inline-block;	/*表示させる*/
	width: 7em;				/*幅。7文字(em)分。*/
	background: #fff;		/*背景色*/
	border: 0.5px solid #777;
	color: #333;			/*文字色*/
	font-size: 0.85em;		/*文字サイズを80%に。*/
	text-align: center;		/*文字をセンタリング*/
	margin-right: 1em;		/*アイコンの右側に空けるスペース*/
	align-self: flex-start;	/*高さを間延びさせない指定*/
	line-height: 1.8;		/*行間を少し狭く*/
	position: relative;top: 0.2em;	/*上下の配置バランスの微調整*/
	border-radius: 2px;		/*角を丸くする指定*/
}

/*icon-bg1設定。サンプルテンプレートでは「●●●重要」と書いてあるマーク*/
.new dt span.icon-bg1 {
	background: #49bbfe;	/*背景色*/
}

/*icon-bg2設定。サンプルテンプレートでは「●●●サービス」と書いてあるマーク*/
.new dt span.icon-bg2 {
	background: #555;	/*背景色*/
}

/*記事(dd)設定*/
.new dd {
	width: calc(100% - 14em);	/*「14em」は上の「.new dt」のwidthの値です。*/
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* お知らせ一覧 */
.infolist{
	display: flex;
	justify-content: flex-end;
	color: #777;
	margin: 10px 20px 5px;		/* 上 左右 下 */
	text-decoration: none;
	padding-right: 10px;
}

.infolist a::after{
	content: url(./images/svg/arrow_right_alt_24dp_1F1F1F_FILL0_wght200_GRAD0_opsz24.svg);
	  content: "";
	  background-color: #777;
	  display: inline-block;
	  height: 1.5rem;
	  width: 1.5rem;
	  -webkit-mask: url("./images/svg/arrow_right_alt_24dp_1F1F1F_FILL0_wght200_GRAD0_opsz24.svg");
	  mask: url("./images/svg/arrow_right_alt_24dp_1F1F1F_FILL0_wght200_GRAD0_opsz24.svg");
	  -webkit-mask-size: 100%;
	  mask-size: 100%;
	  vertical-align: middle;
}

.underline{
	text-decoration: underline;
	text-underline-offset: 2.5px;
	color: #777;
}


/*個別「お知らせ」ブロック
---------------------------------------------------------------------------*/
#info_title{
	margin: 0;
	padding: 0.6em 0.8em;
}

/* 
#info_image{
	display: block;
	margin: 10px auto;
}

#info_date{
	text-align: right;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 0;
	padding-right: 1rem;
}

#info_contents{
	padding: 1.5rem 1rem;
} */


/* 前へ戻るボタン */
.page_back{
	width: 300px;
	overflow: hidden;
	margin: 3rem auto;  
}

.page_back li{
	width: 300px;
}

.page_back a{
	background-color: #1a2d80;
	padding: 9px 0;
	display: block;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border-bottom: none;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.page_back a:hover{
	background-color: #f60;
}


/*ローディング画面
---------------------------------------------------------------------------*/
/* 既存コンテンツに重ねるためのオーバーレイ設定 */
.loading {
    position: absolute;           /* 親要素内で絶対配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,1); /* 半透明の背景で下の内容を隠す */
    z-index: 999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* ローディングバー */
.loading div {
    width: 300px;
    height: 13px;
    border-radius: 3px;
    background-color: #eeeeee;
    background-image: linear-gradient(to right, #eeeeee 5%, #dedede 15%, #eeeeee 30%);
    animation: anim-loading 1.5s linear infinite;
}

/* ローディング画面を非表示にする */
.loading.loaded {
  /*0.5秒かけてopacityを0にする*/
  opacity: 0;
  visibility: hidden;
}

/* ローディングバーのアニメーション */
@keyframes anim-loading {
    from {
        background-position-x: -300px;
    }
    to {
        background-position-x: 300px;
    }
}