/* =========================================================
   記事一覧（/column/・/column/category/〇〇/）
   Studio の /Achievements/Column の実測値（PC 1440px・スマホ 393px）で再現
   画面幅の切り替えは Studio と同じ 1140 / 840 / 540px
   ========================================================= */

/* ---------- 上の白い帯と見出し（高さ360px。小さい日本語＝h1・大きい英字） ---------- */
.column-hero { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 360px; }
.column-hero__veil { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 80px 48px 0; background: rgba(255, 255, 255, .9); }
.column-hero__inner { display: flex; justify-content: space-between; align-items: center; width: 1080px; max-width: 100%; padding: 0 40px; }
.column-hero__ttl { display: flex; flex-direction: column; align-items: flex-start; }
.column-hero__ja { color: #000; font-weight: var(--w-l); font-size: 20px; line-height: 1.4; letter-spacing: .05em; }
.column-hero__en { color: #000; font-weight: var(--w-m); font-size: 40px; line-height: 1.4; letter-spacing: .25em; }

/* ---------- カード（3列・左詰め。幅は Studio と同じ 33% − 20.1px） ---------- */
.column-list { width: 1080px; max-width: 100%; margin: -64px auto 0; padding: 0 48px 80px; }
.column-cards { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 48px 30px; }
.column-card { flex: none; width: calc(33% - 20.1px); background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); transition: opacity .3s cubic-bezier(.4, .4, 0, 1), translate .3s cubic-bezier(.4, .4, 0, 1); }
@media (hover: hover) { .column-card:hover { opacity: .5; translate: 0 -4px; } }
.column-card__link { display: flex; flex-direction: column; align-items: center; height: 100%; color: #000; }
.column-card__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.column-card__img--none { background: #e3e3e3; }
.column-card__box { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 16px; }
.column-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 4px; width: 100%; }
.column-card__cat { padding: 4px 16px; border-radius: 32px; background: #888; color: #fff; font-weight: var(--w-l); font-size: 12px; line-height: 1.5; letter-spacing: .1em; white-space: nowrap; }
.column-card__date { color: #000; font-weight: var(--w-l); font-size: 12px; line-height: 1.5; letter-spacing: .1em; white-space: nowrap; }
.column-card__title { width: 100%; color: #000; font-weight: var(--w-m); font-size: 16px; line-height: 1.5; letter-spacing: .1em; }
.column-card__head { display: -webkit-box; width: 100%; overflow: hidden; color: #000; font-weight: var(--w-l); font-size: 12px; line-height: 1.5; letter-spacing: .1em; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.column-card__more { align-self: flex-end; color: #000; font-weight: var(--w-m); font-size: 16px; line-height: 1.5; letter-spacing: .1em; }

.column-list__none { padding: 40px 0; text-align: center; }

/* ---------- Load more（黒い角丸。乗せると白） ---------- */
.column-more { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 48px; margin-top: 48px; }
.column-more__btn { display: flex; justify-content: center; align-items: center; gap: 8px; width: 282px; max-width: calc(100% - 8px); height: 40px; margin: 4px; padding: 5px 20px; border: 1px solid #000; border-radius: 20px; background: #000; color: #fff; transition: background .3s cubic-bezier(.4, .4, 0, 1), color .3s cubic-bezier(.4, .4, 0, 1), translate .3s cubic-bezier(.4, .4, 0, 1); }
.column-more__txt { padding-bottom: 2px; font-weight: var(--w-l); font-size: 16px; line-height: 1; text-align: center; }
.column-more__btn .material-icons { font-size: 24px; }
@media (hover: hover) { .column-more__btn:hover { background: #fff; color: #000; translate: 0 -4px; } }
.column-more__btn.is-loading { opacity: .5; pointer-events: none; }

/* =========================================================
   840px 以下：カード2列
   ========================================================= */
@media (max-width: 840px) {
	.column-hero { height: 280px; }
	.column-hero__veil { flex-direction: column; padding: 80px 0 0; }
	.column-hero__inner { flex-direction: column; align-items: flex-start; padding: 0 32px; }
	.column-hero__ja { font-size: 18px; }
	.column-hero__en { font-size: 32px; }
	.column-list { width: 100%; margin-top: -32px; padding: 0 32px 64px; }
	.column-cards { gap: 24px 16px; }
	.column-card { width: calc(50% - 8px); }
	.column-card__link { justify-content: space-between; }
	.column-card__box { flex: 1; }
	.column-more { margin-top: 24px; }
}

/* =========================================================
   540px 以下：スマホ（カード1列）
   ========================================================= */
@media (max-width: 540px) {
	.column-hero { height: 240px; }
	.column-hero__inner { padding: 0 16px; }
	.column-hero__ja { font-size: 16px; }
	.column-hero__en { font-size: 28px; }
	.column-list { padding: 0 16px 64px; }
	.column-cards { gap: 40px 16px; }
	.column-card { width: 100%; }
	.column-more { margin-top: 40px; }
}