@charset "utf-8";
/**
 *
 * トップページ以外の各ページに共通なstyle
 *
 */

/*********************************************
**********************************************
		#breadcrumbswrapper01
**********************************************
**********************************************/
@media print,screen {
	#breadcrumbswrapper01 {
		text-align: center;
		width: 100%;
		overflow: hidden;
	}
	#breadcrumbswrapper01 .inner {
		text-align: left;
		margin: 0 auto;
		max-width: 960px;
		padding: 15px 10px 15px 10px;
	}
	#breadcrumbswrapper01 .inner #breadcrumbs {
		float: left;
		font-size: 14px;
		color: #777;
		line-height: 20px;
		height: 20px;
	}
	#breadcrumbswrapper01 .inner #breadcrumbs a {
		white-space: nowrap;
	}
	#breadcrumbswrapper01 .inner #breadcrumbs a span:nth-child(1) {
		display:inline-block;
		background-image: url(../image/breadcrumbsback.svg);
		background-position: 0 0;
		background-repeat: no-repeat;
		padding-left: 14px;
		padding-top: 1px;
	}
	#breadcrumbswrapper01 .inner #breadcrumbs a span:nth-child(2) {
		display:inline-block;
		width: 10px;
		background-image: url(../image/breadcrumbsback.svg);
		background-position: -390px 0;
		background-repeat: no-repeat;
		padding-top: 1px;
	}
	#breadcrumbswrapper01 .inner #breadcrumbs a:first-child span:nth-child(1) {
		background-position: -10px 0;
	}
	#breadcrumbswrapper01 .inner #breadcrumbs a:not(:first-child) {
		margin-left: -5px;
	}
	#breadcrumbswrapper01 .inner #breadcrumbs a:link span
	,#breadcrumbswrapper01 .inner #breadcrumbs a:visited span {
		text-decoration: none;
		color: #444;
		background-image: url(../image/breadcrumbsback.svg);
	}
	#breadcrumbswrapper01 .inner #breadcrumbs a:hover span {
		text-decoration: none;
		color: #fff;
		background-image: url(../image/breadcrumbsback_on.svg);
	}
}
@media screen and (max-width:699px) {
	#breadcrumbswrapper01 .inner #breadcrumbs {
		font-size: 11px;
	}
}

/*********************************************
**********************************************
		#imagewrapper02
**********************************************
**********************************************/
@media print,screen {
	#imagewrapper02 {
		width: 100%;
	}
	#imagewrapper02 img {
		width: 100%;
	}
}
/*********************************************
**********************************************
		imagewrapper03
**********************************************
**********************************************/
@media print,screen {
	#imagewrapper03 {
		width: 100%;
		position: relative;
		padding-top: 31%;
		font-size: 20px;
	}
	#imagewrapper03 .back {
		position: absolute;
		top: 0;
	}
	#imagewrapper03 .back img {
		width: 100vw;
		animation-duration: 3s;
		animation-name: backimage;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
	#imagewrapper03 svg {
		position: absolute;
		top: 0;
		width: 100vw;
	}
	#imagewrapper03 svg .code {
		font-size: 30px;
		font-family: 'Share Tech Mono';
	}
	#imagewrapper03 svg .barcode {
		font-size: 130px;
		font-family: 'Libre Barcode 128 Text';
	}
	#imagewrapper03 svg .pagename {
		font-size: 80px;
	}
}
@keyframes backimage {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.7;
	}
}
/*********************************************
**********************************************
		contentwrapper01
**********************************************
**********************************************/
@media print,screen {
	#contentwrapper01 {
		padding: 0 5%;
		margin-top: 30px;
	}
	#contentwrapper01 > h1 {
		margin: 0;
		text-align: center;
		font-size: 42px;
		font-weight: normal;
		color: #333;
	}
	#contentwrapper01 > div {
		text-align: center;
		margin-top: 10px;
	}
	#contentwrapper01 > div > p {
		margin: 3px 0 0 0;
		font-size: 1.3rem;
		line-height: 150%;
		color: #555;
	}
}
@media screen and (max-width:799px) {
	#contentwrapper01 > div {
		text-align: left;
	}
}
@media screen and (max-width:479px) {
	#contentwrapper01 > h1 {
		font-size: 30px;
	}
}
/*********************************************
**********************************************
		contentwrapper02
**********************************************
**********************************************/
@media print,screen {
	.contentwrapper02 {
		text-align: center;
		margin: 20px 0 0 0;
		padding: 0 10px;
	}
	.contentwrapper02 .inner {
		margin: 0 auto;
		max-width: 760px;
		border-style: solid none;
		border-width: 1px;
		border-color: #3E50B4;
	}
	.contentwrapper02 .inner h2 {
		margin: 0;
		font-size: 20px;
		font-weight: normal;
		color: #3E50B4;
		padding: 2px 0;
	}
	.contentwrapper02 .inner h2.left {
		text-align: left;
		padding-left: 5px;
	}
}
/*********************************************
**********************************************
		contentwrapper03
**********************************************
**********************************************/
@media print,screen {
	.contentwrapper03 {
		text-align: center;
		margin: 15px 0 50px 0;
		padding: 0 10px;
	}
	.contentwrapper03 .inner {
		margin: 0 auto;
		max-width: 760px;
		text-align: left;
	}
	.contentwrapper03 .inner p {
		margin: 10px 0 0 0;
		font-size: 15px;
		color: #444;
		line-height: 1.7em;
		text-align: justify;
		text-justify: inter-ideograph;
	}
	.contentwrapper03 .inner ol {
		margin: 5px 0 0 0;
	}
	.contentwrapper03 .inner ol li {
		font-size: 15px;
		color: #444;
		line-height: 1.7em;
	}
	.contentwrapper03 .inner img {
		max-width: 100%;
	}
	.contentwrapper03 .inner a.button {
		display: inline-block;
		text-decoration: none;
		margin: 10px 0 0 0;
	}
	.contentwrapper03 .inner a.button div {
		display: inline-block;
		background-color: #35c;
		padding: 15px 3em 15px 2em;
		font-size: 18px;
		color: #fff;
		line-height: 1em;
		letter-spacing: 0.1em;
		border-style: solid;
		border-width: 3px;
		border-color: #126;
		background-image: url(../image/icon_external_white.svg);
		background-repeat: no-repeat;
		background-position: 95% 40%;
	}
	.contentwrapper03 .inner a.button:hover div {
		background-color: #12b;
	}
	.contentwrapper03 .inner .pubdate {
		font-size: 13px;
		line-height: 1em;
		color: #ccc;
		margin: 3px 0 0 0;
	}
}
/*********************************************
**********************************************
		buttonwrapper01
**********************************************
**********************************************/
@media print,screen {
	.buttonwrapper01 {
		text-align: center;
		margin: 70px 0 50px 0;
		padding: 0 10px;
	}
	.buttonwrapper01 a {
		text-decoration: none;
	}
	.buttonwrapper01 a div {
		display: inline-block;
		background-color: #35c;
		padding: 15px 3em 15px 2em;
		font-size: 18px;
		color: #fff;
		line-height: 1em;
		letter-spacing: 0.1em;
		border-style: solid;
		border-width: 3px;
		border-color: #126;
		background-image: url(../image/icon_external_white.svg);
		background-repeat: no-repeat;
		background-position: 95% 40%;
	}
	.buttonwrapper01 a:hover div {
		background-color: #12b;
	}
}

