/* =========================
   基本設定
========================= */

:root {
  --paper: #f6f0e7;
  --paper-light: #fffdf8;
  --ink: #403830;
  --brown: #806752;

  --accent: #c96b54;
  --accent-dark: #9d4938;
  --accent-blue: #627c82;
  --accent-yellow: #d9ae54;

  --line: #d9cfc2;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

  color: var(--ink);
  background-color: var(--paper);

  line-height: 1.8;

  overflow-x: hidden;
}


/* =========================
   リンク
========================= */

a {
  color: inherit;
  text-decoration: none;
}


/* =========================
   画像
========================= */

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* =========================
   メインバナー
========================= */

.hero {
  position: relative;

  width: 100vw;
  margin-left: calc(50% - 50vw);

  padding: 0;

  overflow: visible;
}

/* バナー本体 */

.hero > img {
  position: relative;
  z-index: 1;

  display: block;

  width: 100%;
  max-width: none;
  height: auto;

  margin: 0;

  border-radius: 0;
  box-shadow: none;
}


/* =========================
   歩いている人
========================= */

.walking-people {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 35%;

  overflow: visible;

  z-index: 2;
  pointer-events: none;
}

.walking-people img {
  position: absolute;

  left: 0;
  bottom: -80px;

  width: 700px;
  max-width: none;
  height: auto;

  animation: peopleWalk 60s linear infinite;
}


/* 左から右へ、ゆっくり歩く */

@keyframes peopleWalk {

  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100vw);
  }

}


/* =========================
   スマホ
========================= */

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

  .walking-people {
    height: 32%;
  }

  .walking-people img {
    width: 500px;
    bottom: -25px;

    animation-duration: 45s;
  }

}

/* =========================
   ヘッダー
========================= */

header {
  position: sticky;

  top: 0;
  z-index: 100;

  background-color: rgba(246, 240, 231, 0.92);

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  backdrop-filter: blur(10px);

  transition:
    background-color 0.4s ease,
    box-shadow 0.4s ease;
}

nav {
  max-width: 1100px;

  margin: 0 auto;

  padding: 18px 20px;

  display: flex;

  justify-content: center;
  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  transition:
    padding 0.4s ease,
    gap 0.4s ease;
}

nav a {
  position: relative;

  padding: 7px 14px;

  border: 1px solid transparent;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.05em;

  color: var(--ink);

  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

nav a:hover {
  background-color: var(--ink);
  color: white;

  transform: translateY(-2px);
}


/* スクロール後 */

header.scrolled {
  background-color: rgba(255, 253, 248, 0.97);

  box-shadow:
    0 6px 25px rgba(64, 56, 48, 0.12);
}

header.scrolled nav {
  padding-top: 9px;
  padding-bottom: 9px;

  gap: 6px;
}

header.scrolled nav a {
  font-size: 13px;
}


/* =========================
   共通セクション
========================= */

main > section {
  position: relative;

  max-width: 1100px;

  margin: 0 auto;

  padding: 110px 30px;
}


/* うっすら大きな番号 */

#concept::before,
#counselors::before,
#staff::before,
#schedule::before,
#photo::before,
#x-posts::before,
#access::before {
  position: absolute;

  top: 30px;
  right: 25px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 110px;

  line-height: 1;

  color: rgba(64, 56, 48, 0.055);

  pointer-events: none;
}

#concept::before {
  content: "01";
}

#counselors::before {
  content: "02";
}

#staff::before {
  content: "03";
}

#schedule::before {
  content: "04";
}

#photo::before {
  content: "05";
}

#x-posts::before {
  content: "06";
}

#access::before {
  content: "07";
}


/* セクションごとの背景 */

#counselors,
#join,
#access {
  background-color: rgba(255, 253, 248, 0.65);
}


/* =========================
   セクションタイトル
========================= */

.section-title {
  position: relative;

  margin-bottom: 55px;

  text-align: center;
}

