@charset "utf-8";

/* 「一橋祭の楽しみ方」（persona.php）。
   参考: https://www.komabasai.net/76/recommended
   スマホは1カラム縦積み、1024px 以上で企画の画像を左に回す。

   並び
   1. コースの色（変数）
   2. ページ全体
   3. コースタブ・パネル
   4. コースの説明文と「おすすめをMAPで見る」（パネルの一番上）
   5. 企画コマ
   6. マップ（パネルの一番下）
   7. コース進捗インジケーター
   8. PC（1024px 以上）
   9. 動きを減らす設定 */

/* ===============================================================
   1. コースの色
   =============================================================== */

/* コースごとに企画形式の色（common_general.css）を割り当てている（仮）。
   N は persona.php の $courses の tab（タブの並び順。1 = 気軽に楽しみたい方へ）。
   タブ（.pk-tab_N）とパネル（.pk-panel_N）に同じ色を付け、パネルの中の企画・
   進捗インジケーター（persona.js がパネルに入れる）はそれを継承する。
   .pk-page のものは番号の付いていないときの既定値（ocean）。

   1コースにつき4色。
   --pk-accent = 企画形式の色そのもの（企画名の末尾のピースのグラデに使う）
   --pk-text   = 文字用。白地とのコントラスト比が 5:1 以上になるまで黒を混ぜたもの。
                 文字・線・アイコン、白文字を乗せる塗りに使う
   --pk-bg     = 背景用。白を混ぜて、白地とのコントラスト比を 1.25:1 程度にしたもの。
                 文字の後ろの淡い塗り・影、タブの地、インジケーターの地に使う
   --pk-dark   = 本文用。白地とのコントラスト比をそろって 14:1 程度にし、その明るさのまま彩度を少し上げたもの
                 （サイト共通の --themeblack は 17.4:1）
   企画形式の色を変えたら、--pk-accent 以外の3色も作り直す（コントラスト比を測って決めている） */

.pk-page {
  --pk-accent: var(--themeocean);
  --pk-text: #0c5f81; /* 7.07:1 */
  --pk-bg: #dbe7ec; /* 1.26:1 */
  --pk-dark: #002e45; /* 14.2:1 */
}

.pk-tab_1,
.pk-panel_1 {
  --pk-accent: var(--booth); /* #f4ca00 */
  --pk-text: #a98c00;
  --pk-bg: #efe6b0;
  --pk-dark: #352900; /* 14.3:1 */
}

.pk-tab_2,
.pk-panel_2 {
  --pk-accent: var(--field); /* #e08e36 */
  --pk-text: #9b6225; /* 5.04:1 */
  --pk-bg: #f7e2cb; /* 1.26:1 */
  --pk-dark: #402402; /* 14.3:1 */
}

.pk-tab_3,
.pk-panel_3 {
  --pk-accent: var(--indoor); /* #415c70。元から濃いので文字用はそのまま */
  --pk-text: #415c70; /* 7.02:1 */
  --pk-bg: #e1e5e8; /* 1.27:1 */
  --pk-dark: #1c2d3b; /* 14.1:1 */
}

.pk-tab_4,
.pk-panel_4 {
  --pk-accent: var(--stage); /* #72bfc4 */
  --pk-text: #47767a; /* 5.07:1 */
  --pk-bg: #d0eaec; /* 1.26:1 */
  --pk-dark: #142e30; /* 14.4:1 */
}

.pk-tab_5,
.pk-panel_5 {
  --pk-accent: var(--sympo); /* #3f9970 */
  --pk-text: #337c5b; /* 5.03:1 */
  --pk-bg: #d7eae1; /* 1.25:1 */
  --pk-dark: #073222; /* 14.1:1 */
}

.pk-tab_6,
.pk-panel_6 {
  --pk-accent: var(--decoration); /* #cf4f4f */
  --pk-text: #bc4848; /* 5.05:1 */
  --pk-bg: #f6dfdf; /* 1.27:1 */
  --pk-dark: #531417; /* 14.2:1 */
}

/* ===============================================================
   2. ページ全体
   =============================================================== */

.pk-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  line-height: 1.8;
  color: var(--pk-dark);
}

/* 共通の p { color: var(--themeblack) }（common_general.css）を打ち消して、親の色（--pk-dark）を継がせる。
   :where() で詳細度を p と同じにしてあるので、.pk-empty のように個別に色を決めたものはそちらが勝つ */
:where(.pk-page) p {
  color: inherit;
}

/* そのコースのおすすめ企画がまだ決まっていないとき */
.pk-empty {
  margin: 24px 0;
  text-align: center;
  font-size: 14px;
  color: var(--themevintage);
}

