/* Status Color Variables */
:root {
	--status-color-apply: red;               /* 応募 */
	--status-color-apply-completed: #ff9800; /* 待ち（キャンセル待ち） */
	--status-color-approve: #00A0E9;         /* 成立 */
	--status-color-cancel: #505050;          /* 辞退 */
	--status-color-stop: #aa4195;            /* 中止 */
	--status-color-give: #A0A0A0;            /* 遠慮 */
	--status-color-flake: #000000;           /* ドタキャン */
}

*, *:after, *:before {
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
	font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
	font-size: 13px;
	margin: 0;
	padding: 0;
	color: #666666;
	cursor: default;
}

/* page */
.page {
	width: 100%;
	height: 100%;
	top: 0;
	padding: 0;
	background: white;
	/*-webkit-overflow-scrolling: touch;*/
}
.page-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	color: white;
	background: #00a0e9;
	text-align: center;
	height: 25px;
	line-height: 25px;
	font-size: 13px;
	z-index: 2;
}
.page-header.is-develop {
	background: #f1a51a;
}

.page-title {
	font-size: 20px;
	font-weight: bold;
	margin-top: 10px;
	text-align: center;
	color: #00A0E9;
}

/* basic button */
.basic-button {
	display: inline-block;
	font-size: 13px;
	background: #00A0E9;
	color: white;
	border: none;
	border-radius: 3px;
	padding: 6px 10px;
	min-width: 100px;
	text-align: center;
    white-space: nowrap;
	cursor: pointer;
}
.basic-button.small {
    font-size: 10px;
    min-width: auto;
}
.basic-button .icon {
	margin-right: 5px;
	font-size: 13px;
	color: white;
	vertical-align: text-bottom;
}
.basic-button:hover {
	opacity: 0.9;
}
.basic-button.gray {
	background: #a7a7a7;
}
.basic-button.blue {
	background: #3ca6fe;
}
.basic-button.red {
	background: red;
}
.basic-button.disable {
	background: lightgray !important;
	cursor: default;
}
.basic-button.disable:hover {
	opacity: 1 !important;
}

/* frame button */
.frame-button {
	display: inline-block;
	border: solid 1px #00A0E9;
	border-radius: 3px;
	color: #00A0E9;
	padding: 2px 10px;
	cursor: pointer;
}
.frame-button img {
	width: 15px;
	height: 15px;
	vertical-align: text-bottom;
}

/* item table */
.item-table {
	width: 100%;
	text-align: left;
}
.item-table th {
	background: #f2f2f2;
	color: #555555;
	padding: 5px 10px;
	width: 1%;
	font-size: 12px;
	font-weight: normal;
	white-space: nowrap;
	/*height: 40px;*/
	text-align: center;
}
.item-table td {
	padding-left: 10px;
}

/* 基本一覧 */
.basic-list {
	border-collapse: collapse;
	width: 100%;
}
.basic-list th {
	background: #e0e0e0;
	padding: 2px 10px;
	white-space: nowrap;
	text-align: center;
}
.basic-list td {
	padding: 4px 10px;
	border-left: solid 1px #eeeeee;
}
.basic-list .item {
	cursor: pointer;
}
.basic-list .item:nth-child(odd) {
	background: #f8f8f8;
}
.basic-list .item:hover {
	background: #f2f2f2;
}
.basic-list .item.selected {
	background: #00A0E9;
	color: white;
}
.basic-list .item.selected td {
	border-left-color: #00A0E9;
}
.basic-list .item.disabled {
	color: #cccccc;
}
.basic-list .item.disabled .chara-icon {
	opacity: 0.2;
}
.basic-list .item.disabled:hover {
	background: #ffffff;
	cursor: default;
}
.basic-list .item.disabled:hover:nth-child(odd) {
	background: #f8f8f8;
}
.basic-list .right {
	text-align: right;
}
.basic-list .center {
	text-align: center;
}
.basic-list .nowrap {
	white-space: nowrap;
}
.basic-list.no-hover .item:hover {
	background: #ffffff;
	cursor: default;
}
.basic-list.no-hover .item:hover:nth-child(odd) {
	background: #f8f8f8;
}

