@charset "utf-8";
/******************************************************************************
// サンダーバーズ協賛企業・求人ポータル
// トップページスタイルシート
******************************************************************************/
@import url(reset.min.css);
@import url('https://use.fontawesome.com/releases/v5.14.0/css/all.css');
@import url(base.css);

article {
	& * {
		font-size: 2.2rem;
	}
	& >section:not(:last-of-type) {
		margin-bottom: 1.0em;
	}
	& #searchOption {
		
		@media screen and (min-width:1280px),print{padding: 1.0em;}
		@media screen and (max-width:1279px){padding: 0.5em;}
		border: 1px solid var(--tGray);
		border-radius: 4px;
		& >ul {
			@media screen and (min-width:1280px),print{margin-bottom: 1.0em;}
			@media screen and (max-width:1279px){margin-bottom: 0.5em;}
			& >li {
				line-height: 1.2;
				padding: 0.8em 0.8em 0.6em;
				border: 1px solid var(--tGray);
				border-radius: 4px;
				position: relative;
				& ul {
					margin-left: 1.2em;
					@media screen and (max-width:1279px){
						margin-left: 0em;
						& ul {margin-left: 0.6em;}
					}
				}
				& >ul {
					/* margin-top: 0.8em; */
					display: none;
					& li {
						margin: 0.5em 0;
					}
				}
			}
			& >li:not(:last-of-type) {
				@media screen and (min-width:1280px),print{
					margin-bottom: 1.0em;
				}
				@media screen and (max-width:1279px){
					margin-bottom: 0.5em;
				}
			}
			& >li>span {
				cursor: pointer;
				display: block;
			}
			& >li>span::before {
				color: var(--tBirdsGreen);
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				text-align: center;
				line-height: 1;
				width: 1.25em;
				margin-right: 0.2em;
				display: inline-block;
			}
			& >li>span::after {
				color: var(--tGray);
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				text-align: center;
				line-height: 1;
				width: 1.25em;
				display: inline-block;
				content: '\f078';
				/* content: '\f077'; close*/
				position: absolute;
				right: 0.5em;
			}
		}
		& label {
			cursor: pointer;
		}
		& input[type='checkbox']
		, input[type='radio'] {
			text-align: center;
			vertical-align: -2px;
			width: 2.2rem;
			height: 2.2rem;
			margin-right: 0.2em;
			outline: none;
			appearance: none;
			display: inline-block;
			position: relative;
			cursor: pointer;
		}
		& input[type='checkbox']::before
		, input[type='radio']::before {
			content: '';
			width: 2.2rem;
			height: 2.2rem;
			/* outline: 1px solid var(--tBirdsGreen); */
			border: 1px solid var(--tBirdsGreen);
			border-radius: 2px;
			background: #fff;
			display: block;
			position: absolute;
		}
		input[type='radio']::before {border-radius: 50%;}
		& input[type='checkbox']:checked::before 
		, input[type='radio']:checked::before {
			color: white;
			content: '';
			background-color: var(--tBirdsGreen);
		}
		& input[type='checkbox']::after
		, input[type='radio']::after {
			content: '';
			width: 8px;
			height: 16px;
			border-right: 3px solid #fff;
			border-bottom: 3px solid #fff;
			display: block;
			position: absolute;
			left: 7px;
			top: 2px;
			transform: rotate(45deg);
			opacity: 0;
		}
		& input[type='checkbox']:checked::after
		, input[type='radio']:checked::after {
			opacity: 1;
		}
		& li.dec_comp {
			& >ul>li {
				width: 100%;
				@media screen and (min-width:1280px),print{
					display: table;
					& >span {
						display: table-cell;
						& >input {
							margin-left: 1.0em;
						}
					}
					& >span:first-of-type {
						width: 700px;
					}
				}
				@media screen and (max-width:1279px){
					& >span {
						display: block;
						& >input {
							margin-left: 1.0em;
						}
					}
					& >span:first-of-type {
						margin-bottom: 0.25em;
					}
					& >span:last-of-type {
						text-align: right;
					}
				}
			}
			li:not(:last-of-type) {
				padding-bottom: 0.5em;
				margin-bottom: 0.5em;
				border-bottom: 1px solid var(--tLightGray);
			}
		}
		& >p {
			text-align: center;
			& >button {
				color: white;
				font-size: 2.4rem;
				padding: 0.5em;
				border: none;
				border-radius: 4px;
				background: var(--tBirdsGreen);
				cursor: pointer;
				@media screen and (min-width:1280px),print{
					width: 30%;
				}
				@media screen and (max-width:1279px){
					width: 100%;
				}
			}
			& >button::before {
				content: '\f002';
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				text-align: center;
				line-height: 1;
				width: 1.25em;
				display: inline-block;
			}
		}
		& >p:not(:last-of-type) {
			margin-bottom: 1.0em;
		}
	}
	& #searchOption,
	& #searchRes {
		& li.area>span:first-of-type:before {content: "\f3c5";}
		& li.workcond>span:first-of-type::before {content: "\f5a0";}
		& li.workstyle>span:first-of-type::before {content: "\e066";}
		& li.employ>span:first-of-type::before {content: "\f007";}
		& li.decided>span:first-of-type::before {content: "\f073";}
		& li.dec_comp>span:first-of-type::before {content: "\f362";}
		& li.occupation>span:first-of-type::before {content: "\f509";}
		& li.transfer>span:first-of-type::before {content: "\e068";}
		& li.duty>span:first-of-type::before {content: "\f017";}
		& li.salary>span:first-of-type::before {content: "\f157";}
		& li.holiday>span:first-of-type::before {content: "\f5ca";}
		& li.qualification>span:first-of-type::before {content: "\f19d";}
	}
	& #searchRes {
		& >h2 {
			font-size: 3.0rem;
			text-align: center;
			letter-spacing: 0.25em;
			padding: 0.5em;
			margin-bottom: 0;
			border: 1px solid var(--tGray);
			background-color: var(--tLightGray);
		}
		& dl {
			border: 1px solid var(--tGray);
			border-radius: 4px;
			background: linear-gradient(135deg, rgba(0,155,77,1) 0%, rgba(0,155,77,1) 3%, rgba(255,255,255,1) 3%, rgba(255,255,255,1) 100%); 
			@media screen and (min-width:1280px),print{
				padding: 2.0em;
			}
			@media screen and (max-width:1279px){
				padding: 2.0em 1.0em;
			}
			& >dt {
				margin-bottom: 1.0em;
				border-bottom: 2px solid var(--tBirdsGreen);
				& >a {
					color: var(--tBirdsGreen);
					font-size: 3.0rem;
					font-weight: bold;
					text-decoration: none;
				}
			}
			& >dd {
				& li[class]>span::before {
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					text-align: center;
					line-height: 1;
					width: 1.25em;
					display: inline-block;
				}
				& .searchItem {
					margin-bottom: 1.0em;
					display: flex;
					flex-wrap: wrap;
					gap: 0.4em;
					& >li {
						line-height: 1.2;
						min-height: 3.0em;
						border: 1px solid var(--tGray);
						border-radius: 4px;
						display: table;
						@media screen and (min-width:1280px),print{
							width: calc((100% - 0.4em * 2) / 3);
						}
						@media screen and (max-width:1279px){
							width: 100%;
						}
						& >span {
							padding: 0.25em;
							vertical-align: middle;
							display: table-cell;
						}
						& >span:first-of-type {
							width: 8.0em;
							border-right: 1px solid var(--tGray);
							background-color: var(--tLightGray);
						}
					}
				}
				& .dec_comp {
					padding: 0.5em;
					margin-bottom: 1.0em;
					border: 1px solid var(--tGray);
					border-radius: 4px;
					& >li:first-of-type {
						font-weight: bold;
					}
					& >li:not(:first-of-type) {
						list-style: disc;
						margin-left: 1.3em;
					}
				}
				& >p {
					@media screen and (min-width:1280px),print{
						line-height: 1.0;
						display: grid;
						grid-template-columns: 1fr auto;
					}
					
					& >span {
						padding: 10px 0;
						@media screen and (max-width:1279px){
							margin-bottom: 1.0em;
							display: block;
						}
					}
					& >a {
						color: white;
						text-decoration: none;
						padding: 10px;
						padding-left: 1.0em;
						border-radius: 4px;
						background-color: var(--tBirdsGreen);
						@media screen and (max-width:1279px){
							text-align: center;
							display: block;
						}
					}
					& >a::after {
						content: '\f138';
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
						text-align: center;
						line-height: 1;
						width: 1.25em;
						margin-left: 0.2em;
						display: inline-block;
					}
				}
				& >div {
					@media screen and (min-width:1280px),print{
						display: grid;
						grid-template-columns: 1fr auto;
						grid-template-rows: repeat(2, 1fr);
						grid-column-gap: 0px;
						grid-row-gap: 0px;
						& >* {
							place-content: center;
							place-items: center;
						}
						& >*:nth-child(1) {grid-area: 1 / 1 / 2 / 2;}
						& >*:nth-child(2) {grid-area: 2 / 1 / 3 / 2;}
						& >*:nth-child(3) {grid-area: 1 / 2 / 3 / 3;}
					}
					& >*:nth-child(-n+2) {
						display: block;
						& >b {
							@media screen and (max-width:1279px){
								display: block;
							}
						}
						@media screen and (min-width:1280px),print{
							& >span::before {
								content: "｜";
							}
						}
						& >a {
							color: var(--tBlack);
							text-decoration: none;
							margin-left: 0.5em;
							display: inline-block;
							@media screen and (max-width:1279px){
								margin-left: 0;
							}
						}
						& >a::before {
							content: '\f0e0';
							font-family: "Font Awesome 5 Free";
							font-weight: 900;
							text-align: center;
							line-height: 1;
							width: 1.25em;
							margin-left: 0.2em;
							display: inline-block;
						}
						
					}
					& >*:nth-child(3) {
						color: white;
						text-decoration: none;
						padding: 10px;
						padding-left: 1.0em;
						border-radius: 4px;
						background-color: var(--tBirdsGreen);
						@media screen and (max-width:1279px){
							text-align: center;
							display: block;
						}
					}
					& >*:nth-child(3)::after {
						content: '\f138';
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
						text-align: center;
						line-height: 1;
						width: 1.25em;
						margin-left: 0.2em;
						display: inline-block;
					}
				}
			}
		}
		& >nav.pagenavi>ul {
			display: flex;
			justify-content: center;
			column-gap: 0.25em;
			& >li {
				line-height: 1.0;
				border: 1px solid var(--tGray);
				border-radius: 4px;
				& >*{
					color: var(--tGray);
					text-decoration: none;
					padding: 0.3em 0.5em 0.25em;
					display: inline-block;
				}
				& >b {
					background-color: var(--tLightGray);
				}
			}
		}
		& >*:not(:last-child):not(h2) {
			margin-bottom: 1.0em;
		}
		& #corplist {
			& >li {
				margin-bottom: 0.5em;
				& >b {
					color: var(--tDarkGray);
					font-size: 3.0rem;
					font-weight: normal;
					padding: 0.25em;
					border: 1px solid var(--tGray);
					border-radius: 4px;
					display: block;
					cursor: pointer;
				}
				& >b::before {
					color: var(--tBirdsGreen);
					content: "■";
				}
				& dl {
					margin-top: 2px;
				}
			}
		}
	}
	& #marquee {
		width: 1200px;
		margin-bottom: 1.0em;
		background-color: var(--tBirdsGreen);
		@media screen and (min-width:1280px),print{
			display: grid;
			grid-template-columns: 100px auto;
			place-items: center;
			& >p {
				font-size: 2.6rem;
				text-align: center;
			}
		}
		@media screen and (max-width:1279px){
			& >p {
				font-size: 2.0rem;
				padding-left: 1.0em;
			}
		}
		& >p {
			color: white;
		}
		& >ul {
			width: 100%;
			padding: 1.0em;
			border: 1px solid var(--tBirdsGreen);
			background: var(--tLightGray);
		}
	}
	& p.na {
		color: var(--tMidGray);
		font-size: 3.0rem;
		font-weight: bold;
		text-align: center;
		padding: 1.0em;
		border: 2px solid var(--tMidGray);
		border-radius: 4px;
	}
	& p.listlink {
		text-align: right;
		padding-top: 0.5em;
		& >a {
			color: var(--tBirdsGreen);
		}
		& >a::after {
			content: '\f054';
			color: var(--tBirdsGreen);
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
			text-align: center;
			line-height: 1;
			width: 1.25em;
			margin-right: 0.2em;
			display: inline-block;
		}
	}
}