/* ===============================================================
   3. コースタブ・パネル
   =============================================================== */

/* 56回の pickup_course.php と同じ #join / #academic / … のハッシュ＋active クラス方式。
   ハッシュを変えると common_header.php とトップページからのリンクが効かなくなるので固定。
   56回は6つを1行に詰めていてラベルが窮屈なので、こちらは3列×2行にしている。 */

.pk-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 8px;
}

/* ページ一番下のタブ。マップとの間を空ける */
.pk-tabs_bottom {
  margin-top: 40px;
}

/* 地は背景用の色。選ばれていないタブは opacity でタブごと（地・文字・ピース）半分に薄める。
   選ばれているタブは濃いまま、周りを同じ色の box-shadow でぼかして、境目をやわらかくする */
.pk-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 8px 6px;
  font-family: "Kiwi Maru", sans-serif;
  font-size: 12px; /* 「気軽に楽しみたい」が1行に入る大きさ（以前の 13px では「〜楽しみた／い方へ」と切れた。校正 #168） */
  line-height: 1.4;
  color: var(--pk-text);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--pk-bg);
  opacity: 0.5;
  /* タブごとに重なりの基準を作り、ピース（z-index: -1）をタブの地より手前・文字より後ろに置く */
  isolation: isolate;
  transition:
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

.pk-tab:hover {
  opacity: 0.75;
}

.pk-tab.active {
  z-index: 1;
  color: var(--pk-dark);
  /* 文字の影は色を薄めにする（校正 #157 #180。以前は文字用の色そのままで濃く見えた） */
  text-shadow: 1px 1px 3px color-mix(in srgb, var(--pk-text) 45%, transparent);
  opacity: 1;
  /* 周りのぼかし（box-shadow）はやめた（校正 #189） */
  border: solid 1px var(--pk-text);
}

/* 角のタブは、.pk-tabs の角丸に合わせて自分の枠も丸める。
   合わせないと、選んだときの枠線が角丸のところで切れて見えた（校正 #167） */
.pk-tab:nth-child(1) {
  border-top-left-radius: 8px;
}
.pk-tab:nth-child(3) {
  border-top-right-radius: 8px;
}
.pk-tab:nth-child(4) {
  border-bottom-left-radius: 8px;
}
.pk-tab:nth-child(6) {
  border-bottom-right-radius: 8px;
}

/* 折り返すときは「〜たい」「方へ」の間で（persona.php が <wbr> を入れている。校正 #168）。
   それでも1行に入らない長さなら、どこででも折り返す */
.pk-tab__label {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ピース。企画名の末尾と同じ img/index/h1_piece.svg を形に使う。
   選ばれていないタブは地と同じ背景用の色にして見えなくし、選ばれているタブだけ見せる。
   スマホはタブが狭く、文字の右上だと枠からはみ出すので、タブの右下の空いている所に置く。
   PC は文字の右上（「8. PC」で .pk-tab__label を基準に置き直す） */
.pk-tab__label::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 1.2em;
  aspect-ratio: 88.84 / 88.81; /* SVG の viewBox と同じ比率 */
  background: var(--pk-bg);
  -webkit-mask: url(/visitor/img/index/h1_piece.svg) no-repeat center / contain;
  mask: url(/visitor/img/index/h1_piece.svg) no-repeat center / contain;
  pointer-events: none;
  z-index: -1; /* 文字の後ろ（.pk-tab の isolation） */
}

/* 選ばれているタブのピースは、左下の背景用の色から右上の文字用の色へのグラデーション */
.pk-tab.active .pk-tab__label::after {
  background: linear-gradient(40deg, var(--pk-bg) 20%, var(--pk-text) 140%);
}

.pk-panel {
  display: none;
  /* .pk-page の color は .pk-page の時点の --pk-dark（既定の ocean）で決まり、そのまま継がれるので、
     コースの色を持つパネルで改めて指定する */
  color: var(--pk-dark);
}

.pk-panel.active {
  display: block;
  padding-top: 8px;
}

/* ===============================================================
   4. コースの説明文と「おすすめをMAPで見る」（パネルの一番上）
   スマホは説明文の下にボタン。PC は説明文を左、ボタンを右
   =============================================================== */

.pk-intro {
  margin: 20px 10% 0;
}

