/* 既にある会社への参加の申請(js/companyjoin.js)。会員登録の途中の「管理者に参加を申請する / 別の会社として登録する」と申請した後のカード。
   モックアップ(キャンバスの 6 段)どおり、会員登録の画面の外の枠の中の白いカード。会員登録の画面では .generalentryformbox にも重なる */
.companyjoinband[hidden], .companyjoinreasons[hidden], .companyjoinreasonhint[hidden] {
	display: none;
}
/* 確認メールのリンクの画面: 会員登録の画面(.axopsrich .pagetitlecontainer・.contentcontainer・.generalentryformarea)と同じ題名の下の影・背景・外の枠 */
.pagetitlecontainer.companyjoinpagetitle {
	position: relative;
	z-index: 5;
	margin-bottom: 0;
	background: #FFFFFF;
	box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.12), 0 8px 8px 0 rgba(0, 0, 0, 0.08);
}
.companyjoinband {
	display: flex;
	justify-content: center;
	padding: 15px 0 50px;
	background: linear-gradient(182deg, #e5e2f1, 80%, #efdee7);
}
.companyjoinframe {
	flex: 0 1 922px;
	min-width: 0;
	box-sizing: border-box;
	margin: 0 8px;
	padding: 10px 10px 30px;
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 15px;
	box-shadow: 0 18px 6px -12px rgba(0, 0, 0, 0.1), 0 12px 12px 0 rgba(0, 0, 0, 0.07), 0 6px 50px 0 rgba(0, 0, 0, 0.06);
}
.companyjoincard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	padding: 22px 24px 26px;
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	box-shadow: 0 9px 3px -6px rgba(0, 0, 0, 0.1), 0 6px 6px 0 rgba(0, 0, 0, 0.07), 0 3px 30px 0 rgba(0, 0, 0, 0.06);
	color: #212121;
	word-break: normal;
	overflow-wrap: anywhere;
}
.axopsrich .generalentryformbox.externalregistrationcard.companyjoincard {
	gap: 12px;
	padding: 22px 24px 26px;
}
.companyjoinchip {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 4px 14px;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 16px;
	color: #424242;
	font-size: 14px;
	line-height: 22px;
}
.companyjoinchiplabel {
	color: #616161;
	font-size: 12px;
}
.companyjoinicon {
	display: inline-flex;
	flex: none;
	width: 18px;
	height: 18px;
	color: #616161;
}
.companyjoinicon svg {
	width: 100%;
	height: 100%;
}
.companyjointitle {
	margin: 0;
	font-size: 21px;
	line-height: 30px;
	font-weight: 400;
	text-align: center;
}
.companyjoinguide {
	width: 640px;
	max-width: 100%;
	margin: 0;
	color: #424242;
	font-size: 14px;
	line-height: 22px;
	text-align: center;
}
.companyjoinoptions {
	display: flex;
	gap: 16px;
	width: 836px;
	max-width: 100%;
	margin-top: 8px;
}
.companyjoinoption {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	box-sizing: border-box;
	padding: 18px 20px 20px;
	background: #FFFFFF;
	border: 1px solid #E0E0E0;
	border-radius: 10px;
}
.companyjoinoption_join {
	background: #F7F8FF;
	border: 2px solid #0070C9;
}
.companyjoinoptiontext {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.companyjoinoptionheader {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.companyjoinoptiontitle {
	font-size: 17px;
	line-height: 24px;
	font-weight: 500;
}
.companyjoinbadge {
	padding: 0 8px;
	background: #0070C9;
	border-radius: 9px;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 18px;
}
.companyjoinoptionguide {
	margin: 0;
	color: #424242;
	font-size: 14px;
	line-height: 22px;
}
.companyjoinoption .button {
	margin-top: auto;
	white-space: normal;
}
.companyjoinoption_separate .button {
	font-size: 15px;
}
/* 「別の会社として登録を続ける」を押した後: 申請は 1 行に縮め、理由を選ぶ(モックアップの「別の会社として登録の理由」) */
.companyjoinchoice_reasons .companyjoinoptions {
	flex-direction: column;
	gap: 12px;
}
.companyjoinchoice_reasons .companyjoinoption_join {
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border: 1px solid #E0E0E0;
}
.companyjoinchoice_reasons .companyjoinoption_join .companyjoinoptiontext {
	flex: 1;
	gap: 2px;
}
.companyjoinchoice_reasons .companyjoinoption_join .companyjoinoptiontitle {
	font-size: 16px;
}
.companyjoinchoice_reasons .companyjoinoption_join .companyjoinbadge, .companyjoinchoice_reasons .companyjoinseparateguide, .companyjoinchoice_reasons .companyjoinjoinguide,
.companyjoinchoice:not(.companyjoinchoice_reasons) .companyjoinjoinguideshort {
	display: none;
}
.companyjoinchoice_reasons .companyjoinoption_join .companyjoinoptionguide {
	color: #616161;
	font-size: 13px;
	line-height: 20px;
}
.companyjoinchoice_reasons .companyjoinoption_join .button {
	flex: none;
	width: 220px;
	margin-top: 0;
	font-size: 15px;
}
.companyjoinchoice_reasons .companyjoinoption_separate {
	gap: 12px;
	border: 2px solid #0070C9;
}
.companyjoinchoice_reasons .companyjoinoption_separate .button {
	align-self: center;
	width: 400px;
	max-width: 100%;
	margin-top: 4px;
}
.companyjoinreasons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.companyjoinreasons legend {
	padding: 0 0 6px;
	color: #424242;
	font-size: 14px;
	line-height: 20px;
}
.companyjoinreason {
	display: flex;
	align-items: center;
	gap: 10px;
}
.companyjoinreason input[type='radio'] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
}
.companyjoinreason label {
	font-size: 15px;
	line-height: 22px;
	cursor: pointer;
}
.companyjoinreasonnote {
	flex: 1;
	min-width: 120px;
	box-sizing: border-box;
	height: 34px;
	padding: 4px 8px;
	border: 0;
	border-bottom: 1px solid #BDBDBD;
	color: #424242;
	font-family: inherit;
	font-size: 15px;
}
.companyjoinreasonnote:focus {
	outline: none;
	border-bottom-color: #0070C9;
}
.companyjoinreasonhint {
	margin-left: 28px;
	box-sizing: border-box;
	padding: 10px 14px;
	background: #FFFDE7;
	border-radius: 6px;
	color: #424242;
	font-size: 13px;
	line-height: 20px;
}
.companyjoinnote {
	margin: 6px 0 0;
	color: #616161;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
}
/* 申請した後 */
.companyjoinrequested {
	gap: 14px;
	padding: 28px 24px 30px;
}
.axopsrich .generalentryformbox.externalregistrationcard.companyjoinrequested {
	gap: 14px;
	padding: 28px 24px 30px;
}
.companyjoindoneicon {
	width: 52px;
	height: 52px;
	color: #0070C9;
}
.companyjoinrequested .companyjointitle {
	font-size: 24px;
	line-height: 32px;
}
.companyjoinrequested .companyjoinguide {
	width: 600px;
	font-size: 15px;
	line-height: 24px;
}
.companyjoinsteps {
	display: flex;
	gap: 12px;
	width: 720px;
	max-width: 100%;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
.companyjoinstep {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	box-sizing: border-box;
	padding: 12px 14px;
	background: #F7F8FF;
	border-radius: 8px;
}
.companyjoinstep_done {
	background: #E3F2FD;
}
.companyjoinsteplabel {
	color: #616161;
	font-size: 13px;
	line-height: 18px;
}
.companyjoinstep_done .companyjoinsteplabel {
	color: #0D47A1;
}
.companyjoinstepnote {
	font-size: 15px;
	line-height: 22px;
}
.companyjoinrequested .companyjoinnote {
	width: 600px;
	max-width: 100%;
}
.companyjoinlinks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	margin-top: 4px;
	font-size: 14px;
}
/* マイアカウントの「参加の申請」(companyjoinrequests.php、モックアップ(キャンバスの 7 段)どおりセキュリティ設定と同じ薄い青の箱) */
.companyjoinrequestsarea[hidden] {
	display: none;
}
.companyjoinrequestsdescription {
	width: 780px;
	max-width: calc(100% - 32px);
	margin: 12px auto 0;
	color: #424242;
	font-size: 16px;
	line-height: 23px;
	text-align: center;
}
.companyjoinrequestsarea {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 890px;
	max-width: calc(100% - 32px);
	margin: 24px auto 60px;
	word-break: normal;
	overflow-wrap: anywhere;
}
.companyjoinrequestsheading {
	margin: 0;
	padding: 0 4px;
	font-size: 18px;
	line-height: 26px;
	font-weight: 500;
}
.companyjoinrequestsheading_history {
	margin-top: 14px;
}
.companyjoinrequest {
	display: flex;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	padding: 16px 20px;
	background: #F7F8FF;
	border-radius: 18px;
}
.companyjoinrequestperson {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.companyjoinrequestname {
	font-size: 17px;
	line-height: 24px;
}
.companyjoinrequestemail {
	color: #424242;
	font-size: 14px;
	line-height: 20px;
}
.companyjoinrequestmeta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	color: #616161;
	font-size: 13px;
	line-height: 18px;
}
.companyjoinrequestkey {
	padding: 1px 8px;
	background: #FFFFFF;
	border: 1px solid #90CAF9;
	border-radius: 9px;
	color: #0D47A1;
}
.companyjoinrequestbuttons {
	display: flex;
	gap: 20px;
}
.companyjoinrequestbuttons .button {
	width: auto;
	padding: 6px 16px;
	font-size: 15px;
}
.companyjoinrequestapprove {
	min-width: 180px;
}
.companyjoinrequestdecline {
	min-width: 130px;
}
.companyjoinrequestsnote, .companyjoinrequestsempty, .companyjoinrequestsadminonly {
	margin: 0;
	padding: 0 4px;
	color: #616161;
	font-size: 13px;
	line-height: 20px;
}
.companyjoinrequestsempty {
	font-size: 14px;
}
.companyjoinhistory {
	display: flex;
	flex-direction: column;
	border-top: 1px solid #EEEEEE;
}
.companyjoinhistoryrow {
	display: flex;
	gap: 20px;
	padding: 10px 4px;
	border-bottom: 1px solid #EEEEEE;
	font-size: 14px;
	line-height: 20px;
}
.companyjoinhistorydate {
	flex: none;
	width: 150px;
	color: #616161;
}
.companyjoinhistoryperson {
	flex: 1;
	min-width: 0;
}
.companyjoinhistorystatus {
	flex: none;
	width: 220px;
	color: #616161;
}
.companyjoinhistorystatus_approved {
	color: #2E7D32;
}
/* MEDIA START **********************************************/
@media (max-width: 800px) {
.companyjoinrequest {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 14px 16px;
}
.companyjoinrequestbuttons {
	gap: 10px;
}
.companyjoinrequestbuttons .button {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	white-space: normal;
}
.companyjoinhistoryrow {
	flex-wrap: wrap;
	gap: 2px 12px;
}
.companyjoinhistorydate, .companyjoinhistorystatus {
	width: auto;
}
.companyjoinhistoryperson {
	flex-basis: 100%;
	order: 3;
}
.companyjoinband {
	padding: 12px 0 30px;
}
.companyjoinframe {
	padding: 8px 8px 24px;
}
.companyjoincard, .axopsrich .generalentryformbox.externalregistrationcard.companyjoincard {
	align-items: stretch;
	padding: 16px 14px 18px;
}
.companyjoinchip {
	align-self: center;
	font-size: 13px;
}
.companyjoinchip > span:not(.companyjoinicon) {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.companyjoinchip > .companyjoinchiplabel {
	display: none;
}
.companyjointitle {
	font-size: 20px;
	line-height: 28px;
}
.companyjoinguide, .companyjoinrequested .companyjoinguide, .companyjoinoptions, .companyjoinsteps, .companyjoinrequested .companyjoinnote {
	width: auto;
}
.companyjoinguide {
	text-align: left;
}
.companyjoinoptions, .companyjoinsteps {
	flex-direction: column;
}
.companyjoinoption, .companyjoinchoice_reasons .companyjoinoption_separate {
	gap: 8px;
	padding: 14px 14px 16px;
}
.companyjoinoptiontitle {
	font-size: 16px;
}
.companyjoinoptionguide {
	font-size: 13px;
	line-height: 20px;
}
.companyjoinoption .button {
	min-height: 44px;
}
.companyjoinchoice_reasons .companyjoinoption_join {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 14px 14px 16px;
}
.companyjoinchoice_reasons .companyjoinoption_join .button, .companyjoinchoice_reasons .companyjoinoption_separate .button {
	width: 100%;
}
.companyjoinreason {
	align-items: flex-start;
	flex-wrap: wrap;
}
.companyjoinreason label {
	flex: 1;
	min-width: 0;
}
.companyjoinreasonnote {
	flex-basis: calc(100% - 28px);
	margin-left: 28px;
}
.companyjoinreasonhint {
	margin-left: 0;
}
.companyjoinnote {
	font-size: 12px;
	line-height: 18px;
}
.companyjoinrequested, .axopsrich .generalentryformbox.externalregistrationcard.companyjoinrequested {
	align-items: center;
	padding: 22px 14px 24px;
}
.companyjoinrequested .companyjoinsteps {
	align-self: stretch;
}
} /* MEDIA END **********************************************/