/* window */
.window {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 20px 0;
	text-align: center;
	background: rgba(0, 0, 0, 0);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.window-panel {
	display: inline-block;
	padding: 12px 12px 20px 12px;
	margin: 60px 10px 0 10px;
	background: white;
	border: solid 3px #00A0E9;
	border-radius: 8px;
	max-width: 480px;
	text-align: left;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4)
}
.window-panel >.title {
	/*background: #dcf4dc;*/
	padding: 10px;
	color: #00A0E9;
	margin-bottom: 15px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}
.window-panel >.message {
	text-align: left;
	margin-bottom: 30px;
	font-size: 14px;
	color: #555555;
}

/* for dayguard */
.window.dg-confirm .window-panel {
	border: none;
	padding: 0;
	margin: 60px 15px 0 15px;
}
.window.dg-confirm .title {
	margin-bottom: 0;
}
.window.dg-confirm .message-wrapper {
	padding: 10px 20px;
	font-weight: bold;
}
.window.dg-confirm .sub-message {
	font-weight: normal;
	font-size: 12px;
	background: #F5F5F5;
	padding: 5px;
	margin-top: 10px;
}
.window.dg-confirm .action-button-list {
	background: #eeeeee;
	padding: 20px 20px 25px 20px;
	margin-top: 10px;
	margin-bottom: 0;
}
.window.dg-confirm .basic-button {
	color: #46B1E1;
	border: solid 1px #46B1E1;
	background: white;
}

/* action button list */
.action-button-list {
	margin: 20px 0;
	text-align: center;
}
.action-button-list .basic-button {
	margin: 0 5px;
}

/* justify button list */
.justify-button-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.justify-button-list > span {
	height: 36px;
	padding: 3px;
}
.justify-button-list .basic-button {
	width: 100%;
	height: 30px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
}
.justify-button-title {
	display: block;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	margin-top: 5px;
}

/* float window */
.float-window {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: #ffffff;
	z-index: 100;
}
.float-window.visible {
	opacity: 1;
	visibility: visible;
}
.float-window .window-title {
	font-size: 20px;
	font-weight: bold;
	margin-top: 10px;
	text-align: center;
	color: #00A0E9;
}

/* fix window */
.flex-window {
	width: auto !important;
	height: auto !important;
	background: none !important;
}
.flex-window .window-panel {
	background: none !important;
	border: none !important;
	padding: 0;
}
.flex-window .window-title-bar {
	position: relative;
	/*background: rgba(0, 205, 1, 0.6);*/
	background: rgba(244, 165, 60, 0.6);
	color: white;
	padding: 2px 12px;
}
.flex-window .window-body {
	padding: 12px;
	background: rgba(255, 255, 255, 0.9);
	border: solid 3px rgba(244, 165, 60, 0.6);
	border-top: none;
}

/* character icon */
.chara-icon {
	width: 33px;
	height: 33px;
	border-radius: 99px;
	vertical-align: middle;
}
.chara-icon.small {
	width: 20px;
	height: 20px;
	vertical-align: sub;
}

/* link */
.link {
	color: #00A0E9;
	font-weight: normal;
	cursor: pointer;
}
.link:hover {
	text-decoration: underline;
}
.link-disabled {
	color: lightgray;
	font-weight: normal;
}
.link-zoom .icon {
	font-size: 20px;
	vertical-align: sub;
}

/* 赤強調 */
.red {
	color: red;
	font-weight: bold;
}

/* no data label */
.no-data-label {
	color: gray;
	padding: 10px;
}

