/* ------------------------------------------------------------------
   京Bizウェビナー 2026/09「人と職場を活かす助成金」
   デザイン: 202609京BizウェビナーLP0717 (アートボード 1280 x 3700)
   デザイン上の 1pt = 1px として実装
   ------------------------------------------------------------------ */

main {
  width: 1280px;
  margin: 0 auto;
  text-align: center;
  /* header は position:fixed。デザインでも京Bizバーはヘッダー(65px)直下から始まる */
  padding-top: 65px;
}

main img.topimg {
  width: 100%;
  display: block;
}

/* ---- ロゴ差し替え(このLP専用) ---- */
/* ヘッダー(PC): 新ロゴをやや大きめに */
header .toplogo-cta a .pclogo {
  height: 40px;
  width: auto;
}

/* フッター: 新ロゴを小さめに */
footer .logo-cta-sns > div:first-child img {
  width: 240px;
  height: auto;
}

header .toplogo-cta {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0px solid #000000;
}

.hira {
  font-family: "Hiragino Sans";
}

.singo {
  font-family: "Hiragino Kaku Gothic ProN";
}

.bold {
  font-weight: bold;
}

span.mini {
  font-size: 70%;
}

br.sp {
  display: none;
}


/* ---- 京Bizウェビナー タイトルバー (design y65-160) ---- */

section.topmain {
  padding: 0;
}

.kyobiz-bar {
  position: relative;
  height: 95px;
}

.kyobiz-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  height: 100%;
  margin: 0;
}

.kyobiz-title .kyobiz-logo {
  width: 331px;
  height: auto;
  display: block;
}

.kyobiz-title .series {
  font-size: 28px;
  color: #000000;
  line-height: 1;
}

.kaisen {
  width: 150px;
  color: white;
  padding: 16px 10px 15px 10px;
  background-color: #FF0000;
  font-size: 26px;
  font-weight: normal;
  line-height: 2rem !important;
  text-align: center;
}

.kaisen .sanka-text {
  font-size: 1.8rem;
  font-weight: bold;
}

/* 参加無料バッジ: バーから緑ヒーローへはみ出す (design x1043-1251 / y127-228) */
.kaisen-top {
  position: absolute;
  right: 29px;
  top: 62px;
  z-index: 2;
  width: 208px;
  padding: 12px 0 14px;
  line-height: 1.15 !important;
}

.kaisen-top .sanka-text {
  font-size: 39px;
}


/* ---- 開催日時 (design y1204-1260) ---- */

.kaisainiti {
  font-size: 51px;
  color: #006837;
  text-align: center;
  margin: 30px 0 25px 0;
  line-height: 1.2;
}

.kaisainiti .mini {
  font-size: 34px;
}


/* ---- 申し込みボタン (design y1285-1437 / x78-1202) ---- */

.sanka {
  background-color: #FF0000;
  color: white;
  text-align: center;
  font-size: 40px;
  padding: 22px 10px;
  width: 1125px;
  margin: 20px auto !important;
  font-weight: bold;
  border-radius: 40px;
  line-height: 1.45;
}

.sanka a {
  color: white;
  text-decoration: none;
  display: block;
}

.sanka span {
  font-size: 0.95em;
  font-weight: normal;
}


/* ---- こんな皆様にオススメ (design y1480-1830) ---- */

h2.kk {
  margin: 45px 0 40px 0 !important;
  font-size: 52px !important;
  color: #FF0000;
  font-weight: bold;
  text-align: center;
}

.hukidasi-box {
  display: flex;
  flex-wrap: wrap;
  row-gap: 35px;
  margin: 0 auto;
  font-size: 18px;
  width: 894px;
  justify-content: center;
}

.hukidasi-box>div {
  display: flex;
  width: 50%;
  gap: 21px;
  align-items: center;
  justify-content: flex-end;
}

