@charset "UTF-8";

/* ホームカミングデー（hcd.php）　AI
   配色はパンフレット（【26】ホームカミングデー 第3稿）の誌面から拾った値。
   このファイルは hcd.php でしか読まないので :root に置いてよい */
:root {
  --hcd_red: #b42a20;       /* 見出し帯・日付の丸・時間の帯 */
  --hcd_red_dark: #81221f;  /* 22日の日付の丸・ホバー */
  --hcd_sky: #dbeaf3;       /* 水色の背景 */
  --hcd_pink: #fbe9e6;      /* パズルのピース（明るい側） */
  --hcd_pink_deep: #eca29d; /* パズルのピース（濃い側） */
  --hcd_text: #33363b;      /* 本文の文字。薄くて読みにくいと言われたので濃いめ */
  --hcd_footer: #3b3436;    /* フッターの地。img/hcd/footer_decoration_red.svg の一番濃い色と揃える */
}

.hcd_intro,
.hcd_day,
.hcd_lecture,
.hcd_access {
  color: var(--hcd_text);
}

/* 共通CSSの p に黒が直接付いているため、ブロックの文字色を継がせる。
   詳細度は共通CSSの p と同じ (0,0,1) にして後勝ちで上書きする。
   クラスで付けた色（白・赤など）は (0,1,0) なのでそちらが優先される */
:where(.hcd_intro, .hcd_day, .hcd_lecture, .hcd_access, .hcd_support) p,
:where(.hcd_intro, .hcd_day, .hcd_lecture, .hcd_access, .hcd_support) dd {
  color: inherit;
}

/* ===== ファーストビュー =====
   1枚目の写真 → 2枚目の写真 → タイトル の順に出る。
   タイミングは animation-delay で調整する */

/* 赤は帯で画面を区切らず、写真2枚に続く「3枚目のカード」としてタイトルの後ろに
   少し傾けて置く（.hcd_title::before）。中身は 1000px の幅に収める。
   --hcd_photo_w は写真1枚の幅（写真エリアの幅に対する割合。幅ごとに下のメディアクエリで変える）。
   --hcd_overlap は2枚の写真が縦に重なる割合（1枚の高さに対して）。
   写真エリアの高さは写真の幅から決まるので、画面の幅が変わっても重なり方は同じになる */
.hcd_hero {
  --hcd_photo_w: .58;
  --hcd_overlap: .45;
  --hcd_hero_side: max(16px, calc((100% - 1000px) / 2));
  position: relative;
  margin-top: 65px;
  padding: 40px var(--hcd_hero_side) 60px;
  overflow: hidden;
}

.hcd_photos {
  position: relative;
  /* 写真は 4:3。高さ＝写真の高さ×(2－重なり) */
  aspect-ratio: 1 / calc(.75 * var(--hcd_photo_w) * (2 - var(--hcd_overlap)));
}

.hcd_photo {
  position: absolute;
  width: calc(var(--hcd_photo_w) * 100%);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 6px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  opacity: 0;
  animation: hcd_photo_in 1s ease-out forwards;
}

.hcd_photo_1 {
  top: 0;
  left: 0;
  --hcd_rotate: -3deg;
  animation-delay: .2s;
}

.hcd_photo_2 {
  bottom: 0;
  right: 0;
  --hcd_rotate: 3deg;
  animation-delay: .9s;
}

/* ぼかしから浮かぶ演出は「AIっぽい」と言われやすいので使わない。
   写真を置くように、少し下から出すだけにとどめる */
@keyframes hcd_photo_in {
  from {
    opacity: 0;
    transform: translateY(16px) rotate(var(--hcd_rotate));
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--hcd_rotate));
  }
}

/* 傾けたカードの角が画面の端で切れないよう、左右を少し空ける。
   文字は読みやすさを優先して傾けない */
.hcd_title {
  position: relative;
  z-index: 1;
  margin: 30px 8px 0;
  padding: 44px 20px 48px;
  text-align: center;
}

/* 赤いカード。写真と同じ白い縁と影を付け、2枚目の写真（3deg）と逆向きに傾ける。
   左下と右上の角の市松模様（パンフレットの意匠）はカードの背景に描き込み、白い縁の内側に置く。
   別の要素にすると回転の中心がずれ、カードから浮いて見えるため。
   3×3 の白黒で、角のマスはカードの赤にしてカードの形を崩さない */
.hcd_title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  --hcd_check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M1 0h1v1H1zM0 1h1v1H0zM2 1h1v1H2zM1 2h1v1H1z'/%3E%3C/svg%3E");
  background:
    var(--hcd_check) no-repeat left bottom / var(--hcd_check_size, 56px),
    var(--hcd_check) no-repeat right top / var(--hcd_check_size, 56px),
    var(--hcd_red);
  border: 6px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  rotate: -2deg;
  opacity: 0;
  animation: hcd_fade_in .8s ease-out 1.6s forwards;
}

.hcd_title>* {
  opacity: 0;
  animation: hcd_title_in 1s ease-out forwards;
}

/* タイトルは赤い帯の上に乗るので白抜き */
.hcd_title_badge {
  display: inline-block;
  padding: 4px 16px;
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  animation-delay: 1.9s;
}

/* 共通CSSの h1 の影は付けない。Kiwi Maru は 500 までしか無いので、
   700 にすると疑似太字でにじむ */
.hcd_title_main {
  margin-top: 12px;
  color: #fff;
  text-shadow: none;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .08em;
  animation-delay: 2.1s;
}

