@charset 'utf-8';

/* ================================================================
   cardlist.css — カード型コンテンツ一覧 `.infocatlist .articlelist`

   トップの新着コンテンツ / `/info/` の一覧 / 記事下の関連コンテンツは
   同じ `articleitem_list()`（lib/class_html_element.php）が生成する
   同一マークアップ。以前は about-us.css / portal.css / ae_weblog.css /
   search.css の4ファイルに同じルールがコピーされていたため、
   `/info/` 側（ae_weblog.css）の実装に一本化してここへ集約した。
   about-us.css と search.css の分は対象要素が存在せず空振りだったので削除。

   読み込みは load_stylesheet.php の最後（portal / weblog 系のみ）。
   最後に読ませているのは、about-us.css などページ個別CSSの後方から
   確実に効かせるため。ae_scheme.css 側の `.infocatlist ...` は
   `!important` 付きなので読み込み順の影響を受けない。

   外側ラッパー（`/info/` = .articlelistbody、トップ・関連 = .articlelistblock）は
   ページ固有の余白を持つため統一していない。ここは `.articlelist` 以下のみ。
   ================================================================ */

/* カードリストの基準サイズ。カード内部は全て em 指定なので、この値がカード全体の縮尺になる。
   外側ラッパーの font-size を継承すると、トップ（#information .articlelistblock = 10px）・
   /info/（.articlelistbody = .65em → 10.4px、769px以上は .75em → 12px）・
   記事下の関連（#information2 = 16px）でカードの大きさがバラバラになるため、
   /info/ の一覧と同じ絶対値を rem で固定してラッパーへの依存を切る（ルートは全幅で16px）。
   ラッパー自身（ブロック見出し・余白）のサイズには手を入れていない。 */
.infocatlist .articlelist {
	font-size: .65rem;
}

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

	.infocatlist .articlelist {
		font-size: .75rem;
	}
}


.infocatlist .articlelist {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
/* 	margin-bottom: 30px; */
	padding: 0;
	position: relative;
}

.infocatlist .articlelist .item {
	display: flex;
	width: 100%;
	vertical-align: top;
	position: relative;
	cursor: pointer;
}

.infocatlist .articlelist .item > .inner {
	display: flex;
	width: 100%;
	position: relative;
	transition: .2s;
}

.infocatlist .articlelist .item article {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.infocatlist .articlelist .item .enclosed {
	font-size: 1.2em;
}

/* 2026-08-17 変更（並び替えに伴う調整）:
   - font-weight を 400 → 700（太字）
   - 下の余白を .3em → .8em。並びを「タイトル → 支店・カテゴリ」に入れ替えたことで
     両者が近づきすぎたため。★.enclosed は flex なので margin は相殺されない。
     カテゴリ側の上 margin（.3em）と足し算になる */
.infocatlist .articlelist .item .title {
	width: 100%;
	margin: .3em 0 .8em;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.5;
	word-wrap: break-word;
	overflow: hidden;
}

.infocatlist .articlelist .item .title a {
	color: #1a1a1a;
	text-decoration: none;
}

.infocatlist .articlelist .item .title a:hover,
.infocatlist .articlelist .item .title a.hover {
	color: #1a1a1a;
	text-decoration: none;
}

.infocatlist .articlelist .meta {
	width: 100%;
	margin: .3em 0;
	margin-right: 1em;
	line-height: 1.4;
}

.infocatlist .articlelist .category span {
	display: inline-block;
}

.infocatlist .articlelist .category span {
	display: inline-block;
	margin: .1em;
}

.infocatlist .articlelist .category span a {
	display: inline-block;
	padding: .5em 1em;
	background: #666;
	color: #fff;
	text-decoration: none;
}

.infocatlist .articlelist .category span a:hover,
.infocatlist .articlelist .category span a.hover {
	background: #999;
}

.infocatlist .articlelist time {
	color: #808080;
}

.infocatlist .articlelist .item .desc {
	display: none;
	color: #666;
	font-size: 1.1em;
	line-height: 1.6;
	word-wrap: break-word;
}

.infocatlist .articlelist .item .arrow {
	display: block;
	height: 100%;
	font-size: 0;
	position: absolute;
	top: 0;
	right: 10px;
}

.infocatlist .articlelist .item .arrow:before {
	display: inline-block;
	content: '';
	height: 100%;
	vertical-align: middle;
}

.infocatlist .articlelist .item .icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	color: #808080;
	vertical-align: middle;
	transform: rotate(-90deg);
}

