@charset "UTF-8";
/* ケンガククラウド連携（イベント一覧）
   カード構造は東海工業の実装に準拠。色・枠・項目名は manten の既存イベント一覧
   （page-event.css：紺 #181c62／線 #bdb8ad／終了時のグレー化）に合わせている */

[v-cloak] {
  display: none;
}

.kc-none {
  text-align: center;
  margin: 50px auto;
}

.kc-spinner {
  padding: 50px 0;
}

.kc-l-c1 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.kc-l-c2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---- カード共通 ---- */
/* 上下の余白は margin ではなく padding で取る（margin だとセクションの外へはみ出し、背景色の帯が出る） */
.kc-content {
  margin: 0;
  padding: 40px 0;
}

.kc-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2em 2%;
}

.kc-card {
  display: block;
  width: 23.5%;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0;
  color: #040404;
  text-decoration: none;
  transition: opacity 0.3s;
}

.kc-card:hover {
  opacity: 0.8;
}

.kc-card:hover .kc-image img {
  transform: scale(1.1);
}

.kc-image {
  position: relative;
  overflow: hidden;
}

.kc-inner-image {
  background: #fff;
  border: 2px solid #181c62;
  padding: 8px;
}

.kc-image img {
  /* 見切れ防止：枠は縦長ポスター（1024×1280）の 4:5。比率の違う画像は切らずに余白つきで全体を収める */
  aspect-ratio: 4 / 5;
  object-fit: contain;
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.kc-info {
  display: flex;
  flex-direction: column;
  padding: 1em;
}

/* ---- アイコン①（種別）・アイコン②（開催形式） ---- */
.kc-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
}

.kc-type,
.kc-format {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.5em 0.9em;
  border-radius: 999px;
}

/* ① 完成見学会＝紺ベタ／相談会＝黄ベタ／イベント・その他＝ベージュベタ */
.kc-type {
  border: 1px solid transparent;
}

.kc-type.-kengaku {
  background-color: #181c62;
  border-color: #181c62;
  color: #fff;
}

.kc-type.-soudan {
  background-color: #fff100;
  border-color: #fff100;
  color: #181c62;
}

.kc-type.-event {
  background-color: #bdb8ad;
  border-color: #bdb8ad;
  color: #040404;
}

/* ② 予約制＝紺の枠／予約承認制＝紺の点線枠／オープン制＝ベージュの枠（いずれも白地） */
.kc-format {
  background-color: #fff;
  border: 1px solid #181c62;
  color: #181c62;
}

.kc-format.-shonin {
  border-style: dashed;
}

.kc-format.-open {
  border-color: #bdb8ad;
  color: #040404;
}

.kc-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin: 0.8em 0 0.6em;
  padding-bottom: 0.6em;
  border-bottom: 2px solid #bdb8ad;
  /* 2行分の高さを確保 */
  min-height: calc(1em * 2 * 1.6);
  box-sizing: content-box;
}

.kc-date-box,
.kc-address-box {
  display: flex;
  margin-bottom: 0.8em;
}

.kc-date,
.kc-address {
  font-size: 12px;
  line-height: 1.5;
}

.kc-date-txt,
.kc-address-txt {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  min-width: 3em;
  margin-right: 0.6em;
  color: #181c62;
  height: fit-content;
}

/* ---- 終了イベント：写真をグレーにして「終了しました」を重ねる ---- */
.kc-card.endDateTime .kc-image img {
  filter: grayscale(100%);
}

.kc-card.endDateTime .kc-inner-image {
  position: relative;
}

.kc-card.endDateTime .kc-inner-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #d9d9d9;
  opacity: 0.5;
  pointer-events: none;
}