.section-title h2 {
  display: inline-block;

  position: relative;

  margin: 0 0 10px;

  font-size: 38px;

  line-height: 1.3;

  letter-spacing: 0.08em;

  font-weight: 700;
}

.section-title h2::after {
  content: "";

  position: absolute;

  width: 55px;
  height: 7px;

  left: 50%;
  bottom: -12px;

  transform: translateX(-50%) rotate(-2deg);

  background-color: var(--accent);

  border-radius: 20px;
}

.section-title p {
  margin: 0;

  color: var(--brown);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.25em;
}


/* =========================
   イベント概要
========================= */

.concept-text {
  position: relative;

  max-width: 800px;

  margin: 0 auto;

  padding: 55px 55px;

  background-color: var(--paper-light);

  border: 2px solid var(--ink);

  box-shadow:
    12px 12px 0 var(--accent-yellow);

  font-size: 16px;

  text-align: center;
}

.concept-text::before {
  content: "ＣＯＮＣＥＰＴ";

  position: absolute;

  top: -15px;
  left: 25px;

  padding: 10px 20px;

  background-color: var(--ink);

  color: white;

  font-size: 15px;

  font-weight: bold;

  letter-spacing: 0.15em;
}

.concept-text p {
  margin: 0 0 25px;
}

.concept-text p:first-child {
  margin-bottom: 35px;

  font-size: 27px;

  font-weight: 700;

  letter-spacing: 0.08em;
}

.concept-text p:last-child {
  margin-bottom: 0;
}


/* =========================
   カード
========================= */

.card-container {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 28px;
}