.infocatlist .articlelist .item .icon span {
	display: inline-block;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: .2s;
}

.infocatlist .articlelist .item.hover .icon span {
	opacity: 1;
	transform: translateY(10px);
}

.infocatlist .articlelist .item .icon svg {
	fill: currentColor;
}

.infocatlist .articlelist .item .btn {
	width: 100%;
	padding: 5%;
	font-size: 1.2em;
	line-height: 1;
	text-align: right;
}

.infocatlist .articlelist .item .btn a {
	display: inline-block;
	padding: .5em 1em;
	border: 1px solid;
	text-decoration: none;
}

.infocatlist .articlelist .item .btn a:hover,
.infocatlist .articlelist .item .btn a.hover {
	background: #f2f2f2;
}

.infocatlist .articlelist .item .thumb {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.infocatlist .articlelist .item figure {
	width: 100%;
	margin-top: 0;
	padding-top: 60%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.infocatlist .articlelist .item .enclosed figure {
	margin: .5em 0;
}

.infocatlist .articlelist .item figure span {
	display: block;
	width: 100%;
	transform: translateY(-50%);
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 0;
}

.infocatlist .articlelist .item figure img {
	width: 100%;
	height: auto;
	position: relative;
	transition: .2s;
}

/* override */
.infocatlist .articlelist .item {
	border-bottom: 1px solid #ccc;
}

.infocatlist .articlelist .item:first-child {
	border-top: 1px solid #ccc;
}

.infocatlist .articlelist .item article {
	padding: 15px 20px;
}

.infocatlist .articlelist.thumb .item .enclosed {
	width: 70%;
	padding-left: 7%;
}

.infocatlist .articlelist.arrowicon .item .enclosed {
/* 	width: 100%; */
	padding-right: 15px;
}

.infocatlist .articlelist.arrowicon .item .taglist {
	width: 100%;
	padding-right: 15px;
}

.infocatlist .articlelist.card.thumb:not(.arrowicon) .item {
	padding: 3% 7%;
	border: none;
}

.infocatlist .articlelist.card.thumb:not(.arrowicon) .item article {
	padding: 2%;
	border-radius: 0;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	transition: .2s;
}

.infocatlist .articlelist.card.thumb:not(.arrowicon) .item .enclosed {
	width: 100%;
	padding: 5%;
}

.infocatlist .articlelist .category span a {
	border-radius: 0;
}

.infocatlist .articlelist .item .btn a {
	border-radius: 0;
}

.infocatlist .articlelist .item .thumb {
	width: 30%;
}

.infocatlist .articlelist .item .enclosed .thumb {
	width: 100%;
}

.infocatlist .articlelist .item figure {
	border-radius: 0;
/* 	padding-top: 100%; */
}

.infocatlist .articlelist .item .enclosed figure {
	padding-top: 60%;
}

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

.infocatlist .articlelist .item .title {
	font-size: 1.2em;
	overflow: hidden;
}

.infocatlist .articlelist .item .title a {
	display: block;
}

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

	.infocatlist .articlelist.card {
		padding: 1%;
	}

	.infocatlist .articlelist.card .item {
		padding: 1.5% !important;
		border: none;
	}

	.infocatlist .articlelist.card .item article {
		display: block;
		padding: 0 !important;
		border-radius: 0;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0,0,0,.2);
		transition: .2s;
	}

	.infocatlist .articlelist.card .item.hover article {
		background-image: linear-gradient(132deg, rgba(68,160,220,.05), rgba(55,197,125,.05));
	}

	.infocatlist .articlelist.card .item .enclosed {
		width: 100%;
		padding: 7% !important;
	}

	/* 項目：カテゴリの下の余白を詰める（2026-08-17 指示）。
	   もとは .enclosed の下 padding 7%（実測 31.6px）＋ カテゴリの下 margin 4.1px で
	   約36px 空いていた。タイトルとカテゴリの間（約17px）より広く、間延びして見えた。

	   ★タグ行が続くカードだけ詰める。タグが1つも無い記事では .taglist 自体が
	   出力されず、ここを一律で詰めるとカードの下辺が窮屈になる。
	   （2026-08-17 時点で全21記事にタグが付いているが、今後の記事は分からない）
	   ★上の rule が !important なので、こちらにも付けないと勝てない。 */
	.infocatlist .articlelist.card .item .enclosed:has(+ .taglist) {
		padding-bottom: 2.5% !important;
	}

	.infocatlist .articlelist .item .desc {
		display: block;
	}

	.infocatlist .articlelist .item .title {
		font-size: 1.2em;
	}

	.infocatlist .articlelist.card .item.hover .icon span {
		opacity: 0;
		transform: translateY(0);
	}

	.infocatlist .articlelist.card .item .btn {
		text-align: center;
	}

	.infocatlist .articlelist.card .item figure {
		padding-top: 60%;
	}

	.infocatlist .articlelist.card .item figure {
		border-radius: 0 !important;
	}

	.infocatlist .articlelist.card .item .thumb {
		width: 100%;
	}
}


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

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

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

	.infocatlist .articlelist .item {
		width: calc(100% / 3);
		padding: 1% !important;
	}
}


