@charset "UTF-8";
/* おもてなし企画 */

.hp-p {
  margin: 0 0 0.7rem;
  line-height: 1.9;
}
/* 「先着700名様にプレゼント！」などの呼びかけ */
.hp-lead {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f5f69;
  line-height: 1.6;
}
.hp-sub {
  margin: 1.1rem 0 0.4rem;
  font-weight: 700;
  line-height: 1.6;
}
/* 「北九州メッセ : 会場受付付近」などのラベル（参加者へのご案内と同じ見せ方） */
.hp-label {
  font-weight: 700;
  color: #0f5f69;
}
/* 配布場所の2行（中黒なし・字下げなし） */
.hp-place {
  margin: 0 0 0.35rem;
  line-height: 1.8;
}

/* 【開催場所】などの見出しは、折り返すときにラベルと内容で分ける */
.hp-sub-label {
  white-space: nowrap;
}
.hp-sub-val {
  display: inline-block;
}
/* 日本語は文節で折り返す */
.hp-p,
.hp-table th,
.hp-table td,
.abstract-note .ul-middle-dot li {
  line-break: auto-phrase;
  overflow-wrap: anywhere;
}
.hp-h4 {
  margin: 1.8rem 0 0.8rem;
  padding-left: 0.6em;
  border-left: 4px solid #19204d;
  font-size: 1.02rem;
  font-weight: 700;
  color: #19204d;
  line-height: 1.5;
}
.hp-item {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1rem;
  background: #fafbfc;
  border: 1px solid #e8ebef;
  border-radius: 6px;
}
.hp-item-ttl {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: #343a40;
  line-height: 1.6;
}

/* 文章と写真を横に並べる（狭い画面では縦に積む） */
.hp-flex {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}
.hp-text {
  flex: 1 1 auto;
  min-width: 0;
}
.hp-fig {
  flex: 0 0 240px;
  margin: 0;
}
.hp-fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e8ebef;
  border-radius: 4px;
}
.hp-fig-wide {
  margin: 0.6rem 0 1rem;
}
.hp-fig-wide img {
  display: block;
  width: 100%;
  max-width: 516px;
  height: auto;
  border: 1px solid #e8ebef;
  border-radius: 4px;
}
/* 枡の写真は横長で元が744pxあるので、ここまで広げてよい */
.hp-fig-masu img {
  max-width: 744px;
}

/* 写真を横に2枚並べる（狭い画面では縦に積む）。
   高さをそろえたいので、はみ出す分は切り取って表示する */
.hp-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 0.8rem 0 0.9rem;
}
.hp-fig-cell {
  margin: 0;
}
.hp-fig-cell img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border: 1px solid #e8ebef;
  border-radius: 4px;
}

/* 開催概要の表 */
.hp-table {
  background: #fff;
  margin: 0 0 0.8rem;
}
.hp-table th,
.hp-table td {
  vertical-align: middle;
  padding: 0.55rem 0.9rem;
  line-height: 1.7;
  font-size: 0.95rem;
}
.hp-table th {
  width: 7em;
  background: #f7f7f7;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .hp-fig {
    flex-basis: 180px;
  }
}
@media (max-width: 575px) {
  .hp-flex {
    flex-direction: column;
    gap: 0.8rem;
  }
  .hp-fig {
    flex-basis: auto;
    width: 100%;
    max-width: 320px;
    align-self: center;
  }
  .hp-gallery {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .hp-fig-cell img {
    height: 200px;
  }
  .hp-table th,
  .hp-table td {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
}

/* 狭い画面では「ラベル :」で行を切り、値をまるごと次の行に送る
   （参加者へのご案内と同じ見せ方。ラベルと値は詰め、場所どうしは広げる） */
@media (max-width: 575.98px) {
  .hp-place {
    line-height: 1.5;
    margin-bottom: 0.9rem;
  }
  .hp-place .hp-val {
    display: block;
  }
}

/* 途中で折り返したくないまとまり */
.nw {
  white-space: nowrap;
}