@charset "utf-8";

/*======================================================
 * layout.css (SP)
 *
 * 著作権：Copyright Japan System Techniques Co., Ltd. All Rights Reserved.
 * 会社名：日本システム技術株式会社
======================================================*/
/*----------------------------------------------------
container.css
footer.css
header.css
sidebar.css
wrapper.css
----------------------------------------------------*/
/*----------------------------------------------------
container.css
----------------------------------------------------*/
/* 横の余白を消す共通スタイル */
.rx-full-width,
.rx-bg-white,
.rx-bg-white-icon-button {
	left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: 100vw;
}

/*背景色を白にしたい時*/
.rx-bg-white {
	background: var(--color-white);
}

/*背景色が白で、アイコンボタンだけあるとき*/
.rx-bg-white-icon-button {
	background: var(--color-white);
	height: 48px;
}

/*背景色を白にした時の中身の余白*/
.rx-bg-white-content {
	padding-block: 16px;
	position: relative;
	margin-inline: auto;
	width: var(--base-width);
}

/*横幅をbaseの幅にしたい時*/
.rx-base-width {
	width: var(--base-width);
}

/*高さを画面いっぱいに広げたい時*/
.rx-search-empty,
.rx-full-height {
	min-height: 100lvh;
}

/*----------------------------------------------------
footer.css
----------------------------------------------------*/
/* 追従型のスタイル */
.rx-footer,
.rx-one-button-footer,
.rx-two-button-footer,
.rx-three-button-footer {
	background-color: #fff;
	bottom: 0;
	border-radius: 30px 30px 0 0;
	box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15);
    display: inline-grid;
	gap: 8px;
	left: 0;
	position: fixed;
	width: 100%;
	z-index: 1000;
	/* フッターが他の要素の上に表示されるようにする */
}
.rx-footer:has(button.rx-button),
.rx-one-button-footer,
.rx-two-button-footer,
.rx-three-button-footer {
	padding: 24px;
}
 
/* 追従型(ボタン一つ) */
.rx-footer:has(> .rx-button:nth-child(1):last-child),
.rx-footer:has(> .rx-button:nth-child(1) + button:not(.rx-button)),
.rx-one-button-footer {
	align-items: center;
	display: flex;
	height: 96px;
}
body .rx-template-content>div.ui-panel-content:has(.rx-footer> .rx-button:nth-child(1):last-child),
body .rx-template-content>div.ui-panel-content:has(.rx-footer> .rx-button:nth-child(1) + button:not(.rx-button)),
body .rx-template-content>div.ui-panel-content:has(.rx-one-button-footer) {
	padding-bottom: 96px;
}
 
/* 追従型(ボタン二つ) */
.rx-footer:has(>.rx-button:nth-child(2):last-child),
.rx-footer:has(>.rx-button:nth-child(2) + button:not(.rx-button)),
.rx-two-button-footer {
	height: 152px;
}
 
body .rx-template-content>div.ui-panel-content:has(.rx-footer>.rx-button:nth-child(2):last-child),
body .rx-template-content>div.ui-panel-content:has(.rx-footer>.rx-button:nth-child(2) + button:not(.rx-button)),
body .rx-template-content>div.ui-panel-content:has(.rx-two-button-footer) {
	padding-bottom: 152px;
}
 
/* 追従型(ボタン三つ) */
.rx-footer:has(>.rx-button:nth-child(3):last-child),
.rx-footer:has(>.rx-button:nth-child(3) + button:not(.rx-button)),
.rx-three-button-footer {
	height: 208px;
}
 
body .rx-template-content>div.ui-panel-content:has(.rx-footer>.rx-button:nth-child(3):last-child),
body .rx-template-content>div.ui-panel-content:has(.rx-footer>.rx-button:nth-child(3) + button:not(.rx-button)),
body .rx-template-content>div.ui-panel-content:has(.rx-three-button-footer) {
	padding-bottom: 208px;
}
 