/* circle digit */
.circle-digit {
	display: inline-block;
	color: white;
	background: #00A0E9;
	padding: 0;
	margin: 0;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 99px;
	border: solid 1px #00A0E9;	/* これがあるとAndroidで文字が丁度真ん中になる */
	font-size: 12px;
}
.circle-digit.big {
	width: 32px;
	height: 32px;
	line-height: 32px;
	font-size: 19px;
}

/* menu list */
.menu-list {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	overflow: visible;
	background: white;
	z-index: 100;
}
.menu-list .item {
	position: relative;
	float: left;
	border-top: solid 1px lightgray;
	text-align: center;
	height: 50px;
	font-size: 9px;
	line-height: 10px;
	font-weight: bold;
	cursor: pointer;
}
.menu-list.item2 .item {
	width: 50%;
}
.menu-list.item3 .item {
	width: 33.33333333%;
}
.menu-list.item4 .item {
	width: 25%;
}
.menu-list.item5 .item {
	width: 20%;
}
.menu-list.item6 .item {
	width: 16.66666666%;
}
.menu-list .item.selected {
	color: #00A0E9;
}
.menu-list .item .icon {
	display: block;
	font-size: 22px;
	margin: 7px 0 3px 0;
}
.menu-list .badge-wrap {
	position: absolute;
	top: 0;
	left: 50%;

}
.menu-list .badge {
	position: absolute;
	background: red;
	border-color: red;
	top: -5px;
	right: -30px;
}

/* back icon */
.btn-back {
	position: absolute;
	top: -60px;
	left: 20px;
	color: #00A0E9;
	cursor: pointer;
}
.btn-back .icon {
	font-size: 36px;
	line-height: 40px;
	background: white;
	border-radius: 99px;
}
.btn-back .label {
	font-size: 10px;
	font-weight: bold;
	line-height: 10px;
	text-align: center;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 99px;
	padding: 2px;
}

/* float nav icon */
.float-nav {
	position: fixed;
	display: flex;
	bottom: 60px;
	right: 20px;
	font-size: 36px;
	line-height: 40px;
}
.float-nav .button {
	margin: 0 5px;
}
.float-nav .button.disabled {
	opacity: 0.2;
}
.float-nav .icon {
	background: white;
	border-radius: 99px;
}
.float-nav .label {
	font-size: 10px;
	font-weight: bold;
	line-height: 10px;
	text-align: center;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 99px;
	padding: 2px;
}

/* trash icon */
.btn-trash {
	float: left;
	background: red;
	color: white;
	font-size: 16px;
	border-radius: 99px;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	margin-left: 10px;
	cursor: pointer;
}

/* basic section */
.basic-section {
	padding: 10px;
	overflow: auto;
}
.basic-section-title {
	background: #eeeeee;
	padding: 8px 0 8px 15px;
}

/* auth name */
#auth-name {
	position: fixed;
	top: 5px;
	right: 8px;
	overflow: auto;
	z-index: 999;
}
#auth-name img {
	float: left;
	width: 15px;
	height: 15px;
}
#auth-name .name {
	float: left;
	font-size: 9px;
	margin: 1px 0 0 3px;
	color: white;
	background: #00a0e9;
	border-radius: 99px;
	padding: 0 5px;
}

/* developing */
#developing {
	position: fixed;
	top: 20px;
	left: 6px;
	font-size: 8px;
	color: orange;
	border-radius: 99px;
	padding: 1px 3px;
	z-index: 9999;
}

