@charset "utf-8";


/* <inline> */

@media (min-width: 480px) {

/* </inline> */

/* <pconly> */
	
	/* <inline> */

	.main-article h2 {
		border-bottom-color: #000099;
	}
	
	.greeting {
		margin-top: 40px;
		display: grid;
		grid-template-rows: auto auto auto;
		grid-template-columns: 1fr 640px 320px 1fr;
	}
	.greeting::before {
		content: "";
		background-image: url(/images/recruit/480/work.jpg);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: cover;
		display: block;
		grid-row: 1 / -1;
		grid-column: 3 / -1;
	}
	.greeting::after {
		content: "";
		background-color: #F0F0F0;
		display: block;
		position: relative;
		z-index: 100;
		grid-row: 1 / -1;
		grid-column: 1 / 3;
	}
	.greeting > h2 {
		line-height: 1;
		margin-top: 0;
		padding-top: 40px;
		padding-left: 40px;
		position: relative;
		z-index: 110;
		grid-row: 1;
		grid-column: 2;
	}
	.greeting > p {
		text-align: left;
		padding-top: 1em;
		padding-right: 40px;
		padding-left: 40px;
		position: relative;
		z-index: 120;
		grid-column: 2;
	}
	.greeting > p:nth-of-type(1) {
		display: none;
	}
	.greeting > p:nth-of-type(2) {
		padding-top: 40px;
		grid-row: 2;
	}
	.greeting > p:nth-of-type(3) {
		padding-top: 40px;
		padding-bottom: 40px;
		grid-row: 3;
	}

	/* </inline> */

	.outline {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: 1fr 320px 640px 1fr;
	}
	.outline::before {
		content: "";
		background-image: url(/images/blueberry/480/zoom.jpg);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: cover;
		display: block;
		grid-row: 1 / -1;
		grid-column: 1 / 3;
	}
	.outline::after {
		content: "";
		background-color: #FFF;
		display: block;
		position: relative;
		z-index: 100;
		grid-row: 1 / -1;
		grid-column: 3 / -1;
	}
	.outline > h2 {
		line-height: 1;
		margin-top: 0;
		padding-top: 40px;
		padding-left: 40px;
		position: relative;
		z-index: 110;
		grid-row: 1;
		grid-column: 3;
	}
	.outline > dl {
		margin-right: 40px;
		margin-left: 40px;
		padding-top: 40px;
		padding-bottom: 40px;
		position: relative;
		z-index: 120;
		grid-row: 2;
		grid-column: 3;
		display: flex;
		flex-flow: row wrap;
	}
	.outline > dl > dt {
		text-align: left;
		border-top: 1px solid #000;
		padding: 10px 30px;
		flex: 0 0 8em;
	}
	.outline > dl > dd {
		text-align: left;
		border-top: 1px solid #000;
		padding: 10px 30px;
		flex: 0 0 calc( 100% - ( 8em + 120px ) );
	}
	.outline > dl > dt:first-of-type,
	.outline > dl > dd:first-of-type {
		border-top: none;
	}

	.outline-detail > div > dt {
		display: inline;
	}
	.outline-detail > div > dt::before {
		content: "・";
	}
	.outline-detail > div > dd {
		display: inline;
	}
	.outline-detail > div > dd::before {
		content: "：";
	}

	.outline-warning {
		text-indent: -1em;
		margin-left: 1em;
	}
	.outline-warning::before {
		content: "※";
	}

	.outline-list > li {
		text-indent: -1em;
		margin-left: 1em;
	}
	.outline-list > li::before {
		content: "・"
	}

	.entry {
		background-color: #F0F0F0;
		padding-bottom: 40px;
	}
	.entry > p {
		margin-top: 1em;
	}

	body > footer {
		margin-top: 0;
	}

/* </pconly> */

/* <inline> */

}

/* </inline> */





/* <inline> */

@media (min-width: 1px) and (max-width: 479px) {

	.main-article h2 {
		border-bottom-color: #000099;
	}

	.greeting {
		background-color: #F0F0F0;
		margin-top: 40px;
		padding-bottom: 40px;
	}
	.greeting > p {
		text-align: left;
		margin-top: 1em;
		margin-right: 10px;
		margin-left: 10px;
	}
	.greeting > p:has(img) {
		margin-top: 40px;
		margin-right: 0;
		margin-left: 0;
	}
	.greeting > p:nth-of-type(2) {
		margin-top: 40px;
	}
	.greeting > p > img {
		height: auto;
		width: 100%;
	}

	
/* </inline> */

	.outline {
		background-color: #F8F8FC;
		padding-bottom: 40px;
	}
	.outline > p {
		margin-top: 40px;
	}
	.outline > p > img {
		height: auto;
		width: 100%;
	}
	.outline > dl {
		line-height: 1.3;
		margin-top: 40px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.outline > dl > dt {
		white-space: nowrap;
		background-color: #FFF;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.outline > dl > dd {
		text-align: left;
		padding: 10px;
	}

	.outline-detail {
		text-indent: -1em;
		margin-left: 1em;
	}
	.outline-detail > div > dt {
		display: inline;
	}
	.outline-detail > div > dt::before {
		content: "・";
	}
	.outline-detail > div > dd {
		display: inline;
	}
	.outline-detail > div > dd::before {
		content: "：";
	}

	.outline-warning {
		text-indent: -1em;
		margin-left: 1em;
	}
	.outline-warning::before {
		content: "※";
	}

	.outline-list > li {
		text-indent: -1em;
		margin-left: 1em;
	}
	.outline-list > li::before {
		content: "・"
	}

	.entry {
		background-color: #F0F0F0;
		padding-bottom: 40px;
	}
	.entry > p {
		text-align: left;
		margin-top: 1em;
		margin-right: 10px;
		margin-left: 10px;
	}
	.entry > p:has(a) {
		text-align: center;
	}

	body > footer {
		margin-top: 0;
	}

/* <inline> */

}

/* </inline> */