/*
 * スマホデザイン用CSS
 * 各frame要素でPC用の既存CSSより後に読み込み、上書きする形で使います
 * ※メディアクエリの値はこのCSSを読み込んだframe要素に依存するので注意
 */
@charset "utf-8";

/* スマホでは非表示にしたいUI */
#sp_back_button,
#sp_menu_toggle_button,
.sp_selected_multiple{
	display: none;
}

/* SP幅用のスタイル指定 */
@media screen and (max-width: 440px) {
	* {
		max-width: 100%;
	}

	html {
		-webkit-text-size-adjust: 100%; /*ios safari用*/
	}
	body,
	th,
	td {
		font-size: 11px;
	}

	/* 背景画像でシャドウがかかっているのを消す */
	body {
		background-image: none;
	}
	/* サイドメニュー展開時は下記クラスで画面操作不能にする */
	body.disable-screen {
		overflow: hidden;
	}
	body.disable-screen:before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5) 20px);
		z-index: 9999;
	}
	body.disable-screen:after {
		content: '';
		position: fixed;
		top: 12px;
		right: 12px;
		width: 12px;
		height: 12px;
		opacity: 0.75;
		background-image: url('../images/close_icon.png');
		background-position: 50% 50%;
		background-size: contain;
		background-repeat: no-repeat;
		z-index: 9999;
	}

	/* テキスト入力・ボタン・セレクトボックスのデザイン調整 */
	button,
	input[type='button'],
	input[type='submit'],
	input[type='text'],
	input[type='number'],
	input[type='radio'],
	input[type='checkbox'],
	textarea,
	select {
		margin-top: 1px;
		margin-bottom: 1px;
		border: 1px solid #c0c0c0;
		border-radius: 4px;
		color: #000000;
	}
	button,
	input[type='button'],
	input[type='submit'] {
		border-color: #808080;
		background-color: #f3f3f3;
	}
	button#img_top,
	button#img_up,
	button#img_down,
	button#img_bottom {
		width: 26px;
		height: 16px;
	}

	/* 複数選択セレクトボックスの仕様がスマホ実機とPCで異なるので、PCと似たUIを用意 */
	.sp_selected_multiple {
		display: block;
		list-style: none;
		height: 10rem;
		border-radius: 4px;
		border: 1px solid #c0c0c0;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-size: 11px;
		background: #ffffff;
		color: #000000;
		overflow-y: scroll;
	}
	/* 隣接するselect本体は透明にして、.sp_selected_multipleに覆いかぶせておく。タッチしてチェックボックスが開く仕組みはそのまま使い続けたいので */
	.sp_selected_multiple + select[multiple] {
		width: 50%;
		height: 10rem;
		margin-top: -10rem;
		line-height: 1;
		box-sizing: border-box;
		font-size: 11px;
		opacity: 0;
	}
	.sp_selected_multiple > li,
	.sp_selected_multiple + select[multiple] > option {
		padding: 2px 4px;
		line-height: 1rem !important;
	}
	.sp_selected_multiple > li:first-of-type,
	.sp_selected_multiple + select[multiple] > option:first-of-type {
		padding-top: 4px;
	}
	.sp_selected_multiple > li:last-of-type,
	.sp_selected_multiple + select[multiple] > option:last-of-type {
		padding-bottom: 4px;
	}
	.sp_selected_multiple > li.selected {
		color: #ffffff;
		background: #44b9fd;
	}

	/* 横スクロール用コンテナ */
	.scroll-x-container {
		clear: both;
		overflow-x: auto;
	}
	/* テーブル調整 */
	th,
	td {
		box-sizing: border-box;
	}
	.scroll-x-container table {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* テーブル見出しを横スクロール時も固定化 */
	#form_GroupWeekSchedule .SettingItem thead > tr > th > .pageLink_GroupWeekSchedule,
	#form_GroupWeekSchedule .SettingItem thead > tr > th:first-child,
	#form_GroupWeekSchedule .SettingItem tbody > tr > td:first-child,
	#table_reportinput > tbody > tr > th,
	table.SettingItem > tbody > tr > th,
	.SettingItem > .scroll-x-container > table > tbody > tr > th {
		position: sticky;
		top: 0;
		left: 0;
		white-space: normal; /* nowrapを無効化 */
	}
	#form_GroupWeekSchedule .SettingItem thead > tr > th > .pageLink_GroupWeekSchedule {
		width: max-content;
	}
	#form_GroupWeekSchedule .SettingItem thead > tr > th:first-child,
	#form_GroupWeekSchedule .SettingItem tbody > tr > td:first-child,
	#table_reportinput > tbody > tr > th,
	table.SettingItem > tbody > tr > th,
	.SettingItem > .scroll-x-container > table > tbody > tr > th {
		width: 60px;
		box-shadow: 0 0 0 1px #8d8d8d;
	}
	#table_reportinput > tbody > tr > th + td:only-of-type > *,
	table.SettingItem > tbody > tr > th + td:only-of-type > *,
	.SettingItem > .scroll-x-container > table > tbody > tr > th + td:only-of-type > * {
		max-width: calc(100vw - 60px - 16px - 8px - 3px) !important;
	}
	/* メニュー展開時はメニュー幅分プラス(vwを使っていると崩れるので対策) */
	body.disable-screen #table_reportinput > tbody > tr > th + td:only-of-type > *,
	body.disable-screen table.SettingItem > tbody > tr > th + td:only-of-type > *,
	body.disable-screen .SettingItem > .scroll-x-container > table > tbody > tr > th + td:only-of-type > * {
		max-width: calc(100vw - 60px - 16px - 8px - 3px + 180px) !important;
	}
	/* PDCA形式の日報 作業内容欄用の調整(paddingがないのでその分max-widthが増える) */
	#table_reportinput > tbody > tr > th + td.pdca-time-table > * {
		max-width: calc(100vw - 60px - 16px - 3px) !important;
	}
	body.disable-screen #table_reportinput > tbody > tr > th + td.pdca-time-table > * {
		max-width: calc(100vw - 60px - 16px - 3px + 180px) !important;
	}

	/* コンテンツ幅、マージン調整 */
	.titleheader,
	.SettingItem,
	#HeadLink {
		max-width: 100% !important;
		margin-left: 0;
		margin-right: 0;
	}
	.titleheader > * {
		width: 100% !important;
	}
	.titleheader #MainItem > * {
		margin-left: 8px;
		margin-right: 8px;
	}
	body > * {
		box-sizing: border-box;
		width: calc(100% - 16px) !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	/* ヘッダ */
	/* 戻るボタン・メニュー開閉ボタン */
	#sp_back_button,
	#sp_menu_toggle_button {
		display: block;
		position: absolute;
		top: 4px;
		width: 44px !important;
		height: 32px;
		margin: 0 !important;
		box-sizing: border-box;
		border: 1px solid rgba(255,255,255,0.3);
		border-radius: 4px;
		background-color: transparent;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		transition: transform 0.3s ease-in-out;
	}
	#sp_back_button:active,
	#sp_menu_toggle_button:active{
		border: 1px solid rgba(255,255,255,0.1);
		transition: border 0.1s ease-in-out !important;
		transform: translateX(0px) translateY(1px) !important;
	}
	/* 戻るボタン */
	/* ※現状日報確認画面でのみ表示 */
	#sp_back_button {
		left: 8px;
		background-image: url('../images/caret-left-solid-full.svg');
		background-size: 24px;
		transform: translateX(-100px);
	}
	/* メニュー開閉ボタン */
	#sp_menu_toggle_button {
		right: 8px;
		background-image: url('../images/bars-solid.svg');
		background-size: 12px;
		transform: translateX(100px);
	}

	/* ヘッダメニュー */
	#dolphincontainer{
		display: flex;
		align-items: center;
		height: -webkit-fill-available !important;
	}
	#dolphincontainer:after{
		left: 0px;
		height: 2px;
		background: linear-gradient(90deg, #0762a5, #0092ff);
	}
	#dolphincontainer #HeaderMenuParent{
		justify-content: center !important;
		width: -webkit-fill-available;
		height: 40px;
		padding-top: initial;
	}
	#dolphincontainer #HeaderMenuParent #LeftContents #tabu,
	#dolphincontainer #CentralContents,
	#dolphincontainer #HeaderMenuParent #RightContents #Visitor,
	#dolphincontainer #dolphinnav{
		display: none !important;
	}
	#dolphincontainer #HeaderMenuParent #LeftContents #Logo{
		animation: fadeIn 0.3s ease-out;
		opacity: 1;
	}
	#dolphincontainer #HeaderMenuParent #LeftContents #Logo:active{
		transform: translateY(1px);
	}
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	#dolphincontainer #HeaderMenuParent #LeftContents #Logo a{
		display: flex;
		align-items: center;
		gap: 8px;
	}
	#dolphincontainer #HeaderMenuParent #LeftContents #Logo a .text{
		display: inline-block;
		letter-spacing: 2px;
		color: #cdcccc;
		font-size: 14px;
		font-family: monospace;
		font-weight: normal;
	}

	/* サイドメニュー */
	#frm_Logout {
		width: 100% !important;
		margin: 0 !important;
		overflow-x: hidden;
	}

	/* ログイン画面 */
	#mainheader {
		width: 100% !important;
		height: 25px;
		box-sizing: border-box;
		margin: 0 !important;
	}
	table:has(#frm_Login) {
		width: 375px !important;
		transform: translateX(-50%);
	}

	/* TOP調整 */
	#TopRightStyle .titleheader {
		width: 100% !important;
	}
	#DaySchedule .tab_pglink {
		width: max-content;
		padding: 0;
	}
	#DaySchedule #tab {
		float: right !important;
	}
	#DaySchedule #tab li {
		width: 65px;
		height: 18px;
		margin-left: 2px;
		text-align: center;
		background-size: 100% 100%;
	}
	.Pglink {
		text-align: right;
		white-space: normal; /* nowrapを無効化 */
	}
	.Pglink a {
		display: inline-block;
	}
	#TimeCardForm {
		text-align: right;
	}
	#TimeCardForm > a {
		display: inline-block;
		margin: 0 0 0 24px !important;
	}

	/* 日報調整 */
	/* 一覧 */
	#ReportList table.makeListTablePgLink,
	#ReportSearch table.makeListTablePgLink {
		width: 100% !important;
		margin-left: 0;
	}
	#ReportList table.makeListTablePgLink > tbody > tr > td,
	#ReportSearch table.makeListTablePgLink > tbody > tr > td {
		padding: 0;
	}
	#ReportListTable > thead > tr > th {
		width: auto !important;
	}
	#div_pageinglink {
		text-align: center;
	}
	/* 確認・編集画面 */
	#ReportConfirm #contents {
		margin-left: 0;
	}
	/* スケジュール */
	#sel_GroupChange {
		display: block;
	}
	#are_FollowEdit,
	#are_FollowEdit ~ input[type='submit'] {
		display: inline-block;
		vertical-align: middle;
	}
	#are_FollowEdit {
		float: left;
		width: 85%;
	}
	#are_FollowEdit ~ input[type='submit'] {
		float: right;
	}
	#are_FollowEdit ~ .ErrCmt {
		clear: both;
	}
	/* 年間スケジュール */
	#Year {
		width: 100%;
		text-align: center;
	}
	#YearScheduleTable,
	#YearScheduleTable > tbody {
		display: block;
		background-color: #ffffff;
	}
	#YearScheduleTable{
		width: 90%;
		border-collapse: collapse;
		margin: 5px;
		padding: 0px;
	}
	#YearScheduleTable > tbody > tr {
		display: flex;
		flex-wrap: wrap;
	}
	#YearScheduleTable > tbody > tr > td {
		width: 50%;
	}
	.pdca-time-table{
		margin:0;
		padding:0;
	}
	.pdca-time-table th,
	.pdca-time-table td {
		font-size: 8px;
	}
	/* マークダウン調整 */
	.markdownComment * {
		box-sizing: border-box;
	}
	.markdownComment ul,
	.markdownComment ol {
		padding-left: 19px;
	}

	/* 社員サーチ */
	#form_GroupWeekSchedule .TableMain {
		table-layout: fixed;
	}
	#form_GroupWeekSchedule .TableMain,
	#form_GroupWeekSchedule .TableMain > tbody {
		display: block;
		background-color: #ffffff;
	}
	#form_GroupWeekSchedule .TableMain > tbody > tr {
		display: flex;
		flex-wrap: wrap;
	}
	#form_GroupWeekSchedule .TableMain > tbody > tr > td {
		width: 50%;
	}
	#form_GroupWeekSchedule .TableMain td img {
		width: 100%;
		height: auto;
	}
	#UserProfileDetail > tbody > tr,
	#UserProfileDetail > tbody > tr > th,
	#UserProfileDetail > tbody > tr > td {
		display: block;
		width: 100%;
	}
	#UserProfileDetail img {
		max-height: 160px;
	}

	/* パスワード変更画面 */
	#frm_RegistPassWord #contents {
		margin-left: 0;
	}
}