/* 顔は中央2列、吹き出しは外側 */
.hukidasi-box>div:nth-child(odd) {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.hukidasi-box .face {
  flex-shrink: 0;
  margin: 0;
}

.hukidasi-box .face img {
  width: 124px;
  height: auto;
  display: block;
}

.hukidasi-box .hukidasi,
.hukidasi-box .hukidasi-re {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 283px;
  min-height: 98px;
  box-sizing: border-box;
  padding: 10px 15px;
  border: 2px solid #6F6F6F;
  border-radius: 10px;
  background-color: #FFFFFF;
  color: #000000;
  font-weight: normal;
  line-height: 1.55;
  text-align: center;
  margin: 0;
}

/* 吹き出しの尻尾 (内側=顔の方向を向く) */
.hukidasi-box .hukidasi::before,
.hukidasi-box .hukidasi::after,
.hukidasi-box .hukidasi-re::before,
.hukidasi-box .hukidasi-re::after {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  content: '';
}

/* .hukidasi-re = 左側の吹き出し -> 尻尾は右 */
.hukidasi-box .hukidasi-re::before {
  right: -21px;
  margin-top: -11px;
  border-width: 11px 0 11px 20px;
  border-color: transparent transparent transparent #6F6F6F;
}

.hukidasi-box .hukidasi-re::after {
  right: -16px;
  margin-top: -11px;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #FFFFFF;
}

/* .hukidasi = 右側の吹き出し -> 尻尾は左 */
.hukidasi-box .hukidasi::before {
  left: -21px;
  margin-top: -11px;
  border-width: 11px 20px 11px 0;
  border-color: transparent #6F6F6F transparent transparent;
}

.hukidasi-box .hukidasi::after {
  left: -16px;
  margin-top: -11px;
  border-width: 11px 18px 11px 0;
  border-color: transparent #FFFFFF transparent transparent;
}

.etc-text {
  text-align: center;
  margin: 30px 0 20px 0;
  font-size: 32px;
  font-weight: bold;
  color: #000000;
}


/* ---- 講演概要 (design y1942-2381) ---- */

section.gaiyo {
  margin: 45px auto 0 auto;
}

.gaiyo-title {
  font-size: 35px;
  color: #006837;
  text-align: center;
  margin: 0 0 30px 0;
}

.gaiyo-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 0 auto;
  width: 1118px;
}