/* 説明文の囲み。淡い地をぼかした影でふちどり、枠線は ::before で右下に 6px ずらして重ねる */
.pk-intro__text {
  position: relative;
  margin: 0;
  /* 枠線を右下に 6px ずらしているので、上下同じ余白だと文字が枠の中で上に寄って見えた（校正）。上を少し多く */
  padding: 17px 18px 13px;
  font-size: 12px;
  line-height: 1.9;
  background: var(--pk-bg);
  box-shadow: 0 0 15px var(--pk-bg);
}

/* ずらした枠線。下辺だけは border ではなく背景の線2本（切れ目の左と右）で描き、
   右から 14〜44px を空けて ::after の飾りを置く切れ目にする。
   ★ mask で切り抜く作りにすると、枠の下端が画素の途中に来たときに半透明の線が残る
     （全面の層と切れ目の層がどちらも半分ずつ塗られ、exclude で重ねると半分残るため） */
.pk-intro__text::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--pk-text);
  border-bottom: none;
  transform: translate(6px, 6px);
  pointer-events: none;
  background:
    linear-gradient(var(--pk-text), var(--pk-text)) no-repeat left bottom /
      calc(100% - 44px) 1px,
    linear-gradient(var(--pk-text), var(--pk-text)) no-repeat right bottom /
      14px 1px;
  background-origin: border-box; /* 左右の border の外端から測る */
}

/* 枠の切れ目に置く「・・✨」の飾り。区切り線と同じ desc_deco_clear.svg を形に使い、左右反転する。
   位置は ::before の切れ目に合わせてある。枠のずらし（6px）か切れ目を変えたら、ここも直す。
   - 横: 切れ目の中央は本体の右端から 6 - (14 + 15) = -23px → 幅 32px の中央を合わせて right: 7px
   - 縦: 枠の下辺の線（本体の下端から 5〜6px 下）に縦の中央を乗せる */
.pk-intro__text::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: -5.5px;
  width: 32px;
  aspect-ratio: 211 / 181; /* SVG の viewBox と同じ比率 */
  background: var(--pk-text);
  -webkit-mask: url(/visitor/img/desc_deco_clear.svg) no-repeat center / contain;
  mask: url(/visitor/img/desc_deco_clear.svg) no-repeat center / contain;
  transform: translateY(50%) scaleX(-1);
  pointer-events: none;
}

.pk-intro__btns {
  display: flex;
  width: 200px;
  margin: 30px auto 0;
}

/* 「おすすめをMAPで見る」。押すとページ一番下のマップまでスクロールする（common.js のページ内リンク）。
   地の色は無く、hover でコースの背景用の色を敷く */
.pk-mapbtn {
  display: flex;
  flex: 1;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pk-text);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--pk-text);
  border-radius: 999px;
  transition: background 0.2s ease;
}

.pk-mapbtn:hover {
  background: var(--pk-bg);
}

/* 右端の下向きの正三角形（角を少し丸めたもの）。形を SVG のマスクで作り、文字と同じ色で塗る。
   SVG は stroke-linejoin="round" の太い線で三角形をなぞって、角を丸くしている */