.infocatlist .articlelist .viewport {
	width: 100%;
	overflow: hidden;
	position: relative;
}


.infocatlist .articlelist .item {
	border-bottom-color:  #bdc4d8;
}

.infocatlist .articlelist .item:first-child {
	border-top: none;
}

.infocatlist .articlelist .item article {
	font-size: .85em;
}

.infocatlist .articlelist .item .enclosed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	font-size: 1.4em;
}

.infocatlist .articlelist .item .custommeta {
	margin: .3em 0;
	font-size: .85em;
}

/* 項目：支店とカテゴリーを横に並べる。
   縦積みだと3つでカードが縦に伸びる。入りきらないぶんは折り返す。 */
.infocatlist .articlelist .item .meta .category {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: .4em;
}

.infocatlist .articlelist .item .category span a {
	display: inline-block;
	padding: .3em 1.2em;
	border: 2px solid #44a0dc;
	background: #fff;
	color: #44a0dc;
	font-size: 1.2em;
	text-align: center;
	line-height: 1;
	white-space: nowrap;
}

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

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

	/* 項目：541〜768px のカードでもタグリストの左右余白を効かせる（本文=enclosedの7%と揃える）。
	   従来は 769px 以上でしか taglist の padding:7% が付かず、541〜768px はタグが左端に密着していた。 */
	.infocatlist .articlelist .item .taglist {
		padding: 7%;
		padding-top: 0;
	}
}

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

	.infocatlist .articlelist .item article {
		padding: 20px;
		font-size: .95em;
	}

	.infocatlist .articlelist .item .enclosed {
		flex-direction: row;
		font-size: 1.2em;
	}

	.infocatlist .articlelist .item .taglist {
		padding: 7%;
		padding-top: 0;
	}
/* 
	.infocatlist .articlelist .item .taglist {
		padding-left: 18.5em;
	}

	.infocatlist .articlelist .item .meta {
		width: 9em;
		margin: 0;
		white-space: nowrap;
	}

	.infocatlist .articlelist .item .meta:nth-child(2) {
		width: 11em;
	}
 */

	.infocatlist .articlelist .item .meta .category {
	}

	.infocatlist .articlelist .item .custommeta {
		width: 15em;
		margin: 0;
		padding-right: 2em;
	}

/* 
	.infocatlist .articlelist .item .category span,
	.infocatlist .articlelist .item .category span a {
		width: 100%;
	}

	.infocatlist .articlelist .item .title {
		flex-grow: 1;
		width: calc(100% - 20em) !important;
		margin: 0;
		margin-left: auto;
		margin-right: 0;
		padding-left: 1.2em;
	}

	.infocatlist .articlelist .item .title a {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
 */
}


/* 項目：コンテンツ一覧カード（541px以上のカード表示全域）を角丸＋大きめシャドウ、内包写真は上部のみ角丸。
   541〜1000px もカード表示のため 1001px→541px に下げて適用（後方ルールなので 541px 用の角丸0・小シャドウを上書き）。 */
@media only screen and (min-width: 541px) {

	.infocatlist .articlelist.card .item article {
		border-radius: 16px;
		box-shadow: 0 8px 24px rgba(0,0,0,.15);
	}

	.infocatlist .articlelist.card .item figure {
		border-radius: 16px 16px 0 0 !important;
	}
}