@charset "UTF-8";

.areaMain {
	overflow: hidden;
}

.footerMenu {
	height: 65px;
	border-top: solid 1px #ccc;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: rgb(255, 255, 255, 0.7);
	font-size: 0.65rem;
	backdrop-filter: blur(5px);
	padding: 8px 50px 0 50px;
}

.mainScrollHead {
	position: fixed;
	top: 0;
	height: 16px;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.2);
}

/* 画面タイトルエリア */
.topHeadArea {
	position: relative;
	height: 70px;
}

.topHeadArea div:empty {
    width: 24px;
}

.topHeadArea h1 {
	text-align: center;
	font-size: 1.15rem;
	position: relative;
	top: 3px;
	margin: 0;
}

.topBtnAreaFloat {
	position: absolute;
	width: 100%;
	padding-bottom: 15px;
}

/* 画面最下部調整用（フッターメニューでコンテンツを隠さない） */
.bottomPadding {
	padding-bottom: 80px;
}

/* 画面最下部調整用（フッターメニューなし、かつ、最下部ボタンなしの場合の余白） */
/* 最下部ボタンは.btnAreaで調整 */
.bottomPaddingHideMenu {
	padding-bottom: 30px;
}

/* メッセージのみの画面 */
.areaNotexistMsg {
	height: 60vh;
}

/* ダイアログ */
.modalDialogBody p:last-child {
	margin-bottom: 0;
}

/* ダイアログ（トースト） */
.modalToast .modalToastContent {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.modalToast .modal-content {
	/* border-imageにborder-radiusが使えないので疑似的に */
	background: linear-gradient(to right, #89f7fe, #66a6ff);
	box-shadow: 0 0 20px rgba(141, 193, 255, 0.7);
	border-radius: 16px;
	padding: 2px;
}

.modalToast .modalContentInner {
	border-radius: 16px;
	background: #fff;
	width: 160px;
	/* min-height: 168px; */
}

/* リアクションアイコン以外は黒 */
.modalToast .modal-body svg:not([class^="svg-icon-reaction-"]) path {
	fill: #000;
}

.modalToast .modal-body p {
	font-weight: 700;
	white-space: pre-wrap;
	margin-bottom: 0.5rem;
}

.modalToast .modal-body p:last-child {
	margin-bottom: 0;
}

.modalToast .modal-body svg.svgFollow path {
	fill: none;
	stroke: #000;
}

.modalToast .modal-body svg.svgBookmark path {
	fill: none;
	stroke: #000;
}

.modal-dialog--extend .modal-content {
	padding-bottom:30px;
}

.modal-dialog--extend .modal-content .modalHeadArea {
	padding: 20px 0 20px 0;

}

/* ダイアログ（メッセージあり） */
.modalMsgPopup .modal-content {
	margin: 0 24px;
}

.modalMsgPopup .modal-content .container section {
	margin: 48px 0 24px 0;
}

.modalMsgPopup .modal-content .modalMsgPopupImg {
	margin-bottom: 24px;
}

.modalMsgPopup .modal-content .modalMsgPopupImg img {
	width: 160px;
}

.modalMsgPopup .modal-content .modalMsgPopupMainText {
	font-weight: bold;
}

.modalMsgPopup .modal-content .modalMsgPopupSubText {
	color: var(--text-color-secondary);
	margin-bottom: 0.6rem;
	white-space: pre-wrap;
	font-size: var(--font-size-m)
}