.pk-mapbtn__arrow {
  flex-shrink: 0;
  width: 11px;
  height: 10px; /* 正三角形の高さは幅の 0.87 倍 */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M4 4h16L12 17.9z' fill='%23000' stroke='%23000' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M4 4h16L12 17.9z' fill='%23000' stroke='%23000' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* ===============================================================
   5. 企画コマ
   DOM の並び（番号→企画名→画像→説明文→区切り線→日時場所→ボタン）がそのままスマホの表示順。
   PC は「8. PC」の grid-template-areas で画像を左に回す
   =============================================================== */

.pk-koma {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 64px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  /* 番号・企画名・団体名・企画ワード・紹介文・場所日時・ボタンは、紹介文と同じく左右から --pk-side 離して左揃え。
     画像と区切り線は中央（校正 #166 #169。以前は企画名とボタンが左端、団体名などが 5% と、ばらばらだった）。
     コマの幅を cqw で測れるようにする（PC は --pk-indent の px で揃えている） */
  container-type: inline-size;
  --pk-side: 7cqw;
}

/* ---- 番号（円と✨） ---- */

.pk-koma__number {
  position: relative;
  margin-left: var(--pk-side);
  width: 40px;
  height: 40px;
  font-family: "Kiwi Maru", sans-serif;
  font-size: 18px;
  line-height: 36px; /* Kiwi Maru は 40px だと数字が下に寄るので、2px 持ち上げる */
  color: var(--pk-text);
  text-align: center;
}

/* 円と✨（img/pickup/circle.svg）の形をコースの文字色で塗る。
   円は 0〜95 の正方形の中央にあり、それが番号の枠（40px）にぴったり重なるようにする。
   SVG の viewBox（-3 -3 101 102）は、線を太らせた分と左下の✨のはみ出し分だけ広げてあるので、
   枠の外に同じ割合だけ広げる（上・左・右 3 / 95 = 3.16%、下 4 / 95 = 4.21%） */
.pk-koma__number::before {
  content: "";
  position: absolute;
  inset: -3.16% -3.16% -4.21%;
  background: var(--pk-text);
  -webkit-mask: url(/visitor/img/pickup/circle.svg) no-repeat center / contain;
  mask: url(/visitor/img/pickup/circle.svg) no-repeat center / contain;
  pointer-events: none;
}

/* ---- 企画名・団体名・ジャンル・お気に入り ---- */

.pk-koma__head {
  position: relative;
  padding-left: var(--pk-side);
  padding-right: 55px; /* 右上のお気に入りボタンの分（PC は 90px） */
}

/* あしらい（仮）：文字の下半分にコースの背景用の色で蛍光ペンのような線を引き、末尾にパズルのピースを置く。
   線を文字の幅だけに引き、2行目にも同じように引くため inline にしている（後ろの団体名は p なので改行される） */
.pk-koma__title {
  display: inline;
  margin: 0;
  font-family: "Kiwi Maru", sans-serif;
  font-size: 25px;
  line-height: 1.2; /* ページ全体の 1.8 のままだと、2行になったときに間が空きすぎる */
  letter-spacing: -0.05em; /* 1文字ずつの間隔を詰める。em なので PC（30px）でも同じ割合で詰まる */
  text-shadow: 1px 1px 2px var(--pk-bg);
  background: linear-gradient(transparent 70%, var(--pk-bg) 70%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 企画名の最後の1文字とピースの塊。ピースだけが次の行に送られないよう、ここでは折り返さない（校正 #243） */
.pk-koma__titleend {
  white-space: nowrap;
}

/* 末尾のパズルのピース。トップページの見出しと同じ img/index/h1_piece.svg を、向きは元のまま、
   色を「白→形態色」のグラデーションにしたもの（元の SVG は #8cbcb8→白。形だけを mask に使う） */
.pk-koma__titleend::after {
  content: "";
  display: inline-block;
  width: 1em; /* 文字と同じくらいの大きさ */
  aspect-ratio: 88.84 / 88.81; /* SVG の viewBox と同じ比率 */
  margin-left: 0.2em;
  vertical-align: -0.12em;
  background: linear-gradient(130deg, var(--pk-bg) 10%, var(--pk-accent) 140%);
  -webkit-mask: url(/visitor/img/index/h1_piece.svg) no-repeat center / contain;
  mask: url(/visitor/img/index/h1_piece.svg) no-repeat center / contain;
}

.pk-koma__circle {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--pk-dark);
}

/* ジャンル。文字の幅ぶんだけ枠で囲みたいので inline-block にして左端に寄せる */
/* 企画ワードの段（スマホは画像と紹介文の間。校正 #164） */
.pk-koma__wordsrow {
  padding: 0 var(--pk-side);
}

.pk-koma__genre {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 2px 10px;
  font-size: 13px;
  color: var(--pk-text);
  vertical-align: top;
  background: var(--pk-bg);
  border: 1px solid var(--pk-text);
  border-radius: 999px;
}

/* パンフ企画ワード。1と2を横に並べ、1行に入りきらなければ2を次の行へ折り返させて隠す
   （高さを1行分に固定して overflow: hidden）。1だけでも長いときは … で切る */
.pk-koma__words {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5em;
  min-width: 0;
  height: 1.5em;
  line-height: 1.5;
  overflow: hidden;
}

.pk-koma__word {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2つ並ぶときは間に「/」。2の頭に付けるので、2が折り返して隠れるときは「/」も一緒に消える */
.pk-koma__word + .pk-koma__word::before {
  content: "/";
  margin-right: 0.5em;
}

.pk-koma__fav {
  position: absolute;
  /* 企画ワードを企画名の塊の外へ出した（校正 #164）ので、団体名の行の右端に置く */
  bottom: 0;
  right: var(--pk-side);
  width: 25px;
  height: 25px;
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
}

.pk-koma__fav img {
  width: 100%;
  height: 100%;
  transition: transform 0.2s;
}

/* ♡の動き。タイムテーブルの♡（.card_heart_tt）と同じ（校正 #223）。日別おすすめの day.css と同じ指定。
   押したときに跳ねる（clicked は pickup_fav.js が付けて、動き終わったら外す） */
.pk-koma__fav.clicked {
  animation: pkHeartClick 0.6s ease-in-out;
}

@keyframes pkHeartClick {
  0% {
    transform: scale(1) translateY(0);
  }
  25% {
    transform: scale(1.2) translateY(-3px);
  }
  50% {
    transform: scale(1.1) translateY(-5px);
  }
  75% {
    transform: scale(1.2) translateY(-3px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* PC はカーソルを合わせると少し大きくなる */
@media (hover: hover) and (pointer: fine) {
  .pk-koma__fav:hover img {
    transform: scale(1.2);
  }
}

/* ---- 企画画像 ---- */

.pk-koma__img {
  text-align: center;
}

.pk-koma__img img {
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

/* ---- 説明文 ---- */

.pk-koma__desc {
  margin: 0;
  padding: 0 var(--pk-side) 10px;
  font-size: 12px;
}

/* 紹介文の段落・見出しの間を空ける（校正 #182 #183。プレコン・院生などで詰まって見えていた。企画詳細に近い間隔） */
.pk-koma__desc p,
.pk-koma__desc ul,
.pk-koma__desc ol {
  margin: 0.5em 0;
}

.pk-koma__desc :is(h1, h2, h3, h4, h5, h6) {
  margin: 1.2em 0 0.3em;
  line-height: 1.6;
}

/* 紹介文は Markdown から作った HTML（<p> や見出しを含む）。前後の余白だけ詰める */
.pk-koma__desc > :first-child {
  margin-top: 0;
}

.pk-koma__desc > :last-child {
  margin-bottom: 0;
}

/* 紹介文の中のリンク（persona.php の PERSONA_DESC_LINKS など）。コースの文字色＋下線でリンクとわかるように。
   URL は途中で折り返せないと画面からはみ出すので、どこででも折り返す */
.pk-koma__desc a {
  color: var(--pk-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.pk-koma__desc a:hover {
  text-decoration-thickness: 2px;
}

/* 紹介文の見出し。手元の簡易変換（search/lib/lib.php の v2_md_mini）は ## を h5 にずらすが、
   Parsedown を置くと ## は h2 のまま出るので、どの段でも同じ見た目になるよう全部まとめて指定する */
.pk-koma__desc :is(h1, h2, h3, h4, h5, h6) {
  font-size: 13px;
}

/* 見出しらしく見せるため、文字をコースの色のグラデーション（右の --pk-text → 左の --pk-dark）にし、影を付ける
   （校正 #326。以前は【】で囲んでいた）。文字の大きさ・太さは変えない。
   グラデを文字の幅に合わせるため fit-content にする（ブロックの幅いっぱいだと短い見出しが片方の色だけになる） */
.pk-koma__desc .pk-emoji {
  /* 見出しの文字はグラデを透明な文字で切り抜いて塗っているので、絵文字（🔰 など）もグラデの色1色に
     なっていた（校正。麻雀大会の「NEW！初心者講座🔰」）。絵文字だけ透明をやめて本来の色で出す。
     persona.php が紹介文の絵文字を span.pk-emoji で包む */
  color: var(--themeblack);
}

.pk-koma__desc :is(h1, h2, h3, h4, h5, h6) {
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(to left, var(--pk-head-text, var(--pk-text)), var(--pk-head-dark, var(--pk-dark)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* text-shadow だと透明な文字の下から影が透けて濁るので、filter で付ける（day.css の企画名と同じ） */
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--pk-head-text, var(--pk-text)) 45%, transparent));
}

/* 黄（気軽に楽しみたい方へ）と緑（近くにお住まいの方へ）だけ、見出しの色の彩度を少し下げる（校正）。
   --pk-text・--pk-dark の明るさはそのままに、色み（OKLCH の彩度）を 7 割にしたもの。白地とのコントラスト比は変わらない。
   見出し以外（線・リンク・タブなど）は元の色のまま */
.pk-panel_1 {
  --pk-head-text: #a18e48; /* #a98c00 から */
  --pk-head-dark: #322a11; /* #352900 から */
}

.pk-panel_5 {
  --pk-head-text: #497860; /* #337c5b から */
  --pk-head-dark: #163024; /* #073222 から */
}

/* ---- 説明文と日時・場所の間の区切り線（day.css の .pd-item__line と同じ作り） ---- */
/* day はカードの白地に乗るので SVG の白い四角で線を隠しているが、こちらは地の色（--themewhite）の上で
   白い四角が浮いて見える。そのため四角を抜いた desc_deco_clear.svg を使い、線のほうを飾りの手前で止める */

/* 線の長さは紹介文の幅に揃え、そこから左右に 10px ずつ内側に寄せる（校正 #163。日別おすすめと同じく少しくぼませる） */
/* 両端は紹介文・場所日時（左右に --pk-side）と同じ位置にそろえる（校正 #325。以前は左右 10px ずつ内側に凹ませていた） */
.pk-koma__line {
  position: relative;
  width: calc(100% - 2 * var(--pk-side));
  height: 1px;
  margin: 8px auto;
  background: linear-gradient(var(--pk-text), var(--pk-text)) no-repeat left /
    calc(100% - 25px) 100%;
}

/* ひし形と点々。線の右端に、縦の中央を線に合わせて置く。SVG は ocean で描かれているので、
   形だけをマスクに使ってコースの色で塗る */
.pk-koma__line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 25px;
  aspect-ratio: 211 / 181; /* SVG の viewBox と同じ比率 */
  background: var(--pk-text);
  -webkit-mask: url(/visitor/img/desc_deco_clear.svg) no-repeat center / contain;
  mask: url(/visitor/img/desc_deco_clear.svg) no-repeat center / contain;
  transform: translateY(-50%);
}

/* ---- 日時・場所（day.css の .pd-item__meta と同じ見た目） ---- */

.pk-koma__meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 var(--pk-side);
  font-size: 14px;
  color: var(--pk-dark);
}

.pk-meta {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* 場所・日時のアイコン。SVG は紺で描かれているので、形だけをマスクに使ってコースの色で塗る
   （persona.php では <img> ではなく span にして、--icon に SVG の URL を渡している） */
.pk-meta__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--pk-text);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

/* アイコンは文字の1行目と上下中央を揃える。1行目の中心までの距離から、アイコンの半分（10px）を引いている。
   場所 = .pk-meta__place の padding 7px ＋ 行の高さ（p は common_general.css の 1.5）の半分
   日時 = .pk-day の margin 5px ＋ 日付マスの枠 1px ＋ 行の高さ（.pk-page の 1.8）の半分 */
.pk-meta_place .pk-meta__icon {
  margin-top: calc(7px + 0.75em - 10px);
}

.pk-meta_time .pk-meta__icon {
  margin-top: calc(6px + 0.9em - 10px);
}

.pk-meta__body {
  flex: 1;
}

.pk-meta__place {
  margin: 0;
  padding: 7px 0;
}

/* 雨天時の会場などの注記は次の行に（校正 #231） */
.pk-meta__note {
  display: block;
}

/* 日ごとの時間。日付は枠で囲んだマスを縦に積み、開催がある日（.is-open）だけ塗る */
.pk-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 5px 0;
}

/* 2行目からは上に1px重ねて、マスの境目の線が2重にならないようにする */
.pk-day + .pk-day {
  margin-top: -1px;
}

.pk-day__label {
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  /* 「日」の字の右側の余白で、文字が枠の左に寄って見えた（校正）。少しだけ右へ */
  text-indent: 0.1em;
  border: 1px solid var(--pk-text);
  border-radius: 3px;
  opacity: 0.5;
}

.pk-day.is-open .pk-day__label {
  color: var(--themewhite);
  background: var(--pk-text);
  opacity: 1;
}

.pk-day__time {
  flex: 1;
}

/* ---- 企画詳細ページへのボタン（hover は day.css の .pd-btn:hover と同じ） ---- */

.pk-koma__btn {
  margin-top: 4px;
  padding: 0 var(--pk-side);
}

.pk-btn {
  display: block;
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
  padding: 10px 24px;
  font-size: 15px;
  color: var(--pk-text);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--pk-text);
  border-radius: 999px;
  transition:
    opacity 0.2s ease,
    background 0.2s ease;
}

.pk-btn:hover {
  color: white;
  background: var(--pk-text);
}

/* ===============================================================
   6. マップ（パネルの一番下）
   押すと MAP検索へ飛ぶ。右下のラベルを常に出しておき、hover では少し浮かせて押せることを示す
   =============================================================== */

/* マップの上の説明。上の余白（64px）はここで取り、マップとの間は詰める */
.pk-map__note {
  margin: 64px 0 12px;
  text-align: center;
  font-size: 14px;
}

/* 説明の真下の、マップを指す下向きの正三角形（幅10px・高さ 10×√3/2 ≒ 8.7px）。色は説明の文字と同じ */
.pk-map__note::after {
  content: "";
  display: block;
  width: 10px;
  height: 8.7px;
  margin: 6px auto 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.pk-map {
  position: relative;
  display: block;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.pk-map:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.pk-map img {
  display: block;
  width: 100%;
  height: auto;
  padding: 15px;
}

/* 画像のまわりの余白（上の padding）を画像の地の色（#fdfef8）で塗り、
   画像の端から内側へ地の色を重ねてぼかす。道や建物が画像の端でぷつっと切れて見えないようにする。
   ::after は「MAP検索で見る」（.pk-map__label）より後ろに描かれるので、ラベルに z-index を付けて上に出す */
.pk-map {
  background: #fdfef8;
}

.pk-map::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 14px 15px #fdfef8;
  pointer-events: none;
}

.pk-map__label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--themewhite);
  background: var(--pk-text);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* ラベルにカーソルを合わせたときだけ、ラベルの色を反転させて矢印を動かす。
   マップ全体の hover（浮き上がる）とは分ける（校正 #222。以前はマップのどこに合わせても矢印が動いた） */
.pk-map__label {
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.pk-map__label:hover {
  color: var(--pk-text);
  background: var(--themewhite);
}

/* 右向きの矢印。ラベルの hover で少し右に動かす */
.pk-map__label-arrow {
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.pk-map__label:hover .pk-map__label-arrow {
  transform: translateX(3px) rotate(45deg);
}

/* ===============================================================
   7. コース進捗インジケーター
   元の search/pickup/pickup.css からほぼそのまま移植。persona.js が開いているパネルの中に作る。
   枠線とドットの地はコースの背景用の色、今いる企画のドットは文字用の色
   =============================================================== */

/* スマホは画面の一番下に、地の色を敷いて置く。以前は下から約 100px の所に地なしで浮いていて、
   企画名や「おすすめをMAPで見る」に重なっていた（校正 #172 #186 #187）。
   出す・隠すは persona.js（説明文とボタンの段を過ぎてから出す） */
.course-progress-indicator {
  position: fixed;
  left: 50%;
  bottom: 10px;
  z-index: 100;
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--themewhite) 92%, transparent);
  border: 2px solid var(--pk-accent);
  border-radius: 9999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none; /* 隠れている間は押せないように */
  transition: opacity 0.3s ease;
  transform: translateX(-50%);
}

/* 画面下のボトムナビ（#header_bot。高さ 80px、PC では出ない）がある間はその上に出す。
   ボトムナビの無いページもありうるので :has() で見る。
   この指定は詳細度が高く PC の bottom: auto に勝ってしまうので、スマホ幅に限る */
@media screen and (max-width: 1023px) {
  body:has(#header_bot) .course-progress-indicator {
    bottom: 90px;
  }
}

.course-progress-indicator.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 指でなぞって移動できるようにしている（persona.js。校正 #241）ので、なぞる間はページをスクロールさせない */
.course-progress-indicator {
  touch-action: none;
}

/* まだ見ていない企画のドットは、コースの色を白で薄めたもの。今いる企画は文字用の濃い色。
   以前は地のドットもコースの色そのままで、一橋の学び・子ども・近くにお住まいの方では
   今いる企画との色の差がほとんど無かった（校正 #160） */
.course-progress-dot {
  width: 10px;
  height: 10px;
  cursor: pointer;
  background-color: color-mix(in srgb, var(--pk-accent) 40%, #fff);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.course-progress-dot.active {
  background-color: var(--pk-text);
  transform: scale(1.3);
}

/* ===============================================================
   8. PC（1024px 以上）
   文字の大きさはスマホより 2px ずつ大きくする（企画名だけは 25px → 30px）
   =============================================================== */

@media screen and (min-width: 1024px) {
  .pk-page {
    max-width: 980px;
  }

  .pk-empty {
    font-size: 16px;
  }

  /* ---- タブ。PC でも3列×2行のまま（1行にするなら repeat(6, 1fr)） ---- */

  .pk-tab {
    min-height: 64px;
    font-size: 18px;
  }

  /* ピースは文字の右上に */
  .pk-tab__label {
    position: relative;
  }

  .pk-tab__label::after {
    top: -0.4em;
    right: -1em;
    bottom: auto;
    width: 1.5em;
  }

  /* ---- コースの説明文と「おすすめをMAPで見る」 ---- */

  .pk-intro {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 40px;
    align-items: center;
    margin-top: 28px;
  }

  .pk-intro__text {
    font-size: 14px;
  }

  .pk-intro__btns {
    margin-top: 0;
  }

  .pk-mapbtn {
    padding: 10px 28px;
    font-size: 16px;
  }

  /* ---- 企画コマ。画像を左に回す ---- */

  .pk-koma {
    display: grid;
    grid-template-areas:
      "num  num   num"
      "img  head  head"
      "img  words words"
      "img  desc  desc"
      "img  line  line"
      "img  meta  btn";
    grid-template-columns: 250px 1fr auto;
    column-gap: 40px;
    row-gap: 14px;
    align-items: start;
    /* 団体名・企画ワード・紹介文・場所・日時の左端。以前の場所・日時の位置（列幅の 5% ≒ 15px）に揃える */
    --pk-indent: 15px;
  }

  .pk-koma__number {
    grid-area: num;
    margin-left: 0;
    font-size: 20px;
    line-height: 38px; /* 20px だと 36px では全体に 1〜2px 上に寄る（校正 #234。実測で 5・6・7 がとくに上） */
  }

  /* PC は企画名も団体名・紹介文と同じ --pk-indent から始める（校正 #166） */
  .pk-koma__head {
    grid-area: head;
    padding-left: var(--pk-indent);
    padding-right: 90px;
  }

  .pk-koma__wordsrow {
    grid-area: words;
    padding: 0 0 0 var(--pk-indent);
  }

  .pk-koma__title {
    font-size: 30px;
  }

  .pk-koma__circle {
    font-size: 16px;
  }

  .pk-koma__genre {
    font-size: 15px;
  }

  .pk-koma__fav {
    right: 45px;
    top: 10px;
    bottom: auto;
  }

  .pk-koma__img {
    grid-area: img;
  }

  .pk-koma__img img {
    max-width: 250px;
  }

  .pk-koma__desc {
    grid-area: desc;
    padding: 0 0 0 var(--pk-indent);
    font-size: 14px;
  }

  .pk-koma__desc :is(h1, h2, h3, h4, h5, h6) {
    font-size: 16px;
  }

  /* 紹介文の幅（左は --pk-indent、右は列の端）にそろえる（校正 #163。#325 で左右 10px の凹みをやめた） */
  .pk-koma__line {
    grid-area: line;
    width: auto;
    margin: 8px 0 8px var(--pk-indent);
  }

  .pk-koma__meta {
    grid-area: meta;
    align-self: end;
    padding: 0 0 0 var(--pk-indent);
    font-size: 16px;
  }

  .pk-koma__btn {
    grid-area: btn;
    align-self: end;
    padding: 0;
    margin-right: 30px;
  }

  .pk-btn {
    display: inline-block;
    font-size: 17px;
    white-space: nowrap;
  }

  /* ---- マップ ---- */

  .pk-map__label {
    right: 16px;
    bottom: 16px;
    font-size: 15px;
  }

  /* ---- 進捗インジケーター。右端の上下中央に縦に並べる。押しやすいよう間隔と余白を広げる ---- */

  .course-progress-indicator {
    left: auto;
    right: 35px;
    top: 50%;
    bottom: auto;
    flex-direction: column;
    gap: 24px;
    padding: 18px 12px;
    transform: translateY(-50%);
  }

  .course-progress-dot {
    width: 13px;
    height: 13px;
  }
}

/* ===============================================================
   9. 動きを減らす設定
   =============================================================== */

@media (prefers-reduced-motion: reduce) {
  .pk-tab,
  .pk-map,
  .pk-map__label,
  .pk-map__label-arrow {
    transition: none;
  }

  .pk-koma__fav.clicked {
    animation: none;
  }
}

/* ===============================================================
   10. 一番下の、日別おすすめへの誘導（校正 #338。day.css の .pd-more と同じ見た目）
   =============================================================== */
.pk-more {
  margin-top: 48px;
  text-align: center;
}

.pk-more__lead {
  margin: 0 0 4px;
  text-align: center; /* 共通の p の text-align を上書き */
  font-family: "Kiwi Maru", sans-serif;
  font-size: 14px;
  color: var(--themeocean);
}

@media screen and (min-width: 1024px) {
  .pk-more__lead {
    font-size: 16px;
  }
}

/* ===============================================================
   11. 番号の数字を丸の上下中央に（校正 #234 #339）
   =============================================================== */
/* 数字の箱を、数字そのものの高さ（キャップハイト〜ベースライン）まで切り詰め、丸の中で上下中央に置く。
   Kiwi Maru は字形の上下の余白が均等でなく、行の高さで合わせると数字によって 1〜2px 上に寄って見えた。
   未対応のブラウザ（古い Firefox など）は、上の行の高さ（スマホ 36px・PC 38px）で合わせたまま */
@supports (text-box: trim-both cap alphabetic) {
  .pk-koma__number {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .pk-koma__num {
    display: block;
    line-height: 1;
    text-box: trim-both cap alphabetic;
  }
}