@charset "utf-8";


    .cd{
      --navy:#0b3a5a;
      --title-size:36px;
      --num-size:48px;
      --unit-size:28px;
      --gap:10px;

      text-align:center;
      color:var(--navy);
      font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
                   "Noto Sans JP", "Yu Gothic", sans-serif;
      padding:16px 12px;
    }
    .cd__title{
      margin:22px 0 0;
      font-size:var(--title-size);
      font-weight:800;
      letter-spacing:0.02em;
    }
    .cd__row{
      display:inline-flex;
      align-items:baseline;
      gap:var(--gap);
    }
    .cd__num{
      font-size:var(--num-size);
      font-weight:900;
      letter-spacing:0.04em;
      font-variant-numeric: tabular-nums;
    }
    .cd__unit{
      font-size:var(--unit-size);
      font-weight:800;
      margin-right:6px;
    }
    .cd__unit:last-child{ margin-right:0; }

    @media (max-width: 480px){
      .cd{
        --title-size:28px;
        --num-size:32px;
        --unit-size:18px;
        --gap:6px;
      }
    }

    .cta{
      position: relative;
      text-align: center;

      /* CTA個別調整（HTMLのstyleで上書き） */
      --btn-bottom: 22%;
      --btn-bottom-sp: var(--btn-bottom);

      --btn-width: min(86%, 520px);
      --btn-width-sp: min(90%, 520px);

      --zoom-scale: 1.06;
      --zoom-duration: 1.8s;
    }

    .cta__bg{
      display:block;
      width:100%;
      height:auto;
    }

    /* ボタンの位置だけ担当（transform固定） */
    .cta__btnLink{
      position:absolute;
      left:50%;
      bottom: var(--btn-bottom);
      transform: translateX(-50%);
      width: var(--btn-width);
      display:block;
      z-index:2;
      text-decoration:none;

      /* 古いCSSが混ざってもズレないように保険 */
      animation:none !important;
    }

    /* ズームは画像だけに付与（ズレない） */
    .cta__btnImg{
      display:block;
      width:100%;
      height:auto;
      transform-origin:center center;
      animation: ctaZoom var(--zoom-duration) ease-in-out infinite;
    }

    .cta__btnLink:hover .cta__btnImg{
      filter: brightness(1.05);
    }
    .cta__btnLink:active .cta__btnImg{
      transform: scale(0.98);
    }

    @keyframes ctaZoom{
      0%   { transform: scale(1); }
      50%  { transform: scale(var(--zoom-scale)); }
      100% { transform: scale(1); }
    }

    @media (max-width: 480px){
      .cta__btnLink{
        bottom: var(--btn-bottom-sp);
        width: var(--btn-width-sp);
      }
    }

    .seminar-info {
      position: relative;
      overflow: hidden;
    }

    .seminar-info__bg {
      display: block;
      width: 100%;
      height: auto;
    }

    .seminar-info__overlay {
      position: absolute;
      top: 29%;
      right: 7%;
      bottom: 27%;
      left: 7%;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .seminar-info__schedule {
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .seminar-info__schedule li {
      display: grid;
      grid-template-columns: min(4.375vw, 28px) minmax(0, 1fr) auto;
      align-items: center;
      column-gap: min(1.25vw, 8px);
      margin-top: min(2.1875vw, 14px);
      color: #101010;
      font-size: clamp(13px, 3.15vw, 20px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .seminar-info__schedule li:first-child {
      margin-top: 0;
    }

    .seminar-info__index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: min(4.0625vw, 26px);
      height: min(4.0625vw, 26px);
      border: 1.5px solid #101010;
      border-radius: 50%;
      font-size: clamp(11px, 2.35vw, 15px);
      font-weight: 700;
      line-height: 1;
    }

    .seminar-info__date {
      min-width: 0;
      white-space: nowrap;
    }

    .seminar-info__seat {
      color: #c62212;
      white-space: nowrap;
      padding-left: 0.05em;
    }

    @media (max-width: 480px) {
      .seminar-info__overlay {
        top: 29%;
        right: 7.5%;
        bottom: 27%;
        left: 7.5%;
      }

      .seminar-info__schedule li {
        grid-template-columns: 4.4vw minmax(0, 1fr) auto;
        column-gap: 1vw;
        margin-top: 1.7vw;
        font-size: 3.35vw;
      }

      .seminar-info__index {
        width: 3.9vw;
        height: 3.9vw;
        font-size: 2.2vw;
        border-width: 1.1px;
      }
    }