/**************************** 
	Top
*****************************/
#bg {
	width: 100%;
	height: auto;
	min-height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -20;
}
.bgi {
	background-size: cover;
	background-position: center;
	background-image: url(../img/photo/top.png);
}
#top {
	width: 100%;
	height: auto;
	min-height: 100vh;
}

/* company name, message_jp, message_en */
.catchMessage {
	width: 100%;
	height: auto;
	min-height: 100vh;
	color: var(--catch-message);
	align-items: center;
	/* text-shadow: 0px 0px 5em #000000, 0 0 4em #000000, 0 0 3em #000000, 0 0 2em #000000, 0 0 1em #000000, 0 0 1em #000000, 0 0 1em #000000, 0 0 1em #000000; */
	text-shadow: 0px 0px 5em #cd6bfe, 0 0 4em #cd6bfe, 0 0 3em blue, 0 0 2em blue, 0 0 1em blue, 0 0 1em blue, 0 0 1em #cd6bfe, 0 0 1em #cd6bfe;
	/*
	-webkit-text-stroke-width: 0.2px;
  -webkit-text-stroke-color: black;
	*/
	font-family: "Times New Roman", serif, "メイリオ";
}
.catchMessage > title {
	display: block;
	font-size: xxx-large;
	font-weight: bold;
	text-align: center;
	animation: fadeIn 1s ease 1s 1 normal;
	-webkit-animation: fadeIn 1s ease 1s 1 normal;
	animation-fill-mode: both;
	letter-spacing: 0.3em;
}
.catchMessage > label {
	display: block;
	font-size: xx-large;
	font-weight: bold;
	text-align: center;
	animation: fadeIn 1s ease 2s 1 normal;
	-webkit-animation: fadeIn 1s ease 2s 1 normal;
	animation-fill-mode: both;
	letter-spacing: 0.3em;
}
.catchMessage > div {
	font-size: medium;
	line-height: 2rem;
	animation: fadeInShowBottom 1s ease 3s 1 normal;
	-webkit-animation: fadeInShowBottom 1s ease 3s 1 normal;
	animation-fill-mode: both;
	letter-spacing: 0.3em;
}
/* mobile */
@media screen and (max-width:768px) {
	.catchMessage > title {
		letter-spacing: normal;
	}
	.catchMessage > label {
		letter-spacing: normal;
	}
	.catchMessage > div {
		letter-spacing: normal;
	}
}

/* pc */
@media screen and (min-width:769px) {
	.catchMessage > label {
		font-size: xx-large;
	}
}
/* mobile */
@media screen and (max-width:768px) {
	.catchMessage > title {
		font-size: xx-large;
	}
	.catchMessage > label {
		font-size: x-large;
	}
}

/* top menu */
#menu {
	display: flex;
	position: absolute; top: 0px; left: 0px;
	width: 100%;
  justify-content:         flex-start;
  -webkit-justify-content: flex-start;
}
#menu > a {
	display: flex;
	height: 3.0rem;
  align-items:             center;
  -webkit-align-items:     center;
  justify-content:         center;
  -webkit-justify-content: center;
	animation: showMenuItem 1s ease 4s 1 normal;
	animation-fill-mode: both;
}
#menu > a:hover {
	background-color: rgba(214,87,98,0.80);
}

/**************************** 
	MESSAGE
*****************************/
.message > p {
	margin: 0px;
}

/**************************** 
	BUISNESS
*****************************/
/* pc, print */
@media print, screen and (min-width:769px) {
	.bizCard {
		width: 300px;
		height: 400px;
		border: 1px solid var(--ruled-line);
		margin: 0.4em;
		vertical-align: top;
	}
	.bizCard .title {
		flex-direction:         column-reverse;
		-webkit-flex-direction: column-reverse;
		align-items:            center;
		-webkit-align-items:    center;
	}
	.bizCard .title > img {
		display: block;
		width: 180px;
		height: 180px;
	}
	.bizCard .title > label {
		display:block;
		width: 100%;
		margin-top: 0.5em;
		font-size: medium;
		font-weight: bold;
		color: var(--biz-card-font);
	}
	.bizCard > .description {
		margin: 0.0em 0.6em;
		font-size: small;
		font-weight: normal;
		text-align: left;
		color: var(--biz-card-font);
	}
}
/* chrome A4 adjustment */
@media print {
	.bizCard {
		width: 220px;
		height: 450px;
	}
}

/* mobile */
@media screen and (max-width:768px) {
	.bizCard {
		width: 90vw;
		min-height: 350px;
		border: 1px solid var(--ruled-line);
		margin: 0.4em;
		vertical-align: top;
		padding: 0.5rem;
	}
	.bizCard .title {
		flex-direction:         column-reverse;
		-webkit-flex-direction: column-reverse;
		align-items:            center;
		-webkit-align-items:    center;
	}
	.bizCard .title > img {
		width: 150px;
		height: 150px;
	}
	.bizCard .title > label {
		display: inline-block;
		margin-top: 0.5em;
		font-size: medium;
		font-weight: bold;
		color: var(--biz-card-font);
		padding-left: 1.0rem;
	}
	.bizCard > .description {
		margin: 0.5rem;
		font-size: small;
		font-weight: normal;
		text-align: left;
		color: var(--biz-card-font);
	}
}

