/* ==========================================================================
   jobshift-core / legacy.css

   AFFINGER・JIN 互換ショートコード用のスタイル。
   引き継ぎ書 10-5「追加が必要（AFFINGER互換ショートコード用）」に対応する。

   このファイルは content.css とは別に持つ。理由は content.css と同じで、
   将来「旧記法の記事をすべて書き換えたのでこのファイルごと削除」という
   判断をできるようにするため。

   ※ クラス名は .balloon / .box / .list ではなく .afg-* を使っている。
     THE THOR 系の .balloon（[chatf] 等）とCSSが衝突するため。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 吹き出し [balloon]
   -------------------------------------------------------------------------- */
.afg-balloon {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 1.6em 0;
}

.afg-balloon--right {
	flex-direction: row-reverse;
}

.afg-balloon__img {
	flex: 0 0 60px;
	width: 60px;
}

.afg-balloon__img img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.afg-balloon__text {
	position: relative;
	flex: 1 1 auto;
	padding: 14px 16px;
	border: 1px solid #d5d8dc;
	border-radius: 8px;
	background: #fff;
	line-height: 1.8;
}

.afg-balloon__text > :first-child { margin-top: 0; }
.afg-balloon__text > :last-child  { margin-bottom: 0; }

/* 吹き出しの三角 */
.afg-balloon__text::before,
.afg-balloon__text::after {
	content: "";
	position: absolute;
	top: 18px;
	width: 0;
	height: 0;
	border: 8px solid transparent;
}

.afg-balloon--left .afg-balloon__text::before {
	left: -17px;
	border-right-color: #d5d8dc;
}
.afg-balloon--left .afg-balloon__text::after {
	left: -16px;
	border-right-color: #fff;
}

.afg-balloon--right .afg-balloon__text::before {
	right: -17px;
	border-left-color: #d5d8dc;
}
.afg-balloon--right .afg-balloon__text::after {
	right: -16px;
	border-left-color: #fff;
}

/* 画像が無い場合は余白を詰める */
.afg-balloon:not(:has(.afg-balloon__img)) .afg-balloon__text::before,
.afg-balloon:not(:has(.afg-balloon__img)) .afg-balloon__text::after {
	display: none;
}

/* --------------------------------------------------------------------------
   2. ボックス [box]

   class="box32" 等が付いている場合は content.css 側のスタイルが優先される。
   ここは class 未指定・未定義クラスのときの受け皿。
   -------------------------------------------------------------------------- */
.afg-box {
	margin: 1.8em 0;
	border: 1px solid #d5d8dc;
	border-radius: 6px;
	background: #fff;
}

.afg-box__title {
	padding: 10px 16px;
	background: #f2f4f6;
	border-bottom: 1px solid #d5d8dc;
	border-radius: 6px 6px 0 0;
	font-weight: 700;
	font-size: 0.95em;
	line-height: 1.5;
}

.afg-box__body {
	padding: 16px;
	line-height: 1.9;
}

.afg-box__body > :first-child { margin-top: 0; }
.afg-box__body > :last-child  { margin-bottom: 0; }

/* box32（口コミ・体験談枠）が付いている場合は枠を二重にしない */
.afg-box.box32 {
	border: none;
	background: transparent;
}

/* --------------------------------------------------------------------------
   3. カラム [colwrap] [col4] [col4_3]

   AFFINGER の4分割グリッド。col4 = 1/4、col4_3 = 3/4。
   -------------------------------------------------------------------------- */
.afg-colwrap {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 1.8em 0;
}

.afg-col > :first-child { margin-top: 0; }
.afg-col > :last-child  { margin-bottom: 0; }

.afg-col--4 {
	flex: 0 0 calc(25% - 12px);
	max-width: calc(25% - 12px);
}

.afg-col--4-3 {
	flex: 0 0 calc(75% - 4px);
	max-width: calc(75% - 4px);
}

.afg-col img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* 実際の使われ方が「小さい画像 + 説明文」なので、
   狭い画面では縦積みにする */
@media screen and (max-width: 767px) {
	.afg-colwrap {
		gap: 10px;
	}
	.afg-col--4 {
		flex: 0 0 80px;
		max-width: 80px;
	}
	.afg-col--4-3 {
		flex: 1 1 calc(100% - 90px);
		max-width: calc(100% - 90px);
	}
}