/* 追従型(ボタン四つ) */
.rx-footer:has(>.rx-button:nth-child(4):last-child),
.rx-footer:has(>.rx-button:nth-child(4) + button:not(.rx-button)),
.rx-three-button-footer {
	height: 264px;
}
 
body .rx-template-content>div.ui-panel-content:has(.rx-footer>.rx-button:nth-child(4):last-child),
body .rx-template-content>div.ui-panel-content:has(.rx-footer>.rx-button:nth-child(4) + button:not(.rx-button)) {
	padding-bottom: 264px;
}

/*----------------------------------------------------
header.css
----------------------------------------------------*/
/* 画面上部固定 */
.ui-g:has(.rx-template-header) {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1001;
}
.ui-g:has(.rx-template-header) + .ui-g {
	margin-top: 52px;
}

/* ヘッダー背景色範囲 */
.ui-panel.rx-template-header .ui-panel-content.ui-widget-content {
	background-color: var(--color-blue);
	border-radius: 0;
    color: var(--color-white);
	font-size: var(--font-size-large);
    width: 100%;
}
.ui-panel.rx-template-header form#headerForm {
	align-items: center;
	display: flex;
	height: 52px;
	margin-inline: auto;
	width: var(--base-width);
}
/* ボタン */
body .rx-header-back-button.ui-button,
body .rx-header-menu-button.ui-button,
body .rx-header-help-button.ui-button,
body .rx-header-back-button.ui-button.ui-state-hover,
body .rx-header-back-button.ui-button.ui-state-focus {
	background-color: var(--color-blue);
	border: 1px solid var(--color-blue);
	float: left;
	height: 30px;
	padding-top: 2px;
	width: 30px;
}

/* タイトル */
.ui-panel.rx-template-header h1 {
	display: -webkit-box;
	font-size: 18px;
	line-height: 25px;
    overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	width: 100%;
	word-break: normal;
}
.rx-header-button-width {
	min-width: 30px;
}

body .ui-panel.rx-template-content {
	padding-top: 24px;
/*	min-height: 100lvh; */
}
/*==================================*/

/* メニューボタン */
.ui-button.rx-header-menu-button::before {
	content: url('../../../images/mobile/menu.svg');
	transform: scale(1.1);
	margin-top: 5px;
}
/* 戻るボタン */
.ui-button.rx-header-back-button::before {
	content: url('../../../images/mobile/arrow_left.svg');
}
/* ヘルプ資料表示ボタン */
.ui-button.rx-header-help-button::before {
	content: url('../../../images/mobile/help_circle_contained.svg');
}

body .rx-header-menu-button.ui-button .ui-button-text,
body .rx-header-back-button.ui-button .ui-button-text,
body .rx-header-help-button.ui-button .ui-button-text {
	display: none;
}

/*リフレッシュボタン*/
.ui-button.rx-button.rx-loading-button .ui-icon.rx-icon-refresh-white::before {
	display: block;
	margin-top: -2px;
}

/*----------------------------------------------------
sidebar.css
----------------------------------------------------*/
.ui-sidebar.rx-sidebar {
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	height: auto;
	max-height: 85vh;
}

.ui-sidebar.rx-sidebar .ui-sidebar-close {
    position: absolute;
    top: 12px;
    right: 20px;
}

.ui-sidebar.rx-sidebar [data-role="header"] {
    padding: 0 28px 16px 28px;
}

.ui-sidebar.rx-sidebar [data-role="header"] h2 {
	text-align: center;
    font-weight: 700;
}

.ui-sidebar.rx-sidebar .rx-sidebar-content {
	overflow-y: auto;
	max-height: calc(85vh - 120px);
	padding-bottom: 16px;
}
.ui-sidebar.rx-sidebar .rx-sidebar-content-twobutton {
	overflow-y: auto;
	margin-bottom: 8px;
	max-height: calc(85vh - 176px);
}
.ui-sidebar.rx-sidebar .rx-sidebar-content:has(>.rx-full-width),
.ui-sidebar.rx-sidebar .rx-sidebar-content-twobutton:has(>.rx-full-width) {
	left: 50%;
    position: relative;
    transform: translateX(-50%);
    width: 100vw;
}

