/* ==========================================================================
   pages/event.css — /event/ 専用CSS
   --------------------------------------------------------------------------
   出自：live style9301.css（.p-eventBox / .p-box / .p-eventStep / .p-eventButton /
   .p-eventInquiry / .p-linkFixed / .c-boxCol--event）を、現行の見た目のまま
   新サイトの規約に合わせて移植したもの。

   方針：
   - 数値・単位は現行のまま（em/vwのrem変換はしない）
   - 色はハードコードせず var(--color-*) に統一。#11347C は「紺を使う既存コンポーネント」
     である .c-mv（KVビジュアル）が var(--color-main) を参照していることを確認して採用
   - #F9F9F9 は既存トークンと視認できる差が無いため --color-gray-25（#fafafa）で近似
   - 固定pxのトークン置換は完全一致のみ（font-size:14px→var(--fs-sm)、16px→var(--fs-base)。
     他のpx値（padding/height等）は既存トークンと完全一致しないため現行の値のまま）
   - ブレークポイントは現行の 767/768px ではなく、新サイトの規約（min-width:769px /
     max-width:768px）に合わせる
   - c-heading-2-text・c-linkWrap の基本定義は複数ページ共用のため components.css 側に
     追加済み。ここには /event/ 専用の子孫セレクタ上書きのみを置く

   意図的に実装しないクラス：
   - c-linkText--iconLeft … 現行はPDFリンクの自動付与アイコン（右）を打ち消して左に
     付け替えるための専用クラスだが、新サイトには a[href$=".pdf"]::after による
     自動付与（右・下線なし）が既に全ページ共通で入っている。このページ1件のために
     打ち消すと統一が崩れるため、CSSは書かない。

   見た目が現行と変わる箇所：
   - .p-box__link:before の背景色は、現行では未定義のカスタムプロパティ
     var(--box-color) を参照しており実質何も表示されていなかった（タブのアクティブ
     下線が出ていなかった可能性がある）。ここでは var(--color-main) に置き換えて
     おり、新サイトでは「すべて」タブの下に紺のアクティブ下線が表示される。
   ========================================================================== */


/* --- .c-boxCol--event（/event/ 専用の段落間隔調整） --- */
.c-boxCol--event p + p {
  margin-top: 1.667em;
}
@media (max-width: 768px) {
  .c-boxCol--event p + p {
    margin-top: 6.4vw;
  }
}


/* --- p-eventBox 系（体験プログラム紹介の紺枠ボックス） --- */
.p-eventBox {
  padding: 2em 2.222em;
  border: 3px solid var(--color-main);
  border-width: 3px 0;
  margin: 4.444em 0 1.944em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.p-eventBox .c-heading-2-text {
  margin-bottom: 0.094em;
}
@media (min-width: 769px) {
  .p-eventBox {
    min-height: 11.778em;
  }
  .p-eventBox .c-list {
    display: inline-flex;
  }
}
@media (max-width: 768px) {
  .p-eventBox {
    border-width: 0.8vw 0;
    margin: 10.67vw 0 5.33vw;
    padding: 4.53vw 0 2.93vw;
  }
  .p-eventBox .c-list {
    text-align: left;
    font-size: 3.2vw;
    line-height: 1.5;
    letter-spacing: 0;
  }
  .p-eventBox .c-list li {
    font-size: inherit;
  }
  .p-eventBox .c-heading-2-text {
    margin-bottom: 3.2vw;
  }
}

.p-eventBox__inner {
  position: relative;
}
.p-eventBox__inner:after,
.p-eventBox__inner:before {
  content: "";
  background: no-repeat 0 0/100%;
  position: absolute;
  top: 0;
}
.p-eventBox__inner:before {
  background-image: url(/corporations/assets/img/event/icon_05.svg);
  width: 8.556em;
  height: 10.167em;
  left: -9.222em;
}
.p-eventBox__inner:after {
  background-image: url(/corporations/assets/img/event/icon_06.svg);
  width: 9.778em;
  height: 11.611em;
  right: -9.667em;
}
@media (min-width: 769px) {
  .p-eventBox__inner:after,
  .p-eventBox__inner:before {
    bottom: 0;
    margin: auto;
  }
}
@media (max-width: 768px) {
  .p-eventBox__inner {
    flex: 1;
  }
  .p-eventBox__inner:before {
    width: 18.4vw;
    height: 21.87vw;
    left: 0;
    top: 2.67vw;
  }
  .p-eventBox__inner:after {
    width: 21.6vw;
    height: 25.87vw;
    right: 0;
    top: 1.07vw;
  }
}

.p-eventBox__pdf {
  text-align: right;
  font-size: var(--fs-sm);
  line-height: 1.428;
}
.p-eventBox__pdf .c-linkText {
  color: var(--color-text);
}


/* --- p-box 系（タブ切替UI。.active はJSが付与） --- */
.p-box {
  margin-top: 1.111em;
}
@media (max-width: 768px) {
  .p-box {
    margin-top: 3.2vw;
  }
}

.p-box__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-gray-25);
  overflow: auto;
}

