/* ===========================================================================
   緊急告知（重要なお知らせ枠）
   ---------------------------------------------------------------------------
   大会期間中の緊急告知で使う枠囲みのスタイル。
   読み込みは告知を出す可能性があるページだけ（トップ／アクセス）。
   確認用: /anaopen/_kinkyu_preview/
   =========================================================================== */

/*==============================================
重要なお知らせ（枠囲み告知／トップ・下層共通）
==============================================*/
.notice-alert {
	max-width: 952px;
	margin: 6rem auto 3rem;
	padding: 0 15px;
}

.notice-alert__inner {
	position: relative;
	border: 10px solid #0a3190;
	border-radius: 35px;
	background-color: #fff;
	padding: 50px 68px 35px;
}

/* ラベル：白地の左端・上端から10pxに乗せる */
.notice-alert__label {
	position: absolute;
	top: 10px;
	left: 0;
	margin: 0;
	padding: 7px 12px;
	background-color: #0a3190;
	color: #fff;
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.3;
	white-space: nowrap;
}

.notice-alert__ttl {
	margin: 0 0 18px;
	color: #000;
	font-size: 3.0rem;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

/* reset.css が span に font-weight:400、top.css が @media(max-width:768px) の h2 span に
   font-size:1.6rem を直接指定しているため、inherit で見出し本体に揃える */
.notice-alert__marker {
	background: linear-gradient(transparent 75%, #fffc00 75%);
	font-size: inherit;
	font-weight: inherit;
}

/* 下層ページ（#sub 配下）対策
   common.css の #sub h2（詳細度 1,0,1）と #sub h2 span（1,0,2）が
   .notice-alert__ttl / .notice-alert__marker（ともに 0,1,0）に勝ってしまい、
   マーカー部分だけ青（#0b308e）・2.4rem になる。
   !important は使わず #sub とブロック名を足して詳細度を上げる（1,2,0）。
   値を inherit にしているので見出し本体に追従し、SP のサイズ指定
   （.notice-alert__ttl の 2.0 / 1.8 / 1.6rem）もそのまま効く＝PCの値は持ち込まれない。 */
#sub .notice-alert .notice-alert__ttl {
	margin: 0 0 18px;
}

#sub .notice-alert .notice-alert__marker {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.notice-alert__body {
	padding-top: 34px;
	border-top: 1px solid #0a3190;
}

.notice-alert__txt {
	margin: 0;
	color: #000;
	font-size: 1.6rem;
	line-height: 1.875;
	letter-spacing: 0.02em;
	text-align: justify;
}

.notice-alert__em {
	color: #0a3190;
	font-weight: bold;
}

.notice-alert__action {
	margin: 35px 0 0;
	text-align: center;
}

/* reset.css の a:active,a:link,a:visited（詳細度0,1,1）が .notice-alert__btn（0,1,0）に
   勝ってしまい緑が効かないため、要素セレクタを足して詳細度を上げる */
.notice-alert a.notice-alert__btn {
	color: #005128;
}

.notice-alert__btn {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 500px;
	margin: 0 auto;
	padding: 7px 45px 7px 10px;
	border: 2px solid #005128;
	border-radius: 100px;
	color: #005128;
	text-decoration: none;
}

.notice-alert__btn-icon {
	flex-shrink: 0;
	width: 70px;
	height: 70px;
}

.notice-alert__btn-txt {
	flex: 1;
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}

.notice-alert__btn-sub {
	display: block;
	font-size: 1.6rem;
	font-weight: bold;
}

/* 既存の a i（青い矢印）をこのボタン用に緑・大きめへ */
.notice-alert__btn i {
	width: 10px;
	height: 10px;
	border-width: 3px;
	border-color: #005128;
	right: 28px;
	margin-top: -6px;
}

/* オレンジ版：クラスを足すだけで青→オレンジに変わる。ボタンは緑のまま（デザイン指定） */
.notice-alert--orange .notice-alert__inner {
	border-color: #d44001;
}

.notice-alert--orange .notice-alert__label {
	background-color: #d44001;
}

.notice-alert--orange .notice-alert__body {
	border-top-color: #d44001;
}

.notice-alert--orange .notice-alert__em {
	color: #d44001;
}

@media (max-width:768px) {
	.notice-alert {
		margin: 3rem auto;
		padding: 0 10px;
	}

	.notice-alert__inner {
		border-width: 5px;
		border-radius: 15px;
		padding: 40px 20px 25px;
	}

	.notice-alert__label {
		top: 8px;
		padding: 5px 10px;
		font-size: 1.4rem;
	}

	.notice-alert__ttl {
		margin-bottom: 12px;
		font-size: 2.0rem;
	}

	/* PC用に上げた詳細度（1,2,0）をSPでも同じ詳細度で上書きする。
	   これが無いと上の margin-bottom:18px がSPまで残る */
	#sub .notice-alert .notice-alert__ttl {
		margin-bottom: 12px;
	}

	.notice-alert__body {
		padding-top: 18px;
	}

	.notice-alert__txt {
		font-size: 1.6rem;
		line-height: 1.8;
		text-align: left;
	}

	.notice-alert__action {
		margin-top: 20px;
	}

	.notice-alert__btn {
		padding: 6px 28px 6px 8px;
	}

	.notice-alert__btn-icon {
		width: 46px;
		height: 46px;
	}

	.notice-alert__btn-txt {
		font-size: 1.6rem;
	}

	.notice-alert__btn-sub {
		font-size: 1.2rem;
	}

	.notice-alert__btn i {
		width: 8px;
		height: 8px;
		border-width: 2px;
		right: 14px;
		margin-top: -5px;
	}
}

/* 見出しを1行に収めるための段階的な縮小（「…について」の「て」だけが折り返すのを防ぐ） */
@media (max-width:420px) {
	.notice-alert__ttl {
		font-size: 1.8rem;
	}
}

@media (max-width:360px) {
	.notice-alert__inner {
		padding: 36px 12px 20px;
	}

	.notice-alert__ttl {
		font-size: 1.6rem;
	}

	.notice-alert__btn-txt {
		font-size: 1.5rem;
	}
}