@charset "utf-8";

/*======================================================
 * project.css (SP)
 *
 * 著作権：Copyright Japan System Techniques Co., Ltd. All Rights Reserved.
 * 会社名：日本システム技術株式会社
======================================================*/
/*----------------------------------------------------
card.css
commentarea.css
itemlist.css
listrow.css
steps.css
errorPage.css

userImg.css
buttonArea.css
chart.css
htmlEditor.css
label.css
mobileCalendar.css
searchResults.css
追加アイコン
----------------------------------------------------*/

/*----------------------------------------------------
 * card.css
----------------------------------------------------*/
.ui-card.rx-card {
	background: var(--color-white);
	border: 1px solid var(--color-light-gray);
	border-radius: 8px;
	box-shadow: none;
	color: rgba(0, 0, 0, 0.6);
	padding: 16px 16px 16px 16px;
	width: 100%;
}
.ui-card.rx-card .ui-card-content {
	margin: 0;
	padding: 0;
	position: relative;
}

.ui-card.rx-card .ui-card-content:has(.ui-selectbooleancheckbox.rx-selectbooleancheckbox) {
    display: flex;
}

.ui-card.rx-card .ui-card-body {
	margin: 0;
	padding: 0;
}
.ui-card.rx-card.ui-widget,
.ui-card.rx-card.ui-widget .rx-commandlink {
	font-size: var(--font-size-medium);
	font-weight: var(--weight-base);
}

