@charset 'utf-8';


.sharebutton {
	margin-top: 0;
	margin-bottom: 30px;
}

#document {
/* 	padding: 0 20px; */
}

.articleblock {
	width: 100%;
/* 	max-width: 1000px; */
	margin: 0 auto;
	padding: 20px 0;
	font-size: 1.6em;
	line-height: 2em;
}

body.safearea .articleblock {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

.articleblock .blockheader + .movearticle {
	margin-top: -20px;
	margin-bottom: 20px;
	padding-top: 0;
}

.articletitle {
	margin: 0;
	margin-bottom: 1em;
}

.articlebody {
	margin: 0 !important;
	padding: 0 !important;
/* 
	padding-bottom: 10px !important;
	border-bottom: 1px solid #ccc;
 */
}


.articleheader {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 20px;
	/* 項目：ヘッダー下ボーダーもパステル調グラデに（.articlemain と同じグラデ、やや細め3px） */
	border-width: 0 0 3px;
	border-style: solid;
	border-image: linear-gradient(90deg, #ffd8a8, #ffef9f, #b6e5c6, #a9d9f2) 1;
}

.articlemainimage {
	width: 100%;
	margin-bottom: 1em;
}

/* 項目：ヘッダー画像は常に 5:3 で表示する。一覧カードのサムネイルと同じ手法
   （padding-top で比率を作り、中央寄せしたラッパーの中で幅100%の画像を上下トリミング）。
   本番では 1000x600 が生成されるのでトリミングは発生しないが、
   画像が無い記事の blank.svg（1:1）や、比率の違う画像が入った場合の保険として働く。
   ※ サムネイルは figure > span、ヘッダーは figure > div とマークアップが異なる。 */
.articlemainimage figure {
	padding-top: 60%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.articlemainimage figure > div {
	display: block;
	width: 100%;
	transform: translateY(-50%);
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 0;
}

.articlemainimage figure img {
	width: 100%;
	height: auto;
	position: relative;
}

.articleheader .articletitle {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0 30px;
}

@media only screen and (min-width: 1001px) {

	.sharebutton {
		margin-bottom: 50px;
	}

	.articleheader {
		padding-top: 20px;
		padding-bottom: 50px;
	}

	.articlemainimage {
		width: 50%;
		padding: 0 3%;
		margin-bottom: 0;
	}

	.articleheader .articletitle {
		display: flex;
		flex-direction: column;
		width: 50%;
		padding: 0 10px;
	}
}

@media only screen and (min-width: 1201px) {

	.articleheader {
		padding-left: 30px;
		padding-right: 30px;
	}

	.articleheader .articletitle {
		padding: 0 3%;
	}
}


.articletitle h1 {
/* 
	width: calc(100% + 40px);
	margin: 0 -20px;
 */
	margin-bottom: .5em;
/* 
	padding: 0 20px;
	padding-bottom: 1em;
 */
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.5em;
}

/* 
#info .articletitle h1 {
	border-bottom: 1px solid #000;
}
 */

#weblog .articletitle h1 {
	font-size: 1.6em;
}

.articletitle > div.enclosed {
/* 
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 20px;
 */
	font-size: 12px;
	line-height: 1.6em;
}

.articletitle > div.enclosed .meta {
	margin-bottom: 10px;
}

/* 
.articletitle > div.enclosed .meta:nth-child(2) {
	margin-left: auto;
	margin-right: 0;
}

.articletitle > div.enclosed .meta:nth-child(2) .category {
	display: flex;
	align-items: flex-end;
}
 */

.articletitle > div.enclosed .category span a {
	margin: .1em;
}

.articletitle > div.enclosed .category span a {
	display: inline-block;
	padding: .5em 1em;
	border: 2px solid #44a0dc;
	background: #fff;
	color: #44a0dc;
	font-size: 1.2em;
	text-align: center;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	/* 項目：記事ヘッダーのカテゴリもピル型に（サイト共通） */
	border-radius: 999px;
}

.articletitle > div.enclosed .category span a:hover,
.articletitle > div.enclosed .category span a.hover {
	background: #44a0dc;
	color: #fff;
}

.articlebody .btnarea p:not(:last-child) {
	margin-bottom: .5em;
}

@media only screen and (min-width: 541px) {

	#document {
/* 		padding: 0 30px; */
	}
}

@media only screen and (min-width: 769px) {

	.sharebutton {
		text-align: left;
	}

	.articleblock {
		padding: 20px 40px;
	}

	body.safearea .articleblock {
		padding-left: calc(env(safe-area-inset-left) + 40px);
		padding-right: calc(env(safe-area-inset-right) + 40px);
	}

	.articletitle h1 {
/* 
		width: calc(100% + 40px);
		margin: 0 -20px;
 */
		margin-bottom: .5em;
/* 
		padding: 0 20px;
		padding-bottom: 1em;
 */
		font-size: 2em;
		font-weight: 700;
		line-height: 1.5em;
	}
}

@media only screen and (min-width: 1001px) {

	body.safearea #container > .inner {
		padding-left: calc(env(safe-area-inset-left) + 40px);
		padding-right: calc(env(safe-area-inset-right) + 40px);
	}

	#document {
/* 		padding: 0 50px; */
	}

	body.safearea .articleblock {
		padding-left: 0;
		padding-right: 0;
	}