/* daywork */
.daywork {
	padding: 10px;
	border-bottom: solid 1px #dddddd;
}
.daywork:first-child {
	border-top: solid 1px #dddddd;
}
.daywork.is-established {
	background: #efefef;
}
.daywork .acl-info {
	color: red;
	font-weight: bold;
	font-size: 11px;
}
.daywork .acl-info .mark {
	color: white;
	background: red;
	border-radius: 99px;
	font-size: 8px;
	padding: 3px 10px;
	border: solid 2px white;
}
.daywork.is-established .work-name {
	color: #999999;
}
.daywork .main {
	position: relative;
	cursor: pointer;
}
.daywork .date {
	text-align: center;
	line-height: 15px;
	font-size: 13px;
	margin: 5px 0;
}
.daywork .day {
	text-align: center;
	line-height: 20px;
	font-size: 20px;
	font-weight: bold;
}
.daywork .day.sat {
	color: #2784ff;
}
.daywork .day.sun {
	color: #ff5f5f;
}
.daywork .left-area {
	float: left;
}
.daywork .right-area {
	margin-left: 40px;
}

/* 急募 掲載マーク */
.daywork .dw-mark-wrap {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

/* 急募 */
.daywork .dw-apply-hurry {
	display: inline-block;
	padding: 0 5px;
	color: red;
	background: white;
	font-size: 9px;
	font-weight: bold;
	border-radius: 10px;
	border: solid 2px red;
	white-space: nowrap;
}

/* 掲載 */
.daywork .dw-created-at {
	display: inline-block;
	font-size: 9px;
	background: white;
	padding: 0 6px;
	border-radius: 99px;
	border: solid 1px lightgray;
}

.daywork .ja-name {
	font-size: 11px;
	line-height: 12px;
}
.daywork .ja-name img {
	position: relative;
	top: 2px;
	width: 20px;
	height: 20px;
	vertical-align: sub;
}
.daywork .work-name {
	font-weight: bold;
	font-size: 15px;
	color: #333333;
}
.daywork .address-simple {
	font-weight: bold;
	color: orange;
}
.daywork .wage {
	color: #00A0E9;
	font-size: 20px;
	font-weight: bold;
}
.daywork .acl {
	color: #00A0E9;
	font-size: 16px;
	font-weight: bold;
}
.daywork .hour-wage {
	font-size: 11px;
	color: gray;
}
.daywork .am-pm-only {
	color: #00A0E9;
	font-weight: bold;
}
.daywork .transport {
	color: #00A0E9;
	font-size: 12px;
	font-weight: bold;
	vertical-align: text-bottom;
}
.daywork .meta {
	font-size: 12px;
}
.daywork .distance-wrap {
	display: inline-block;
	vertical-align: top;
}
.daywork .distance-layout {
	display: flex;
}
.daywork .distance-label {
	font-size: 9px;
	line-height: 11px;
	padding-right: 5px;
}
.daywork .distance {
	color: orange;
	font-weight: bold;
}
.daywork .apply-count {
	display: inline-block;
	color: #00A0E9;
	vertical-align: sub;
	font-size: 11px;
	font-weight: bold;
	margin-left: 5px;
}
.daywork .cancel-count {
	display: inline-block;
	color: #444444;
	vertical-align: sub;
	font-size: 11px;
	font-weight: bold;
	margin-left: 5px;
}
.daywork .flake-count {
	display: inline-block;
	color: #444444;
	vertical-align: sub;
	font-size: 11px;
	font-weight: bold;
	margin-left: 5px;
}

.worker-title {
	color: #ff5f02;
	font-weight: bold;
}

.biz-corp-name {
	color: #a0a000;
	font-weight: bold;
}

/* 仕事の状態 */
.status-mark-wrapper {
	position: absolute;
	right: 5px;
	top: 7px;
}
.status-mark-wrapper .active-date {
	display: block;
	text-align: center;
}
.dw-status {
	border-radius: 5px;
	padding: 5px;
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	color: white;
	white-space: nowrap;
}
.dw-status-apply {
	background: var(--status-color-apply);
}
.dw-status-apply.completed {
	background: var(--status-color-apply-completed);
}
.dw-status-approve {
	background: var(--status-color-approve);
}
.dw-status-cancel {
	background: var(--status-color-cancel);
}
.dw-status-stop {
	background: var(--status-color-stop);
}
.dw-status-give {
	background: var(--status-color-give);
}
.dw-status-flake {
	background: var(--status-color-flake);
}

/* アクションメッセージ */
.action-message {
	position: relative;
	padding: 5px;
	margin: 10px 2px 2px 2px;
	border: solid 1px #00A0E9;
	border-radius: 5px;
	font-size: 12px;
	background: #ffffff;
	text-align: left;
	word-break: break-all;
}
.action-message.apply {
	color: #00A0E9;
}
.action-message.apply .arrow {
	border-bottom: 6px solid #00A0E9;
}
.action-message.approve {
	border-color: #ff9800;
	color: #ff9800;
}
.action-message.approve .arrow {
	border-bottom: 6px solid #ff9800;
}
.action-message.cancel {
	border-color: var(--status-color-cancel);
	color: var(--status-color-cancel);
}
.action-message.cancel .arrow {
	border-bottom: 6px solid var(--status-color-cancel);
}
.action-message.give {
	border-color: var(--status-color-give);
	color: var(--status-color-give);
}
.action-message.give .arrow {
	border-bottom: 6px solid var(--status-color-give);
}
.action-message.stop {
	border-color: var(--status-color-stop);
	color: var(--status-color-stop);
}
.action-message.stop .arrow {
	border-bottom: 6px solid var(--status-color-stop);
}
.action-message.flake {
	border-color: #000000;
	color: #000000;
}
.action-message.flake .arrow {
	border-bottom: 6px solid #000000;
}
.action-message .chara-icon {
	width: 18px;
	height: 18px;
}
.action-message .arrow {
	position: absolute;
	top: -6px;
	left: 20px;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}

/* カレンダー日付コントローラ */
.date-controller {
	text-align: center;
	font-size: 20px;
	margin: 15px 0;
}
.date-controller .month {
	margin: 0 20px;
}
.date-controller .btn-reload {
	display: inline-block;
	margin-top: 10px;
	cursor: pointer;
}

/* 良かった */
.btn-like {
	display: inline-block;
	padding: 3px 5px 3px 7px;
	border-radius: 5px;
	font-size: 12px;
	white-space: nowrap;
	color: #888888;
	cursor: pointer;
}
.btn-like .icon {
	font-size: 18px;
	vertical-align: sub;
}
.btn-like.selected {
	color: #0091ff;
	font-weight: bold;
}
.btn-like:hover {
	background: #eeeeee;
}

/* 地図 */
.farm-map-wrap {
	position: relative;
}
.farm-map-wrap .arrow {
	position: absolute;
	margin: 246px 50% 0 50%;
	color: red;
	z-index: 1;
	text-shadow:
			white 1px 1px 0, white -1px -1px 0,/*右下、左上*/
			white -1px 1px 0, white 1px -1px 0,/*右上、左下*/
			white 0 1px 0, white  -1px 0,/*右、左*/
			white -1px 0 0, white 1px 0 0;/*上、下*/
}
.farm-map-wrap .arrow .object {
	position: relative;
	left: -8px;
}
#farm-map-2 {
	height: 500px;
}
#farm-map-3 {
	height: 500px;
}
#farm-map-4 {
	height: 500px;
}
#farm-map-5 {
	height: 500px;
}
#farm-map-6 {
	height: 500px;
}
#farm-map-7 {
	height: 500px;
}
#farm-map-8 {
	height: 500px;
}
#farm-map-9 {
	height: 500px;
}
#farm-map-10 {
	height: 500px;
}