.card {
  position: relative;

  padding: 35px 28px;

  background-color: var(--paper-light);

  border: 2px solid var(--ink);

  box-shadow:
    8px 8px 0 rgba(128, 103, 82, 0.18);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card::before {
  content: "";

  position: absolute;

  width: 10px;
  height: 10px;

  top: 14px;
  right: 14px;

  border-radius: 50%;

  background-color: var(--accent);
}

.card:nth-child(2)::before {
  background-color: var(--accent-blue);
}

.card:nth-child(3)::before {
  background-color: var(--accent-yellow);
}

.card:hover {
  transform: translate(-4px, -6px);

  box-shadow:
    14px 14px 0 rgba(128, 103, 82, 0.18);
}

.card h3 {
  margin: 0 0 14px;

  font-size: 19px;
}

.card p {
  margin: 0;

  font-size: 14px;
}


/* =========================
   相談員
========================= */

.people-container {
  max-width: 900px;

  margin: 0 auto;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 35px 25px;
}

.people-card {
  position: relative;

  width: 270px;

  background-color: var(--paper-light);

  border: 2px solid var(--ink);

  overflow: hidden;

  box-shadow:
    8px 8px 0 rgba(98, 124, 130, 0.16);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.people-card:nth-child(1),
.people-card:nth-child(4) {
  transform: rotate(-1deg);
}

.people-card:nth-child(2),
.people-card:nth-child(5) {
  transform: rotate(1deg);
}

.people-card:nth-child(3) {
  transform: translateY(-8px);
}

.people-card:hover {
  transform:
    translateY(-8px)
    rotate(0deg);

  box-shadow:
    13px 13px 0 rgba(98, 124, 130, 0.18);
}

.people-card img {
  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-bottom: 2px solid var(--ink);
}

.people-info {
  padding: 22px 20px 24px;
}

.people-info h3 {
  margin: 0 0 7px;

  font-size: 20px;
}

.people-info p {
  margin: 0;

  font-size: 13px;
}


/* =========================
   当日の流れ
========================= */

.flow {
  max-width: 800px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 18px;
}

.flow-item {
  position: relative;

  display: flex;

  align-items: center;

  gap: 25px;

  padding: 26px 30px;

  background-color: var(--paper-light);

  border: 2px solid var(--ink);

  box-shadow:
    8px 8px 0 rgba(201, 107, 84, 0.15);

  transition:
    transform 0.3s ease;
}

.flow-item:hover {
  transform: translateX(7px);
}

.flow-number {
  flex-shrink: 0;

  width: 64px;
  height: 64px;

  display: flex;

  align-items: center;
  justify-content: center;

  background-color: var(--accent);

  color: white;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 20px;

  font-weight: bold;

  transform: rotate(-4deg);
}

.flow-item:nth-child(2) .flow-number {
  background-color: var(--accent-blue);
}

.flow-item:nth-child(3) .flow-number {
  background-color: var(--accent-yellow);

  color: var(--ink);
}

.flow-item:nth-child(4) .flow-number {
  background-color: var(--brown);
}

.flow-item h3 {
  margin: 0 0 5px;

  font-size: 19px;
}

.flow-item p {
  margin: 0;

  font-size: 14px;

  color: #756a60;
}


/* =========================
   アクセス
========================= */

.access-content {
  max-width: 900px;

  margin: 0 auto;
}

.access-info {
  margin-bottom: 28px;

  padding: 25px;

  background-color: var(--paper);

  border-left: 7px solid var(--accent);

  text-align: center;
}

.access-info h3 {
  margin: 0 0 8px;

  font-size: 23px;
}

.access-info p {
  margin: 0;

  font-size: 15px;
}

.map-container {
  overflow: hidden;

  border: 2px solid var(--ink);

  box-shadow:
    10px 10px 0 rgba(98, 124, 130, 0.18);
}

.map-container iframe {
  display: block;

  width: 100%;
  height: 420px;

  border: 0;
}

.map-button {
  display: block;

  width: fit-content;

  margin: 30px auto 0;

  padding: 14px 30px;

  background-color: var(--ink);

  color: white;

  font-size: 14px;

  font-weight: bold;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}

.map-button:hover {
  transform: translateY(-4px);

  background-color: var(--accent);
}


/* =========================
   CTA
========================= */

.cta {
  position: relative;

  width: 90%;

  max-width: 950px;

  margin: 80px auto 100px;

  padding: 80px 30px;

  overflow: hidden;

  text-align: center;

  background-color: var(--accent);

  color: white;

  border: 2px solid var(--ink);

  box-shadow:
    14px 14px 0 var(--ink);

  display: flex;

  flex-direction: column;

  align-items: center;
}

.cta::before {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  border: 35px solid rgba(255, 255, 255, 0.14);

  top: -130px;
  right: -80px;
}

.cta::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  background-color: rgba(255, 255, 255, 0.08);

  bottom: -90px;
  left: -60px;

  transform: rotate(25deg);
}

.cta h2,
.cta p,
.cta-button {
  position: relative;
  z-index: 2;
}

.cta h2 {
  margin: 0 0 18px;

  font-size: 34px;

  letter-spacing: 0.04em;
}

.cta p {
  margin: 0 0 30px;
}

.cta-button {
  display: inline-block;

  padding: 15px 45px;

  background-color: white;

  color: var(--ink);

  border: 2px solid var(--ink);

  border-radius: 0;

  font-weight: bold;

  box-shadow:
    6px 6px 0 var(--ink);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.cta-button:hover {
  transform: translate(4px, 4px);

  box-shadow:
    2px 2px 0 var(--ink);
}


/* =========================
   フッター
========================= */

footer {
  width: 100%;

  padding: 45px 20px;

  text-align: center;

  background-color: var(--ink);

  color: white;

  font-size: 17px;

  border-top: 8px solid var(--accent);
}

footer p {
  margin: 5px auto;

  text-align: center;
}


/* =========================
   スマホ
========================= */

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

  /* ナビ */

  nav {
    gap: 5px;

    padding: 10px 8px;
  }

  nav a {
    padding: 5px 8px;

    font-size: 10px;
  }

  header.scrolled nav {
    gap: 3px;

    padding-top: 7px;
    padding-bottom: 7px;
  }

  header.scrolled nav a {
    font-size: 9px;
  }


  /* セクション */

  main > section {
    padding: 75px 15px;
  }


  /* 大きな番号 */

  #concept::before,
  #counselors::before,
  #schedule::before,
  #join::before,
  #photo::before,
  #access::before {
    top: 20px;
    right: 10px;

    font-size: 70px;
  }


  /* タイトル */

  .section-title {
    margin-bottom: 40px;
  }

  .section-title h2 {
    font-size: 28px;
  }


  /* 概要 */

  .concept-text {
    padding: 40px 22px;

    box-shadow:
      7px 7px 0 var(--accent-yellow);
  }

  .concept-text p:first-child {
    font-size: 22px;
  }


  /* カード */

  .card-container {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  /* 相談員 */

  .people-container {
    flex-direction: column;

    align-items: center;

    gap: 28px;
  }

  .people-card {
    width: 100%;

    max-width: 340px;
  }

  .people-card:nth-child(1),
  .people-card:nth-child(2),
  .people-card:nth-child(3),
  .people-card:nth-child(4),
  .people-card:nth-child(5) {
    transform: none;
  }


  /* 当日の流れ */

  .flow-item {
    align-items: flex-start;

    gap: 16px;

    padding: 20px;
  }

  .flow-number {
    width: 50px;
    height: 50px;

    font-size: 16px;
  }


  /* アクセス */

  .access-info {
    padding: 20px 15px;
  }

  .map-container {
    box-shadow:
      6px 6px 0 rgba(98, 124, 130, 0.18);
  }

  .map-container iframe {
    height: 300px;
  }


  /* CTA */

  .cta {
    width: calc(100% - 30px);

    margin: 60px auto 70px;

    padding: 55px 20px;

    box-shadow:
      8px 8px 0 var(--ink);
  }

  .cta h2 {
    font-size: 25px;
  }


  /* フッター */

  footer {
    font-size: 14px;
  }

}
/* =========================
   相談員ポップアップ
========================= */

.people-card {
  cursor: pointer;
}


/* 背景 */

.counselor-modal {
  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 20px;

  background-color: rgba(64, 56, 48, 0.65);

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}


/* 表示 */

.counselor-modal.active {
  opacity: 1;

  visibility: visible;
}


/* 中身 */

.counselor-modal-content {
  position: relative;

  width: 100%;

  max-width: 600px;

  padding: 50px 45px;

  background-color: #fffdf8;

  border: 2px solid #403830;

  box-shadow:
    12px 12px 0 #c96b54;

  transform: translateY(20px) scale(0.96);

  transition:
    transform 0.3s ease;
}

.counselor-modal.active
.counselor-modal-content {
  transform: translateY(0) scale(1);
}


/* ラベル */

.modal-label {
  margin: 0 0 10px;

  color: #9d4938;

  font-size: 11px;

  font-weight: bold;

  letter-spacing: 0.2em;
}


/* 名前 */

.modal-name {
  margin: 0 0 10px;

  font-size: 32px;

  line-height: 1.4;
}


/* タイトル */

.modal-title {
  margin: 0;

  font-size: 17px;

  font-weight: bold;
}


/* 区切り */

.modal-line {
  width: 50px;

  height: 5px;

  margin: 25px 0;

  background-color: #d9ae54;
}


/* 詳細 */

.modal-detail {
  margin: 0;

  font-size: 15px;

  line-height: 2;
}


/* 閉じるボタン */

.modal-close {
  position: absolute;

  top: 15px;
  right: 15px;

  width: 42px;
  height: 42px;

  border: 2px solid #403830;

  background-color: #fffdf8;

  color: #403830;

  font-size: 25px;

  line-height: 1;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.modal-close:hover {
  background-color: #403830;

  color: white;
}


/* =========================
   スマホ
========================= */

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

  .counselor-modal-content {
    padding: 45px 25px 35px;

    box-shadow:
      7px 7px 0 #c96b54;
  }

  .modal-name {
    font-size: 26px;
  }

  .modal-title {
    font-size: 15px;
  }

  .modal-detail {
    font-size: 14px;
  }

}

/* =========================
   相談員の対応状況
========================= */

#status {
  background-color: var(--paper);
}