.p-box__link {
  padding: 0 50px;
  font-size: var(--fs-sm);
  cursor: pointer;
  height: 60px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  letter-spacing: 0;
}
.p-box__link:before {
  content: "";
  height: 5px;
  width: 0;
  display: block;
  transition: width 0.3s, background 0.3s;
  left: 0;
  bottom: 0;
  background: var(--color-main);
  position: absolute;
}
.p-box__link.active:before {
  width: 100%;
}
@media (min-width: 769px) {
  .p-box__link {
    white-space: nowrap;
  }
}
@media (max-width: 768px) {
  .p-box__link {
    font-size: 2.67vw;
    padding: 0 1.6vw;
    height: 10.67vw;
    text-align: center;
  }
  .p-box__link:before {
    height: 2px;
  }
}

.p-box__content {
  padding: 41px 0 0;
}
.p-box__content:not(:has(.p-box__group)) {
  display: flex;
  flex-wrap: wrap;
  gap: 23px 12px;
}
@media (max-width: 768px) {
  .p-box__content {
    padding: 5.33vw 0 0;
  }
  .p-box__content:not(:has(.p-box__group)) {
    gap: 2.67vw;
  }
}

.p-box__img {
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}

.p-box__group {
  display: flex;
  flex-wrap: wrap;
  gap: 23px 12px;
}
.p-box__group + .p-box__group {
  margin-top: 32px;
}

.p-box__item {
  width: calc((100% - 36px) / 4);
  display: flex;
  flex-direction: column;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .p-box__item {
    width: calc((100% - 12px) / 2);
  }
}
@media (max-width: 768px) {
  .p-box__group {
    gap: 2.67vw;
  }
  .p-box__group + .p-box__group {
    margin-top: 5.33vw;
  }
  .p-box__item {
    width: 100%;
  }
}

.p-box__header {
  font-weight: bold;
  height: 58px;
  display: flex;
  align-items: center;
  background: var(--color-main);
  color: #fff;
  padding: 0 12px;
}
@media (max-width: 768px) {
  .p-box__header {
    height: 13.33vw;
    padding: 0 3.2vw;
  }
}

/* --- カテゴリ別配色（属性セレクタ方式・JS不使用）----------------------------
   現行 live（style9301.css + script.js の data-color）と同じ6色を、
   HTMLの data-value 属性セレクタで直接塗り分ける。JS・data-color属性・
   --box-color は使わない（本ページのみのスコープ。coreには入れない）。
   「すべて」タブ（data-value="all"）は現行 #000 だが、新サイトは全体が
   紺（var(--color-main)）基調のため黒だけ浮く。カテゴリ横断の状態で
   特定カテゴリの色でもないため、基本ルールの var(--color-main) を
   そのまま採用する（.p-box__link:before の既定値・上書き不要）。
   ------------------------------------------------------------------------ */