.gaiyo-card {
  width: 352px;
  min-height: 187px;
  box-sizing: border-box;
  background-color: #FFBF00;
  border-radius: 20px;
  padding: 20px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gaiyo-card .lead {
  font-family: "Hiragino Sans";
  font-size: 18px;
  color: #FF0000;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.gaiyo-card .name {
  font-family: "Hiragino Sans";
  font-size: 24px;
  color: #FF0000;
  font-weight: 700;
  line-height: 1.3;
  margin: 4px 0 12px 0;
}

.gaiyo-card .desc {
  font-size: 18px;
  color: #000000;
  font-weight: bold;
  line-height: 1.3;
  margin: 0;
}

/* 黄色い下向き三角 (design 51x31 / y2231-2262) */
.gaiyo-arrow {
  width: 0;
  height: 0;
  margin: 35px auto 40px auto;
  border-style: solid;
  border-width: 31px 26px 0 26px;
  border-color: #FFBF00 transparent transparent transparent;
}

.gaiyo-msg {
  font-size: 35px;
  color: #006837;
  text-align: center;
  line-height: 1.45;
  margin: 0 0 50px 0;
}

/* マーカー (design #EDD906 / 文字の下半分) */
.gaiyo-msg .marker {
  background: linear-gradient(transparent 55%, #EDD906 55%);
}


/* ---- 開催概要 緑ボックス (design y2430-2761 / x78-1202) ---- */

section.naiyo {
  position: relative;
  background-color: #0C9F1A;
  color: white;
  width: 1125px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 28px 0;
  text-align: left;
  border-radius: 0;
}

section.naiyo a {
  color: white;
  text-decoration: none;
}

div.naiyo-flex {
  position: relative;
  margin-bottom: 22px;
}

section.naiyo .title {
  font-size: 40px;
  margin: 0 auto 8px auto;
  text-align: center;
  font-weight: bold;
}

section.naiyo .sub {
  font-size: 20px;
  text-align: center;
  margin: 0 0 8px 0;
}

section.naiyo .nitiji {
  font-size: 20px;
  margin: 0;
  text-align: center;
}

section.naiyo .nitiji span {
  font-size: 26px;
}

/* 参加無料バッジ (design x1044-1170 / y2468-2537) */
section.naiyo .sanka-div .kaisen {
  position: absolute;
  right: 32px;
  top: 38px;
  width: 126px;
  padding: 6px 0 8px;
  font-size: 17px;
  line-height: 1.3 !important;
}

section.naiyo .sanka-div .kaisen .sanka-text {
  font-size: 25px;
}

section.naiyo .kousi-info {
  display: flex;
  justify-content: center;
  gap: 0 30px;
  /* design: 本文左端 x142 / 写真右端 x1172 (緑ボックス x78..1202) */
  padding: 0 30px 0 64px;
  align-items: flex-start;
}

section.naiyo .kousi-info>div:first-child {
  flex: 1;
}

section.naiyo .kousi {
  font-size: 20px;
  margin: 0 0 6px 0;
  text-align: left;
  font-weight: bold;
}

section.naiyo .kousi-cap {
  font-size: 14px;
  margin: 0 0 10px 0;
  line-height: 1.5;
  text-align: left;
}

section.naiyo .kousi-sub {
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
  text-align: left;
}

section.naiyo .kousiphoto {
  width: 172px;
  flex-shrink: 0;
}

section.naiyo .kousiphoto img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
}


/* ---- 京Bizウェビナーシリーズについて (design y3131-3394) ---- */

section.bottominfo {
  margin: 40px auto;
  width: 1128px;
}

section.bottominfo .title {
  font-size: 40px;
  font-weight: bold;
  color: #FF0000;
  text-align: center;
  margin-bottom: 25px;
}

section.bottominfo .info {
  font-size: 19px;
  line-height: 1.85;
  margin: 20px 0;
  text-align: left;
  color: #000000;
}


/* ---- 申し込みフォーム ---- */

.mousikomi-div {
  margin: 20px 0;
  text-align: center;
}

main .top-slider-wrap {
  margin-top: 0px !important;
}

footer .info {
  margin: 20px 0;
  color: gray;
  line-height: 1.5rem;
}


/* ==================================================================
   SP / タブレット
   ================================================================== */

@media screen and (max-width: 1024px) {

  main {
    width: auto;
    margin: 0 auto;
    /* SP は header .toplogo-cta が 60px */
    padding-top: 60px;
  }

  img {
    width: 100%;
  }

  main img.topimg {
    width: 100%;
  }

  br.sp {
    display: block;
  }

  br.pc {
    display: none;
  }

  /* ---- ヘッダーロゴ(SP) ---- */
  header .toplogo-cta a .mobilelogo {
    width: 210px;
  }

  /* ---- タイトルバー ---- */
  /* 京Bizロゴは左寄せ、参加無料バッジは右上へ */

  .kyobiz-bar {
    position: relative;
    height: auto;
    padding: 12px 10px;
  }

  .kyobiz-title {
    display: block;
    height: auto;
    text-align: left;
  }

  .kyobiz-title .kyobiz-logo {
    width: 58%;
    max-width: 331px;
    margin: 0;
  }

  .kyobiz-title .series {
    display: block;
    font-size: 3.1vw;
    margin-top: 5px;
  }

  .kaisen-top {
    position: absolute;
    right: 10px;
    top: 12px;
    width: 120px;
    margin: 0;
    padding: 5px 0 6px;
  }

  .kaisen-top .sanka-text {
    font-size: 1.25rem;
  }

  .kaisen {
    width: 100px;
    font-size: 1rem;
    padding: 5px 0;
    font-weight: normal;
    line-height: 1.4rem !important;
  }

  .kaisen .sanka-text {
    font-size: 1.2rem;
  }

  /* ---- 開催日時 ---- */

  .kaisainiti {
    font-size: 1.4rem;
    margin: 20px 10px 15px 10px;
    line-height: 1.4;
  }

  .kaisainiti .mini {
    font-size: 1rem;
  }

  /* ---- 申し込みボタン ---- */

  .sanka {
    font-size: 1.4rem;
    padding: 15px 10px;
    width: 92%;
    margin: 15px auto !important;
    border-radius: 30px;
  }

  .sanka span {
    font-size: 0.70em;
  }

  /* ---- オススメ ---- */

  h2.kk {
    margin: 35px 10px 25px 10px !important;
    font-size: 1.5rem !important;
  }

  .hukidasi-box {
    display: block;
    width: 100%;
    font-size: 1rem;
  }

  .hukidasi-box>div {
    width: 92%;
    margin: 12px auto;
    gap: 10px;
    justify-content: flex-start;
  }

  .hukidasi-box>div:nth-child(odd) {
    flex-direction: row;
  }

  .hukidasi-box .face img {
    width: 80px;
  }

  .hukidasi-box .hukidasi,
  .hukidasi-box .hukidasi-re {
    width: auto;
    flex: 1;
    min-height: 70px;
    padding: 10px 12px;
  }

  /* SP は顔が常に左 -> 尻尾も常に左 */
  .hukidasi-box .hukidasi-re::before {
    right: auto;
    left: -21px;
    border-width: 11px 20px 11px 0;
    border-color: transparent #6F6F6F transparent transparent;
  }

  .hukidasi-box .hukidasi-re::after {
    right: auto;
    left: -16px;
    margin-top: -11px;
    border-width: 11px 18px 11px 0;
    border-color: transparent #FFFFFF transparent transparent;
  }

  .etc-text {
    margin: 20px 0 15px 0;
    font-size: 1.2rem;
  }

  /* ---- 講演概要 ---- */

  section.gaiyo {
    margin: 30px auto 0 auto;
  }

  .gaiyo-title {
    font-size: 1.4rem;
    margin-bottom: 20px;
  }

  .gaiyo-cards {
    display: block;
    width: 92%;
  }

  .gaiyo-card {
    width: 100%;
    min-height: 0;
    margin-bottom: 15px;
    padding: 15px 10px;
    border-radius: 15px;
  }

  .gaiyo-card .lead {
    font-size: 0.95rem;
  }

  .gaiyo-card .name {
    font-size: 1.2rem;
    margin: 3px 0 8px 0;
  }

  .gaiyo-card .desc {
    font-size: 0.95rem;
  }

  .gaiyo-arrow {
    margin: 20px auto 25px auto;
    border-width: 20px 17px 0 17px;
  }

  .gaiyo-msg {
    font-size: 1.3rem;
    margin: 0 10px 30px 10px;
    line-height: 1.6;
  }

  /* ---- 緑ボックス ---- */

  section.naiyo {
    width: 100%;
    margin: 20px auto;
    padding: 20px 5px;
  }

  div.naiyo-flex {
    text-align: center;
    margin: 0 auto 15px auto;
  }

  section.naiyo .title {
    font-size: 1.4rem;
    margin: 0 auto 8px auto;
  }

  section.naiyo .sub {
    font-size: 0.95rem;
    margin: 0 5px 8px 5px;
    line-height: 1.5;
  }

  section.naiyo .nitiji {
    font-size: 1rem;
  }

  section.naiyo .nitiji span {
    font-size: 1.2rem;
  }

  section.naiyo .sanka-div .kaisen {
    position: static;
    width: 130px;
    margin: 12px auto 0 auto;
    font-size: 0.85rem;
    padding: 5px 0 6px;
  }

  section.naiyo .sanka-div .kaisen .sanka-text {
    font-size: 1.2rem;
  }

  section.naiyo .kousi-info {
    display: block;
    padding: 0 15px;
  }

  section.naiyo .kousi {
    font-size: 1.1rem;
  }

  section.naiyo .kousi-cap {
    font-size: 0.8rem;
  }

  section.naiyo .kousi-sub {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  section.naiyo .kousiphoto {
    width: 40%;
    margin: 15px auto 0 auto;
  }

  /* ---- シリーズについて ---- */

  section.bottominfo {
    margin: 30px auto;
    width: 90%;
  }

  section.bottominfo .title {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }

  section.bottominfo .info {
    font-size: 0.95rem;
    line-height: 1.9;
  }

}