/* =========================================================================
 * 島ワーク イベント・セミナーページ（ショートコード [shima_seminar]）
 * モバイルファースト。海色/山色/企業/派遣をテーマ変数で切替。
 * ========================================================================= */

.swe-wrap {
	--swe-accent: #2d6cb4;
	--swe-accent-bg: #eaf2fb;
	--swe-ink: #1f2a37;
	--swe-muted: #6b7280;
	--swe-line: #e3e6ea;
	--swe-card: #ffffff;
	max-width: 1120px;
	margin: 0 auto;
	padding: 8px 16px 40px;
	color: var(--swe-ink);
	box-sizing: border-box;
}
.swe-wrap *, .swe-wrap *::before, .swe-wrap *::after { box-sizing: border-box; }

.swe-theme-sea      { --swe-accent: #2d6cb4; --swe-accent-bg: #eaf2fb; }
.swe-theme-mountain { --swe-accent: #2f7a3a; --swe-accent-bg: #eaf5ec; }
.swe-theme-event    { --swe-accent: #c2621a; --swe-accent-bg: #fbf1e7; }
.swe-theme-haken    { --swe-accent: #5b6472; --swe-accent-bg: #f1f2f4; }

/* ---- 見出し ---- */
.swe-hero { text-align: center; padding: 22px 0 18px; }
.swe-hero__title {
	margin: 0; font-size: 1.5rem; line-height: 1.4; font-weight: 700;
	letter-spacing: .02em;
}

/* ---- 区分タブ ---- */
.swe-tabs { display: flex; gap: 8px; margin: 0 0 18px; }
.swe-tab {
	flex: 1; text-align: center; padding: 12px 6px; border-radius: 10px;
	border: 2px solid var(--swe-line); background: #fff; color: var(--swe-ink);
	font-weight: 600; font-size: .9rem; line-height: 1.35; text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}
.swe-tab--sea      { --tab: #2d6cb4; }
.swe-tab--mountain { --tab: #2f7a3a; }
.swe-tab--event    { --tab: #c2621a; }
.swe-tab:hover { border-color: var(--tab); color: var(--tab); }
.swe-tab.is-active { background: var(--tab); border-color: var(--tab); color: #fff; }

/* ---- フィルター ---- */
.swe-filter {
	display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
	padding: 14px; background: var(--swe-accent-bg); border-radius: 10px; margin: 0 0 24px;
}
.swe-filter__item { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 150px; }
.swe-filter__cap { font-size: .75rem; color: var(--swe-muted); font-weight: 600; }
.swe-filter__q, .swe-filter__deadline {
	height: 40px; border: 1px solid var(--swe-line); border-radius: 8px;
	padding: 0 12px; font-size: .9rem; background: #fff; width: 100%;
}
.swe-filter__q:focus, .swe-filter__deadline:focus {
	outline: none; border-color: var(--swe-accent); box-shadow: 0 0 0 3px var(--swe-accent-bg);
}

/* ---- ラベル絞り込みチップ ---- */
.swe-labels {
	display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 22px;
}
.swe-labelchip {
	padding: 7px 14px; border-radius: 20px; cursor: pointer;
	border: 1.5px solid var(--swe-line); background: #fff; color: var(--swe-ink);
	font-size: .82rem; font-weight: 600; line-height: 1.2;
	transition: background .15s, color .15s, border-color .15s;
}
.swe-labelchip:hover { border-color: var(--swe-accent); color: var(--swe-accent); }
.swe-labelchip.is-active { background: var(--swe-accent); border-color: var(--swe-accent); color: #fff; }

/* ---- セクション ---- */
.swe-section { margin: 0 0 34px; }
.swe-section__title {
	font-size: 1.15rem; font-weight: 700; margin: 0 0 14px; padding-left: 12px;
	border-left: 5px solid var(--swe-accent); line-height: 1.3;
}
.swe-empty { color: var(--swe-muted); font-size: .9rem; padding: 10px 2px; }
.swe-noresult { color: var(--swe-muted); font-size: .9rem; padding: 10px 2px; }

/* ---- グリッド ---- */
/* align-items:start＝カードを行の高さに引き伸ばさず、内容ぶんの自然な高さにする。
   （チラシ枠はA4縦比固定・タイトルは2行固定で均一なので、日付〜ボタン間に余白が出ない） */
.swe-grid { display: grid; gap: 16px; align-items: start; }
.swe-grid--main { grid-template-columns: repeat(2, 1fr); }
.swe-grid--past { grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ---- カード ---- */
.swe-card {
	background: var(--swe-card); border: 1px solid var(--swe-line); border-radius: 12px;
	overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.swe-card__flyer { position: relative; aspect-ratio: 210 / 297; background: #f3f4f6; }
/* object-fit: contain＝横長画像も切り抜かず縮小して縦枠(A4)内に全体表示（上下は余白）。
   A4縦のチラシは枠比率と一致するので従来どおり枠いっぱいに表示される。 */
.swe-card__flyer .swe-flyer-img,
.swe-card__flyer img { width: 100%; height: 100%; object-fit: contain; display: block; }
.swe-flyer-none {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #a7aaad; font-size: .8rem; background: repeating-linear-gradient(45deg,#f6f7f7,#f6f7f7 8px,#eef0f1 8px,#eef0f1 16px);
}
.swe-card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.swe-card__labels { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.swe-card__label {
	font-size: .7rem; font-weight: 700; line-height: 1.2; padding: 3px 8px; border-radius: 12px;
	color: var(--swe-accent); background: var(--swe-accent-bg); white-space: nowrap;
}
.swe-card__title {
	font-size: .92rem; font-weight: 700; line-height: 1.35;
	/* タイトルを2行で高さ固定（超過は…省略）＝カード高を揃え、チラシ枠のサイズを全カード均一にする。
	   詳細情報はチラシ画像に集約する前提なので、タイトルはラベル的な2行表示でよい。
	   display は親テーマの上書きに負けないよう !important（line-clamp には -webkit-box が必須）。 */
	display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	overflow: hidden; min-height: calc(1.35em * 2);
}
.swe-card__meta { font-size: .78rem; color: var(--swe-muted); display: flex; align-items: center; gap: 4px; }
/* 開催日・申込期限は視認性重視で他メタより大きめ＋太字（堀川さん要望 2026-07-15） */
.swe-card__date,
.swe-card__deadline { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.swe-card__date {
	color: var(--swe-ink);
	align-items: flex-start;         /* 2行になったとき上揃え */
	min-height: calc(1.3em * 2);     /* 開催日は泊数付きで2行になり得るので2行分を確保＝全カードで段を揃える */
}
.swe-card__deadline { color: var(--swe-accent); min-height: 1.35em; } /* 期限が無いカードも1行確保＝ボタン位置を揃える */
.swe-card__date .swe-ico--cal { width: 15px; height: 15px; margin-top: 2px; }

/* 親テーマ VOYAGE が p / h4 等に付ける余白がカード内に漏れて大きなスキマになるため打ち消す。
   カード内の要素間の間隔は .swe-card__body の gap で一元管理する（テーマ余白に依存しない）。 */
.swe-card__body > * { margin: 0 !important; }
.swe-card__apply {
	margin-top: auto; /* タイトルの行数差があってもボタンをカード下端に固定＝横並びが揃う */
	text-align: center; padding: 10px 8px; border-radius: 8px;
	background: var(--swe-accent); font-weight: 700; font-size: .85rem;
	transition: opacity .15s;
}
/* 親テーマ VOYAGE のリンク色に負けないよう、申し込みリンクの文字色を白で固定 */
a.swe-card__apply,
a.swe-card__apply:link,
a.swe-card__apply:visited,
a.swe-card__apply:hover,
a.swe-card__apply:active {
	color: #fff !important; text-decoration: none !important;
}
.swe-card__apply:hover { opacity: .88; }
.swe-card__apply.is-closed { background: #eef0f1; color: #9aa0a6 !important; font-weight: 600; cursor: default; }

/* チラシ枠は A4縦比（210:297）で固定＝全カードで画像枠のサイズを均一にする。
   カード高の差はタイトルの2行固定で吸収し、申し込みボタンは margin-top:auto で下端に揃える。 */
.swe-grid .swe-card__flyer { flex: 0 0 auto; }

/* 過去カードはコンパクト＆淡く */
.swe-grid--past .swe-card { opacity: .92; }
.swe-grid--past .swe-card__body { padding: 7px 8px 9px; }
.swe-grid--past .swe-card__title { font-size: .78rem; font-weight: 600; }
.swe-grid--past .swe-card__deadline { display: none; }
.swe-grid--past .swe-card__labels { display: none; }

/* ---- 状態バッジ ---- */
.swe-badge {
	position: absolute; top: 8px; left: 8px; z-index: 2;
	font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; color: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.swe-badge--open     { background: #1d9e75; }
.swe-badge--ongoing  { background: #c2621a; }
.swe-badge--deadline { background: #9aa0a6; }
.swe-badge--past     { background: #9aa0a6; }
.swe-badge--listed   { background: #5b6472; }

/* ---- カレンダーアイコン ---- */
.swe-ico--cal {
	width: 13px; height: 13px; display: inline-block; flex: none;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
	mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
}

/* ---- ページ送り ---- */
.swe-pager { display: flex; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.swe-pager__btn {
	min-width: 36px; height: 36px; padding: 0 8px; border-radius: 8px;
	border: 1px solid var(--swe-line); background: #fff; color: var(--swe-ink);
	font-size: .9rem; font-weight: 600; cursor: pointer;
}
.swe-pager__btn:hover:not(:disabled) { border-color: var(--swe-accent); color: var(--swe-accent); }
.swe-pager__btn.is-active { background: var(--swe-accent); border-color: var(--swe-accent); color: #fff; }
.swe-pager__btn:disabled { opacity: .4; cursor: default; }

/* ---- 派遣バナー（島内向けページ最下部）---- */
.swe-hakenbanner { margin-top: 8px; }
.swe-hakenbanner__link {
	display: block; border-radius: 14px; overflow: hidden; text-decoration: none;
	transition: box-shadow .15s;
}
.swe-hakenbanner__link:hover { box-shadow: 0 3px 14px rgba(0,0,0,.12); }
.swe-hakenbanner__img { width: 100%; height: auto; display: block; }
/* バナー画像が未設定のときのテキスト代替 */
.swe-hakenbanner__fallback {
	display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
	text-align: center; padding: 26px 18px;
	border: 2px dashed #c7ccd3; border-radius: 14px; background: #fafbfc;
	transition: background .15s, border-color .15s;
}
.swe-hakenbanner__link:hover .swe-hakenbanner__fallback { border-color: #5b6472; background: #f1f2f4; }
.swe-hakenbanner__title { font-size: 1.05rem; font-weight: 700; color: #3d4653; letter-spacing: .02em; }
.swe-hakenbanner__cta { font-size: .9rem; font-weight: 700; color: #5b6472; }

/* =========================================================================
 * PC（4カラム／過去6カラム）
 * ========================================================================= */
@media (min-width: 768px) {
	.swe-hero__title { font-size: 2rem; }
	.swe-grid--main { grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.swe-grid--past { grid-template-columns: repeat(6, 1fr); gap: 12px; }
	.swe-tab { font-size: 1rem; padding: 14px 8px; }
	.swe-card__date,
	.swe-card__deadline { font-size: 1rem; }
}