/* =========================================================
   コラム一覧（/column/）  Studio の実測値（tree_column_pc / sp）で再現
   ========================================================= */

/* ---------- 上の写真 ---------- */
.column-hero { display: flex; justify-content: flex-end; align-items: center; height: 400px; padding-left: var(--side); }
.column-hero__in { display: flex; width: 100%; height: 100%; background: #000; }
.column-hero__img { position: relative; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; }
.column-hero__img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .06); }

/* ---------- 記事カード ---------- */
.column-list { display: flex; flex-direction: column; align-items: center; padding-left: var(--side); }
.column-list__in { display: flex; flex-direction: column; width: 932px; max-width: 100%; margin: 80px 0; }
.column-cards { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 100%; }
.column-card { display: flex; flex-direction: column; align-items: flex-start; width: 48%; margin: 0 0 40px; border-bottom: 2px dashed #a7753b; transition: opacity .6s; }
.column-card__img { display: block; flex: none; width: 100%; height: 280px; border-radius: 10px; object-fit: cover; background: #eee; }
.column-card__txt { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 0; transition: opacity .3s; }
.column-card__date { display: block; margin: 26px 0 9px; color: var(--navy); font-family: var(--open); font-weight: 600; font-size: 14px; line-height: 1; }
.column-card__title { margin: 0 0 30px; color: #707070; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 14px; line-height: 1.2; text-align: left; }
@media (hover: hover) {
	.column-card:hover { opacity: .7; }
	.column-card:hover .column-card__txt { opacity: .6; }
}
.column-list__none { padding: 40px 0; text-align: center; }

/* ---------- もっと見る ---------- */
.column-more { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin-top: 20px; }
.column-more__btn { display: flex; justify-content: center; align-items: center; width: 350px; max-width: calc(100% - 8px); margin: 4px; border-radius: 28px; background: #9bc241; transition: opacity .3s; }
.column-more__btn span { padding: 20px 0; color: #fff; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 18px; line-height: 1; text-align: center; }
.column-more__btn.is-loading { opacity: .5; pointer-events: none; }
@media (hover: hover) { .column-more__btn:hover { opacity: .5; } }

/* =========================================================
   1140px 以下：写真は左メニューの下まで広がり、高さ720px
   ========================================================= */
@media (max-width: 1140px) {
	.column-hero { height: 720px; padding-left: 0; background: #fff; }
}

/* =========================================================
   990px 以下（上の帯）
   ========================================================= */
@media (max-width: 990px) {
	.column-hero { height: 600px; }
	.column-list { padding-left: 0; }
	.column-card { margin: 0 0 30px; overflow: hidden auto; }
	.column-card__img { height: 240px; }
	.column-card__date { font-size: 12px; }
}

/* =========================================================
   690px 以下：スマホ（1列）
   ========================================================= */
@media (max-width: 690px) {
	.column-hero { height: 353px; }
	.column-list__in { max-width: calc(100% - 40px); margin: 0 20px; }
	.column-card { width: 100%; }
}