.status-container {
  max-width: 900px;
  margin: 0 auto;
}

/* 表 */

.status-table {
  width: 100%;
  background-color: var(--paper-light);
  border: 2px solid var(--ink);
  box-shadow:
    10px 10px 0 rgba(128, 103, 82, 0.16);
  overflow: hidden;
}

.status-row {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.status-row:last-child {
  border-bottom: none;
}

.status-row > div {
  padding: 18px 12px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.status-row > div:last-child {
  border-right: none;
}

.status-header {
  background-color: var(--ink);
  color: white;
  font-weight: bold;
}

.status-name {
  font-weight: bold;
  color: var(--brown);
}

/* 番号 */

.status-row:not(.status-header) > div:not(.status-name) {
  font-size: 18px;
  font-weight: bold;
}

/* 呼び出し済み */

.cancelled-box {
  margin-top: 45px;
  padding: 30px;

  background-color: var(--paper-light);

  border: 2px solid var(--ink);

  box-shadow:
    8px 8px 0 rgba(201, 107, 84, 0.15);
}

.cancelled-box h3 {
  margin: 0 0 20px;

  font-size: 20px;

  color: var(--accent-dark);
}

.cancelled-box p {
  margin: 8px 0;
  font-size: 14px;
}

.cancelled-note {
  margin-top: 20px !important;

  color: var(--brown);

  font-size: 13px !important;
}


/* =========================
   対応状況 スマホ
========================= */

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

  .status-table {
    overflow-x: auto;
  }

  .status-row {
    min-width: 600px;
  }

  .status-row > div {
    padding: 15px 10px;
    font-size: 13px;
  }

  .status-row:not(.status-header) > div:not(.status-name) {
    font-size: 16px;
  }

  .cancelled-box {
    padding: 22px;
  }

}

/* =========================
   Xでの投稿
========================== */

#x-posts {
  padding: 80px 20px;
  background: #f8f3ec;
}