/* 
	body.safearea #columns .articleblock {
		padding-right: 40px;
	}
 */

	.articletitle h1 {
/* 
		width: calc(100% + 100px);
		margin: 0 -50px;
 */
		margin-bottom: .5em;
/* 
		padding: 0 50px;
		padding-bottom: 1em;
 */
		font-size: 2em;
		font-weight: 700;
		line-height: 1.5em;
	}
}


.articlelistbody {
	font-size: .65em;
}

.articlelist .item figure {
	padding-top: 100%;
}

#weblog .articlelist .item article {
	padding-top: 5%;
	padding-bottom: 5%;
}

.articlelist .item.hover figure img {
	transform: scale(1.3);
}

.articlelist .category span a {
	display: inline-block;
	padding: .3em 1.2em;
	border: 2px solid #44a0dc;
	background: #fff;
	color: #44a0dc;
}

.articlelist .category span a:hover,
.articlelist .category span a.hover {
	background: #44a0dc;
	color: #fff;
}

@media only screen and (min-width: 769px) {

	.articlelistbody {
		font-size: .75em;
	}

	#weblog .articlelistbody {
		font-size: .85em;
	}
}


.taglist {
	display: flex;
	flex-wrap: wrap;
	padding-top: 10px;
	font-size: 1rem;
}

.taglist span {
	display: inline-block;
	margin-right: 1.5em;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.6;
}

.taglist a {
	color: #37c57d;
	text-decoration: none;
}

.taglist a:hover,
.taglist a.hover {
	color: #91d8b0;
}

.taglist.archive {
	padding: 20px;
	padding-top: 0;
}


.map {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 75%;
}
 
.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


@page {
    size: A4 portrait; 
    margin: auto;
    padding: 3em;
}

@media print {

	body {
		font-size: 6pt;
	}

	#logo_header {
		display: block;
		width: 150px;
		position: relative;
		top: 0;
		left: 0;
	}

	#logo_header img {
		display: block;
		position: relative;
		top: 0;
		left: 0;
	}

	.articletitle div.enclosed {
		font-size: 6pt;
	}

	iframe,
	.movearticle,
	.sharebutton,
	.articletitle > div.enclosed .meta:nth-child(2),
	.articletitle .taglist span,
	.articlebody .btnarea,
	#navi_contents,
	#side .btnarea,
	#bottom > .inner{
		display: none !important;
	}

}


#information2 {
	margin-top: 50px;
	font-size: 1rem;
}

/* 項目：関連コンテンツを親の幅いっぱいに。
   親（#bureau > .inner）が display:flex のため、幅指定が無いと flex アイテムが
   内容幅（カード3枚ぶん）に縮み、右側が大きく余っていた。
   カードは .item { width: calc(100% / 3) } なので、ここを広げると3枚も広がる。 */
#information2 {
	flex: 1 1 100%;
	width: 100%;
}

/* 項目：関連コンテンツのカードの基準サイズは cardlist.css 側に一本化した。
   ここにあった `#information2 .articlelist { font-size: .65em }` は 769px以上でも
   10.4px のままで、/info/ の一覧（同 12px）より小さかったため削除。
   ID込みで詳細度が高く cardlist.css の指定に勝ってしまうので、残してはいけない。 */

