/* SharePic の思いを伝えるヒーロー。トップと /collect のヘッダー直下に置く。
   幅は下のカードとそろえ、イラストを全面に敷いて左下に大きな白い見出しを重ねる。
   暗くするのは文字の周りだけにして、イラストは明るいまま見せる。
   スマホでは高さを抑え、アップロードの枠が下がりすぎないようにする（C-1）。 */

.page-upload .concept-note {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 396px;
  margin: 0 0 1.5rem;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: var(--radius);
  background: #1c2b3a;
  /* .card の背景ぼかしがあると、後ろに敷いたイラストが描かれなくなる（Chromium）ので外す */
  backdrop-filter: none;
  box-shadow: var(--shadow);
  color: #fff;
}
.page-upload .concept-note::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 22, 36, .62) 0%, rgba(12, 22, 36, .34) 34%, rgba(12, 22, 36, 0) 62%),
    linear-gradient(0deg, rgba(12, 22, 36, .55) 0%, rgba(12, 22, 36, 0) 50%);
}
.concept-note-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.concept-note-media picture { display: block; width: 100%; height: 100%; }
.concept-note-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 27%;
}
.concept-note-inner {
  width: 100%;
  padding: 0 2.4rem 2.4rem;
}
.concept-note-copy { max-width: 36rem; }
.concept-note-label {
  margin-bottom: .9rem;
  color: rgba(255, 255, 255, .88);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .28em;
}
.concept-note h2 {
  color: #fff;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: .02em;
  text-shadow: 0 4px 28px rgba(0, 0, 0, .35);
}
.concept-note h2 span { display: block; }
.concept-note-text {
  max-width: 30rem;
  margin-top: 1.2rem;
  color: rgba(255, 255, 255, .92);
  font-size: 1rem;
  line-height: 1.95;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.concept-note-footer { margin-top: 1.6rem; }
.concept-note-footer a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1.3rem;
  border: 1.5px solid #fff;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
}
.concept-note-footer a:hover { background: rgba(255, 255, 255, .14); }
.concept-note-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .concept-note-footer a { transition: none; }
}
@media (max-width: 640px) {
  .page-upload .concept-note { min-height: 225px; margin-bottom: 1rem; }
  .page-upload .concept-note::before {
    background: linear-gradient(0deg, rgba(12, 22, 36, .7) 0%, rgba(12, 22, 36, .3) 50%, rgba(12, 22, 36, 0) 80%);
  }
  .concept-note-inner { padding: 0 1rem 1.15rem; }
  .concept-note-label { display: none; }
  .concept-note h2 { font-size: 1.35rem; line-height: 1.45; }
  .concept-note-text { display: none; }
  .concept-note-footer { margin-top: .75rem; }
  .concept-note-footer a { padding: .45rem 1rem; font-size: .82rem; }
}
/* 右に広告列があるときは、広告の画像の上端をヒーローの上端にそろえる。
   「広告」ラベルのぶん（文字 .7rem × 行の高さ 1.7 ＋ 下の余白 .3rem。style.css の .ad-slot-label）だけ
   広告の枠を上へずらす。ずらしたラベルがヘッダーにかからないよう、上の余白を少し足す。
   広告列が本文の下へ回る幅（style.css の 1060px・1140px）では付けない */
@media (min-width: 1061px) {
  .has-side-160.page-upload .side-ad .ad-slot:first-child { margin-top: calc(-1 * (.7rem * 1.7 + .3rem)); }
  .has-side-160.page-upload .main-content { padding-top: 1.75rem; }
}
@media (min-width: 1141px) {
  .has-side-300.page-upload .side-ad .ad-slot:first-child { margin-top: calc(-1 * (.7rem * 1.7 + .3rem)); }
  .has-side-300.page-upload .main-content { padding-top: 1.75rem; }
}