@charset "UTF-8";

@media screen and (min-width: 721px){
	.pc-hide-important {
		display: none !important;
	}
}
@media screen and (max-width: 924px){
	.expand-menu .title {
		font-size: 1.2em;
		margin-right: 10px;
	}
	.expand-menu .link {
		font-size: 1em;
		margin-right: 10px;
	}
	.icon-menu-link-circle {
		margin-left: 3px;
	}
}
@media screen and (max-width: 765px){
	#header-right .faq,
	#header-right .info,
	#header-right .menu {
		margin-right: 0;
	}
}

@media screen and (max-width: 720px){
	.sp-hide-important {
		display: none !important;
	}
	.pc-external-link-container{
		display: none;
	}
	.sp-external-link-container{
		display: block;
		margin-top: 60px;
		width: 100%;
	}
	.logo-pc{
		display: none;
	}
	.logo-sp{
		display: inline-block;
	}
	#header-right .user-info {
		padding-left: 20px;
	}
	#header-right-name-container{
		margin-right: 10px;
	}
	#header-right-menu {
		width: 222px;
		right: 0px;
	}
	#base-layout{
		background-color: #fafafa;
	}
	#cmn-header > #site-name{
		color: rgba(233, 46, 60, 1);
		font-size: 1.2em;
		font-weight: 600;
		margin-left: 10px;
		line-height: 1em;
	}
	#logo {
		text-align: left;
		width: auto;
	}
	#logo img{
		width: 60px;
		vertical-align: middle;
	}
	h2#contents-title{
		font-size: 28px;
	}
	h3.contents-title{
		font-size: 24px;
		margin-bottom: 20px;
	}
	#contents{
		padding: 100px 0 0 0;
	}
	#main-line {
		margin-bottom: 80px;
	}
	#footer{
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 180px;
	}
	#footer a{
		margin-top: 20px;
		display: block;
	}
	#footer .copyright, #footer .menu{
		width: 100%;
		text-align: center;
	}
	#footer .copyright{
		position: absolute;
		top: 140px;
	}
	#footer .menu{
		position: absolute;
		top: 10px;
	}
	#footer .menu .link-circle{
		display: none;
	}

	.login-container{
		width: 100%;
		margin-top: 110px;
	}
	.login-form-button-box{
		display: flex;
		flex-wrap: wrap;
	}
	.login-form-button-box > *{
		width: 100%;
		order: 2;
	}
	.login-form-button-box > label{
		text-align: center;
	}
	#login .login-button{
		width: 100%;
		order: 1;
		margin-bottom: 20px;
	}
	.login-link-container{
		text-align: center;
	}
	#password-poricy-cotainer table,
	#password-poricy-cotainer td,
	#password-poricy-cotainer th,
	#password-poricy-cotainer tr,
	#password-poricy-cotainer tbody,
	#password-poricy-cotainer thead{
		display: block;
		width: 100%;
		vertical-align: middle;
	}
	#password-poricy-cotainer th{
		font-weight: bold;
	}
	#information-container{
		flex-wrap: wrap;
	}
	#information-container > #search-container{
		flex-basis: 100%;
		flex-grow: 1;
		width: 100%;
		height: auto;
		min-width: 0;
		max-width: none;
		padding-right: 0;
	}
	#information-container > #search-container .sp-search-close-box,
	#search-container .sp-search-form .sp-search-close-box{
		display: block;
		text-align: center;
		margin: 30px;
	}
	#information-container #list-container{
		padding-left: 0;
	}
	#information-container.top > #list-container .information-list{
		overflow: auto;
		height: auto;
	}
	#information-container > #search-container .search-box .period-box:has(.date_from) {
		margin-bottom: 0px;
	}
	#information-container > #search-container .search-box .data:has(> .period-box){
		display: flex;
		align-items: center;
	}
	#information-container > #search-container .search-box .period-box{
		flex-wrap: wrap;
	}
	#information-container > #search-container .search-box .period-box > *{
		display: block;
	}
	#information-container > #search-container .search-box .period-box:has( > .date_from){
		margin-right: 5px;
	}
	#information-container > #search-container .search-box .period-box:has( > .date_to){
		margin-left: 5px;
	}
	#information-container > #list-container .information-box .row1,
	#information-container > #list-container .information-box .row2,
	#information-container > #list-container .information-box .files{
		flex-wrap: wrap;
	}
	#information-container > #list-container .information-box .row1{
		/*margin-bottom: 0;*/
	}
	#information-container > #list-container .information-box .date,
	#information-container > #list-container .information-box .title{
		width: 100%;
		margin-bottom: 10px;
	}
	
	#information-container > #list-container .information-box .category-box{
		margin-left: 0;
	}
	#information-container > #list-container .information-box .category{
		margin-right: 10px;
		margin-left: 0px;
	}
	.notice-list .notice-box {
		display: grid;
		grid-template-columns: 1fr 1fr 16px; 
	}
	.notice-list .notice-box .date{
		margin-right: 0;
		grid-column: 1 / 3;
		grid-row: 1 / 2;
	}
	.notice-list .notice-box .title{
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}
	.notice-list .notice-box .link-circle{
		grid-column: 3 / 4;
		grid-row: 1 / 3;
	}
	.sp-list-pager .upper,
	.sp-list-pager .lower{
		flex-wrap: wrap;
	}
	.sp-list-pager.flex-nowrap .upper,
	.sp-list-pager.flex-nowrap .lower{
		flex-wrap: nowrap;
	}
	.sp-list-pager .pager{
		flex-wrap: wrap;
		margin: 0;
		width: 100%;
		/*justify-content: space-between;*/
		margin-top: 20px;
	}
	.sp-list-pager.flex-nowrap .pager{
		flex-wrap: wrap;
		margin-left: auto;
		width: auto;
		margin-top: 0;
		
	}
	
	.sp-list-pager .pager > *{
/*		width: calc(((100vw - 40px) - (100vw - (100% + 40px))) / 9 - 5px);
		height: calc((100vw - 40px) / 9 - 5px);*/
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: calc(45px / 8);
	}
	.sp-list-pager .pager > *:last-child{
		margin-right:  0;
	}
	.sp-list-pager .lower .pager{
		order: 1;
		margin-top: 0px;
		margin-bottom: 20px;
	}
	.sp-list-pager .lower .pager-limit-box{
		order: 2;
	}
	.sp-list-pager .lower .pager-sort-box{
		order: 3;
	}
	
	.sp-list-pager.flex-nowrap .lower .pager{
		order: 3;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.sp-list-pager.flex-nowrap .lower .pager-limit-box{
		order: 2;
	}
	.sp-list-pager.flex-nowrap .lower .pager-sort-box{
		order: 1;
	}
	
	#sp-search-popup{
		width: 100%;
		padding: 10px 20px;
		display: block;
		position: fixed;
		bottom: 0px;
		left: 0px;
		text-align: center;
		background-color: #fafafa;
		z-index: 2;
	}
	#sp-search-popup > #sp-search-popup-button{
		width: 100%;
		height:  50px;
	}
	#information-container .cmn-btn.sp-search-button,
	#information-container .cmn-btn.reset_search{
		height:  50px;
	}
	
	#contact-container{
		flex-wrap: wrap;
		padding-top: 40px;
	}
	#contact-container .contact-img{
		margin: 0 30px 40px 30px; 
		width: 100%;
		text-align: center;
	}
	#contact-container .contact-img > img{
		width: 60px;
		height: 60px;
	}
	#contact-container .contact-text{
		font-size: 1.2rem;
		font-weight: 500;
		line-height: 2;
	}
	#contact-container .contact-company{
		font-size: 1rem;
	}
	
	.top-external-link-container, .top-contents-container{
		grid-template-columns: 1fr;
		gap: 20px 20px;
	}
	
	#search.sp-search-form table,
	#search.sp-search-form tr,
	#search.sp-search-form th,
	#search.sp-search-form td,
	#search.sp-search-form tbody,
	#search.sp-search-form thead{
		display: block;
		width: 100%;
		border: none;
		background-color: transparent;
	}
	
	#search.sp-search-form .search-box{
		margin-bottom: 20px;
	}
	#search.sp-search-form .search-box > .sp-title{
		color: rgba(233, 46, 60, 1);
		border-bottom: 1px solid #e0e0e0;
		padding-bottom: 10px;
		margin-bottom: 10px;
		font-size: 1.2em;
		font-weight: bold;
		padding-left: 0;
		width: 100%;
	}
	#search.sp-search-form .search-box > .sp-data{
		display: block;
		align-items: center;
		padding-top: 0px;
		padding-left:0px;
		padding-right:0px;
		width: 100%;
	}
	#search.sp-search-form .search-box > .sp-data .search_contaienr{
		display: grid;
		align-items: center;
		grid-template-columns: auto 1fr;
		column-gap: 10px;
	}
	#search.sp-search-form .search-box > .sp-data .search_contaienr select{
		width: 100%;
	}
	#search-container #search.sp-search-form .button-box{
		text-align: center;
	}
	#search-container #search.sp-search-form .button-box .cmn-btn{
		width: 100%;
		height: 50px;
	}
	#search-container #search.sp-search-form .sp-exist-user-id-box{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	#search-container #search.sp-search-form .sp-display-box{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	
	.hPopUp2 {
		margin-top: 0px;
		top: 100px;
		left: 10px;
	}
	.hSubMap2 {
		width: calc(100vw - 20px);
	}
	.csPopupContainerArea{
		padding-right: 0;
	}
	.csPopupContainer{
		min-width: auto;
	}
	.search_result{
		height: calc(100vh - 380px);
	}
	.search-staff-list-container th,
	.search-staff-list-container td{
		padding-left: 8px;
		padding-right:8px;
	}
	#search-staff-list .search-staff-list-detail{
		width:50px;
		min-width:50px;
	}
	
	.sp-external-link-container.search-box > .title{
		color: rgba(233, 46, 60, 1);
		border-bottom: 1px solid #e0e0e0;
		padding-bottom: 10px;
		margin-bottom: 10px;
		font-size: 1.2em;
	}
	
	.sp-form table,
	.sp-form tr,
	.sp-form th,
	.sp-form td,
	.sp-form tbody,
	.sp-form thead{
		display: block;
		width: 100%;
		border: none;
		/*background-color: transparent;*/
	}
	.sp-form table{
		border: 1px solid #c2c2c2;
	}
	.sp-form .search_contaienr{
		display: flex;
		column-gap: 10px;
	}
	.sp-form .search_contaienr .select_list{
		width: 100%;
	}
	.sp-form .account_mail_address,
	.sp-form .staff_background{
		width: 100%;
	}
	.sp-form .sp-form-name-box{
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
	}
	.sp-form .sp-form-name-box .sp-form-name1-title{
		order: 1;
	}
	.sp-form .sp-form-name-box .sp-form-name2-title{
		order: 2;
	}
	.sp-form .sp-form-name-box .sp-form-name1,
	.sp-form .sp-form-name-box .sp-form-name1en{
		order: 3;
		
	}
	.sp-form .sp-form-name-box .sp-form-name2,
	.sp-form .sp-form-name-box .sp-form-name2en{
		order: 4
	}
	.sp-form .sp-form-user-id,
	.sp-form .sp-form-name1,
	.sp-form .sp-form-name2,
	.sp-form .sp-form-name1en,
	.sp-form .sp-form-name2en{
		width: 100%;
	}
	.sp-form .sp-form-required_training-box{
		display: block;
		width: 100%;
	}
	.sp-form .sp-form-required_training-box:nth-of-type(2){
		margin-top: 20px;
	}
	.sp-form .sp-btn-confirm,
	.sp-form .sp-btn-delete,
	.sp-form .sp-btn-reset{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 50px;
	}
	.sp-form .sp-btn-confirm,
	.sp-form .sp-btn-reset{
		margin-bottom: 30px;
		
	}
	.sp-form .form-staff-btn-box{
		column-gap: 20px;
	}
	.sp-form .form-staff-btn-box .sp-btn-confirm,
	.sp-form .form-staff-btn-box .sp-btn-delete,
	.sp-form .form-staff-btn-box .sp-btn-reset{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
	}
	.sp-form .form-staff-btn-box .sp-btn-confirm{
		width: 100%;
		margin-bottom: 30px;
		margin-right: 0px !important;
	}
	.sp-form .form-staff-btn-box .sp-btn-delete,
	.sp-form .form-staff-btn-box .sp-btn-reset{
		width: 100%;
		flex: 1;
		margin-bottom: 30px;
	}
	.flat-search-container{
		flex-wrap: wrap;
	}
	.link-container-grid{
		grid-template-columns: 1fr;
		row-gap: 30px;
	}
}