.x-posts-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.x-post-box {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 4px 15px rgba(80, 60, 40, 0.08);
}

.x-post-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
}

.x-post-icon {
  font-size: 28px;
}

.x-post-heading h3 {
  margin: 0;
  font-size: 20px;
  color: #5b4636;
}

.x-post-heading p {
  margin: 4px 0 0;
  font-size: 11px;
  letter-spacing: 2px;
  color: #a58d78;
}

.x-post-content {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: #9b8b7d;
  font-size: 14px;
  gap: 15px;
}

.x-post-content .twitter-tweet {
  width: 100% !important;
  max-width: 550px !important;
  height: 640px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.x-post-content .twitter-tweet iframe {
  width: 100% !important;
  max-width: 550px !important;
}

/* スマホ */
@media screen and (max-width: 768px) {

  #x-posts {
    padding: 60px 15px;
  }

  .x-posts-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .x-post-box {
    padding: 24px 20px;
  }

}
 /* =========================
    右上メニュー
 ========================= */

.site-header {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;

  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  
}

.site-header.scrolled {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

/* メニューボタン */
.menu-button {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: #5b4636;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(80, 60, 40, 0.2);
}

/* メニュー本体 */
.menu {
  position: absolute;
  top: 60px;
  right: 0;
  width: 210px;
  padding: 15px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(80, 60, 40, 0.15);

  display: none;
  flex-direction: column;
  gap: 5px;
}

/* メニューを開いた状態 */
.menu.active {
  display: flex;
}

/* メニューのリンク */
.menu a {
  display: block;
  padding: 12px 15px;
  color: #5b4636;
  text-decoration: none;
  font-size: 14px;
  border-radius: 10px;
}

.menu a:hover {
  background: #f8f3ec;
}

/* =========================
   対応状況 COMING SOON
========================= */

#status {
  position: relative;
}