#information2 .articlelist.arrowicon .item .enclosed {
	display: block;
}

#information2 .articlelist .item article {
	flex-wrap: wrap;
}

@media only screen and (min-width: 541px) {

	#information2 .articlelist .item {
		width: calc(100% / 2);
	}
}

@media only screen and (min-width: 769px) {

	#information2 .articlelist .item {
		width: calc(100% / 3);
	}
}


.subheader {
	padding: 1em;
	font-size: 1.2em;
}


.archives {
	font-size: .65em;
}

.archives .articlelist .item .icon span {
	opacity: 1;
}

.archives .articlelist .item .icon {
	width: 24px;
	height: 24px;
	transform: rotate(0deg);
}

.archives .articlelist .item.hover .icon span {
	transform: translateX(10px);
}

.archives .articlelist .item.hover .download .icon span {
	transform: translateY(10px);
}

@media only screen and (min-width: 769px) {

	.archives {
		font-size: .75em;
	}
}


/* 
.infocatlist:not(.tagarchive) .articlelist .item:nth-of-type(-n+2)  {
	background: rgba(189,196,216,.3);
}

.infocatlist:not(.tagarchive) .articlelist .item:nth-of-type(-n+2):after  {
	content: '\e6aa';
	color: #003f73;
	font-size: 30px;
	font-family: 'Material Symbols Sharp';
	position: absolute;
	top: -10px;
	left: 0;
}
 */


#bureau .blockheader h1,
#bureau .blockheader h2 {
	font-size: .8em;
}


.archivenavi {
	font-size: 1rem;
	line-height: 1.6;
}

.archivenavi:not(:last-child) {
	margin-bottom: 50px;
}

.archivenavi {
	margin-bottom: 30px;
	font-size: 1rem;
	line-height: 1.6;
}

.archivenavi h3 {
	margin-bottom: 1em;
	color: #898989;
	font-size: 1em;
}

.archivenavi.category ul ul ul {
	margin-left: 2em;
}

.archivenavi.category li {
	color: #000;
	font-size: .95em;
	font-weight: normal;
}

/* 項目：サイドバーのカテゴリーのリンクをピル型に（ブルー枠ピル。支店=青塗り/タグ=緑枠と差別化）。
   下線テキストから、白背景＋青枠#44a0dc＋青文字の丸ピルへ。ホバーで青塗り反転。 */
.archivenavi.category a {
	display: flex;
	width: 100%;
	margin: .18em 0;
	padding: .3em .9em;
	color: #44a0dc;
	font-weight: normal;
	border: 2px solid #44a0dc;
	background: #fff;
	border-radius: 999px;
}

.archivenavi.category a.hover,
.archivenavi.category a:hover {
	background: #44a0dc;
	color: #fff;
}

/* 項目：親カテゴリー（第1階層＝会社を知る/事業を知る/働く場所を知る）は薄いブルー背景＋太字 */
.archivenavi.category > ul > li > ul > li > a {
	background: #dcecfb;
	font-weight: bold;
}


.archivenavi.branch ul {
	display: flex;
	flex-wrap: wrap;
}

.archivenavi.branch li {
	width: 50%;
	padding: 3px;
	font-size: .95em;
	font-weight: normal;
}

.archivenavi.branch a {
	justify-content: center;
	width: 100%;
	padding: .7em;
	background: #44a0dc;
	color: #fff;
	font-weight: normal;
}

.archivenavi.branch a.hover,
.archivenavi.branch a:hover {
	background: #81bee6;
}


.archivenavi.tag ul {
	display: flex;
	flex-wrap: wrap;
}

.archivenavi.tag li {
	width: auto;
	padding: 3px;
	font-size: .8em;
	font-weight: normal;
}

.archivenavi.tag a {
	justify-content: center;
	width: auto;
	padding: .4em 1em;
	border: 2px solid #37c57d;
	background: #fff;
	color: #37c57d;
	font-weight: normal;
}

.archivenavi.tag a.hover,
.archivenavi.tag a:hover {
	background: #37c57d;
	color: #fff;
}