/* キャラアイコンラップ */
.chara-icon-wrap {
	position: relative;
}

/* ブロックアイコン */
.icon-blocked {
	color: red;
}

/* dayworkタグ */
.dw-tag {
	display: inline-block;
	font-size: 10px;
	background: #aaaaaa;
	color: white;
	margin: 0 5px 5px 0;
	padding: 2px 8px;
	border-radius: 3px;
}
.dw-tag.enable-select {
	cursor: pointer;
}
.dw-tag.selected {
	background: orange;
}

/* テキスト省略 */
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 本人確認 */
.certificated {
	display: inline-block;
	padding: 0 5px;
	border: solid 1px #4bbd00;
	border-radius: 5px;
	color: #4bbd00;
	background: white;
	font-size: 9px;
	height: 16px;
	line-height: 14px;
	white-space: nowrap;
}
.certificated.not {
	border-color: red !important;
	color: red;
}

.caution-red {
	background: #ffcece;
	color: red;
	font-weight: bold;
	padding: 5px 10px;
	margin-top: 5px;
	line-height: 1.2em;
	border-radius: 5px;
}

/* 個人情報保護モードの場合黒塗りする */
.private-hide {
	background: black !important;
	color: black !important;
}

/* デスクトップのみ表示（モバイルでは非表示） */
.desktop-only {
	display: none;
}