/*********************************************
**********************************************
		inform category color
**********************************************
**********************************************/
#informarea .category {
	padding: 1px 5px 0 5px;
	font-size: 13px;
	line-height: 18px;
	color: white;
	width: 84px;
	box-sizing: border-box;
	background-color: #35c;
}
#informarea .category.wide {
	width: 140px;
}
/*------*/
#informarea .category.informCategoryOther {	/*その他*/
	background-color: #06c;
	letter-spacing: 1.1em;
	white-space: nowrap;
	overflow: hidden;
}
#informarea .category.informCategoryOther div span:before {	/*その他*/
	content: "その他";
}
#informarea .category.informCategoryNews {	/*お知らせ*/
	background-color: #E96015;
	letter-spacing: 0.5em;
	white-space: nowrap;
	overflow: hidden;
}
#informarea .category.informCategoryNews div span:before {	/*お知らせ*/
	content: "お知らせ";
}
#informarea .category.informCategoryEntry {	/*新着情報*/
	background-color: #83BC2C;
	letter-spacing: 0.5em;
	white-space: nowrap;
	overflow: hidden;
}
#informarea .category.informCategoryEntry div span:before {	/*新着情報*/
	content: "新着情報";
}
#informarea .category.informCategoryEvent {	/*イベント*/
	background-color: #B8860B;
	letter-spacing: 0.5em;
	white-space: nowrap;
	overflow: hidden;
}
#informarea .category.informCategoryEvent div span:before {	/*イベント*/
	content: "イベント";
}
#informarea .category.informCategorySite {	/*新サイト*/
	background-color: #4D4294;
	letter-spacing: 0.5em;
	white-space: nowrap;
	overflow: hidden;
}
#informarea .category.informCategorySite div span:before {	/*新サイト*/
	content: "新サイト";
}
#informarea .category.informCategoryService {	/*サービス*/
	background-color: #06c;
	letter-spacing: 0.45em;
	white-space: nowrap;
	overflow: hidden;
}
#informarea .category.informCategoryService div span:before {	/*サービス*/
	content: "サービス";
}
#informarea .category.informCategoryRenewal {	/*リニューアル*/
	background-color: #dd9722;
	letter-spacing: 0em;
	white-space: nowrap;
	overflow: hidden;
}
#informarea .category.informCategoryRenewal div {	/*リニューアル*/
	transform-origin: left top;
	transform: scaleX(0.95);
	padding: 1px 0 0 0;
}
#informarea .category.informCategoryRenewal div span:before {	/*リニューアル*/
	content: "リニューアル";
}
#informarea .category.informCategoryInfo {	/*情報*/
	background-color: #297ecd;
	letter-spacing: 1.2em;
	white-space: nowrap;
	overflow: hidden;
	padding-left: 22px;
}
#informarea .category.informCategoryInfo div span:before {	/*情報*/
	content: "情報";
}
#informarea .category.informCategoryCsr {	/*CSR*/
	background-color: #16845B;
	letter-spacing: 1.2em;
	white-space: nowrap;
	overflow: hidden;
	padding-left: 13px;
}
#informarea .category.informCategoryCsr div span:before {	/*CSR*/
	content: "ＣＳＲ";
}
#informarea .category.informCategoryRecruit {	/*採用情報*/
	background-color: #E32E2C;
	letter-spacing: 0.5em;
	white-space: nowrap;
	overflow: hidden;
}
/*
#informarea .category.informCategoryRecruit div {	/ *採用情報* /
	transform-origin: left top;
	transform: scaleX(0.66);
	padding: 1px 0 0 0;
}
*/
#informarea .category.informCategoryRecruit div span:before {	/*採用情報*/
	content: "採用情報";
}
/*------*/
#informarea .category.wide {
	text-align: center;
}
#informarea .category.wide div {
	transform-origin: none;
	transform: none;
	padding: 1px 0 0 0;
}

/*--- end of file ---*/