.p-box__link[data-value="school_of_dentistry"]:before { background: #252e79; } /* 歯学部：紺 */
.p-box__link[data-value="dental_hygiene_dept"]:before { background: #5EA4E1; } /* 歯科衛生学科：水色 */
.p-box__link[data-value="nursing_department"]:before  { background: #f47ca2; } /* 看護学科：ピンク */
.p-box__link[data-value="graduate_school"]:before     { background: #111;    } /* 大学院：黒 */
.p-box__link[data-value="affiliated_hospital"]:before { background: #465DAA; } /* 附属病院：群青 */
.p-box__link[data-value="general_shared"]:before      { background: var(--color-main); } /* 共通：#11347C は --color-main と実質同一のためトークンを使用 */

.p-box__group[data-value="school_of_dentistry"] .p-box__header { background: #252e79; } /* 歯学部：紺 */
.p-box__group[data-value="dental_hygiene_dept"] .p-box__header { background: #5EA4E1; } /* 歯科衛生学科：水色 */
.p-box__group[data-value="nursing_department"] .p-box__header  { background: #f47ca2; } /* 看護学科：ピンク */
.p-box__group[data-value="graduate_school"] .p-box__header     { background: #111;    } /* 大学院：黒 */
.p-box__group[data-value="affiliated_hospital"] .p-box__header { background: #465DAA; } /* 附属病院：群青 */
.p-box__group[data-value="general_shared"] .p-box__header      { background: var(--color-main); } /* 共通：--color-main と実質同一 */

.p-box__no {
  font-size: 0.889em;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .p-box__no {
    font-size: 4.27vw;
  }
}

.p-box__title {
  font-size: 0.778em;
  letter-spacing: 0;
}
@media (max-width: 768px) {
  .p-box__title {
    font-size: 3.73vw;
  }
}

.p-box__stroke {
  width: 1px;
  height: 30px;
  margin: 0 12px;
  background: #fff;
}

.p-box__body {
  padding: 20px 12px;
  border: 1px solid var(--color-border);
  border-top: 0;
  flex-grow: 1;
}
@media (max-width: 768px) {
  .p-box__body {
    padding: 5.33vw 3.2vw;
  }
}

.p-box__text {
  font-size: 12px;
}
.p-box__text > * + * {
  margin-top: 8px;
}
@media (max-width: 768px) {
  .p-box__text {
    font-size: 3.2vw;
  }
  .p-box__text > * + * {
    margin-top: 2.13vw;
  }
}

.p-box__key {
  font-weight: 600;
}

.p-box__note {
  font-size: 11px;
  font-weight: 700;
  margin-top: 9px;
  color: var(--color-main);
}
@media (max-width: 768px) {
  .p-box__note {
    font-size: 2.93vw;
    margin-top: 2.13vw;
  }
}


/* --- p-eventStep 系（申込み4ステップ） --- */
.p-eventStep {
  padding: 4em 0 3.722em;
  position: relative;
  margin-top: 3.889em;
}
.p-eventStep:before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  background: var(--color-gray-25);
  box-shadow: 0 0 0 100vmax var(--color-gray-25);
  clip-path: inset(0 -100vmax);
}
.p-eventStep .c-heading__wrap {
  position: relative;
}
@media (max-width: 768px) {
  .p-eventStep {
    padding: 16vw 0 19.2vw;
    margin-top: 8vw;
  }
  .p-eventStep .c-heading-2-text {
    margin-bottom: 5.33vw;
  }
}

.p-eventStep__list {
  margin-bottom: 1.444em;
}
@media (min-width: 769px) {
  .p-eventStep__list {
    display: flex;
    flex-wrap: wrap;
    gap: 3.889em;
  }
}
@media (max-width: 768px) {
  .p-eventStep__list {
    margin-bottom: 9.87vw;
  }
}

.p-eventStep__item {
  position: relative;
}
.p-eventStep__item + *:before {
  content: "";
  width: 4.389em;
  height: 0.333em;
  background: url(/corporations/assets/img/event/bg_01.svg) no-repeat 0 0/100%;
  position: absolute;
  left: -4.111em;
  top: 5.389em;
}
@media (min-width: 769px) {
  .p-eventStep__item {
    width: calc((100% - 3.889em * 3) / 4);
  }
}
@media (max-width: 768px) {
  .p-eventStep__item {
    display: flex;
    align-items: center;
    gap: 4.27vw;
  }
  .p-eventStep__item + * {
    margin-top: 19.73vw;
  }
  .p-eventStep__item + *:before {
    height: 13.33vw;
    width: 1.6vw;
    top: -16.8vw;
    left: 15.47vw;
    background-image: url(/corporations/assets/img/event/bg_01_sp.svg);
  }
}

.p-eventStep__circle {
  width: 11.111em;
  height: 11.111em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  background: #fff;
  border-radius: 50%;
}
@media (max-width: 768px) {
  .p-eventStep__circle {
    flex: 0 0 auto;
    width: 32.27vw;
    height: 32.27vw;
  }
}

.p-eventStep__img {
  margin: 0.389em auto 0;
}
.p-eventStep__img img {
  width: 5.833em;
}
@media (max-width: 768px) {
  .p-eventStep__img {
    margin-top: 0.53vw;
  }
  .p-eventStep__img img {
    width: 17.33vw;
  }
}

.p-eventStep__label {
  font-size: var(--fs-sm);
  line-height: 1.428;
  color: #fff;
  font-weight: bold;
  width: 5.929em;
  height: 1.643em;
  background: var(--color-main);
  border-radius: 0.857em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  letter-spacing: 0;
}
@media (max-width: 768px) {
  .p-eventStep__label {
    font-size: 3.2vw;
    line-height: 1.5;
    width: 16.27vw;
    height: 4.8vw;
    border-radius: 3.2vw;
    padding-bottom: 0.4vw;
  }
}

.p-eventStep__text {
  font-size: var(--fs-sm);
  line-height: 1.57;
  letter-spacing: 0;
}
@media (max-width: 768px) {
  .p-eventStep__text {
    font-size: 3.2vw;
    line-height: 1.83;
  }
}

.p-eventStep__title {
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: bold;
}
@media (min-width: 769px) {
  .p-eventStep__title {
    text-align: center;
    margin: 0.813em 0 0.75em;
  }
}
@media (max-width: 768px) {
  .p-eventStep__title {
    font-size: 3.73vw;
    line-height: 1.57;
    margin-bottom: 1.6vw;
  }
}


/* --- p-eventButton（フォームDL・スケジュールDLのボタン群） --- */
.p-eventButton {
  margin-top: 3.889em;
}
.p-eventButton p + p {
  margin-top: 1.333em;
}
@media (min-width: 769px) {
  .p-eventButton {
    max-width: 42.556em;
    margin-left: auto;
    margin-right: auto;
  }
  .p-eventButton .c-linkWrap {
    gap: 1.333em 0.889em;
  }
  .p-eventButton .c-linkWrap + .c-heading__wrap {
    margin-top: 4.444em;
  }
  .p-eventButton .c-linkWrap li {
    max-width: calc(50% - 0.889em);
  }
}
@media (max-width: 768px) {
  .p-eventButton {
    margin-top: 12vw;
  }
  .p-eventButton p + p {
    margin-top: 4.27vw;
  }
  .p-eventButton .c-linkWrap {
    display: flex;
    flex-direction: column;
    row-gap: 4.27vw;
  }
  .p-eventButton .c-linkWrap + .c-heading__wrap {
    margin-top: 10.67vw;
  }
}


/* --- p-eventInquiry 系（お問い合わせ） --- */
.p-eventInquiry {
  padding: 2.222em 0 2.333em;
}
@media (max-width: 768px) {
  .p-eventInquiry {
    padding: 16vw 0 9.6vw;
  }
}

.p-eventInquiry__dl dl {
  display: flex;
}
.p-eventInquiry__dl dt {
  font-weight: normal;
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .p-eventInquiry__dl {
    font-size: 3.73vw;
    line-height: 1.57;
  }
  .p-eventInquiry__dl dl + * {
    margin-top: 1.33vw;
  }
}


/* --- p-linkFixed（画面右下固定のヨコチくんバナー） --- */
.p-linkFixed {
  width: 1440px;
  margin: auto;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  z-index: 1;
}
.p-linkFixed a {
  position: absolute;
  top: -3.611em;
}
@media (min-width: 769px) {
  .p-linkFixed {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .p-linkFixed a {
    transition: opacity 0.2s;
  }
  .p-linkFixed a:hover {
    opacity: 0.75;
    text-decoration: none;
  }
}
@media (max-width: 768px) {
  .p-linkFixed {
    padding: 0 4vw;
    top: 96vw;
    left: 0;
  }
  .p-linkFixed a {
    top: -16.53vw;
  }
  .p-linkFixed img {
    width: 35.47vw;
  }
}
@media (max-width: 1607px) {
  .p-linkFixed {
    width: 100%;
  }
}
@media (min-width: 1608px) {
  .p-linkFixed a {
    margin-right: -4.667em;
  }
}
/* 閉じるボタン（SPのみ表示）。× は Font Awesome の疑似要素（xmark）で描く。
   閉じた状態は .is-closed（ページ内 script が付与・sessionStorage で保持） */
.p-linkFixed__close {
  display: none;
}
.p-linkFixed.is-closed {
  display: none;
}
@media (max-width: 768px) {
  .p-linkFixed__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(-16.53vw - 14px);
    right: calc(4vw - 14px);
    z-index: 2;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-main);
    border-radius: 50%;
    background: #fff;
    color: var(--color-main);
    cursor: pointer;
  }
  .p-linkFixed__close::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00d"; /* xmark */
    font-size: 14px;
    line-height: 1;
  }
}