.status-coming-soon {
  position: absolute;
  inset: 0;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(248, 243, 236, 0.92);
  backdrop-filter: blur(4px);
}

.coming-soon-content {
  text-align: center;
  color: #5b4636;
}

.coming-soon-content span {
  display: block;
  margin-bottom: 15px;

  font-size: 28px;
  font-weight: bold;
  letter-spacing: 4px;
}

.coming-soon-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #8b7765;
}

/* =========================
   運営メンバー
========================= */

#staff {
  padding: 80px 20px;
  background: #fffaf5;
}

.staff-container {
  max-width: 1100px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.staff-card {
  background: #fff;
  border-radius: 18px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(80, 60, 40, 0.08);
}

.staff-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: #eee6dd;
}

.staff-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.staff-info {
  padding: 15px 5px 5px;
}

.staff-info h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: #5b4636;
}

.staff-message {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.7;
  color: #8b7765;
}

.staff-x {
  display: inline-block;
  font-size: 12px;
  color: #5b4636;
  text-decoration: none;
  border-bottom: 1px solid #cbb9a7;
  padding-bottom: 2px;
}

.staff-x:hover {
  opacity: 0.7;
}


/* スマホ */
@media screen and (max-width: 768px) {

  #staff {
    padding: 60px 15px;
  }

  .staff-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .staff-card {
    padding: 10px;
  }

  .staff-info {
    padding: 12px 3px 3px;
  }

  .staff-info h3 {
    font-size: 15px;
  }

  .staff-message {
    font-size: 11px;
  }

}

/* =========================
   相談員動画
========================= */

.modal-video {
  display: block;

  width: 100%;
  max-width: 500px;

  max-height: 55vh;

  margin: 25px auto;

  object-fit: contain;

  border-radius: 12px;

  background-color: #403830;
}

/* =========================
   相談員動画 スマホ対応
========================= */

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

  .modal-video {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;
    max-height: 50vh;

    margin: 20px auto;

    object-fit: contain;

    border-radius: 10px;
  }

  .counselor-modal {
    overflow-y: auto;
    align-items: center;
  }

  .counselor-modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }

}

/* =========================
   相談員ポップアップ 動画
========================= */

.modal-video {
  display: block;

  width: 100%;
  max-width: 500px;

  max-height: 55vh;

  margin: 25px auto 0;

  object-fit: contain;

  background: #000;
}


/* スマホ */
@media screen and (max-width: 768px) {

  .modal-video {
    width: 100%;
    max-width: 100%;

    max-height: 50vh;

    margin-top: 20px;
  }

}

.more-link {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: right;
  opacity: 0.7;
}
/* =====================
   初回アクセス クラッカー
====================== */

#cracker-effect {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 99999;
}

.cracker-piece {
  position: absolute;
  width: 7px;
  height: 12px;
  border-radius: 2px;

  background: #f4c95d;

  animation:
    cracker-burst 1.1s ease-out forwards;

  transform-origin: center;
}


/* 紙吹雪が弾ける動き */

@keyframes cracker-burst {

  0% {
    opacity: 1;
    transform:
      translate(0, 0)
      rotate(0deg)
      scale(0.5);
  }

  100% {
    opacity: 0;

    transform:
      translate(
        calc(
          cos(var(--angle)) * var(--distance)
        ),
        calc(
          sin(var(--angle)) * var(--distance)
        )
      )
      rotate(720deg)
      scale(1);
  }

}
/* =====================
   スマホ版：メインバナー
===================== */

@media (max-width: 768px) {

  .hero {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
  }

  .hero > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

}

/* イベント紹介動画 */

.concept-video {
  width: 100%;
  margin: 40px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.concept-video h2 {
  margin: 0 0 10px;
  font-size: 25px;
  line-height: 2.0;
}

.concept-video .concept-video-text {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 2.0;
}

.concept-video video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #000;
}