.kc-end {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 0.4em 1.2em;
  background: #181c62;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ---- 画面幅 ---- */
@media screen and (max-width: 960px) {
  .kc-cards {
    gap: 1em 2%;
  }

  .kc-card {
    width: 49%;
  }
}

@media screen and (max-width: 640px) {
  .kc-card {
    width: 100%;
  }

  .kc-end {
    font-size: 4.2vw;
  }
}

/* ---- 一覧ページ（全件）：出力エリア幅 1280px・PCは4列 ---- */
.kc-wrap {
  box-sizing: border-box;
  max-width: 1280px;
  width: calc(100% - 40px);
  margin: 0 auto;
}

.kc-cards.-all {
  gap: 3em 2%;
}

.kc-card.-all {
  width: 23.5%;
}

@media screen and (max-width: 960px) {
  .kc-cards.-all {
    gap: 2em 4%;
  }

  .kc-card.-all {
    width: 48%;
  }
}

/* スマホの一覧は横2列（カードが細くなるので、枠の内側の余白と文字を少し詰める） */
@media screen and (max-width: 640px) {
  .kc-cards.-all {
    gap: 1.6em 3%;
  }

  .kc-card.-all {
    width: 48.5%;
  }

  .kc-card.-all .kc-inner-image {
    padding: 4px;
  }

  .kc-card.-all .kc-info {
    padding: 0.7em 0.6em;
  }

  .kc-card.-all .kc-type,
  .kc-card.-all .kc-format {
    font-size: 10px;
  }

  .kc-card.-all .kc-name {
    font-size: 12px;
  }

  .kc-card.-all .kc-date,
  .kc-card.-all .kc-address {
    font-size: 11px;
  }

  /* 会場名は細いカードでも2行まで表示 */
  .kc-card.-all .kc-address {
    -webkit-line-clamp: 2;
  }

  .kc-card.-all .kc-end {
    font-size: 3.4vw;
    padding: 0.4em 0.8em;
  }
}

/* ---- スマホのトップ（767px以下）：スライダー（slick）----
   読み込み前のちらつき防止として、初期化前は横一列に並べてはみ出しを隠す */
@media screen and (max-width: 767px) {
  /* トップのイベント欄は、スマホで .l-event が grid（page-top.css）。中の枠が内容の幅まで
     広がってスライダーの幅計算が暴走するため、枠の最小幅を0にして親の幅に収める */
  .l-event > .top-inner {
    min-width: 0;
    width: 100%;
  }

  .kc-cards:not(.-all):not(.slick-initialized) {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 0;
  }

  .kc-cards:not(.-all):not(.slick-initialized) .kc-card {
    flex: 0 0 68%;
    margin-left: 16%;
  }

  .kc-cards:not(.-all) .kc-card {
    width: auto;
    box-sizing: border-box;
  }

  /* カード間のすき間：padding だと白いカードの内側になるため、透明の枠で取る */
  .kc-cards:not(.-all) .kc-card.slick-slide {
    border: solid transparent;
    border-width: 0 6px;
    background-clip: padding-box;
    box-shadow: none;
    height: auto;
  }

  /* カードの高さを揃える */
  .kc-cards:not(.-all) .slick-track {
    display: flex;
  }
}

/* ==========================================================
   トップのイベント欄：デザイン（01_index）に合わせた作り
   - PC（768px以上）：左に大きい1件、右に小さい3件を縦に並べる
   - 受付中／終了は星型のバッジ（旧イベント欄の星の画像を流用）
   - スマホ（767px以下）は上のスライダーのまま。バッジだけ写真の左上に重ねる
   ========================================================== */

/* 星型のバッジ：一覧ページ（-all）では出さない */
.kc-status {
  display: none;
}

.kc-cards:not(.-all) .kc-status {
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 3;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
}

.kc-cards:not(.-all) .kc-status.-open {
  background-image: url(../images/event/event_icon01_bg.svg);
  color: #181c62;
}

.kc-cards:not(.-all) .kc-status.-end {
  background-image: url(../images/event/event_icon02_bg.svg);
  color: #fff;
}

/* トップでは「終了しました」の帯の代わりに星を使う（写真のグレー化はそのまま） */
.kc-cards:not(.-all) .kc-end {
  display: none;
}

@media screen and (min-width: 768px) {
  .kc-cards:not(.-all) {
    display: grid;
    grid-template-columns: minmax(0, 325fr) minmax(0, 597fr);
    /* 左の大きい1件の方が背が高い。余った高さは最後の行に寄せ、右の3件の間隔を保つ */
    grid-template-rows: auto auto 1fr;
    column-gap: 9.6%;
    row-gap: 0;
    align-items: start;
    align-content: start;
    margin-top: -48px; /* .kc-content の上余白40pxを打ち消し、タイトルの右下に食い込ませる */
    margin-bottom: 50px; /* 下の余白を50px増やす */
  }

  .kc-cards:not(.-all) .kc-card {
    background: transparent;
    box-shadow: none;
    position: relative;
    width: auto;
  }

  .kc-cards:not(.-all) .kc-image {
    overflow: visible;
  }

  .kc-cards:not(.-all) .kc-inner-image {
    overflow: hidden;
  }

  .kc-cards:not(.-all) .kc-info {
    padding: 0;
  }

  .kc-cards:not(.-all) .kc-name {
    border-bottom: 2px solid #d6d0c2;
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.75;
    margin: 12px 0 10px;
    min-height: 0;
    padding-bottom: 10px;
  }

  .kc-cards:not(.-all) .kc-date-box,
  .kc-cards:not(.-all) .kc-address-box {
    margin-bottom: 0;
    padding-block: 4px;
  }

  .kc-cards:not(.-all) .kc-date-txt,
  .kc-cards:not(.-all) .kc-address-txt {
    font-size: 14px;
    min-width: 4.6em;
  }

  .kc-cards:not(.-all) .kc-date,
  .kc-cards:not(.-all) .kc-address {
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .kc-cards:not(.-all) .kc-tags {
    margin-bottom: 2px;
  }

  /* --- 左：大きい1件 --- */
  .kc-cards:not(.-all) .kc-card:first-child {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin-top: 59px;
  }

  .kc-cards:not(.-all) .kc-card:first-child .kc-inner-image {
    background: #fff;
    border: 2px solid #181c62;
    padding: 5.54%;
  }

  .kc-cards:not(.-all) .kc-card:first-child .kc-info {
    margin-top: 6px;
  }

  .kc-cards:not(.-all) .kc-card:first-child .kc-status.-open {
    height: 97px;
    left: 5px;
    top: -67px;
    width: 97px;
  }

  .kc-cards:not(.-all) .kc-card:first-child .kc-status.-end {
    height: 72px;
    left: -14px;
    top: -38px;
    width: 72px;
  }

  /* --- 右：小さい3件（写真が左、文字が右。件の間に線） --- */
  .kc-cards:not(.-all) .kc-card:not(:first-child) {
    align-items: center;
    border-bottom: 2px solid #83829d;
    column-gap: 3.2%;
    display: grid;
    grid-column: 2;
    grid-template-columns: 24.3% minmax(0, 1fr);
    margin-top: 48px;
    padding-bottom: 26px;
  }

  .kc-cards:not(.-all) .kc-card:nth-child(2) {
    margin-top: 50px; /* 右の3件全体を50px下げる */
  }

  .kc-cards:not(.-all) .kc-card:last-child:not(:first-child) {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .kc-cards:not(.-all) .kc-card:not(:first-child) .kc-inner-image {
    background: #fff;
    border: 1px solid #bdb8ad;
    padding: 8px;
  }

  .kc-cards:not(.-all) .kc-card:not(:first-child) .kc-image img {
    aspect-ratio: 1 / 1;
  }

  .kc-cards:not(.-all) .kc-card:not(:first-child) .kc-status.-open {
    height: 90px;
    left: -35px;
    top: -44px;
    width: 90px;
  }

  .kc-cards:not(.-all) .kc-card:not(:first-child) .kc-status.-end {
    height: 68px;
    left: -21px;
    top: -33px;
    width: 68px;
  }

  .kc-cards:not(.-all) .kc-card:not(:first-child) .kc-name {
    font-size: 14px;
    margin-top: 6px;
  }
}

/* --- スマホ（スライダー）：星は写真の左上に収める --- */
@media screen and (max-width: 767px) {
  .kc-cards:not(.-all) .kc-status {
    font-size: 15px;
  }

  /* 星は写真の左上の角から少しはみ出させる。写真の枠とスライダーの枠は、はみ出しを切り取るので、切らないようにする */
  .kc-cards:not(.-all) .kc-image {
    overflow: visible;
  }

  /* slick の中央表示（centerMode）が slick-list に余白を直接書き込む（インライン）ため、上の余白だけ !important で上書きする */
  .kc-cards:not(.-all) .slick-list {
    margin-top: -26px;
    padding-top: 26px !important;
  }

  .kc-cards:not(.-all) .kc-status.-open {
    height: 96px;
    left: -22px;
    top: -22px;
    width: 96px;
  }

  .kc-cards:not(.-all) .kc-status.-end {
    height: 76px;
    left: -16px;
    top: -16px;
    width: 76px;
  }
}

/* ==========================================================
   一覧ページ（-all）：トップと同じ星型の受付中／終了バッジ
   レイアウトは今のまま（PCは4列、スマホは2列）。星は写真の左上の角から少しはみ出させる
   ========================================================== */
.kc-cards.-all .kc-status {
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 3;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
}

.kc-cards.-all .kc-status.-open {
  background-image: url(../images/event/event_icon01_bg.svg);
  color: #181c62;
  height: 90px;
  left: -26px;
  top: -30px;
  width: 90px;
}

.kc-cards.-all .kc-status.-end {
  background-image: url(../images/event/event_icon02_bg.svg);
  color: #fff;
  height: 68px;
  left: -18px;
  top: -22px;
  width: 68px;
}

/* 「終了しました」の帯の代わりに星を使う（写真のグレー化はそのまま） */
.kc-cards.-all .kc-end {
  display: none;
}

/* 星がはみ出して見えるよう、写真の枠は切り取らない。ホバーの拡大だけは内側で切る */
.kc-cards.-all .kc-image {
  overflow: visible;
}

.kc-cards.-all .kc-inner-image {
  overflow: hidden;
}

@media screen and (max-width: 640px) {
  .kc-cards.-all .kc-status {
    font-size: 12px;
  }

  .kc-cards.-all .kc-status.-open {
    height: 76px;
    left: -14px;
    top: -18px;
    width: 76px;
  }

  .kc-cards.-all .kc-status.-end {
    height: 58px;
    left: -10px;
    top: -12px;
    width: 58px;
  }
}