/* ============================================
   デスクトップ用レスポンシブスタイル (768px以上)
   ============================================ */
@media (min-width: 768px) {
	/* デスクトップのみ表示 */
	.desktop-only {
		display: block;
	}
	/* サイドナビ化 - Google風シンプルデザイン */
	.menu-list {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 200px;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #ffffff;
		padding-top: 25px;
		padding-right: 3px;
		overflow: auto;
		z-index: 90;
		border-right: 1px solid #e0e0e0;
		box-sizing: border-box;
	}
	.menu-list .item {
		position: relative;
		float: none;
		width: 100%;
		height: auto;
		padding: 12px 16px;
		margin: 2px 0;
		text-align: left;
		border-top: none;
		border-bottom: none;
		display: flex;
		align-items: center;
		gap: 14px;
		color: #5f6368;
		transition: all 0.15s ease;
		cursor: pointer;
		border-radius: 0 24px 24px 0;
	}
	.menu-list .item:hover {
		background: #f1f3f4;
		color: #202124;
	}
	.menu-list .item.selected {
		background: #00A0E9;
		color: #ffffff;
		font-weight: 600;
	}
	.menu-list .item.selected .icon {
		color: #ffffff;
	}
	.menu-list .item .icon {
		display: inline-block;
		font-size: 20px;
		margin: 0;
		color: #5f6368;
	}
	.menu-list .item:hover .icon {
		color: #202124;
	}
	.menu-list .item.selected:hover .icon {
		color: #ffffff;
	}
	.menu-list .item .label {
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.1px;
	}
	/* 幅の個別指定を上書き */
	.menu-list.item2 .item,
	.menu-list.item3 .item,
	.menu-list.item4 .item,
	.menu-list.item5 .item,
	.menu-list.item6 .item {
		width: 100%;
	}
	/* バッジ位置調整 */
	.menu-list .badge-wrap {
		position: static;
		margin-left: auto;
	}
	.menu-list .badge {
		position: static;
		top: auto;
		right: auto;
		background: red;
		color: white;
	}
	/* 戻るボタンの位置調整（デスクトップ表示時） */
	.btn-back {
		position: fixed;
		top: 45px;
		left: 210px;
		z-index: 99;
	}
	/* メインコンテンツの左マージン調整（app-mobileの直接の子要素のみ） */
	app-mobile > .contents {
		margin-left: 200px;
	}
	/* ページヘッダの位置調整（サイドナビの上に表示） */
	.page-header {
		z-index: 100;
	}
	/* フロートナビの位置調整 */
	.float-nav {
		bottom: 20px;
	}
}

/* アクションバー表示時の戻るボタン位置調整（モバイルのみ） */
body.has-action-bar .btn-back {
	top: -160px;
}
@media (min-width: 768px) {
	/* デスクトップではアクションバーと戻るボタンは重ならないため通常位置 */
	body.has-action-bar .btn-back {
		top: 45px;
	}
}