/* --------------------------------------------------------------------------
   4. リスト [list]

   class の値で見た目が変わる AFFINGER の仕様を再現する。
     li-chevron   … 「>」アイコン
     ol-circle    … 丸数字
     list-raw     … マーカー無し
     li-mainbdr / li-accentbdr … 下線
   -------------------------------------------------------------------------- */
.afg-list {
	margin: 1.6em 0;
}

.afg-list ul,
.afg-list ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.afg-list li {
	position: relative;
	padding: 8px 0 8px 1.6em;
	line-height: 1.8;
}

/* 既定のマーカー */
.afg-list li::before {
	content: "・";
	position: absolute;
	left: 0.2em;
	color: #888;
}

/* li-chevron: 「>」 */
.afg-list.li-chevron li::before {
	content: "";
	position: absolute;
	left: 0.35em;
	top: 1.15em;
	width: 6px;
	height: 6px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* list-raw: マーカー無し */
.afg-list.list-raw li {
	padding-left: 0;
}
.afg-list.list-raw li::before {
	content: none;
}

/* ol-circle: 丸数字 */
.afg-list.ol-circle {
	counter-reset: afg-ol;
}
.afg-list.ol-circle li {
	padding-left: 2.2em;
}
.afg-list.ol-circle li::before {
	counter-increment: afg-ol;
	content: counter(afg-ol);
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	background: #4682b4;
	color: #fff;
	font-size: 0.85em;
	line-height: 1.5em;
	text-align: center;
}

/* 下線付き（li-mainbdr / li-accentbdr） */
.afg-list.li-mainbdr li,
.afg-list.li-accentbdr li {
	border-bottom: 1px dotted #cfd4d8;
}
.afg-list.li-mainbdr li:last-child,
.afg-list.li-accentbdr li:last-child {
	border-bottom: none;
}

/* アイコン色（main-c-before / acc-bc-before） */
.afg-list.main-c-before li::before { color: #4682b4; }
.afg-list.acc-bc-before li::before { color: #c50000; }

/* --------------------------------------------------------------------------
   5. ボタン [btn]
   -------------------------------------------------------------------------- */
.afg-btn-wrap {
	margin: 1.8em 0;
	text-align: center;
}

.afg-btn {
	display: inline-block;
	max-width: 100%;
	padding: 14px 32px;
	border-radius: 6px;
	background: #4682b4;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.afg-btn:hover,
.afg-btn:focus {
	opacity: 0.85;
	color: #fff;
	text-decoration: none;
}

/* AFFINGER の cubic2（立体ボタン） */
.afg-btn.cubic2 {
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
}
.afg-btn.cubic2:active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* main-bc（メインカラー背景） */
.afg-btn.main-bc {
	background: #4682b4;
}

/* --------------------------------------------------------------------------
   6. JIN 互換
   -------------------------------------------------------------------------- */
.jin-icon {
	vertical-align: middle;
	color: #4caf50;
	font-size: 1.1em;
	line-height: 1;
}

.jin-iconbox {
	margin: 1.8em 0;
	padding: 16px 18px;
	border: 2px solid #4682b4;
	border-radius: 6px;
	background: #f7fbff;
	line-height: 1.9;
}

.jin-iconbox > :first-child { margin-top: 0; }
.jin-iconbox > :last-child  { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7. [asp] カードの業種タグ

   現行は <span id="syurui"> でid重複していたものを class="syurui" に変更した
   （引き継ぎ書 9-4）。content.css 側が #syurui でセレクタを書いている場合に
   備え、こちらでもクラス版のスタイルを持つ。
   -------------------------------------------------------------------------- */
.ranktemp .sv-table-container table td span.syurui,
table.rank6ikatemp td span.syurui {
	background: #D9DEE7;
	border-radius: 4px;
	padding: 2px;
	margin-right: 7px;
}

table.rank6ikatemp td span.syurui {
	margin-bottom: 4px;
	line-height: 1.75em;
}

/* 上の2つに当てはまらない箇所の受け皿（元CSSと同じ見た目） */
.syurui {
	display: inline-block;
	background: #D9DEE7;
	border-radius: 4px;
	padding: 2px;
	margin-right: 7px;
}