/*---------------- レイアウト調整 ----------------*/
/*カード下にコマンドリンクがある場合*/
.ui-card.rx-card.rx-cardbottom-link {
	border-radius: 8px 8px 0 0;
}
.ui-card.rx-card.rx-cardbottom-link + .ui-commandlink.rx-commandlink:not(:is(.rx-cardbottom-link)),
.ui-commandlink.rx-commandlink.rx-cardbottom-link:not(:has(+ .ui-commandlink.rx-commandlink.rx-cardbottom-link)) {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.ui-card.rx-card.rx-cardbottom-link + .ui-commandlink.rx-commandlink,
.ui-commandlink.rx-commandlink.rx-cardbottom-link + .ui-commandlink.rx-commandlink.rx-cardbottom-link {
    background: var(--color-white);
    border-color: var(--color-light-gray);
	border-style: solid;
	border-width: 0 1px 1px;
    color: var(--color-text);
    display: block;
    padding: 8px 16px;
    position: relative;
    width: 100%;
    white-space: nowrap;
}
.ui-card.rx-card.rx-cardbottom-link + .ui-commandlink.rx-commandlink::after,
.ui-commandlink.rx-commandlink.rx-cardbottom-link::after {
	right: 8px;
	top: 55%;
}

/*---------------- ステータス配置 ----------------*/
/*表示ステータス（ボーダー上配置）*/
.ui-card.rx-card .rx-card-status1-area {
	display: inline-flex;
	gap: 8px;
	position: absolute;
	top: -24px;
}

/*表示ステータス（ボーダー内配置）*/
.ui-card.rx-card .rx-card-status2 {
	border-radius: 100px;
	border-style: solid;
	border-width: 1px;
	display: inline-flex;
	font-size: 10px;
	height: 18px;
	justify-content: center;
	margin-bottom: 7px;
	padding: 1px 8px;
}
.ui-card.rx-card:has(.rx-card-status2) {
	padding-top: 8px;
}

/*表示ステータス（カード上側配置）*/
.rx-card-status3 {
	align-items: center;
	border-bottom: 1px solid;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	display: flex;
	font-size: var(--font-size-small);
	font-weight: var(--weight-bold);
	justify-content: center;
	left: -16px;
	position: absolute;
	text-align: center;
	top: -32px;
	width: calc(100% + 32px);
}
.ui-card.rx-card:has(.rx-card-status3) {
	padding-top: 32px;
}

/*---------------- タグ ----------------*/
.rx-tag,
.ui-widget.rx-tag {
	align-items: center;
	border-radius: 100px;
	border-style: solid;
	border-width: 1px;
	display: inline-flex;
	font-size: var(--font-size-tag);
	justify-content: center;
	padding: 1px 8px;
	text-align: center;
	word-break: keep-all;
}

/*複数のタグが並んでいる場合*/
.rx-tag-container {
	display: flex;       /* 横並び配置 */
    flex-wrap: wrap;     /* 画面幅に応じて折り返し */
    gap: 8px 4px;        /* 縦の余白 8px、横の余白 4px */
}

/*---------------- ステータス色 ----------------*/
/*背景色 濃い青 テキスト白 承認済 受付済 登録済 テスト受付中など*/
.rx-status-color1 {
	background: var(--color-blue);
	border-color: var(--color-blue);
	color: rgba(255, 255, 255, 0.9);
}

/*背景色 薄い青 テキスト青 申請中 テスト実施中など*/
.rx-status-color2 {
	background: #c8dcff;
	border-color: #c8dcff;
	color: var(--color-blue);
}

/*背景色 灰色 テキスト黒 却下 テスト完了など*/
.rx-status-color3 {
	background: var(--color-light-gray);
	border-color: var(--color-light-gray);
	color: var(--color-text);
}

/*背景色 赤色 テキスト白 差戻し テスト中断中など*/
.rx-status-color4 {
	background: var(--color-red);
	border-color: var(--color-red);
	color: var(--color-white);
}

/*背景色 橙 テキスト白 NEWタグなど*/
.rx-status-color5 {
	background: #DD853B;
	border-color: #DD853B;
	color: var(--color-white);
}

/*背景色 ピンク テキスト白 掲示タグなど*/
.rx-status-color6 {
	background: #EF6586;
	border-color: #EF6586;
	color: var(--color-white);
}

/*背景色 白ピンク テキスト白 講座テストタグなど*/
.rx-status-color7 {
	background: #E59090;
	border-color: #E59090;
	color: var(--color-white);
}

/*背景色 緑 テキスト白 アンケートタグなど*/
.rx-status-color8 {
	background: #559E72;
	border-color: #559E72;
	color: var(--color-white);
}

/*背景色 黄緑 テキスト白 プロジェクト課題タグなど*/
.rx-status-color9 {
	background: #84BB4C;
	border-color: #84BB4C;
	color: var(--color-white);
}

/*背景色 紫 テキスト白 課題タグなど*/
.rx-status-color10 {
	background: #6564C2;
	border-color: #6564C2;
	color: var(--color-white);
}

/*背景色 黄 テキスト白 授業評価回答タグなど*/
.rx-status-color11 {
	background: #D2B933;
	border-color: #D2B933;
	color: var(--color-white);
}

/*背景色 白 テキスト黒 申込不要タグなど*/
.rx-status-color12 {
	background: var(--color-white);
	border-color: var(--color-light-gray);
	color: var(--color-text);
}

/*背景色黒に近い青 テキスト白 結果公開中など*/
.rx-status-color13 {
	background: #164999;
	border-color: #164999;
	color: var(--color-white);
}

/*背景色かなり薄い水色 テキスト青 テスト準備中など*/
.rx-status-color14 {
	background: #dce6f9;
	border-color: #dce6f9;
	color: var(--color-blue);
}

/*背景色濁った水色 テキスト白 再テスト受付中など*/
.rx-status-color15 {
	background: #5784cb;
	border-color: #5784cb;
	color: var(--color-white);
}

/*背景色薄い灰色 テキスト黒 受付終了など*/
.rx-status-color16 {
	background: #cccccc;
	border-color: #cccccc;
	color: #000000e5;
}

/*背景色黒に近い灰色 テキスト白 公開終了など*/
.rx-status-color17 {
	background: #999999;
	border-color: #999999;
	color: var(--color-white);
}

/*背景色水色 テキスト白 テスト、コーステスト、講座コーステストなど*/
.rx-status-color18 {
	background: #5AA2C2;
	border-color: #5AA2C2;
	color: var(--color-white);
}

/*背景色白 テキストグレー */
.rx-status-color19 {
	background: var(--color-white);
	border-color: var(--color-white);
	color: rgba(0, 0, 0, 0.6);
}

/*---------------- カード背景色 ----------------*/
/*赤色*/
:is(.rx-red, .jugyo-error, .jugyoError),
.ui-card.rx-card:is(.rx-red, .jugyo-error, .jugyoError) {
	border: 1px solid #FF3B30;
	background: #FFD8D6;
}
/*黄色*/
:is(.rx-yellow, .jugyo-select, .jugyoSelect),
.ui-card.rx-card:is(.rx-yellow, .jugyo-select, .jugyoSelect){
	border: 1px solid #FD9927;
	background: #fff2d1;
}
/*青色*/
:is(.rx-blue, .jugyo-no-delete, .jugyoNoDelete),
.ui-card.rx-card:is(.rx-blue, .jugyo-no-delete, .jugyoNoDelete) {
	border: 1px solid #1D5EC3;
	background: #E9EFFF;
}
/*灰色*/
:is(.rx-gray, .jugyo-teiin, .jugyoTeiin),
.ui-card.rx-card:is(.rx-gray, .jugyo-teiin, .jugyoTeiin) {
	border: 1px solid #999;
	background: #DDD;
}

:is(.rx-gray, .jugyo-teiin, .jugyoTeiin),
.ui-card.rx-card:is(.rx-gray, .jugyo-teiin, .jugyoTeiin) .rx-tag.rx-status-color3 {
	background: var(--color-gray);
}

/*カード内チェックボックスの色変更*/
/*赤*/
.ui-card.rx-card.rx-checkbox-off:is(.rx-red, .jugyo-error, .jugyoError) .ui-commandlink.rx-commandlink::after,
.ui-card.rx-card.rx-red .ui-selectbooleancheckbox.rx-selectbooleancheckbox.ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-blank::before,
.ui-card.rx-card.rx-red .ui-selectmanycheckbox.rx-selectmanycheckbox .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-blank::before {
    content: url('../../../images/mobile/check_off_red.svg');
}
.ui-card.rx-card.rx-checkbox-on:is(.rx-red, .jugyo-error, .jugyoError) .ui-commandlink.rx-commandlink::after,
.ui-card.rx-card.rx-red .ui-selectbooleancheckbox.rx-selectbooleancheckbox.ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check::before,
.ui-card.rx-card.rx-red .ui-selectmanycheckbox.rx-selectmanycheckbox .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check::before {
	content: url('../../../images/mobile/check_on_red.svg');
}
/*黄色*/
.ui-card.rx-card.rx-checkbox-off:is(.rx-yellow, .jugyo-select, .jugyoSelect) .ui-commandlink.rx-commandlink::after,
.ui-card.rx-card.rx-yellow .ui-selectbooleancheckbox.rx-selectbooleancheckbox.ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-blank::before,
.ui-card.rx-card.rx-yellow .ui-selectmanycheckbox.rx-selectmanycheckbox .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-blank::before {
    content: url('../../../images/mobile/check_off_orange.svg');
}
.ui-card.rx-card.rx-checkbox-on:is(.rx-yellow, .jugyo-select, .jugyoSelect) .ui-commandlink.rx-commandlink::after,
.ui-card.rx-card.rx-yellow .ui-selectbooleancheckbox.rx-selectbooleancheckbox.ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check::before,
.ui-card.rx-card.rx-yellow .ui-selectmanycheckbox.rx-selectmanycheckbox .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check::before {
	content: url('../../../images/mobile/check_on_orange.svg');
}
/*ブルー*/
.ui-card.rx-card:is(.jugyo-normal, .jugyo-normal) .ui-commandlink.rx-commandlink::after,
.ui-card.rx-card.rx-checkbox-on:is(.rx-blue, .jugyo-normal, .jugyoNormal) .ui-commandlink.rx-commandlink::after,
.ui-card.rx-card.rx-blue .ui-selectbooleancheckbox.rx-selectbooleancheckbox.ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-blank::before,
.ui-card.rx-card.rx-blue .ui-selectmanycheckbox.rx-selectmanycheckbox .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-blank::before {
    content: url('../../../images/mobile/check_off.svg');
}
.ui-card.rx-card.rx-checkbox-on:is(.rx-blue, .jugyo-normal, .jugyoNormal) .ui-commandlink.rx-commandlink::after,
.ui-card.rx-card.rx-blue .ui-selectbooleancheckbox.rx-selectbooleancheckbox.ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check::before,
.ui-card.rx-card.rx-blue .ui-selectmanycheckbox.rx-selectmanycheckbox .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check::before {
    content: url('../../../images/mobile/check_on.svg');
}
/*グレー*/
.ui-card.rx-card.rx-gray .ui-selectbooleancheckbox.rx-selectbooleancheckbox.ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-blank::before,
.ui-card.rx-card.rx-gray .ui-selectmanycheckbox.rx-selectmanycheckbox .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-blank::before {
    content: url('../../../images/mobile/check_off_gray.svg');
}
.ui-card.rx-card.rx-gray .ui-selectbooleancheckbox.rx-selectbooleancheckbox.ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check::before,
.ui-card.rx-card.rx-gray .ui-selectmanycheckbox.rx-selectmanycheckbox .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check::before {
	content: url('../../../images/mobile/check_on_gray.svg');
}

.ui-card.rx-card:is(.rx-blue, .jugyo-no-delete, .jugyoNoDelete, .rx-gray, .jugyo-teiin, .jugyoTeiin) .ui-commandlink.rx-commandlink::after,
.ui-card.rx-card .ui-commandlink.rx-commandlink.ui-state-disabled:not(.ui-state-loading)::after {
	content: none;
}

.ui-card.rx-card:is(.rx-blue, .jugyo-no-delete, .jugyoNoDelete, .rx-gray, .jugyo-teiin, .jugyoTeiin) .ui-commandlink.rx-commandlink:not(.ui-state-loading) {
	opacity: 1;
	pointer-events: none;
}

.ui-card.rx-card:is(.rx-red, .rx-yellow, .rx-blue, .rx-gray) .ui-selectbooleancheckbox.rx-selectbooleancheckbox,
.ui-card.rx-card:is(.rx-red, .rx-yellow, .rx-blue, .rx-gray) .ui-selectmanycheckbox.rx-selectmanycheckbox {
	background-color: transparent;
}

.ui-card.rx-card.rx-checkbox-off .rx-commandlink,
.ui-card.rx-card.rx-checkbox-on .rx-commandlink {
	padding-right: 1rem;
}


/*----------------------------------------------------
 * commentarea.css
----------------------------------------------------*/
.rx-commentarea {
	margin-top: 16px;
}

/* ボックス */
.rx-commentarea .box1,
.rx-commentarea .box2 {
	display: flex;
	margin-bottom: 16px;
}
.rx-commentarea .box1 {
	flex-direction: row-reverse;
}



/* 日付 */
.rx-commentarea div:has(>p){
	margin-bottom: 12px;
	text-align: center;
}
.rx-commentarea>div>p {
	align-items: center;
	background-color: var(--color-light-gray);
	border-radius: 100px;
	border: 1px solid var(--color-light-gray);
	color: rgba(0, 0, 0, 0.6);
	display: inline-flex;
	font-size: var(--font-size-tag);
	justify-content: center;
	padding: 1px 8px;
	text-align: center;
}

/*アイコン*/
.rx-commentarea .circle {
	background-color: var(--color-light-gray);
	color: rgba(0, 0, 0, 0.6);
	min-width: 32px;
	height: 32px;
	border-radius:32px;
	text-align: center;
	vertical-align: middle;
	line-height: 32px;
	white-space: nowrap;
}
.rx-commentarea .circle p {
	font-size: var(--font-size-tag);
}

/* フルネーム */
.rx-commentarea .fullName {
	color: rgba(0, 0, 0, 0.6);
	display: block;
	font-size: 8px;
}
/* 吹き出しボックス */
.rx-commentarea .arrowBox {
	border-radius: 10px;
	font-size: var(--font-size-medium);
	min-height: 40px;
	min-width: 12rem;
	padding: 12px;
	position: relative;
}
.rx-commentarea .arrowBox::before {
	position: absolute;
	top: -7px;
}
.rx-commentarea .arrowBox .fr-box {
	word-break: break-word;
}

/* 自分用ボックス設定 */
.rx-commentarea .box1 div:has(>.arrowBox) {
	margin-right: 10px;
}
.rx-commentarea .box1 .arrowBox {
	background: var(--color-blue);
	color: var(--color-white);
}
.rx-commentarea .box1 .arrowBox::before {
	content: url('../../../images/mobile/tail_blue.svg');
	right: -7px;
}
/* 他人用ボックス設定 */
.rx-commentarea .box2 div:has(>.arrowBox) {
	margin-left: 10px;
}
.rx-commentarea .box2 .arrowBox {
	background: white;
}
.rx-commentarea .box2 .arrowBox::before {
	content: url('../../../images/mobile/tail.svg');
	left: -7px;
}
/* 添付ファイルボタン */
.rx-commentarea .box1 .arrowBox .ui-button,
.rx-commentarea .box2 .arrowBox .ui-button {
	border-radius: 100px;
	font-size: var(--font-size-medium);
	gap: 0;
	margin-top: 8px;
	padding: 4px 0;
	width: 100%;
}
.rx-commentarea .box1 .arrowBox .ui-button {
	background-color: var(--color-white);
	border: 1px solid var(--color-blue);
	color: var(--color-blue);
}
.rx-commentarea .box2 .arrowBox .ui-button {
	background-color: var(--color-blue);
	border: 1px solid var(--color-blue);
	color: var(--color-white);
}
.rx-commentarea .ui-button.rx-button .ui-button-icon-left.ui-icon {
	margin-top: 0;
}
.rx-commentarea .ui-button.rx-button .rx-icon-attachment::before,
.rx-commentarea .ui-button.rx-button .rx-icon-attachment-blue::before {
	margin-top: 2px;
	display: block;
}

/* 投稿時刻 */
.rx-commentarea .box1 .appendTimeBox,
.rx-commentarea .box2 .appendTimeBox {
	align-items: flex-end;
	color: rgba(0, 0, 0, 0.6);
	display: flex;
	font-size: 8px;
	margin: 0 4px;
	position: relative;
	white-space: nowrap;
}
/* ×ボタン */
.rx-commentarea .box1 .appendTimeBox .rx-button {
	background-color: transparent;
	border: none;
	gap: 0;
	height: 20px;
	position: absolute;
	top: 0;
	width: 20px;
}
.rx-commentarea .box1 .appendTimeBox .rx-button::before {
	content: url('../../../images/mobile/x-close.svg');
	margin: 4px 0 0 -1px;
}


/*----------------------------------------------------
 * itemlist.css
----------------------------------------------------*/
/* section要素に「class="rx-itemlist"」を設定する */
.rx-itemlist {
	color: rgba(0, 0, 0, 0.6);
	font-size: var(--font-size-medium);
	font-weight: var(--weight-base);
	padding: 0;
	width: 100%;
}
/* タイトル(h1で囲む) */
.rx-itemlist h1 {
	color: var(--color-text);
	display: -webkit-box;
	font-size: var(--font-size-large);
	font-weight: var(--weight-base);
	overflow: hidden;
	padding: 0;
}
/* カード内のタイトルは3行まで表示 */
.rx-card .rx-itemlist h1{
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.rx-itemlist h1:not(:last-child) {
	margin: 0 0 8px 0;
}
.rx-itemlist dl.rx-marginbottom1 {
	margin-bottom: 16px;
}

/* タイトル上の情報 */
.rx-itemlist .rx-itemlist-info {
	color: rgba(0, 0, 0, 0.6);
	font-size: var(--font-size-medium);
	font-weight: 700;
}

.ui-commandlink.rx-commandlink .rx-itemlist {
	padding-right: 10px;
}

/* タイトル上の情報 */
.rx-itemlist .rx-itemlist-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
	margin-top: 4px;
}
.rx-itemlist .rx-itemlist-flex dt {
	width: auto;
}

.rx-itemlist .rx-itemlist-flex dd {
	margin-left: 8px;
}

/*---------- 青字ラベル,黒字データ ----------*/
/* dtの幅は各画面で設定する */
.rx-itemlist dt,
.rx-itemlist dd {
	font-size: var(--font-size-medium);
	font-weight: var(--weight-base);
}
.rx-itemlist dt {
	align-self: start;
	color: var(--color-blue);
	float: left;
	word-break: break-word;
}
.rx-itemlist dd {
	align-self: center;
	display: flex;
}
.rx-itemlist dl {
	display: grid;
	padding: 0;
	grid-template-columns: auto 1fr; /* 2列（dt: 自動幅, dd: 残りの幅） */
}

/*---------- 右側ボタン ----------/*
/*
 ・ボタンが複数の場合はdiv<class="rx-right-button-area">で囲う。
 ・文字の右側にボタンを配置する場合は、
   div<class="rx-right-button-area">をdiv<class="rx-right-button-row">で囲う。
 ボタンの右側に余白が必要な場合はrx-right-button-row-marginを使用
*/
.rx-right-button-row,
.rx-right-button-row-margin {
	display: flex;
	align-items: center;
}
.rx-right-button-area{
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.rx-right-button-row>.rx-right-button-area,
.rx-right-button-row>.ui-button.rx-button:has(.ui-icon) {
	margin: 0 0 0 auto;
}
.rx-right-button-row-margin>.rx-right-button-area,
.rx-right-button-row-margin>.ui-button.rx-button:has(.ui-icon),
.rx-itemlist .rx-right-button-row-margin>.rx-right-button-area,
.rx-itemlist .rx-right-button-row-margin>.ui-button.rx-button:has(.ui-icon) {
	margin: 0 16px 0 auto;
}

.rx-right-button-row:has(+div .rx-fileupload) {
	align-items: baseline;
}
.rx-right-button-row:has(+div .rx-fileupload)>.rx-right-button-area.ui-button.rx-button:has(.ui-icon) {
	margin: 0 0 8px auto;
}
.rx-right-button-row>h1:has(+ .rx-right-button-area) {
	margin: 0;
}
/* タイトル右にある添付ファイルアイコンは上に表示 */
.rx-right-button-row>h1 + .rx-right-button-area,
.rx-right-button-row>div:has(>h1) + .rx-right-button-area {
	align-self: normal;
}
/*---------- グッドアイコン、バッドアイコン配置 ----------/*
/*アイコン付きのテキスト二つを<p class="rx-like-unlike-area">で囲む*/
.rx-like-unlike-area,
.rx-itemlist .rx-like-unlike-area {
	display: flex;
}
.rx-like-unlike-area  .rx-card-icon-unlike,
.rx-itemlist .rx-like-unlike-area  .rx-card-icon-unlike {
	margin-left: 16px;
}
.rx-card-icon-like,
.rx-card-icon-unlike,
.rx-itemlist .rx-card-icon-like,
.rx-itemlist .rx-card-icon-unlike {
	align-items: center;
	color: var(--color-blue);
	display: flex;
}
.rx-like-unlike-area .rx-card-icon-like::before,
.rx-like-unlike-area .rx-card-icon-unlike::before,
.rx-itemlist .rx-like-unlike-area .rx-card-icon-like::before,
.rx-itemlist .rx-like-unlike-area .rx-card-icon-unlike::before {
	margin-right: 3px;
	margin-top: 5px;
}
/*ボタンの場合*/
.rx-like-unlike-buttonarea,
.rx-itemlist .rx-like-unlike-buttonarea {
	display: flex;
	gap: 8px;
}
.rx-like-unlike-buttonarea .ui-button.rx-button:has(.ui-icon),
.rx-itemlist .rx-like-unlike-buttonarea .ui-button.rx-button:has(.ui-icon) {
	background-color: transparent;
	border: none;
	color: var(--color-blue);
	font-size: var(--font-size-medium);
	gap: 0;
	padding: 4px;
}

/*---------- ユーザー状態表示 ----------*/
.rx-itemlist .rx-user-status-area {
	align-items: center;
    border: 1px solid var(--color-light-gray);
	border-radius: 8px;
	display: flex;
	padding: 8px 16px;
	width: 100%;
}
.rx-itemlist .rx-user-status-area>div {
	display: flex;
	gap: 8px;
}
.rx-itemlist .rx-user-status-area .rx-tag {
	margin: 0 0 0 auto;
	white-space: nowrap;
}

/*---------- rating調整 ----------*/

.rx-itemlist .ui-rating {
	transform: scale(0.8);
	display: block;
}
.rx-itemlist dd:has(.ui-rating) {
	height: 21px;
	align-items: center;
	text-indent: -15px;
}

/*---------- アイコン ----------/*
/*カード内のテキストの前にアイコンがある*/
.rx-itemlist dt::before,
.rx-itemlist p::before {
	display: inline-block;
	height: 20px;
	position: relative;
	vertical-align: middle;
	width: 20px;
}
.rx-itemlist p::before {
	margin-right: 3px;
	text-align: end;
}

.rx-itemlist p.rx-card-icon-usercircle,
.rx-itemlist p.rx-card-icon-lesson,
.rx-itemlist p.rx-card-icon-like,
.rx-itemlist p.rx-card-icon-clock {
	padding-left: 19px;
    text-indent: -21px;
}

.rx-itemlist p.rx-icon-pin-blue {
	padding-left: 21px;
	text-indent: -21px;
}
/*ユーザーアイコン*/
.rx-itemlist .rx-card-icon-usercircle::before {
	content: url('../../../images/mobile/user-circle-blue.svg');
	transform: scale(0.8);
}
/*ユーザーアイコン 薄青*/
.rx-itemlist .rx-card-icon-usercircle-lightblue::before {
    content: url('../../../images/mobile/user-circle-light-blue.svg');
	transform: scale(0.8);
}

/*丸で囲まれていないユーザーアイコン*/
.rx-itemlist .rx-card-icon-user-none-circle::before {
	content: url('../../../images/mobile/user-none-circle.svg');
	margin-left: -4px;
}

/*カレンダーアイコン*/
.rx-itemlist .rx-card-icon-calendar::before {
	content: url('../../../images/mobile/calendar.svg');
}

/*書類アイコン*/
.rx-card-icon-lesson::before,
.rx-itemlist .rx-card-icon-lesson::before {
	content: url('../../../images/mobile/lesson.svg');
}
.rx-itemlist .rx-card-icon-lesson::before {
	margin-left: -2px;
}
.rx-button .rx-card-icon-lesson::before{
	transform: scale(1.2);
	display: block;
	margin-top: 2px;
	margin-left: 6px;
}
/*書類アイコン 薄青*/
.rx-itemlist .rx-card-icon-lesson-lightblue::before {
    content: url('../../../images/mobile/lesson-light-blue.svg');
	margin-left: -2px;
}

/*いいねアイコン*/
.rx-card-icon-like::before,
.rx-itemlist .rx-card-icon-like::before {
	content: url('../../../images/mobile/like.svg');
}
/*わるいいねアイコン*/
.rx-card-icon-unlike::before,
.rx-itemlist .rx-card-icon-unlike::before {
	content: url('../../../images/mobile/unlike.svg');
}
/*時間アイコン*/
.rx-itemlist .rx-card-icon-clock::before {
	content: url('../../../images/mobile/clock.svg');
}
/*時間アイコン*/
.rx-itemlist p.rx-card-icon-clock::before {
	margin-left: -2px;
}
/*青いピンアイコン*/
.rx-itemlist .rx-icon-pin-blue::before {
	content: url('../../../images/mobile/pin-blue.svg');
	margin-left: -4px;
}
/*青いピンアイコン 薄青*/
.rx-itemlist .rx-icon-pin-blue-lightblue::before {
    content: url('../../../images/mobile/pin-light-blue.svg');
	margin-left: -4px;
}

/*帽子アイコン*/
.rx-icon-universitygraduatehat::before,
.rx-itemlist .rx-icon-universitygraduatehat::before {
	content: url('../../../images/mobile/universitygraduatehat.svg');
	margin-left: -3px;
}

/*情報マーク*/
.rx-itemlist .rx-icon-info::before {
	content: url('../../../images/mobile/info.svg');
}

/*星青塗りつぶしアイコン*/
.rx-itemlist .rx-icon-star-fill-bg-blue::before {
	content: url('../../../images/mobile/star_fill_bg_blue.svg');
}


/*----------------------------------------------------
 * listrow.css
----------------------------------------------------*/
/*<section class="rx-listrow">と記述する*/
.rx-listrow {
	margin-bottom: 16px;
}

/*見出しのスタイル*/
.rx-listrow h1 {
	color: #000;
	font-size: var(--font-size-medium);
	font-weight: var(--weight-bold);
	margin: 0 16px 8px 16px; 
}
.rx-listrow .rx-bg-white h1 {
	margin: 8px 16px;
}

/*青と白になっているリストのデータ全体のスタイル*/
.rx-listrow dl {
	background: var(--color-white);
}

/*リストのデータのスタイル*/
.rx-listrow dt,
.rx-listrow dd {
	align-items: center;
	display: flex;
	padding: 3px 16px;
}

/*リストのデータタイトルのスタイル(水色) */
.rx-listrow dt { 
    background: #e9efff;
    font-size: var(--font-size-small);
    font-weight: var(--weight-base);
	min-height: 24px;
}

/*リストのデータ内容のスタイル*/
.rx-listrow dd {
	color: rgba(0, 0, 0, 0.6);
	font-size: var(--font-size-medium);
    min-height: 37px;
}


/*----------------------------------------------------
 * steps.css
----------------------------------------------------*/
.rx-steps>li {
	display: flex;
	font-size: var(--font-size-tag);
}
.rx-steps>li:has(>div) {
	background-color: var(--color-light-gray);
	border-radius: 100px;
	padding: 2px;
}
.rx-steps>li:has(>p) {
	align-items: flex-end;
	margin-bottom: 4px;
}
.rx-steps>li>p,
.rx-steps>li>div {
	width: 100%;
}

/* ステップ名称 */
.rx-steps>li>p {
	color: rgba(0, 0, 0, 0.30);
	text-align: end;
}
/* ステップ名称 アクティブ時 */
.rx-steps>li>p:not(.rx-active ~ p) {
	color: var(--color-blue);
}
/* ステップ名称を折り返さない */
.rx-steps.rx-steps-nowrap>li>p.rx-active {
	white-space: nowrap;
}

/* ステップバー */
.rx-steps>li>div {
	background-color: var(--color-light-gray);
}
/* 最初のバーは左側を丸める */
.rx-steps>li>div:first-child {
	border-bottom-left-radius: 100px;
	border-top-left-radius: 100px;
}
/* アクティブと最後のバーは右側を丸める */
.rx-steps>li>div:last-child,
.rx-steps>li>div.rx-active {
	border-bottom-right-radius: 100px;
	border-top-right-radius: 100px;
}
.rx-steps li>div:not(.rx-active ~ div) {
	background: var(--color-blue);
}

/* ステップナンバー */
.rx-steps li>div>p {
	background: rgba(0, 0, 0, 0.3);
	border: 1.5px solid var(--color-light-gray);
	border-radius: 50%;
	color: var(--color-gray);
	font-size: 8px;
	line-height: 0.7rem;
	margin: 0 0 0 auto;
	text-align: center;
	width: 0.9rem;
	height: 0.9rem;
}
/* ステップナンバー アクティブ時 */
.rx-steps li>div:not(.rx-active ~ div)>p {
	background: var(--color-light-gray);
	color: var(--color-blue);
	border-color: var(--color-blue);
}


/*----------------------------------------------------
 * errorPage.css
----------------------------------------------------*/
.rx-information-main {
	margin-top: 50px;
	margin-inline: auto;
	width: var(--base-width);
}

.rx-alert-timeout-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}

.rx-alert-timeout {
	height: 60px;
	width: 60px;
}

.rx-alert-content {
	padding: 1rem;
	background-color: var(--color-white);
	line-height: var(--line-height-base);
}

.rx-login-button {
	background-color: var(--color-white);
	border: 1px solid var(--color-blue);
	border-radius: 100px;
	color: var(--color-blue);
	font-weight: var(--weight-bold);
	min-height: 48px;
	padding: 8px;
	text-align: center;
	width: 100%;
}


/*----------------------------------------------------
 * userImg.css
----------------------------------------------------*/
.rx-user-img {
	height: 160px;
	width: auto;
}

/*----------------------------------------------------
 * buttonArea.css
----------------------------------------------------*/
.rx-topright-buttonarea,
.rx-centerright-buttonarea,
.rx-center-buttonarea,
.rx-bottomright-buttonarea,
.rx-topright-buttonarea-commandlinkarea,
.rx-bottomright-buttonarea-commandlinkarea {
	display: flex;
	gap: 16px;
	position: absolute;
}

/* ===== 上部右 ===== */
.rx-topright-buttonarea {
	top: 16px;
	right: 16px;
}

.rx-topright-buttonarea-commandlinkarea {
	top: 0;
	right: 0;
}

/* ===== 中央右・中央 ===== */
.rx-center-buttonarea,
.rx-centerright-buttonarea {
	top: 50%;
	transform: translateY(-50%);
	right: 0;
}

.rx-centerright-buttonarea {
	right: 16px;
}

/* ===== 下部右 ===== */
.rx-bottomright-buttonarea {
	bottom: 16px;
	right: 16px;
}

.rx-bottomright-buttonarea-commandlinkarea {
	bottom: 0;
	right: 0;
}

/*----------------------------------------------------
 * buttonArea.css
----------------------------------------------------*/
/*グラフのサイズ*/
.rx-custom-pie-size {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    margin-top: 10px;
}

/*表示されるlable*/
.rx-percentageLable {
	color: rgba(0, 0, 0, 0.6);
	font-size: var(--font-size-medium);
	word-break: break-word;
}

/*表示されるパーセット*/
.rx-percentage {
	text-align: end;
	width: 3rem;
	white-space: nowrap;
}

/*表示される前のドット*/
.rx-percentageColor {
	width: 16px;
}

/*ドット*/
.rx-percentageColor span {
    border-width: 0px;
    border-radius: 50%;
    display: block;
    width: 16px;
    height: 16px;
    margin-top: 4px;
}

/*全体の下部モジュール*/
.rx-legend-container ul {
	width: 85%;
	margin: 0 auto;
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rx-legend-container ul li {
	display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
}

/*----------------------------------------------------
  htmlEditor.css
----------------------------------------------------*/
/*htmlEditorおよびhtmlEditroViewのスタイルを定義する*/
.fr-box a {
	text-decoration: underline;
}
.fr-box * {
	animation: initial;
}

.editorTextarea .fr-toolbar {
	border-top: 2px solid #dee2e6;
}
.editorTextarea .fr-wrapper {
	min-height:10rem
}
.editorTextarea .fr-toolbar .fr-command.fr-btn i,
.fr-popup.fr-mobile.fr-ltr .fr-buttons i {
	margin: 7px;
}
.editorTextarea .fr-toolbar .fr-command.fr-btn i:is(.fa-text-height, .fa-align-left, .fa-align-center, .fa-align-right, .fa-align-justify, .fa-search)::before,
.fr-popup.fr-mobile.fr-ltr i:is(.fa-align-left, .fa-align-center, .fa-align-right, .fa-align-justify, .fa-search, .fa-star, .fa-magic)::before {
	margin-left: -5px;
}

/* 段落番号、箇条書き調整 */
.fr-box ul {
    list-style: disc;
}
.fr-box ol {
    list-style: decimal;
}
.fr-box ol, .fr-box ul {
    margin-left: 1em;
    padding: 0.2em 0.4em;
}
/* PC版に合わせて画像アップロード時の参照ボタン非表示 */
.fr-popup .fr-buttons button[data-cmd='imageManager'] {
    display: none !important;
}
/*======================アイコン======================*/
/* 太字 */
.fa.fa-bold::before {
	content: url('../../../images/mobile/bold-02.svg');
}
/* イタリック */
.fa.fa-italic::before {
	content: url('../../../images/mobile/italic-02.svg');
}
/* アンダーライン */
.fa.fa-underline::before {
	content: url('../../../images/mobile/underline-02.svg');
}
/* 取り消し線 */
.fa.fa-strikethrough::before {
	content: url('../../../images/mobile/strikethrough-02.svg');
}
/* 下付き文字 */
.fa.fa-subscript::before {
	content: url('../../../images/mobile/subscript.svg');
}
/* 上付き文字 */
.fa.fa-superscript::before {
	content: url('../../../images/mobile/superscript.svg');
}
/* フォントサイズ */
.fa.fa-text-height::before {
	content: url('../../../images/mobile/letter-spacing-02.svg');
}
/* 色 */
.fa.fa-tint::before {
	content: url('../../../images/mobile/drop.svg');
}
/* 二段目 */
/* 配置(左揃え) */
.fa.fa-align-left::before {
	content: url('../../../images/mobile/align-left.svg');
}
/* 段落番号list-ol */
.fa.fa-list-ol::before {
	content: url('../../../images/mobile/list-numbers.svg');
}
/* 箇条書き */
.fa.fa-list-ul::before {
	content: url('../../../images/mobile/dotpoints-01.svg');
}
/* インデントを増やす */
.fa.fa-indent::before {
	content: url('../../../images/mobile/left-indent-01.svg');
}
/* インデントを減らす */
.fa.fa-outdent::before {
	content: url('../../../images/mobile/right-indent-01.svg');
}
/* リンク */
.fa.fa-link::before {
	content: url('../../../images/mobile/link-03.svg');
}
/* 写真 */
.fa.fa-image::before {
	content: url('../../../images/mobile/image-03.svg');
}
/* ビデオ */
.fa.fa-video-camera::before {
	content: url('../../../images/mobile/video-recorder.svg');
}
/* 三段目 */
/* 表の挿入 */
.fa.fa-table::before {
	content: url('../../../images/mobile/layout-grid-02.svg');
}
/* 水平線の挿入 */
.fa.fa-minus::before {
	content: url('../../../images/mobile/stop.svg');
}
/* 書式のクリア */
.fa.fa-eraser::before {
	content: url('../../../images/mobile/eraser-02.svg');
}
/* 元に戻す */
.fa.fa-rotate-left::before {
	content: url('../../../images/mobile/reverse-left.svg');
}
/* やり直す */
.fa.fa-rotate-right::before {
	content: url('../../../images/mobile/reverse-right.svg');
}

/* 左揃え ドロップダウンメニュー内 */
/* 中央揃え */
.fa.fa-align-center::before {
	content: url('../../../images/mobile/align-center.svg');
}
/* 右揃え */
.fa.fa-align-right::before {
	content: url('../../../images/mobile/align-right.svg');
}
/* 両端揃え */
.fa.fa-align-justify::before {
	content: url('../../../images/mobile/align-justify.svg');
}

/* リンク ドロップダウンメニュー内 */
/* リンクを選択 */
.fa.fa-search::before {
	content: url('../../../images/mobile/search-01.svg');
}

/* 画像・動画 ドロップダウンメニュー内 */
/* アップロード */
.fa.fa-upload::before {
	content: url('../../../images/mobile/upload-03.svg');
}
/* 埋め込みコード */
.fa.fa-code::before {
	content: url('../../../images/mobile/code-02.svg');
}

/* アップロード済み画像選択時 ドロップダウンメニュー内 */
/* 置換 */
.fa.fa-exchange::before {
	content: url('../../../images/mobile/arrow-switch-horizontal.svg');
}
/* 画像キャプション */
.fa.fa-commenting::before {
	content: url('../../../images/mobile/annotation-typing.svg');
}
/* 削除 */
.fa.fa-trash::before {
	content: url('../../../images/mobile/trash-01.svg');
}
/* 表示 */
.fa.fa-star::before {
	content: url('../../../images/mobile/star-02.svg');
}
/* スタイル */
.fa.fa-magic::before {
	content: url('../../../images/mobile/edit-contained.svg');
}
/* 代替テキスト */
.fa.fa-info::before {
	content: url('../../../images/mobile/info-square-01-contained.svg');
}
/* サイズ変更 */
.fa.fa-arrows-alt::before {
	content: url('../../../images/mobile/arrow-expand-02.svg');
}

/*----------------------------------------------------
 * label.css
----------------------------------------------------*/
/*ラベルと必須がセットになっているとき*/
:not(legend)>.rx-required-label,
.rx-required-label {
	display: block;
}
/*ラベルと情報アイコンがセットになっているとき*/
.rx-info-label {
	display: flex;
}
/* ラベル内のテキストサイズ・余白調整 */
.rx-required-label .ui-outputlabel-label,
.rx-info-label .ui-outputlabel-label {
	font-size: var(--font-size-medium);
	margin-right: 8px;
}
/* 検索条件ラベルと併用されたときの余白調整 */
.rx-required-label .rx-searchlabel .ui-outputlabel-label {
    margin-bottom: 0;
}
/*必須マークのスタイル*/
.rx-required {
    border-radius: 100px;
    background:#ff3b30;
    color:  rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-tag);
    padding: 1px 8px;
    vertical-align: middle;
    white-space: nowrap;
}
/*検索条件のラベル outputLabelに書く*/
.rx-searchlabel .ui-outputlabel-label {
	color: var(--color-text);
	display: block;
	font-size: var(--font-size-medium);
}
:not(legend)>.rx-required-label,
:not(legend)>.rx-searchlabel .ui-outputlabel-label,
legend:has(:is(.rx-searchlabel, .rx-required-label)) {
	margin-bottom: 8px;
}

/*----------------------------------------------------
 * mobileCalendar.css
----------------------------------------------------*/
/* ラベルとmobileCalendarを囲むパネルに設定 */
.rx-mobilecalendar-panel {
	align-items: center;
	color: var(--color-text);
	background: var(--color-white);
	border: 1px solid var(--color-light-gray);
	border-radius: 8px;
	display: flex;
	font-size: var(--font-size-base);
	height: 48px;
	padding: 8px 16px;
	width: 100%;
}
/* mobileCalendarを囲むdivに設定 */
.rx-mobilecalendar {
	display: flex;
	margin: 0 0 0 auto;
}
.rx-mobilecalendar-panel input[type="date"], 
.rx-mobilecalendar-panel input[type="time"] {
    background: #f2f2f2;
    border: 1px solid  #f2f2f2;
    border-radius: 6px;
    color: var(--color-text);
    min-height: 32px;
    padding: 4px 12px;
    text-align: center;
    width: auto;
    min-width: 8rem;
}
.rx-mobilecalendar-panel input[type="time"] {
	min-width: 4rem;
}
.rx-mobilecalendar-panel:has(input[type="date"]) input[type="time"] {
	margin-left: 7px;
	margin-right: -8px;
}
.rx-mobilecalendar-panel .ui-inputfield::-webkit-calendar-picker-indicator {
	display: none;
}

/*----------------------------------------------------
 * searchResults.css
----------------------------------------------------*/
.rx-search-results,
.rx-search-results .ui-outputpanel,
.rx-search-results.ui-outputpanel{
	align-items: center;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	display: flex;
	font-size: var(--font-size-medium);
	margin-bottom: 16px;
	padding: 4px 16px;
}
/*背景色が白で、中身が灰色のパターン*/
.rx-search-results.rx-search-results-gray,
.rx-search-results.rx-search-results-gray .ui-outputpanel {
    background: #f2f2f2;
    border: none;
}
/*中のテキスト*/
.rx-search-results .rx-font-size-medium {
	font-size: var(--font-size-medium);
}
.rx-search-results .rx-font-size-large {
	font-size: var(--font-size-large);
	margin-right: 4px;
}
.rx-search-results>p,
.rx-search-results>div {
	margin: 0 0 0 auto;
}

/*----------------------------------------------------
 * 追加アイコン
----------------------------------------------------*/
/* 戻る */
.rx-icon-back::before {
	content: url('../../../images/mobile/back.svg');
}
/* 丸チェック */
.rx-icon-checkafter::before {
	content: url('../../../images/mobile/checkafter.svg');
}
/* 閉じる */
.rx-icon-closex::before {
	content: url('../../../images/mobile/closex.svg');
}
/* 閉じる 赤 */
.rx-icon-closex-red::before {
	content: url('../../../images/mobile/closex-red.svg');
}
/* 閉じる オレンジ */
.rx-icon-closex-orange::before {
	content: url('../../../images/mobile/closex-orange.svg');
}
/* コピー */
.rx-icon-copy::before {
	content: url('../../../images/mobile/copy.svg');
}
/* 目 */
.rx-icon-eye::before {
	content: url('../../../images/mobile/eye.svg');
}
/* 目 赤 */
.rx-icon-eye-red::before {
	content: url('../../../images/mobile/eye-red.svg');
}
/* 目 白 */
.rx-icon-eye-white::before {
	content: url('../../../images/mobile/eye-white.svg');
}
/* 目閉 */
.rx-icon-eyeclose::before {
	content: url('../../../images/mobile/eyeclose.svg');
}
/* マイナス 赤 */
.rx-icon-minus-red::before {
	content: url('../../../images/mobile/minus-red.svg');
}
/* 移動 */
.rx-icon-move::before {
	content: url('../../../images/mobile/move.svg');
}
/* 移動 白 */
.rx-icon-move-white::before {
	content: url('../../../images/mobile/move-white.svg');
}
/* プレイ */
.rx-icon-play::before {
	content: url('../../../images/mobile/play.svg');
}
/* プレイ 白 */
.rx-icon-play-white::before {
	content: url('../../../images/mobile/play-white.svg');
}
.rx-icon-play::before,
.rx-icon-play-white::before {
	display: block;
	transform: scale(0.9);
}
/* 保存 */
.rx-icon-save::before {
	content: url('../../../images/mobile/save.svg');
}
/* 送信・配信する 白のみ */
.rx-icon-send::before {
	content: url('../../../images/mobile/send.svg');
}
/* 選択 */
.rx-icon-setting::before {
	content: url('../../../images/mobile/setting.svg');
}