.hcd_title_sub {
  display: block;
  font-size: 22px;
  letter-spacing: .2em;
}

.hcd_title_lead {
  margin-top: 16px;
  font-size: 15px;
  line-height: 2;
  color: #fff;
  animation-delay: 2.5s;
}

@keyframes hcd_title_in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----- パズルのピース -----
   タイトルと同じタイミングで出る（hcd_piece_in）。
   出たあとに揺れ続ける動きは付けない（ずっと動くあしらいは AI っぽく見えやすい）。
   absolute なので PC の2列グリッドのマス目は使わない */

.hcd_pieces {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hcd_piece {
  position: absolute;
  width: var(--hcd_piece_size);
  rotate: var(--hcd_piece_rotate);
  opacity: 0;
  animation: hcd_piece_in .8s ease-out var(--hcd_piece_delay) forwards;
}

.hcd_piece_1 {
  --hcd_piece_size: 72px;
  --hcd_piece_rotate: 18deg;
  --hcd_piece_delay: 1.9s;
  top: 6%;
  left: 46%;
}

.hcd_piece_2 {
  --hcd_piece_size: 48px;
  --hcd_piece_rotate: -24deg;
  --hcd_piece_delay: 2.05s;
  top: 52%;
  left: 3%;
}

.hcd_piece_3 {
  --hcd_piece_size: 56px;
  --hcd_piece_rotate: -12deg;
  --hcd_piece_delay: 2.2s;
  top: 10%;
  right: 4%;
}

.hcd_piece_4 {
  --hcd_piece_size: 40px;
  --hcd_piece_rotate: 32deg;
  --hcd_piece_delay: 2.35s;
  bottom: 8%;
  right: 8%;
}

@keyframes hcd_piece_in {
  from {
    opacity: 0;
    translate: 0 12px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ----- きらめき（パンフレットの ✦） -----
   形は mask で抜き、色は background で塗る。形はテーマの星（img/index/reco_star.svg）と同じ。
   --hcd_sparkle_size は高さ。
   パンフレットと同じく止まった飾りとして置き、フェードで出すだけ */

/* 線だけの星。テーマの絵柄と同じく、塗りの星と混ぜて使う。
   下の .hcd_sparkle の --hcd_star に負けないよう詳細度を上げる */
.hcd_sparkle.hcd_sparkle_line {
  --hcd_star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.11 26.2'%3E%3Cpath d='M15.9 13.1c-4.7 2.13-5.88 3.86-7.35 10.71-1.46-6.85-2.65-8.58-7.35-10.71 4.7-2.13 5.88-3.86 7.35-10.71 1.46 6.85 2.65 8.58 7.35 10.71Z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}

.hcd_sparkle {
  --hcd_star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17.11 26.2'%3E%3Cpath d='M15.9 13.1c-4.7 2.13-5.88 3.86-7.35 10.71-1.46-6.85-2.65-8.58-7.35-10.71 4.7-2.13 5.88-3.86 7.35-10.71 1.46 6.85 2.65 8.58 7.35 10.71Z'/%3E%3C/svg%3E");
  position: absolute;
  height: var(--hcd_sparkle_size);
  aspect-ratio: 17.11 / 26.2;
  background: var(--hcd_red);
  -webkit-mask: var(--hcd_star) no-repeat center / contain;
  mask: var(--hcd_star) no-repeat center / contain;
  opacity: 0;
  animation: hcd_fade_in .8s ease-out var(--hcd_sparkle_delay) forwards;
}

/* カードの後ろに隠れないよう、写真とカードの間・上の余白に置く */
.hcd_sparkle_1 {
  --hcd_sparkle_size: 34px;
  --hcd_sparkle_delay: 2.3s;
  top: 46%;
  left: 6%;
}

.hcd_sparkle_2 {
  --hcd_sparkle_size: 28px;
  --hcd_sparkle_delay: 2.5s;
  top: 2%;
  right: 22%;
}

/* 1つだけ遅れて出ると目立つので、ほかのきらめきと揃える */
.hcd_sparkle_3 {
  --hcd_sparkle_size: 15px;
  --hcd_sparkle_delay: 2.3s;
  bottom: 5%;
  left: 36%;
}

.hcd_sparkle_4 {
  --hcd_sparkle_size: 34px;
  --hcd_sparkle_delay: 2.4s;
  top: 3%;
  left: 5%;
  background: var(--hcd_red);
}

/* ----- 右端の縦書き（PC だけ表示。下の min-width: 1024px で出す） ----- */
.hcd_vertical {
  display: none;
}

@keyframes hcd_fade_in {
  to {
    opacity: 1;
  }
}

/* ===== 説明文 ===== */

.hcd_intro {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 5% 44px;
}

/* 説明文の右上に赤いきらめきを1つ */
.hcd_sparkle_intro {
  --hcd_sparkle_size: 26px;
  --hcd_sparkle_delay: 0s;
  top: 14px;
  right: 2%;
  background: var(--hcd_red);
}

/* 同窓会と特別講演は、赤字にマーカーを引いて目立たせる */
/* このページの本文リンク。共通の青い下線をページの赤に替え、
   ホバーで文字を下線と同じ赤にする（以前の薄ピンクは下線の色とずれて不自然と言われた） */
.hcd_intro .textlink,
.hcd_support .textlink {
  text-decoration-color: var(--hcd_red);
}

.hcd_intro .textlink:hover,
.hcd_support .textlink:hover {
  color: var(--hcd_red);
}

.hcd_em {
  font-style: normal;
  font-weight: 700;
  color: var(--hcd_red);
  background: linear-gradient(transparent 65%, var(--hcd_pink) 0);
}

.hcd_intro p {
  font-size: 15px;
  line-height: 2;
}

.hcd_intro p+p {
  margin-top: 12px;
}

/* ===== 日付ブロック ===== */

/* 背景色は画面の端まで伸ばし、中身だけ 1000px の幅に収める */
.hcd_day,
.hcd_lecture,
.hcd_access {
  --hcd_side: max(5%, calc((100% - 1000px) / 2));
}

.hcd_day {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 36px var(--hcd_side);
  background: var(--hcd_sky);
}

.hcd_date {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--hcd_red);
  text-align: center;
}

/* 数字は赤い部分（白い曜日の帯より上）の上下中央に置く。
   丸の上側は削れて見えるので、少しだけ下に寄せる */
.hcd_date_num {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8%;
  color: #fff;
  font-family: "Kiwi Maru", sans-serif;
  font-size: 34px;
  line-height: 1;
}

.hcd_date_week {
  background: #fff;
  color: var(--hcd_red);
  font-family: "Kiwi Maru", sans-serif;
  font-size: 18px;
  padding: 2px 0 14px;
}

.hcd_day_body {
  flex: 1;
}

/* 21日は日付の丸を右の内容の上下中央に置く（22日は見出しが1行目にあるので上ぞろえのまま）。
   スマホは丸と内容が縦に並ぶので左ぞろえのまま */
@media screen and (min-width: 768px) {
  .hcd_day:not(.hcd_day_red) {
    align-items: center;
  }
}

.hcd_place {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* 場所のピン。絵文字だと赤地に埋もれるので、文字色で塗る図形にする。
   すぐ上の対象（.hcd_target）の「!」の丸と縦の中心線・文字の書き出しを揃えるため、
   ピンの枠は「!」と同じ幅 20px・間 6px にし、ピンはその中の真ん中に置く */
.hcd_place {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hcd_place::before {
  content: "";
  flex: none;
  width: 20px;
  height: 1.1em;
  background: var(--hcd_red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Cpath d='M8 0a8 8 0 0 0-8 8c0 6 8 14 8 14s8-8 8-14a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%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 16 22'%3E%3Cpath d='M8 0a8 8 0 0 0-8 8c0 6 8 14 8 14s8-8 8-14a8 8 0 0 0-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hcd_day_red .hcd_place::before {
  background: #fff;
}

.hcd_schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hcd_schedule>div {
  display: flex;
  border: 1.5px solid var(--hcd_red);
  background: #fff;
}

.hcd_schedule dt {
  flex-shrink: 0;
  width: 8.5em;
  background: var(--hcd_red);
  color: #fff;
  padding: 6px 12px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  /* 右の企画名が印で2行になっても、時間は帯の上下の真ん中に置く */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 印（原則予約制など）は枠の中で企画名の横に並べ、入りきらなければ下に回す */
.hcd_schedule dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 6px 12px;
  font-size: 15px;
}

.hcd_schedule dd .hcd_badge {
  margin-left: 0;
}

/* プログラムごとの会場。企画名の下に1行で置く */
.hcd_room {
  flex-basis: 100%;
  font-size: 13px;
  line-height: 1.5;
}

.hcd_room::before {
  content: "会場：";
}

.hcd_note {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
}

/* 21日の対象（原則卒業生向け）。赤い塗りは特別講演の札・時間の帯にも使っていて埋もれるので、
   赤い丸の「!」を頭に付けた濃い文字にする。
   「!」は文字にすると字形のせいで下に寄るので、場所のピンと同じく丸から図形で抜き、地の色を見せる */
.hcd_target {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--hcd_text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.hcd_target::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--hcd_red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20a10 10 0 1 0 0-20zM8.8 4.2h2.4l-.4 7.5H9.2zM10 13.2a1.3 1.3 0 1 0 0 2.6a1.3 1.3 0 1 0 0-2.6z'/%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 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 0 0 20a10 10 0 1 0 0-20zM8.8 4.2h2.4l-.4 7.5H9.2zM10 13.2a1.3 1.3 0 1 0 0 2.6a1.3 1.3 0 1 0 0-2.6z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 21日のお知らせ（キッチンカー）。特別講演とは別の情報なので、日程の枠の外に置く */
.hcd_notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 24px;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid var(--hcd_pink_deep);
}

.hcd_notice_label {
  padding: 1px 8px;
  border: 1.5px solid var(--hcd_red);
  color: var(--hcd_red);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.hcd_notice_text {
  font-size: 14px;
  line-height: 1.7;
}

/* ===== 講演 ===== */

.hcd_lecture {
  padding: 36px var(--hcd_side) 44px;
  background: var(--hcd_sky);
}

.hcd_lecture_label {
  display: inline-block;
  background: var(--hcd_red);
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  padding: 3px 12px;
  margin-bottom: 8px;
}

/* 横の「原則予約制」はラベルと同じ大きさにする（枠が無いので上下はラベルと同じ 3px） */
.hcd_lecture_label+.hcd_badge {
  padding: 3px 12px;
  background: #fff;   /* 水色の地では薄いピンクが沈むので白で塗る */
  font-size: 14px;
  vertical-align: top;
}

.hcd_lecture_title {
  font-family: "Kiwi Maru", sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--hcd_text);
}

.hcd_lecture_subtitle {
  font-size: 16px;
  margin-top: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hcd_red);
}

.hcd_lecturer {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
}

.hcd_lecturer_title {
  font-size: 12px;
}

.hcd_lecture_text {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.9;
}

/* ===== 原則予約制の印・予約ボタン ===== */

/* 白地に赤い枠だと、同じ形の予約ボタン（.hcd_btn_reserve）と見間違えるので、枠を付けずに薄いピンクで塗る。
   角はほかの札（特別講演・お知らせ）と揃えて丸めない */
.hcd_badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  color: var(--hcd_red);
  background: var(--hcd_pink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
}

/* 予約案内。ピンクの細い枠に、右上の角へパズルのピースを重ねる */
.hcd_reserve {
  position: relative;
  margin: 28px 0 0;
  padding: 18px 20px 16px;
  background: #fff;
  border: 1.5px solid var(--hcd_pink_deep);
  text-align: center;
}

.hcd_reserve::before {
  content: "";
  position: absolute;
  top: -18px;
  right: -12px;
  width: 40px;
  height: 40px;
  background: url("/visitor/img/hcd/piece_pink.svg") no-repeat center / contain;
  rotate: 20deg;
}

.hcd_reserve_text {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* 共通の .btn の形はそのまま、白地に赤の枠と文字。
   ホバーで赤の塗りに反転する（共通 .btn_red と同じ動き） */
.hcd_btn_reserve {
  margin: 14px auto 4px;
}

.hcd_btn_reserve a {
  background: #fff;
  border: 1.5px solid var(--hcd_red);
  color: var(--hcd_red);
  font-size: 15px;
}

.hcd_btn_reserve span,
.hcd_btn_reserve span::after {
  background: var(--hcd_red);
}

.hcd_btn_reserve a:hover {
  background: var(--hcd_red);
  color: #fff;
}


/* ===== 地図 ===== */

/* スマホ（767px 以下）だけの改行。共通の .sp_br はタブレットでも改行されるので、このページ用に持つ */
.hcd_sp_br {
  display: none;
}

/* 21日の地図とお知らせ（特別講演の後ろ）。
   すぐ上の特別講演と同じ左右の余白にして、画面の中央に置く
   （日付の丸の右にそろえると、特別講演の後ろでは右に寄って見える） */
.hcd_access {
  padding: 4px var(--hcd_side) 44px;
  background: var(--hcd_sky);
}

.hcd_map {
  margin: 20px auto 0;
  max-width: 560px;
}

.hcd_access .hcd_map {
  margin-top: 0;
}

.hcd_map_pic {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}

/* 押すと MAP検索を開く案内。地図の右下に重ねる。
   赤の塗りだと東1号館・東2号館の札と同じ見た目になり、スマホでは近くて紛れるので、
   白地に赤の枠と文字にする。ホバーで赤の塗りに反転する（下の .hcd_map_pic:hover） */
.hcd_map_more {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 12px;
  background: #fff;
  border: 1.5px solid var(--hcd_red);
  color: var(--hcd_red);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color .2s, color .2s;
}

/* 矢印は文字（›）だと上下の真ん中に来ないので、線で描く */
.hcd_map_more::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
}

/* 方位（南が上なので、北の矢印は下向き）。方位磁針らしく丸で囲む。
   置き場所は地図の左上の角に決めている（道や建物に掛かってもよい。白地で塗ってあるので読める） */
.hcd_map_compass {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--hcd_red);
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  color: var(--hcd_red);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.hcd_map_compass::before {
  content: "";
  width: 9px;
  height: 13px;
  background: var(--hcd_red);
  clip-path: polygon(50% 100%, 0 0, 50% 30%, 100% 0);
}

.hcd_map_pic:hover .hcd_map_more {
  background: var(--hcd_red);
  color: #fff;
}

.hcd_map_pic:focus-visible {
  outline: 2px solid var(--hcd_red);
  outline-offset: 3px;
}

.hcd_map img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid #fff;
}

/* 地図の上に重ねる建物名の札。位置は hcd.php の $hcd_maps の labels（札の中心を置く） */
/* 地図の上に重ねる四角（東本部）。位置と大きさは hcd.php の spots。
   中心を指定の位置に合わせ、灰色の道の上でも見えるようページの赤で塗る */
/* 地図の建物は絵の上で少し（約 1°）右に傾いているので、四角と札も同じだけ傾けて揃える */
.hcd_map_spot,
.hcd_map_label {
  rotate: 1deg;
}

.hcd_map_spot {
  position: absolute;
  translate: -50% -50%;
  background: var(--hcd_red);
  outline: 1.5px solid #fff;
}

.hcd_map_label {
  position: absolute;
  translate: -50% -50%;
  padding: 1px 6px;
  background: rgba(255, 255, 255, .85);
  color: var(--hcd_text);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}

/* 会場の建物は赤い札にする */
/* 四角（東本部）に添える札。四角の右上の角に札の左下の角を付け、四角に重ねない。
   ほかの小さな札より目立つよう、赤い枠と赤い太字にする */
.hcd_map_label_spot {
  translate: 2px calc(-100% - 2px);
  padding: 1px 7px;
  background: #fff;
  border: 1.5px solid var(--hcd_red);
  color: var(--hcd_red);
  font-size: 13px;
  font-weight: 700;
}

.hcd_map_label_main {
  padding: 3px 10px;
  background: var(--hcd_red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* 地図画像を置くまでの仮の枠 */
.hcd_map_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  border: 2px dashed var(--hcd_red);
  background: rgba(255, 255, 255, .6);
  color: var(--hcd_red);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.hcd_map_empty small {
  font-size: 12px;
  font-weight: 400;
}

/* 11/22 は赤地。下辺も上辺と同じなだらかな波にする（下に続くページの地色 #f4f5f5 で描く） */
.hcd_day_red {
  padding-bottom: 92px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 26C200 14 400 14 600 26S1000 38 1200 26V44H0Z' fill='%23f4f5f5'/%3E%3Cpath d='M0 36C200 36 400 10 600 10S1000 36 1200 36' fill='none' stroke='%23eca29d' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 100% / 1200px 44px, var(--hcd_red);
  color: #fff;
}

.hcd_day_red .hcd_date {
  background: var(--hcd_red_dark);
}

.hcd_day_red .hcd_lecture_label {
  background: #fff;
  color: var(--hcd_red);
}

.hcd_day_red .hcd_lecture_title {
  color: #fff;
}

/* 共通CSSの p に黒が直接付いているので、継承に頼らず白を指定する */
.hcd_day_red .hcd_lecture_subtitle {
  color: #fff;
  border-bottom-color: #fff;
}

.hcd_day_red .hcd_place {
  color: #fff;
}

/* 22日の主催・紹介文・時間の帯 */
.hcd_circle {
  margin-top: 10px;
  font-size: 14px;
}

/* 主催の下の場所。詰まって見えたので上を空ける */
.hcd_circle+.hcd_place {
  margin-top: 18px;
}

/* 22日の時間（2回開催。頭に①②）。表にせず1行に並べる。狭いと折り返す */
.hcd_times {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hcd_day_text {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
}

.hcd_day_red .hcd_circle,
.hcd_day_red .hcd_day_text,
.hcd_day_red .hcd_times {
  color: #fff;
}

/* 赤地では枠が埋もれるので、時間の帯を濃い赤にして白い枠で囲む */
.hcd_day_red .hcd_schedule>div {
  border-color: #fff;
}

.hcd_day_red .hcd_schedule dt {
  background: var(--hcd_red_dark);
}

/* 帯の中は白地なので、赤地の白文字を継がせない */
.hcd_day_red .hcd_schedule dd {
  color: var(--hcd_text);
}

/* 企画詳細へのボタン。赤地なので白の枠と文字、ホバーで白の塗りに反転。
   本文の列の外（.hcd_day_red の直下）に置き、1行使って画面の中央に出す */
.hcd_btn_detail {
  flex-basis: 100%;
  align-self: stretch;
  margin: 6px 0 0;
}

.hcd_btn_detail a {
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 15px;
}

.hcd_btn_detail span,
.hcd_btn_detail span::after {
  background: #fff;
}

.hcd_btn_detail a:hover {
  background: #fff;
  color: var(--hcd_red);
}

/* 2つのボタンは幅を揃える（長いほうの幅に合わせる） */
.hcd_links {
  display: grid;
  justify-content: center;
  max-width: 1000px;
  margin: 30px auto 0;
}

.hcd_links .btn a {
  display: block;
}

/* 共通の .btn_red は中身が青（--themeocean）なので、このページの赤に合わせる */
.hcd_links .btn_red a {
  color: var(--hcd_red);
  border-color: var(--hcd_red);
}

.hcd_links .btn_red span,
.hcd_links .btn_red span::after {
  background: var(--hcd_red);
}

.hcd_links .btn_red a:hover {
  background: var(--hcd_red);
  color: #fff;
}

/* ===== 賛助のお願い（21日の最後） =====
   背景は白のまま。直後の22日の波（白で描いている）とつなげるため */

.hcd_support {
  --hcd_side: max(5%, calc((100% - 1000px) / 2));
  padding: 16px var(--hcd_side) 56px;
  background: #fff;
  color: var(--hcd_text);
}

.hcd_support_inner {
  position: relative;
  padding: 36px 40px 32px;
  background: var(--hcd_pink);
  border: 1.5px solid var(--hcd_pink_deep);
}

/* 右上の角に赤いピース */
.hcd_support_inner::before {
  content: "";
  position: absolute;
  top: -20px;
  right: 28px;
  width: 52px;
  height: 52px;
  background: url("/visitor/img/hcd/piece3_red.svg") no-repeat center / contain;
  rotate: -15deg;
}

.hcd_support_title {
  font-family: "Kiwi Maru", sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--hcd_text);
}

.hcd_support_lead {
  margin-top: 14px;
  font-size: 15px;
  line-height: 2;
}

.hcd_support_info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0 8px;
}

/* 見出しの赤い四角は幅を一番長い「お問い合わせ」に合わせて揃える。
   高さは行に合わせて伸ばし（右の文が折り返す「お問い合わせ」だけ縦に長くなる）、
   文字は上下中央に置く */
.hcd_support_info>div {
  display: flex;
  background: #fff;
}

.hcd_support_info dt {
  flex: 0 0 8em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  background: var(--hcd_red);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.hcd_support_info dd {
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all;
}

/* 768px 以上で横いっぱいに広げると、右の白い欄が文字の少なさに比べて長すぎるので、
   表の幅は一番長い行（お問い合わせ）に合わせ、ほかの行もその幅に揃える */
@media screen and (min-width: 768px) {
  .hcd_support_info {
    width: fit-content;
    max-width: 100%;
  }
}

/* お問い合わせのメールアドレス。PC では「個人賛助担当（…）」と1行に並べる。
   スマホでは括弧ごとだと入りきらず「（」や「）」だけが別の行に残るので、
   括弧を外してアドレスを次の行に置く（下のメディアクエリ） */
.hcd_mail {
  display: inline;
}

/* ===== セクションのあしらい ===== */

/* 21日・22日の角のパズルピース。中身より後ろに置く */
.hcd_day {
  position: relative;
  overflow: hidden;
}

.hcd_day>*:not(.hcd_deco) {
  position: relative;
  z-index: 1;
}

.hcd_deco {
  position: absolute;
  z-index: 0;
  opacity: .9;
  pointer-events: none;
}

.hcd_deco_21 {
  top: 24px;
  right: 5%;
  width: 64px;
  rotate: 15deg;
}

/* 下辺の波に掛からない高さに置く */
.hcd_deco_22 {
  bottom: 72px;
  right: 6%;
  width: 84px;
  rotate: -20deg;
}

/* 特別講演の左上・右下の L 字の囲み線（パンフレットの細いピンクの線） */
.hcd_lecture {
  position: relative;
}

.hcd_lecture::before,
.hcd_lecture_main::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  border: 0 solid var(--hcd_pink_deep);
  pointer-events: none;
}

.hcd_lecture::before {
  top: 18px;
  left: calc(var(--hcd_side) - 16px);
  border-top-width: 1.5px;
  border-left-width: 1.5px;
}

/* 右下は section ではなく本文（.hcd_lecture_main）の右下に付ける。予約案内の枠の右下と並んで見えないように */
.hcd_lecture_main {
  position: relative;
}

.hcd_lecture_main::after {
  bottom: -14px;
  right: -16px;
  border-bottom-width: 1.5px;
  border-right-width: 1.5px;
}

/* 22日の上辺を波の形にし、ピンクの波線を添える。
   白い波（直前の特別講演の背景色）を上に重ねて、赤の縁を波打たせる。
   ピンクの線は縁と平行にせず、山と谷を逆にして縁と交わらせる（下辺の波も同じ） */
.hcd_day_red {
  padding-top: 76px;
}

.hcd_day_red::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  /* 波長 1200px・振れ幅 12px のなだらかな波（1枚の中で山と谷が1つずつ） */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 44' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V18C1000 30 800 30 600 18S200 6 0 18Z' fill='%23fff'/%3E%3Cpath d='M0 8C200 8 400 34 600 34S1000 8 1200 8' fill='none' stroke='%23eca29d' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 0 / 1200px 44px;
}

/* 22日は「関連企画」。見出しを1行目いっぱいに置き、日付の丸と内容はその下に並べる */
.hcd_day_red {
  flex-wrap: wrap;
}

.hcd_related {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.hcd_related_title {
  padding: 4px 18px;
  border: 1.5px solid #fff;
  font-family: "Kiwi Maru", sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .1em;
}

.hcd_related_text {
  font-size: 14px;
}

/* 22日の左下の市松模様（ファーストビューと同じ）。下辺の波には掛けない */
.hcd_day_red::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 72px;
  height: 72px;
  background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 48px 48px;
  opacity: .9;
}

/* ===== レスポンシブ =====
   ここまでがタブレット幅（768〜1023px）の見た目。
   PC（1024px〜）とスマホ（〜767px）の差分を下に書く。
   1024px は共通CSS（common_general.css）の PC 切り替えと同じ */

/* ----- タブレット（768〜1023px。PC の画面を半分にしたときもここ） -----
   写真が横いっぱいに大きくなり、1枚目の写真の右上に赤いピースが乗ってしまうので、
   1枚目の写真の下・2枚目の写真の左の空きに移す */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .hcd_piece_1 {
    top: 50%;
    left: 22%;
  }
}

/* ----- PC ----- */
@media screen and (min-width: 1024px) {

  /* ファーストビューは 写真｜タイトル の2列 */
  .hcd_hero {
    --hcd_photo_w: .78;
    --hcd_hero_side: max(5%, calc((100% - 1100px) / 2));
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: 48px;
    padding: 70px var(--hcd_hero_side) 80px;
  }

  /* 1024px 付近でもタイトルと説明が途中で折り返さないよう、余白と文字は幅に合わせて縮める */
  .hcd_title {
    padding: 64px clamp(20px, 2.8vw, 36px);
  }

  /* きらめきはカードのまわりに置く */
  .hcd_sparkle_1 {
    --hcd_sparkle_size: 36px;
    top: 9%;
    left: 56%;
  }

  /* 右端の縦書きに掛からない位置に置く */
  .hcd_sparkle_2 {
    --hcd_sparkle_size: 32px;
    top: auto;
    bottom: 26%;
    right: 3%;
  }

  .hcd_piece_3 {
    top: 4%;
    right: 8%;
  }

  .hcd_sparkle_3 {
    --hcd_sparkle_size: 17px;
    bottom: 9%;
    left: 74%;
  }

  .hcd_vertical {
    display: block;
    position: absolute;
    top: 8%;
    right: 1.2%;
    writing-mode: vertical-rl;
    font-family: "Shippori Mincho", serif;
    font-size: 17px;
    letter-spacing: .2em;
    color: rgba(180, 42, 32, .45);
    opacity: 0;
    animation: hcd_fade_in 1.6s ease-out 2.4s forwards;
  }

  /* 後ろの .hcd_day の padding に負けないよう詳細度を上げる */
  .hcd_day.hcd_day_red {
    padding-top: 88px;
    padding-bottom: 104px;
  }


  .hcd_title {
    margin: 0;
  }

  .hcd_title_main {
    font-size: clamp(30px, 3.1vw, 40px);
  }

  .hcd_title_lead {
    font-size: clamp(14px, 1.25vw, 16px);
  }

  .hcd_day {
    gap: 48px;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hcd_access {
    padding-bottom: 60px;
  }

  .hcd_date {
    width: 150px;
    height: 150px;
  }

  .hcd_date_num {
    font-size: 40px;
  }

  .hcd_date_week {
    font-size: 20px;
  }

  .hcd_schedule dt,
  .hcd_schedule dd {
    font-size: 17px;
    padding: 8px 16px;
  }

  /* 特別講演は 講師情報｜本文 の2列 */
  .hcd_lecture {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 48px;
    padding-top: 48px;
    padding-bottom: 60px;
  }

  .hcd_lecture_title {
    font-size: 30px;
  }

  .hcd_lecture_text {
    margin-top: 0;
    font-size: 15px;
    line-height: 2;
  }

  /* 本文は左の講師情報の下端にそろえる */
  .hcd_lecture_main {
    align-self: end;
  }

  .hcd_reserve {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 640px);
    margin-top: 0;
  }

  .hcd_day_red .hcd_lecture_title {
    font-size: 34px;
  }

  .hcd_links {
    margin-top: 48px;
  }

  /* PC は小さい文字が読みにくいと言われたので、13px 以下を無くし、本文は 16px にする */
  .hcd_intro p,
  .hcd_lecture_text,
  .hcd_support_lead,
  .hcd_target {
    font-size: 16px;
  }

  .hcd_day_text,
  .hcd_circle,
  .hcd_related_text,
  .hcd_reserve_text,
  .hcd_notice_text,
  .hcd_support_info dt,
  .hcd_support_info dd {
    font-size: 15px;
  }

  .hcd_room,
  .hcd_note,
  .hcd_lecturer_title,
  .hcd_badge,
  .hcd_map_more {
    font-size: 14px;
  }

  .hcd_notice_label,
  .hcd_map_label {
    font-size: 13px;
  }

  .hcd_map_label_main {
    font-size: 15px;
  }
}

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

  .hcd_sp_br {
    display: inline;
  }

  .hcd_mail {
    display: block;
  }

  .hcd_mail_paren {
    display: none;
  }

  /* 5% だと左右の余白が狭く見えるので広げる */
  .hcd_day,
  .hcd_lecture,
  .hcd_access,
  .hcd_support {
    --hcd_side: 24px;
  }

  /* 22日は市松模様が地図に重ならないよう、下を空ける */
  .hcd_day.hcd_day_red {
    padding-bottom: 100px;
  }

  .hcd_support_inner {
    padding: 30px 18px 26px;
  }

  .hcd_support_title {
    font-size: 21px;
  }

  /* 行間は 2 だとほかの文より広く見えるので詰める */
  .hcd_support_lead {
    font-size: 14px;
    line-height: 1.8;
  }

  /* 2行になる印（一般の方はご参加いただけません）の行間を詰める */
  .hcd_badge {
    line-height: 1.4;
    padding: 3px 8px;
  }

  /* 説明文の左右は下の水色のブロックと同じ 24px にする */
  .hcd_intro {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hcd_support_info dt {
    font-size: 13px;
  }

  .hcd_support_info dd {
    font-size: 13px;
  }

  .hcd_intro p {
    font-size: 14px;
  }

  /* 地図の札が建物を隠しすぎないよう小さくする（main は後に書いて上書きする） */
  .hcd_map_label {
    font-size: 10px;
  }

  /* 四角から少し離す */
  .hcd_map_label_spot {
    translate: 1px calc(-100% - 4px);
    padding: 0 5px;
    font-size: 11px;
  }

  .hcd_map_label_main {
    padding: 2px 8px;
    font-size: 12px;
  }

  .hcd_deco_21 {
    top: 20px;
    width: 48px;
  }

  /* 下に置くと地図と重なるので、日付の丸の右の空きに移す */
  .hcd_deco_22 {
    top: 64px;
    bottom: auto;
    width: 56px;
  }

  .hcd_day_red::after {
    width: 48px;
    height: 48px;
    background-size: 32px 32px;
  }

  .hcd_lecture::before {
    left: 6px;
  }

  .hcd_lecture_main::after {
    right: -18px;
  }

  /* 予約案内の右上のピースが、すぐ上の本文の右下の L 字の線に付いて見えるので、間を空ける */
  .hcd_reserve {
    margin-top: 48px;
  }

  /* 1枚目の写真（東2号館）の建物に掛からないよう、写真の右上の角（空と木のあたり）に置く */
  .hcd_piece_1 {
    --hcd_piece_size: 52px;
    top: 3%;
    left: 58%;
  }

  /* 写真とカードの間に置く2つ（左のピース・きらめき）は、ファーストビューの高さの % で置くと
     幅が狭いほどずれる（写真は幅に比例して低くなり、カードは文字の折り返しで高くなる）。
     350px 以下できらめきがカードに掛かったので、写真の高さ（幅から決まる）から位置を出す。
     100cqw は写真エリアの幅（.hcd_hero の左右の余白の内側） */
  .hcd_hero {
    container-type: inline-size;
    --hcd_photos_h: calc(100cqw * .75 * var(--hcd_photo_w) * (2 - var(--hcd_overlap)));
  }

  /* 1枚目の写真の下端（上の余白 40px＋写真1枚の高さ）から少し下 */
  .hcd_piece_2 {
    --hcd_piece_size: 36px;
    top: calc(40px + 100cqw * .75 * var(--hcd_photo_w) + 24px);
  }

  /* カードの上端（上の余白 40px＋写真エリア＋カードの上の余白 30px）の 6px 上に下端を置く */
  .hcd_sparkle_1 {
    --hcd_sparkle_size: 28px;
    top: calc(40px + var(--hcd_photos_h) + 30px - 28px - 6px);
  }

  .hcd_piece_3 {
    --hcd_piece_size: 42px;
  }

  /* 右下の市松模様と重ならないよう、その左に置く */
  .hcd_piece_4 {
    --hcd_piece_size: 32px;
    bottom: 3%;
    right: 18%;
  }

  .hcd_hero {
    --hcd_photo_w: .72;
  }

  /* 下は左下の市松模様（48px＋白い縁 6px）が説明文に掛からない分を空ける */
  .hcd_title {
    padding: 40px 16px 64px;
  }

  .hcd_title::before {
    --hcd_check_size: 48px;
  }

  .hcd_photo {
    border-width: 4px;
  }

  .hcd_title_main {
    font-size: 28px;
  }

  .hcd_title_sub {
    font-size: 16px;
  }

  /* 1行目（24文字）が「開催。」の途中で折り返さないよう、画面幅に合わせて縮める。
     80px はカードの外と内の左右の余白の合計 */
  .hcd_title_lead {
    font-size: min(13px, calc((100vw - 80px) / 24.5));
  }

  .hcd_day {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  /* 縦並びでも内容は横幅いっぱいに（無いと中身の幅に縮み、地図の枠が細くなる） */
  .hcd_day_body {
    align-self: stretch;
  }

  .hcd_date {
    width: 100px;
    height: 100px;
  }

  .hcd_date_num {
    font-size: 26px;
  }

  .hcd_date_week {
    font-size: 14px;
    padding-bottom: 10px;
  }

  .hcd_lecture_title {
    font-size: 21px;
  }
}

/* 動きを減らす設定の人にはアニメーションなしで出す */
@media (prefers-reduced-motion: reduce) {

  .hcd_photo,
  .hcd_piece,
  .hcd_sparkle,
  .hcd_vertical,
  .hcd_title>*,
  .hcd_title::before {
    animation: none;
    opacity: 1;
  }
}

/* 共通CSS（common_general.css）の p / h2 の既定スタイルを打ち消す */
.hcd_title p,
.hcd_date p {
  text-align: center;
}

.hcd_lecture_title,
.hcd_support_title {
  margin: 0;
  padding: 0;
  border: none;
  display: block;
  width: auto;
  text-align: left;
}

.hcd_lecture_title::before,
.hcd_lecture_title::after,
.hcd_support_title::before,
.hcd_support_title::after {
  content: none;
  display: none;
}
/* タイトルの下に置いた場所は、上に余白を取る */
.hcd_lecture_subtitle+.hcd_place {
  margin-top: 14px;
  margin-bottom: 0;
}

/* ===== 共通ヘッダー・フッターをこのページだけ赤にする =====
   共通CSSは触らず、ここで上書きする */

/* スクロールバーのつまみ（共通CSSは青） */
::-webkit-scrollbar-thumb {
  background: var(--hcd_red);
}

/* 右上のメニューボタン */
.hamburger-fade__wrapper {
  background-color: var(--hcd_red);
}

/* フッター。上のピースの列は、共通の footer_decoration.svg の色を
   赤系に置き換えた img/hcd/footer_decoration_red.svg に差し替える
   （#324e5a→#3b3436 / #0c5f81→#d4675e / #c8e4e9→#fbe9e6 / #8cbbb8→#eca29d）。
   地は赤一面だと血の色のように見えて不快だと言われたので、赤みを少し帯びた
   墨色（--hcd_footer）にし、赤はピースにだけ残す。
   ピースの列の下端は地の色とつながるので、SVG の一番濃い色も同じ色にする。
   SVG のグラデーションは下端を地と同じ色から始め、墨色→#d4675e→#fbe9e6 を OKLab で
   折れ目なくつないだ21段の止め点にしてある（両端はゆっくり変わるので境目は見えない） */
footer .piece img {
  content: url("/visitor/img/hcd/footer_decoration_red.svg");
}

.footer_wrapper {
  background-color: var(--hcd_footer);
}

/* ボタンとフッターの間を詰める。共通の .piece はスマホで上に幅の 10% の余白を取る。
   ただしスマホのピース（.piece_sp）は scale: 2 で拡大していて、絵の高さ
   （幅の 63.33/733.71 ≒ 8.6%）の半分だけ上にはみ出す。0 にすると上が切れるので、
   はみ出す分の 4.4% だけ残す。スマホだけ上書きする */
@media screen and (max-width: 767px) {
  footer .piece {
    padding-top: 4.4%;
  }
}

/* PC（768px 以上）は共通CSS（common_footer.css）の余白のまま。ピースを 1.15 倍にしていて、
   上にはみ出す分を共通CSSが空けている。0 にすると上が切れる */

/* 共通CSSは PC で main の下に 150px 空ける。スマホ（45px）と同じくらいにする */
@media screen and (min-width: 1024px) {
  main {
    margin-bottom: 40px;
  }
}

/* PAGE TOP の丸は hcd.php で img/hcd/tothetop_red.svg（共通の tothetop.svg の赤版）に差し替えている */