@charset "UTF-8";
/* CSS Document */
/*ベース共通設定start*/
html {
	font-size: 62.5%; /*文字標準*/
	font-weight: 400;
}
a {
	text-decoration: none; /*リンクデコレーションリセット*/
	color: initial;
}
* {
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 960px) {
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
}
@media screen and (min-width: 961px) {
	.pc {
		display: block !important;
	}
	.sp {
		display: none !important;
	}
}
span {
	display: inline-block;
}
p {
	line-height: 1.6;
}

.notice-page-container .notice-sub-title.txt-important {
	color: red;
}
/*ベース共通設定end*/
/* ======================================================
	      1. Concrete5 テーマ干渉対策リセットCSS
	      ====================================================== */
.notice-page-container,
.notice-page-container * {
	box-sizing: border-box !important;
}

.notice-page-container h1,
.notice-page-container h2,
.notice-page-container h3,
.notice-page-container p,
.notice-page-container ul,
.notice-page-container ol,
.notice-page-container li,
.notice-page-container a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	font-weight: normal;
	text-align: left;
	list-style: none;
	background: transparent;
	text-decoration: none;
}

/* ======================================================
	      2. スマホファースト（デフォルト / スマートフォン表示）
	      ====================================================== */
.notice-page-container {
	max-width: 740px !important;
	margin: 0 auto !important;
	padding: 24px 16px !important; /* SP時の余白 */
	background: #ffffff !important;
	color: #000000 !important;
	line-height: 1.7 !important;
	letter-spacing: 0.03em !important;
	font-family: 'MintGrotesk-V1.2 Medium', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif !important;
}

/* 汎用・装飾用ユーティリティクラス（インラインスタイルを統合） */
.notice-page-container .notice-text-center {
	text-align: center !important;
}
.notice-page-container .notice-bold {
	font-weight: bold !important;
}
.notice-page-container .notice-dark-text {
	color: #111111 !important;
	text-align: center;
}
.notice-page-container .notice-highlight-blue {
	color: #004ca0 !important;
	vertical-align: baseline;
	font-weight: 600;
}
.notice-page-container .notice-highlight {
	color: #d9534f !important;
	vertical-align: baseline;
	font-weight: 600;
}
.notice-page-container .notice-mb-none {
	margin-bottom: 0 !important;
}
.notice-page-container .notice-mb-sm {
	margin-bottom: 8px !important;
}
.notice-page-container .notice-mb-lg {
	margin-bottom: 24px !important;
}
.notice-page-container .notice-lh-compact {
	line-height: 1.3 !important;
}

/* 各種見出し・フォント設定 (SP基本値) */
.notice-page-container .notice-main-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: #111111;
	padding-bottom: 8px;
	margin-bottom: 20px;
	text-align: center;
}

.notice-page-container .notice-sub-title {
	font-size: 16px;
	font-weight: 700;
	color: #111111;
	margin-bottom: 18px;
	line-height: 1.4;
	text-align: left;
}

.notice-page-container .notice-text {
	font-size: 14px;
	margin-bottom: 12px;
	line-height: 1.7;
	color: #000000;
}

.notice-page-container .notice-mini-heading {
	font-size: 16px;
	font-weight: 700;
	color: #111111;
	margin-top: 24px;
	margin-bottom: 14px;
	padding-left: 12px;
	border-left: 4px solid #111111;
}

.notice-page-container .notice-mini-heading2 {
	font-size: 15px;
	font-weight: 700;
	color: #d9534f;
	margin-top: 24px;
	margin-bottom: 12px;
}

.notice-page-container .notice-mini-note {
	font-size: 13px;
	color: #666666;
	margin-top: 8px;
	margin-bottom: 12px;
	line-height: 1.5;
}

/* 区切り線・余白 */
.notice-page-container .notice-divider {
	border: none;
	border-top: 1px solid #dddddd;
	margin: 18px 0;
	height: 1px;
	display: block;
}
@media (min-width: 601px) {
	.notice-page-container .notice-divider {
		margin: 32px 0;
	}
}
.notice-page-container .shortLine {
	width: 50%;
	border: none;
	border-top: 1px solid #999999;
	margin: 20px 0;
	height: 1px;
	display: block;
}

.notice-page-container .notice-block {
	/* margin-bottom: 40px; */
	margin-bottom: 60px;
}

/* SP時の改行制御 */
.notice-page-container br.sp-br {
	display: inline-block;
}
.notice-page-container br.pc-br {
	display: none;
}

/* アイコン要素 */
.notice-page-container #noticeAlertIcon {
	width: 21px !important;
	height: 18px !important;
	display: inline-block !important;
	vertical-align: middle !important;
	margin-right: 6px;
}

/* リスト要素 */
.notice-page-container .notice-step-list {
	margin: 16px 0;
	padding-left: 0;
	counter-reset: notice-counter;
}

.notice-page-container .notice-step-list li {
	font-size: 13px;
	margin-bottom: 8px;
	padding-left: 24px;
	position: relative;
	line-height: 1.6;
	color: #000000;
}

.notice-page-container .notice-step-list li::before {
	counter-increment: notice-counter;
	content: counter(notice-counter) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: bold;
	color: #111111;
}

.notice-page-container .notice-alert-list {
	margin: 16px 0;
	padding-left: 0;
}