/**************************** 
	COMPANY
*****************************/
/** ul **/
ul.sbsList {
	display: inline-block;
	list-style:none outside none;
	padding-left: 0px;
	background-color:var(--sbslist-bg-title);
	margin-top: 0px;
	margin-bottom: 0px;
	color: var(--sbslist-font);
}
/* pc */
@media screen and (min-width:769px) {
	ul.sbsList { min-width: 700px; }
}
/* mobile */
@media screen and (max-width:768px) {
	ul.sbsList { width: 95%; }
}
/* list */
ul.sbsList > li:first-child {
	border: 1px solid var(--ruled-line);
}
ul.sbsList > li:nth-child(n+1) {
	border-left: 1px solid var(--ruled-line);
	border-right: 1px solid var(--ruled-line);
	border-bottom: 1px solid var(--ruled-line);
}
ul.sbsList li > div:nth-child(1) {
	width: 18.5%;
	line-height: 35px;
	font-weight: bold;
	font-size: small;
}
ul.sbsList li > div:nth-child(2) {
	line-height: 35px;
	background-color:var(--sbslist-bg-detail);
	padding-left: 1.0em;
	text-align: left;
	font-size: small;
}
/* pc */
@media screen and (min-width:769px) {
	ul.sbsList li > div:nth-child(1) {
		text-align: left;
		padding-left: 1.0rem;
		float: left;
	}
	ul.sbsList li > div:nth-child(2) {
		margin-left: 20%;
		border-left: 1px solid var(--ruled-line);
	}
}
/* mobile */
@media screen and (max-width:768px) {
	ul.sbsList li > div:nth-child(1) {
		width: 100%;
		text-align: center;
		font-size: small;
	}
	ul.sbsList li > div:nth-child(2) {
		border-top: 1px solid var(--ruled-line);
	}
}
/* business overview */
ul.sbsList ol {
	padding-left: 1.5rem;
}
ul.sbsList ol > li {
	line-height: 25px;
}
ul.sbsList p {
	line-height: 25px;
	margin: 0px;
	padding: 0px;
}

/**************************** 
	NEWS
*****************************/
/* pc */
@media print, screen and (min-width:801px) {
	table.info td:nth-child(1) {width: 100px; text-align: center;}
	table.info td:nth-child(2) {width: 80px;  text-align: center;}
	table.info td:nth-child(3) {width: 570px; text-align: left; padding-left: 1.0rem;}
}
/* mobile */
@media screen and (max-width:800px) {
	table.info {
		width: 90vw;
		font-size: 0.8rem;
	}
	table.info td:nth-child(1) {width: 10vw; min-width: 100px; text-align: center;}
	table.info td:nth-child(2) {display: none;}
	table.info td:nth-child(3) {width: 80vw; text-align: left; padding-left: 1.0rem;}
}
.newsIcon {
	line-height: 20px;
	border: 0px;
	border-radius: 6px;
	padding: 0.3em 0.5em;
	font-size: small;
	font-weight: normal;
	color: var(--inversion-font);
	text-align: center;
	white-space: nowrap;
}
.n_ico {
	background-color: var(--news-icon-news);
}
.r_ico {
	background-color: var(--news-icon-recruit);
}

/**************************** 
	ACCESS
*****************************/
/* pc, print */
@media print, screen and (min-width:801px) {
	.access .facility img {
		border-radius: 100px;
		border:2px solid var(--ruled-line);
		width: 200px;
		height: 200px;
	}
}
/* mobile */
@media screen and (max-width:800px) {
	.access .facility img {
		border-radius: 90px;
		border:2px solid var(--ruled-line);
		width: 180px;
		height: 180px;
	}
}
.access > p {
	color: var(--base-font);
	margin: 0px;
}
.access > .Map {
	margin-top: 1em;
	height: 600px;
	border:0px solid var(--ruled-line);
	align-items: center;
}
.access > .Map img.map_js_off {
	height: 100%;
	width: 100%;
	object-fit: contain;
}
@media screen and (max-width:800px) {
	.access > .Map img.map_js_off {
		object-fit: cover;
	}
}

/**************************** 
	CONTACT
*****************************/

/**************************** 
	RECRUIT
*****************************/
.recruit > a {
	display: block;
	width: 350px;
	border: 3px solid var(--ruled-line);
	margin: 0.4em;
	text-decoration: none;
	cursor : pointer;
}
.recruit > a:hover {
	border: 3px solid var(--recruit-card-dark);
}
.recruit .title{
	display:block;
	line-height: 40px;
	background-color: var(--recruit-card-dark);
	font-size: large;
	font-weight: bold;
	color: var(--inversion-font);
	cursor : pointer;
}
.recruit .point {
	display:block;
	line-height: 40px;
	background-color: var(--recruit-card-light);
	color: var(--inversion-font);
	font-size: small;
	text-align: left;
	padding-left: 0.5em;
	cursor : pointer;
}
.recruit .description{
	margin: 1.0em;
	font-size: small;
	font-weight: normal;
	color: var(--base-font);
	text-align: left;
}