.articlemain {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	/* 項目：.articlemain の下側の内側余白（padding-bottom）。margin-bottom とグラデボーダーは #document へ移動 */
	padding-top: 40px;
	padding-bottom: 40px;
}

/* 項目：（.articlemain から移動）記事ラッパー #document の下に外側余白＋パステル調グラデのボーダー
   （ロゴ基調：オレンジ→イエロー→グリーン→ブルー）。#document は .articleheader＋.articlemain を内包し
   .articlemain が最終子のため、ボーダー位置は従来とほぼ同じ。 */
#document {
	margin-bottom: 40px;
	border-width: 0 0 4px;
	border-style: solid;
	border-image: linear-gradient(90deg, #ffd8a8, #ffef9f, #b6e5c6, #a9d9f2) 1;
}

/* 項目：768px以下は .articlemain の下側パディングのみ0に（上側パディング・外側marginは維持） */
@media only screen and (max-width: 768px) {
	.articlemain {
		padding-bottom: 0;
	}
}

.articlemain .articlemainbody {
	width: 100%;
	/* 項目：左右パディングは 30px（≥481px）。≤480px は別途10pxに縮小。 */
	padding: 0 30px 30px;
	/* 項目：記事ブロック下のボーダー削除 */
}

.articlemain .sidebar {
	width: 100%;
	padding: 0 40px;
	padding-top: 20px;
	padding-bottom: 30px;
	/* 項目：サイドバーに淡いグラデ背景。ロゴ4色（オレンジ#ff8800/イエロー#f8bd00/ブルー#44a0dc/
	   グリーン#67be8d）を低透過のラジアルで複数重ねた、淡いメッシュ風パターン。
	   ブロブのサイズはpx（散漫にならないよう）だが、縦位置を%で指定することでサイドバーの
	   高さに追従し、縦長でも全高へ分布する（タイル繰り返しではないので継ぎ目は出ない）。 */
	background:
		radial-gradient(620px 520px at 10% 6%,   rgba(255,136,0,.09), transparent 72%),
		radial-gradient(600px 500px at 96% 23%,  rgba(248,189,0,.10), transparent 72%),
		radial-gradient(560px 520px at 2% 42%,   rgba(68,160,220,.09), transparent 72%),
		radial-gradient(640px 540px at 100% 60%, rgba(103,190,141,.09), transparent 72%),
		radial-gradient(560px 500px at 12% 79%,  rgba(255,136,0,.08), transparent 72%),
		radial-gradient(600px 520px at 92% 95%,  rgba(68,160,220,.08), transparent 72%),
		#fffefb;
	border-radius: 16px;
}

/* 項目：サイドバーは画面幅いっぱい(≤768px＝全幅)のとき角丸解除 */
@media only screen and (max-width: 768px) {
	.articlemain .sidebar {
		border-radius: 0;
	}
}

@media only screen and (min-width: 1001px) {

	.articlemain {
		padding-top: 50px;
	}

	.articlemain .articlemainbody {
		width: calc(100% - 300px);
		/* 左右パディングは 30px（≥481px）。1001px以上は右を60pxに（サイドバーとの間隔を広げる） */
		padding: 0 60px 50px 30px;
	}

	.articlemain .sidebar {
		width: 300px;
	}

}

@media only screen and (min-width: 1201px) {

	.articlemain .articlemainbody {
		width: 70%;
	}

	.articlemain .sidebar {
		width: 30%;
	}
}


/* 項目E：記事PC表示の右サイドバー（カテゴリー・タグ）をコンパクト化＋セクション区切り線 */
@media only screen and (min-width: 1001px) {

	.articlemain .sidebar .archivenavi {
		margin-bottom: 0;
	}

	.articlemain .sidebar .archivenavi + .archivenavi {
		margin-top: 28px;
		padding-top: 28px;
		border-top: 1px solid #ddd;
	}

	.articlemain .sidebar .archivenavi h3 {
		margin-bottom: .8em;
		font-size: .9em;
	}

	.articlemain .sidebar .archivenavi.category {
		font-size: .85em;
	}

	.articlemain .sidebar .archivenavi.category a {
		padding: .3em .9em;
	}

	.articlemain .sidebar .archivenavi.tag li {
		font-size: .72em;
	}

	.articlemain .sidebar .archivenavi.tag a {
		padding: .3em .85em;
	}
}