.notice-page-container .notice-alert-list li {
	font-size: 13px;
	color: #555555;
	margin-bottom: 8px;
	padding-left: 16px;
	position: relative;
	line-height: 1.6;
}

.notice-page-container .notice-alert-list li::before {
	content: '•';
	position: absolute;
	left: 4px;
	top: 0;
	font-weight: bold;
}

/* リンクボックス */
.notice-page-container .notice-link-box {
	background: #f8f9fa;
	padding: 20px;
	border: 1px solid #eeeeee;
	border-radius: 4px;
	margin-top: 16px;
}

.notice-page-container .notice-arrow-link {
	color: #111111;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	transition: opacity 0.2s;
	display: inline-block;
}

.notice-page-container .notice-arrow-link:hover {
	opacity: 0.7;
}

/* アップデート予定（Flexboxエリア） */
.update-flex {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: stretch !important; /* すべてのカラムの高さを一番高いものに自動統一 */
	margin: 0 auto 5rem;
	border: 1px solid #dddddd;
}

.update-flex .update-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start !important;
	align-items: center;
	padding: 2rem 0.5rem; /* 左右に少し余白をつけて文字の詰まりを防止 */
	flex: 1 1 0; /* 3つのカラム幅を均等に保持 */
}

.update-flex .update-content-border {
	border-left: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
}

/* 画像エリアの高さを固定化し、画像の下端ラインを完璧に揃える */
.update-flex .img-box {
	display: flex;
	width: 100%;
	max-width: 80px;
	height: 80px; /* 固定高さを指定して画像の開始位置・終了位置を統一 */
	justify-content: center;
	align-items: center;
	margin-bottom: 1rem;
}

.update-flex .update-content img {
	max-width: 66%;
	max-height: 66%;
	object-fit: contain;
}

@media (min-width: 601px) {
	.update-flex .update-content img {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
	}
}

.update-flex .update-content p {
	text-align: center;
	font-size: 13px;
}

/* タイトルエリア：display: flex を除去し、gridで安全に垂直中央配置 */
.update-title-box {
	font-weight: bold !important;
	margin: auto !important;
	text-align: center !important;
	min-height: 6rem;
	display: block !important; /* flex/gridを解除して1つの繋がった文章として表示 */
	width: 100%;
	line-height: 1.4 !important;
}

/* 2. PC向け (601px以上)：1行に収まるPCサイズのみ、上下中央揃えを効かせる */
@media (min-width: 601px) {
	.update-title-box {
		min-height: 3rem;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
}

.add-ps-stage {
	margin-bottom: 5rem;
	cursor: zoom-in;
	position: relative;
}

.add-ps-stage img.zoomable-img {
	width: 100%;
	transition: opacity 0.2s;
}

.add-ps-stage img.zoomable-img:hover {
	opacity: 0.85;
}

/* ======================================================
	      3. モーダル ダイアログ スタイル
	      ====================================================== */
.ps-custom-modal {
	display: none;
	position: fixed;
	z-index: 999999 !important;
	left: 0;
	top: 0;
	width: 100% !important;
	height: 100% !important;
	background-color: rgba(0, 0, 0, 0.85) !important;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
	pointer-events: auto;
}

.ps-custom-modal.is-show {
	display: flex !important;
	opacity: 1 !important;
}

.ps-custom-modal-content-wrapper {
	position: relative;
	max-width: 95% !important;
	max-height: 85% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.ps-custom-modal-content {
	max-width: 100% !important;
	max-height: 85vh !important;
	object-fit: contain !important;
	border-radius: 4px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
	transform: scale(0.95);
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.ps-custom-modal.is-show .ps-custom-modal-content {
	transform: scale(1) !important;
}

.ps-custom-modal-close {
	position: absolute !important;
	top: 16px !important;
	right: 20px !important;
	color: #ffffff !important;
	font-size: 38px !important;
	font-weight: 300 !important;
	cursor: pointer !important;
	transition:
		color 0.2s,
		transform 0.2s !important;
	line-height: 1 !important;
	z-index: 1000000 !important;
	user-select: none !important;
}

.ps-custom-modal-close:hover {
	color: #cccccc !important;
	transform: scale(1.1);
}

/* ======================================================
	      4. PC向けブレイクポイント (min-width: 601px)
	         ※スマホの基本設定からの差分のみ上書き
	      ====================================================== */
@media (min-width: 601px) {
	.notice-page-container {
		padding: 40px 20px !important;
	}

	.notice-page-container .notice-main-title {
		font-size: 26px;
		margin-bottom: 0;
	}

	.notice-page-container .notice-sub-title {
		font-size: 19px;
	}

	.notice-page-container .notice-text {
		font-size: 15px;
	}

	.notice-page-container .notice-mini-heading2 {
		font-size: 17px;
	}

	.notice-page-container .notice-arrow-link {
		font-size: 15px;
	}

	.notice-page-container .notice-alert-list li,
	.notice-page-container .notice-step-list li {
		font-size: 14px;
		margin-bottom: 10px;
	}

	.notice-page-container .shortLine {
		width: 30%;
	}

	.notice-page-container br.sp-br {
		display: none;
	}

	.notice-page-container br.pc-br {
		display: inline-block;
	}

	.update-flex .update-content p {
		font-size: 14px;
	}

	.ps-custom-modal-close {
		top: 20px !important;
		right: 24px !important;
		font-size: 44px !important;
	}

	.ps-custom-modal-content-wrapper {
		max-width: 92% !important;
	}
}