@charset "UTF-8";

/*
 * 高知学園大学・高知学園短期大学 トップページ用メインビジュアル
 * 既存サイトと衝突しないよう .kg-topmv 配下に限定しています。
 */
.kg-topmv,
.kg-topmv * {
  box-sizing: border-box;
}

.kg-topmv {
  --ink: #292929;
  --blue: #2374d8;
  --pink: #ee5b92;
  --orange: #f3a13f;
  --white: #fff;
  width: 100%;
  max-width: 1680px;
  margin: 80px auto 0;
}

.kg-topmv a {
  color: inherit;
}

/* 旧トップ画像が確保していた余白を解除 */
.main.ind-main {
  margin-top: 0 !important;
}


.kg-topmv {
      position: relative;
      isolation: isolate;
      min-height: 780px;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(480px, 46%) minmax(0, 54%);
      align-items: center;
      background:
        radial-gradient(circle at 43% 7%, rgba(248, 219, 232, .72) 0 58px, transparent 59px),
        radial-gradient(circle at 38% 88%, rgba(207, 233, 243, .58) 0 43px, transparent 44px),
        linear-gradient(115deg, #fff 0%, #fff 45%, #fffaf8 100%);
    }

    .kg-topmv::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: -9% 48% 38% -14%;
      border: 2px solid transparent;
      border-top-color: rgba(246, 191, 93, .70);
      border-right-color: rgba(221, 133, 181, .48);
      border-radius: 50%;
      transform: rotate(12deg);
      pointer-events: none;
    }

    .kg-topmv::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 310px;
      height: 310px;
      left: -145px;
      bottom: -120px;
      border-radius: 50%;
      background: rgba(202, 235, 235, .58);
      pointer-events: none;
    }

    .kg-topmv__copy {
      position: relative;
      z-index: 3;
      align-self: center;
      padding: 56px 18px 50px clamp(42px, 4.6vw, 86px);
    }

    .kg-topmv__school {
      margin: 0 0 38px;
      font-size: clamp(15px, 1.12vw, 19px);
      font-weight: 700;
      letter-spacing: .10em;
    }

    .kg-topmv__title {
      margin: 0;
      font-size: clamp(54px, 4.5vw, 76px);
      font-weight: 760;
      line-height: 1.18;
      letter-spacing: .018em;
      white-space: nowrap;
    }

    .kg-topmv__title > span { display: block; }
    .kg-topmv__sp-break,
    .kg-topmv__sp-lead-break { display: none; }

    .kg-topmv__number {
      display: inline-block;
      margin-right: .035em;
      padding-top: .06em;
      padding-bottom: .08em;
      font-size: 1.40em;
      line-height: 1;
      vertical-align: -0.04em;
      font-weight: 500;
      background: linear-gradient(145deg, #f16091 5%, #f39a42 32%, #f3c74a 46%, #55bda9 66%, #5587e2 88%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .kg-topmv__lead {
      margin: 28px 0 0;
      font-size: clamp(15px, 1.2vw, 19px);
      font-weight: 700;
      line-height: 1.7;
      letter-spacing: .045em;
    }

    .kg-topmv__lead-line { white-space: nowrap; }

    .kg-topmv__actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(220px, 1fr));
      gap: 14px;
      width: min(100%, 500px);
      margin-top: 34px;
    }

    .kg-topmv__button {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      min-height: 60px;
      padding: 12px 46px 12px 20px;
      border-radius: 999px;
      font-size: clamp(14px, 1vw, 16px);
      font-weight: 800;
      letter-spacing: .03em;
      white-space: nowrap;
      word-break: keep-all;
      text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .kg-topmv__button::after {
      content: "→";
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-52%);
      font-size: 22px;
      font-weight: 400;
    }

    .kg-topmv__button:hover,
    .kg-topmv__button:focus-visible {
      transform: translateY(-3px);
      box-shadow: 0 14px 30px rgba(40, 60, 90, .18);
    }

    .kg-topmv__button:focus-visible {
      outline: 4px solid rgba(35, 116, 216, .22);
      outline-offset: 4px;
    }

    .kg-topmv__button--primary {
      color: #fff;
      background: linear-gradient(95deg, var(--pink), var(--orange));
      box-shadow: 0 10px 24px rgba(238, 91, 146, .22);
    }

    .kg-topmv__button--secondary {
      color: var(--blue);
      border: 2px solid var(--blue);
      background: rgba(255,255,255,.94);
    }

    .kg-topmv__decor {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-top: 46px;
      color: #4abec4;
      opacity: .9;
    }

    .kg-topmv__decor svg {
      width: 50px;
      height: 50px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .kg-topmv__decor svg:nth-child(1) { color: #ee79a3; }
    .kg-topmv__decor svg:nth-child(2) { color: #69aeea; }
    .kg-topmv__decor svg:nth-child(3) { color: #42c2c0; width: 66px; }
    .kg-topmv__decor svg:nth-child(4) { color: #efa145; }

    .kg-topmv__visual {
      position: relative;
      z-index: 2;
      min-width: 0;
      padding: 18px 28px 18px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .kg-topmv__field-grid {
      width: min(100%, 800px);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      transform: translateX(12px);
    }

    .kg-topmv__field-card {
      --label-color: #333;
      --panel-bg: #eee;
      position: relative;
      overflow: hidden;
      min-width: 0;
      aspect-ratio: 1.45 / 1;
      border: 5px solid #fff;
      background: #eee;
      box-shadow: 0 7px 18px rgba(56, 66, 90, .09);
      text-decoration: none;
    }

    .kg-topmv__field-card:nth-child(odd) {
      border-radius: 62px 16px 62px 16px;
      transform: translateX(13px);
    }

    .kg-topmv__field-card:nth-child(even) {
      border-radius: 16px 62px 16px 62px;
      transform: translateX(-13px);
    }

    .kg-topmv__field-card img {
      position: relative;
      z-index: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: 50% 54%;
      transition: transform .35s ease;
      transform: scale(1.015);
    }

    .kg-topmv__field-card:hover img,
    .kg-topmv__field-card:focus-visible img { transform: scale(1.055); }

    .kg-topmv__field-card:focus-visible {
      outline: 4px solid rgba(35, 116, 216, .32);
      outline-offset: 2px;
    }
.kg-topmv__field-card::after {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.07) 100%);
    }

    .kg-topmv__field-card__label {
      position: absolute;
      z-index: 2;
      left: 50%;
      bottom: 13px;
      transform: translateX(-50%);
      min-width: min(84%, 285px);
      padding: 9px 16px;
      border-radius: 999px;
      color: var(--label-color);
      background: rgba(255,255,255,.95);
      box-shadow: 0 6px 18px rgba(35,45,70,.10);
      text-align: center;
      font-size: clamp(14px, 1.12vw, 19px);
      font-weight: 800;
      letter-spacing: .045em;
      line-height: 1.18;
      white-space: nowrap;
    }

    .kg-topmv__field-card__label small {
      display: block;
      margin-top: 2px;
      font-size: .72em;
      letter-spacing: .015em;
    }

    .kg-topmv__field-card--nutrition { --label-color: #f07822; --panel-bg: #e9b07e; }
    .kg-topmv__field-card--lab       { --label-color: #1fa69f; --panel-bg: #9fcfc8; }
    .kg-topmv__field-card--child     { --label-color: #e79a00; --panel-bg: #faea97; }
    .kg-topmv__field-card--dental    { --label-color: #e44e91; --panel-bg: #e49dbc; }
    .kg-topmv__field-card--nursing   { --label-color: #3983c9; --panel-bg: #8ca2cf; }
    .kg-topmv__field-card--community { --label-color: #7154ae; --panel-bg: #9c96c2; }

    .kg-topmv__field-card--nutrition img { object-position: 50% 54%; }
    .kg-topmv__field-card--lab img       { object-position: 50% 54%; }
    .kg-topmv__field-card--child img     { object-position: 50% 55%; }
    .kg-topmv__field-card--dental img    { object-position: 50% 54%; }
    .kg-topmv__field-card--nursing img   { object-position: 50% 55%; }
    .kg-topmv__field-card--community img { object-position: 50% 55%; }

    .kg-topmv__soft-dot {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      opacity: .78;
    }

    .kg-topmv__soft-dot--1 { width: 16px; height: 16px; left: 39%; top: 19%; background:#eac9e8; }
    .kg-topmv__soft-dot--2 { width: 11px; height: 11px; left: 31%; top: 8%; background:#f5bf79; }
    .kg-topmv__soft-dot--3 { width: 18px; height: 18px; left: 34%; bottom: 11%; background:#d7edf1; }

    /* 小さめPC：1101〜1300px */
    @media screen and (min-width: 1101px) and (max-width: 1300px) {
      .kg-topmv {
        min-height: 720px;
        grid-template-columns: minmax(455px, 46%) minmax(0, 54%);
      }
      .kg-topmv__copy { padding-left: 38px; padding-right: 12px; }
      .kg-topmv__school { margin-bottom: 30px; }
      .kg-topmv__title { font-size: clamp(50px, 4.2vw, 58px); }
      .kg-topmv__lead { font-size: 15px; letter-spacing: .025em; }
      .kg-topmv__actions { width: min(100%, 458px); grid-template-columns: repeat(2, minmax(210px, 1fr)); }
      .kg-topmv__button { min-height: 56px; font-size: 14px; padding-left: 14px; padding-right: 38px; }
      .kg-topmv__button::after { right: 16px; }
      .kg-topmv__decor { margin-top: 34px; gap: 24px; }
      .kg-topmv__field-card { aspect-ratio: 1.38 / 1; }
      .kg-topmv__field-card__label { font-size: 15px; }
    }

    /* 既存サイトの中間幅：769〜1100px（PC表示のまま圧縮） */
    @media screen and (min-width: 769px) and (max-width: 1100px) {
      .kg-topmv {
        min-height: 630px;
        grid-template-columns: minmax(330px, 44%) minmax(0, 56%);
        background:
          radial-gradient(circle at 42% 7%, rgba(248, 219, 232, .68) 0 48px, transparent 49px),
          radial-gradient(circle at 35% 90%, rgba(207, 233, 243, .55) 0 38px, transparent 39px),
          linear-gradient(115deg, #fff 0%, #fff 43%, #fffaf8 100%);
      }

      .kg-topmv::before { inset: -8% 50% 40% -18%; opacity: .70; }
      .kg-topmv::after { width: 240px; height: 240px; left: -125px; bottom: -100px; }

      .kg-topmv__copy {
        padding: 38px 12px 34px clamp(26px, 3.5vw, 42px);
      }

      .kg-topmv__school {
        margin-bottom: 24px;
        font-size: 13px;
        letter-spacing: .06em;
      }

      .kg-topmv__title {
        font-size: clamp(38px, 4.4vw, 48px);
        line-height: 1.16;
        letter-spacing: .005em;
      }

      .kg-topmv__lead {
        margin-top: 22px;
        font-size: 13px;
        line-height: 1.65;
        letter-spacing: .015em;
      }

      .kg-topmv__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 100%;
        margin-top: 26px;
      }

      .kg-topmv__button {
        min-height: 52px;
        padding: 10px 34px 10px 12px;
        font-size: 12px;
        letter-spacing: .01em;
      }

      .kg-topmv__button::after {
        right: 13px;
        font-size: 18px;
      }

      .kg-topmv__decor {
        gap: 18px;
        margin-top: 27px;
      }

      .kg-topmv__decor svg { width: 40px; height: 40px; }
      .kg-topmv__decor svg:nth-child(3) { width: 53px; }

      .kg-topmv__visual { padding: 16px 20px 16px 0; }

      .kg-topmv__field-grid {
        width: min(100%, 590px);
        gap: 6px;
        transform: translateX(7px);
      }

      .kg-topmv__field-card {
        aspect-ratio: 1.22 / 1;
        border-width: 4px;
      }

      .kg-topmv__field-card:nth-child(odd) {
        border-radius: 46px 13px 46px 13px;
        transform: translateX(8px);
      }

      .kg-topmv__field-card:nth-child(even) {
        border-radius: 13px 46px 13px 46px;
        transform: translateX(-8px);
      }

      .kg-topmv__field-card__label {
        bottom: 9px;
        min-width: 86%;
        padding: 7px 9px;
        font-size: clamp(12px, 1.45vw, 15px);
        letter-spacing: .02em;
      }
    }

    /* 769〜900px：左カラムが狭いため、CTAのみ縦並びにする */
    @media screen and (min-width: 769px) and (max-width: 900px) {
      .kg-topmv__actions {
        grid-template-columns: 1fr;
        width: min(100%, 250px);
      }

      .kg-topmv__button {
        width: 100%;
        font-size: 12px;
      }
    }

    /* 既存サイトのスマートフォン幅：0〜768px */
    @media screen and (min-width: 0px) and (max-width: 768px) {
      .kg-topmv { margin-top: 60px; }
      .main.ind-main { margin-top: 0 !important; }

.kg-topmv {
        grid-template-columns: 1fr;
        min-height: auto;
        background:
          radial-gradient(circle at 73% 7%, rgba(248, 219, 232, .62) 0 52px, transparent 53px),
          radial-gradient(circle at 0% 94%, rgba(207, 233, 243, .62) 0 112px, transparent 113px),
          linear-gradient(180deg, #fff 0%, #fffaf8 100%);
      }

      .kg-topmv::before {
        inset: -3% -36% 46% 18%;
        opacity: .40;
      }

      .kg-topmv::after {
        width: 230px;
        height: 230px;
        left: -150px;
        bottom: -85px;
        opacity: .75;
      }

      .kg-topmv__copy {
        padding: 38px clamp(22px, 5vw, 38px) 12px;
      }

      .kg-topmv__school {
        margin-bottom: 24px;
        font-size: 14px;
        letter-spacing: .055em;
      }

      .kg-topmv__title {
        white-space: normal;
        font-size: clamp(44px, 8.4vw, 62px);
        line-height: 1.16;
        letter-spacing: .01em;
      }

      .kg-topmv__lead {
        margin-top: 22px;
        font-size: clamp(16px, 2.5vw, 18px);
        line-height: 1.65;
        letter-spacing: .025em;
      }

      .kg-topmv__lead-line { white-space: normal; }

      .kg-topmv__actions {
        width: min(100%, 570px);
        margin-top: 27px;
      }

      .kg-topmv__button {
        min-height: 56px;
        font-size: clamp(14px, 2.2vw, 16px);
      }

      .kg-topmv__decor { display: none; }

      .kg-topmv__visual {
        padding: 10px clamp(10px, 3vw, 22px) 32px;
      }

      .kg-topmv__field-grid {
        width: min(100%, 720px);
        gap: 7px;
        transform: none;
      }

      .kg-topmv__field-card {
        aspect-ratio: 1.10 / 1;
        border-width: 4px;
      }

      .kg-topmv__field-card:nth-child(odd) {
        border-radius: 48px 13px 48px 13px;
        transform: translateX(5px);
      }

      .kg-topmv__field-card:nth-child(even) {
        border-radius: 13px 48px 13px 48px;
        transform: translateX(-5px);
      }

      .kg-topmv__field-card__label {
        bottom: 9px;
        min-width: 88%;
        padding: 8px 9px;
        font-size: clamp(13px, 2.7vw, 17px);
        letter-spacing: .02em;
      }
    }

    /* 小型スマートフォン専用の微調整 */
    @media screen and (min-width: 0px) and (max-width: 480px) {
      .kg-topmv::before {
        inset: -3% -40% 42% 22%;
        opacity: .36;
      }

      .kg-topmv__copy { padding: 32px 20px 8px; }

      .kg-topmv__school {
        margin-bottom: 22px;
        font-size: 13px;
        letter-spacing: .045em;
      }

      .kg-topmv__title {
        font-size: clamp(38px, 10.5vw, 44px);
        line-height: 1.17;
        letter-spacing: .012em;
      }

      .kg-topmv__sp-break,
      .kg-topmv__sp-lead-break { display: inline; }
      .kg-topmv__number { font-size: 1.28em; }

      .kg-topmv__lead {
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.6;
        letter-spacing: .02em;
      }

      .kg-topmv__actions {
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
        margin-top: 25px;
      }

      .kg-topmv__button {
        width: 100%;
        min-height: 56px;
        font-size: 16px;
      }

      .kg-topmv__visual { padding: 10px 10px 28px; }

      .kg-topmv__field-grid { gap: 6px; }

      .kg-topmv__field-card {
        aspect-ratio: .90 / 1;
        border-width: 3px;
      }

      .kg-topmv__field-card:nth-child(odd) {
        border-radius: 42px 12px 42px 12px;
        transform: translateX(4px);
      }

      .kg-topmv__field-card:nth-child(even) {
        border-radius: 12px 42px 12px 42px;
        transform: translateX(-4px);
      }

      .kg-topmv__field-card img { object-position: 50% 55%; }

      .kg-topmv__field-card__label {
        bottom: 8px;
        min-width: 88%;
        padding: 7px 8px;
        font-size: clamp(12px, 3.6vw, 15px);
        letter-spacing: .02em;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .kg-topmv__button,
      .kg-topmv__field-card img { transition: none; }
    }