/*=============メニュー===============*/

.ui-sidebar.rx-sidebar-menu {
	overflow-y: auto;
	padding: 0;
	width: 80%;
	max-width: 500px;
}
.ui-sidebar.rx-sidebar-menu .ui-menu.ui-helper-clearfix {
    border: none;
    padding: 0;
	width: 100%;
}
.ui-sidebar.rx-sidebar-menu .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
	align-items: center;
	display: flex;
	padding: 8px 8px 8px 16px;
	gap: 4px;
}
.ui-sidebar.rx-sidebar-menu .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link .ui-menuitem-icon-null {
	display: none;
}

.ui-sidebar.rx-sidebar-menu .ui-menu .ui-menu-list .ui-widget-header h3 {
	font-size: var(--font-size-base);
    font-weight: var(--weight-base);
    color: var(--color-blue);
}

.ui-sidebar.rx-sidebar-menu .ui-menu .ui-menu-list .ui-widget-header {
	padding: 0.2rem 1rem
}

/* 青背景用 */
.ui-sidebar.rx-sidebar-menu .ui-menu-list>li:has( .menuDefault),
.ui-sidebar.rx-sidebar-menu .ui-menu-list .menuDefault.ui-state-hover {
	background-color: var(--color-blue);
}
.ui-sidebar.rx-sidebar-menu .ui-menu-list>li:has( .menuDefault) .ui-menuitem-link .ui-menuitem-text {
	color: var(--color-white);
}
.ui-sidebar.rx-sidebar-menu .ui-menu-list>li:has( .menuDefault) .ui-menuitem-link::after {
	content: url('../../../images/mobile/arrow_right_white.svg');
}
/* 白背景用 */
.ui-sidebar.rx-sidebar-menu .ui-menuitem-link::after {
	content: url('../../../images/mobile/arrow_right.svg');
	margin: 0 0 0 auto;
	height: 22px;
}
.ui-sidebar.rx-sidebar-menu .ui-menu-list>li:not(:has( .menuDefault)) .ui-menuitem-link .ui-menuitem-text {
    margin-left: 26px;
}
.ui-sidebar.rx-sidebar-menu .ui-menu-list>li:has( .menuDefault) .ui-menuitem-link::before {
	width: 22px;
	min-width: 22px;
}
/* ポータルトップアイコン */
.ui-sidebar.rx-sidebar-menu .ui-menu-list>li:has( .menuDefault):first-child .ui-menuitem-link::before {
	content: url('../../../images/mobile/home-05.svg');
}
/* リンク一覧アイコン */
.ui-sidebar.rx-sidebar-menu .ui-menu-list>li:has( .menuDefault):nth-child(2) .ui-menuitem-link::before {
	content: url('../../../images/mobile/link-external.svg');
}
/* 個人設定アイコン */
.ui-sidebar.rx-sidebar-menu .ui-menu-list>li:has( .menuDefault):last-child .ui-menuitem-link::before {
	content: url('../../../images/mobile/user-circle.svg');
	height: 20px;
	width: 22px;
}
/* ボタンエリア */
.ui-sidebar.rx-sidebar-menu .rx-menu-buttonarea {
	margin: 16px;
    width: -webkit-fill-available;
}
/* ログアウトボタン */
.ui-sidebar.rx-sidebar-menu .ui-button.rx-button:has( .rx-icon-logout) {
	justify-content: center;
	min-height: 36px;
	padding: 8px;
}


/*----------------------------------------------------
wrapper.css
----------------------------------------------------*/
.contentWrapper {
    background: #f2f2f7;
    margin: 0 auto;
    max-width: 1200px;
    min-height: 100vh;
    width: 100%;
}