@charset "UTF-8";
/*!
 * WordPress 固有の調整
 * ヨシケイひろば / yoshikei-hiroba
 *
 * デザイン案には無い、WordPress 側で必要になる分だけをここに置きます。
 * デザイン由来のスタイル（common.css）は触りません。
 */

/* スクリーンリーダー用テキスト */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  width: auto;
  height: auto;
  clip: auto;
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-bg-surface);
  border-radius: var(--r-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .16);
}

/* 管理バーが出ているときのヘッダー位置 */
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* 本文（固定ページ・おしらせ）の基本 */
.entry-content > * + * { margin-top: var(--sp-4); }
.entry-content h2 {
  font-size: 22px;
  font-weight: 900;
  margin-top: var(--sp-7);
}
.entry-content h3 {
  font-size: 19px;
  font-weight: 700;
  margin-top: var(--sp-6);
}
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: var(--sp-2); }
.entry-content a {
  color: var(--c-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content img { border-radius: var(--r-md); }
.entry-content table {
  width: 100%;
  border-collapse: collapse;
}
.entry-content th,
.entry-content td {
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  text-align: left;
}
.entry-content blockquote {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-subtle);
  border-left: 4px solid var(--c-brand-l);
  border-radius: var(--r-sm);
}

/* 戻るリンク */
.back-link { margin-bottom: var(--sp-4); }
.back-link a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.back-link a:hover { color: var(--c-brand); }

/* ページネーション */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--sp-3);
  background: var(--c-bg-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}

/* -----------------------------------
   フォームの実装で必要になる追加分
   デザイン案は静止画のため、エラー表示や
   実際のチェックボックスの状態がありません。
   ----------------------------------- */

/* 入力エラー */
.field__error {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--c-brand-d);
}
.field__error::before {
  content: "！";
  margin-right: .3em;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--c-brand);
  background: var(--c-brand-tint);
}

/* エラーの案内ボックス（.info の色違い） */
.info--error {
  background: var(--c-brand-tint);
  border-color: var(--c-brand-l);
}
.info--error b,
.info--error .ico { color: var(--c-brand-d); }

/* チェックボックス（実際の input を使う） */
.check { cursor: pointer; }
.check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.check input[type="checkbox"]:checked + .check__box {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.check input[type="checkbox"]:checked + .check__box::after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  margin: 2px auto 0;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check input[type="checkbox"]:focus-visible + .check__box {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* ファイル選択 */
.field input[type="file"] {
  width: 100%;
  padding: var(--sp-3);
  background: var(--c-bg-subtle);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
}

/* button 要素をリンク版のボタンと同じ見た目にする */
button.btn {
  border: 0;
  cursor: pointer;
  font-weight: 700;
}

/* タブをリンクで実装するため、button と同じ見た目を当てる */
.tabs a {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  padding: 9px var(--sp-5);
  border: 1px solid var(--c-line-strong);
  background: #fff;
  border-radius: var(--r-pill);
  white-space: nowrap;
  color: var(--c-text-muted);
}
.tabs a.is-on {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  font-weight: 700;
}

/* 部門は管理画面から自由に追加できるため、修飾クラスなしでも成立させる */
.part {
  background: var(--c-bg-subtle);
  color: var(--c-text-muted);
  border: 1px solid var(--c-line);
}

/* 条件分岐で隠れている項目 */
.field[hidden] { display: none; }

/* ラジオボタンもチェックボックスと同じ見た目にそろえる */
.check input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.check input[type="radio"] + .check__box { border-radius: 50%; }
.check input[type="radio"]:checked + .check__box {
  background: var(--c-brand);
  border-color: var(--c-brand);
}
.check input[type="radio"]:checked + .check__box::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 5px auto 0;
  background: #fff;
  border-radius: 50%;
}

/* いいねを押せない状態（投票期間外・ご自身の投稿・未ログイン） */
.likebtn.is-static {
  cursor: default;
  opacity: .75;
}
.likebtn__note {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-caption);
  color: var(--c-brand-d);
}
.likebtn:disabled { opacity: .6; }

/* いいねの通知 */
.likenews {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-brand-tint);
  border: 1px solid var(--c-pink-d);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-small);
}
.likenews .ico { color: var(--c-brand); width: 22px; height: 22px; flex: none; }

/* アンケートの集計グラフ */
.chart__row {
  display: grid;
  grid-template-columns: 140px 1fr 120px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-small);
}
.chart__bar {
  display: block;
  height: 14px;
  background: var(--c-bg-subtle);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.chart__bar > span {
  display: block;
  height: 100%;
  background: var(--c-brand);
  border-radius: var(--r-pill);
  transition: width .4s ease;
}
.chart__value {
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  text-align: right;
  font-feature-settings: "tnum";
}
@media (max-width: 600px) {
  .chart__row { grid-template-columns: 1fr; gap: 4px; }
  .chart__value { text-align: left; }
}

/* クイズ結果：設問と回答 */
.qa__row {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.qa__row:last-child { border-bottom: 0; }
.qa__q {
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.qa__a {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  /* 「1問中0問が正解でした。」と同じ濃さにそろえます（#232） */
  color: var(--c-text);
  line-height: 1.9;
}
/* 「正解：」を「あなたのご回答：」と頭ぞろえにします（#233・#234） */
.qa__lines { display: block; }
.qa__line { display: block; }
.qa__mark {
  display: inline-block;
  flex: none;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
}
/* 正解と不正解で、背景色を反対色にします（#232） */
.qa__mark.is-hit {
  background: var(--c-brand-tint);
  color: var(--c-brand-d);
}
.qa__mark.is-miss {
  background: var(--c-blue-tint);
  color: var(--c-blue);
}

/* 正答率は「正解と解説」と同じ位置にそろえます（#272・#289） */
.rate-block {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}

/* 設問ごとの正答率（#235・#236） */
.rate-q {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.rate-q:last-child { border-bottom: 0; }
.rate-q__title {
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.chart__label--sub { font-weight: 500; }
.rate-attr { margin-top: var(--sp-2); }
.rate-attr__head {
  cursor: pointer;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--c-text-muted);
  list-style: none;
}
.rate-attr__head::-webkit-details-marker { display: none; }
.rate-attr__head::before {
  content: "▶";
  display: inline-block;
  margin-right: 6px;
  font-size: 9px;
  transition: transform .2s ease;
}
.rate-attr[open] .rate-attr__head::before { transform: rotate(90deg); }

/* 応募要項・正解の一覧：見出し列が狭すぎて折り返すのを防ぐ */
.spec__row { grid-template-columns: minmax(108px, auto) 1fr; }
.spec dt { word-break: keep-all; }
@media (max-width: 600px) {
  .spec__row { grid-template-columns: 1fr; gap: 2px; }
}

/* フッターの著作権表記がはみ出すのを防ぐ */
.footer__copy {
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

/* 注意書きを入力欄の横に出す（#27） */
.field--note-side {
  display: grid;
  /* 中身が大きくても列が広がらないよう minmax(0, …) で受けます */
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: var(--sp-2) var(--sp-4);
  align-items: start;
}
.field--note-side > .field__label,
.field--note-side > .field__image { grid-column: 1 / -1; min-width: 0; }
.field--note-side > .field__body { grid-column: 1; min-width: 0; }
.field__note--side {
  grid-column: 2;
  margin-top: 10px;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--c-line);
}
@media (max-width: 700px) {
  .field--note-side { grid-template-columns: 1fr; }
  .field--note-side > .field__body,
  .field__note--side { grid-column: 1; }
  .field__note--side {
    margin-top: var(--sp-2);
    padding-left: 0;
    border-left: 0;
  }
}

/* 設問の画像（#72） */
.field__image {
  margin-bottom: var(--sp-3);
}
.field__image img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* マイページをハンバーガーメニューに集約したため、PCでもボタンを出す（#22） */
.hamburger { display: flex; }
.drawer { top: var(--header-h); }

/* 会員登録のご案内ポップアップ（#57） */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.modal[hidden] { display: none; }
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  background: var(--c-bg-surface);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  text-align: center;
}
.modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--c-text-subtle);
  cursor: pointer;
}
.modal__mark {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-3);
  color: var(--c-brand);
}
.modal__mark svg { width: 44px; height: auto; }
.modal__title {
  font-size: 19px;
  font-weight: 900;
  margin-bottom: var(--sp-3);
}
.modal__lead {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: 1.9;
}

/* -----------------------------------
   トップページ（バナー構成）
   ----------------------------------- */

/* カルーセル */
.carousel { overflow: visible; }
.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  border-radius: var(--r-lg);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
  padding: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
}

/* 手書き風のひとこと */
.handwrite {
  margin-top: var(--sp-5);
  padding-left: var(--sp-6);
  color: var(--c-brand);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.handwrite::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: var(--sp-2);
  background: var(--c-brand-l);
  vertical-align: middle;
}

/* イベントカード（サムネイル3枚つき） */
.erow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  background: var(--c-bg-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 44px -34px rgba(51, 51, 51, .4);
  text-decoration: none;
  color: inherit;
  transition: .18s;
}
.erow:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 52px -32px rgba(51, 51, 51, .45);
}
.erow__title {
  font-size: 21px;
  font-weight: 900;
  line-height: 1.45;
  margin: var(--sp-3) 0 var(--sp-2);
}
.erow__text {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  line-height: 1.85;
}
/* カード下部のリンク表示。カード全体が押せることを示します。 */
.erow__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-brand);
}
.erow__link .ico { width: 15px; height: 15px; }
.erow:hover .erow__link { text-decoration: underline; }

/* 投稿サムネイル3枚 */
.thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.thumbs__item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-pink-l);
}
.thumbs__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .carousel__nav--prev { left: 4px; }
  .carousel__nav--next { right: 4px; }
  .handwrite { display: none; }


}

/* FC管理画面 */
.nums--3 { grid-template-columns: repeat(3, 1fr); }
.nums--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) {
  .nums--3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .nums--3 b { font-size: 22px; }
  .nums--3 span { font-size: 10px; }
  .nums--4 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .nums--4 b { font-size: 22px; }
  .nums--4 span { font-size: 10px; }
}

/* -----------------------------------
   あしらいの色
   共通アイコン化した際に色が落ちていたため、
   デザイン案と同じピンクに戻しています。
   ----------------------------------- */
.deco { color: var(--c-deco); }
.deco--squiggle,
.deco--curve,
.deco--arc { color: var(--c-deco-stroke); }
.deco--dots-l,
.deco--dots-r { opacity: .85; }
.deco svg { width: 100%; height: auto; }

/* 線のあしらいは塗りではなく線で描く */
.deco--squiggle svg,
.deco--curve svg,
.deco--arc2 svg,
.deco--underline2 svg,
.deco--arc svg,
.deco--underline svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}

/* ロゴのハートと見出しアイコンはブランド色 */
.logo__mark { color: var(--c-brand); }

/* -----------------------------------
   見出しの大きさの調整
   PC・タブレット・スマホで段階的に変えています。
   ----------------------------------- */
.catch { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.36; }
.page-title { font-size: clamp(24px, 3vw, 34px); line-height: 1.4; }
.feature__title { font-size: clamp(18px, 1.7vw, 22px); }
.erow__title { font-size: clamp(18px, 1.7vw, 21px); }
.sec-title { font-size: clamp(19px, 2vw, 24px); }
.sec-head h2 { font-size: clamp(18px, 1.8vw, 22px); }

/* スマホでは折り返しの位置を保つ */
@media (max-width: 600px) {
  .catch { font-size: 26px; line-height: 1.45; }
  .catch .nw { display: inline; }
  .page-title { font-size: 22px; }
  .hero__lead,
  .page-lead { font-size: 14px; }
  .eyebrow { margin-top: var(--sp-4); }
}

/* トップのあしらい */
.deco--ribbon {
  left: 8%;
  bottom: 8%;
  width: 120px;
  opacity: .55;
  color: var(--c-pink-d);
}
@media (max-width: 900px) {
  .deco--ribbon,
  .deco--dots-l { display: none; }
}

/* -----------------------------------
   トップのヒーロー調整
   カードが大きくなりすぎないよう上限を設け、
   キャッチコピーを主役にしています。
   ----------------------------------- */
.hero--split { padding: var(--sp-8) 0; }
.hero__grid { align-items: center; gap: var(--sp-8); }

/* キャッチコピー */
.catch { font-size: clamp(28px, 3.6vw, 56px); line-height: 1.34; }
.hero__lede .eyebrow { font-size: 15px; }
.hero__lede .hero__lead { font-size: 15px; }

/* 主役カードの写真は横長に */
.feature__thumb { aspect-ratio: 16 / 10; }
.feature__body { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.feature__title { font-size: clamp(17px, 1.4vw, 20px); margin: var(--sp-3) 0 var(--sp-2); }

/* 手書きのひとことは、カードの左下に添える */
.handwrite {
  position: absolute;
  left: -170px;
  bottom: -18px;
  width: 190px;
  margin: 0;
  padding: 0;
  text-align: left;
}
@media (max-width: 1180px) {
  .handwrite { position: static; width: auto; margin-top: var(--sp-5); }
}

/* -----------------------------------
   あしらいを増やす
   ----------------------------------- */
.deco--dots-l { left: 0; top: 22%; width: 110px; }
.deco--dots-r { right: 12px; top: 8%; width: 130px; }
.deco--squiggle { right: 46%; top: 6%; width: 64px; }
.deco--ribbon { left: 6%; bottom: 6%; width: 96px; }

.deco--heart2 {
  left: 30%;
  bottom: 14%;
  width: 74px;
  color: var(--c-pink-d);
  opacity: .9;
}
.deco--arc2 {
  right: 4%;
  bottom: 4%;
  width: 180px;
  color: var(--c-deco-stroke);
  opacity: .5;
}
.deco--underline2 {
  left: 4%;
  top: 58%;
  width: 150px;
  color: var(--c-deco-stroke);
  opacity: .65;
}

@media (max-width: 900px) {
  .deco--heart2,
  .deco--arc2,
  .deco--underline2 { display: none; }
  .hero__main { max-width: 100%; margin: 0; }
}

/* -----------------------------------
   おしらせの「いいね」
   何のボタンか分かるよう、アイコンと文字を添えて
   行の右端に置いています。
   ----------------------------------- */
.newsrow:has(.newsrow__react) {
  grid-template-columns: 108px 64px 1fr auto;
}
.newsrow__react { justify-self: end; }

.reactbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--c-bg-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  cursor: pointer;
  line-height: 1.6;
  transition: .15s;
  white-space: nowrap;
}
.reactbtn:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.reactbtn__ico {
  width: 15px;
  height: 14px;
  color: var(--c-pink-d);
  flex: none;
}
.reactbtn:hover .reactbtn__ico { color: var(--c-brand); }
.reactbtn__count { font-weight: 700; font-feature-settings: "tnum"; }

/* 押したあと */
.reactbtn.is-on {
  background: var(--c-brand-tint);
  border-color: var(--c-brand-l);
  color: var(--c-brand-d);
}
.reactbtn.is-on .reactbtn__ico { color: var(--c-brand); }
.reactbtn:disabled { opacity: .6; }

/* :has() が使えないブラウザ向けの保険 */
@supports not (selector(:has(*))) {
  .newsrow__react { grid-column: 3; justify-self: start; margin-top: var(--sp-2); }
}

@media (max-width: 600px) {
  .newsrow:has(.newsrow__react) { grid-template-columns: 1fr; }
  .newsrow__react { justify-self: start; margin-top: var(--sp-2); }
}

/* -----------------------------------
   イラストのあしらい
   ----------------------------------- */
.deco--ill { opacity: .9; }
.deco--ill svg { width: 100%; height: auto; }

/*
 * あしらいのイラスト。
 * 端に寄りすぎて小さく見えていたため、
 * ひとまわり大きくして内側に置き直しました。
 */
.deco--ill-pot { right: 6%; top: 14%; width: 104px; transform: rotate(6deg); }
.deco--ill-onigiri { left: 7%; bottom: 22%; width: 92px; transform: rotate(-8deg); }
.deco--ill-sparkle { left: 44%; top: 8%; width: 72px; opacity: .8; }
.deco--ill-carrot { right: 7%; top: 12%; width: 94px; transform: rotate(12deg); }
.deco--ill-plate { left: 6%; bottom: 10%; width: 108px; opacity: .75; }
.deco--ill-bubble { right: 8%; top: 8%; width: 98px; transform: rotate(-6deg); }

/* 画面が狭いときは、本文にかからないよう控えめにします */
@media (max-width: 1100px) {
  .deco--ill-pot,
  .deco--ill-carrot,
  .deco--ill-bubble { right: 3%; width: 78px; }
  .deco--ill-onigiri,
  .deco--ill-plate { left: 3%; width: 76px; }
}

@media (max-width: 900px) {
  .deco--ill-pot,
  .deco--ill-plate,
  .deco--ill-carrot { display: none; }
  .deco--ill-onigiri { width: 44px; bottom: 4%; }
  .deco--ill-sparkle { width: 38px; }
  .deco--ill-bubble { width: 46px; }
}

/* いいねボタンの数字 */
.likebtn__count { font-feature-settings: "tnum"; }
.likebtn .ico { color: var(--c-pink-d); }
.likebtn.is-on .ico { color: var(--c-brand); }
@media (hover: hover) {
  .likebtn:hover .ico { color: var(--c-brand); }
}
.likebtn.is-static .ico { color: var(--c-pink-d); }

/* プロフィールのアイコン */
.avatar img,
.avatar__default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-pink-l);
  border: 1px solid var(--c-line);
}
.avatar__default svg { width: 64px; height: 64px; }

/* ヨシケイマークの見え方の調整 */
.logo__mark { width: 34px; height: 30px; }
.likebtn .ico,
.reactbtn__ico { width: 16px; height: 14px; }
.modal__mark svg { width: 48px; height: 42px; }

/* -----------------------------------
   企画バナー
   ご入稿サイズ：1200 × 600（2:1）
   スマホでは 750 × 500（3:2）に切り出して表示します。
   ----------------------------------- */
.banner {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-pink-l);
  margin-bottom: var(--sp-5);
  box-shadow: 0 18px 40px -30px rgba(51, 51, 51, .4);
}
.banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
@media (max-width: 600px) {
  .banner img { aspect-ratio: 3 / 2; }
}

/* -----------------------------------
   ヒーローの調整（2回目）
   ----------------------------------- */

/* メインコピーを主役に */
.catch { font-size: clamp(34px, 5.4vw, 80px); line-height: 1.3; letter-spacing: -0.01em; }
.hero__lede .eyebrow { font-size: 16px; margin-top: var(--sp-6); }
.hero__lede .hero__lead { font-size: 16px; margin-top: var(--sp-2); }

/* いいね通知はコンパクトに1行で */
.hero__notice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  width: auto;
  max-width: 100%;
  padding: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-5);
  text-decoration: none;
  color: inherit;
  transition: .15s;
}
.hero__notice:hover {
  border-color: var(--c-brand-l);
  transform: translateY(-1px);
}
.hero__notice-mark {
  width: 22px;
  height: 19px;
  color: var(--c-brand);
  flex: none;
}
.hero__notice b { color: var(--c-brand); }

/* ピックアップが無いときは、見出しまわりを詰めて下のイベントを主役に */
.hero--compact { padding: var(--sp-7) 0 var(--sp-6); }
.hero--compact .hero__grid,
.hero__grid.is-solo {
  display: block;
  text-align: left;
}
.hero--compact .catch { font-size: clamp(30px, 4.4vw, 60px); }
.hero--compact .deco--ill-pot,
.hero--compact .deco--arc2 { display: none; }

/* -----------------------------------
   トップの並び（最終）
   「一覧を見る」は見出しの右端に置き、
   セクション下のボタンは置きません。
   ----------------------------------- */
.sec-lead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.sec-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-brand);
  text-decoration: none;
  white-space: nowrap;
}
.sec-more:hover { text-decoration: underline; }
.sec-more .ico { width: 15px; height: 15px; }

@media (max-width: 600px) {
  .sec-lead { align-items: center; }
  .sec-sub--left { font-size: 13px; }
}

/* -----------------------------------
   ヒーローの中央寄せ
   ----------------------------------- */
.hero__grid.is-center {
  display: block;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.hero__grid.is-center .hero__lede { text-align: center; }
.hero__grid.is-center .cta { text-align: center !important; }
.hero__grid.is-center .note-s { text-align: center; }

/* -----------------------------------
   イベントカードのバナー
   ご入稿サイズ 1200 × 600（2:1）
   ----------------------------------- */
.erow { padding-top: 0; overflow: hidden; }
.erow__banner,
.ecard__banner {
  margin: 0 calc(var(--sp-5) * -1) var(--sp-2);
  aspect-ratio: 2 / 1;
  background: var(--c-pink-l);
  overflow: hidden;
}
.erow__banner img,
.ecard__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.erow__banner-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  background: #F3F3F3;
  color: #9A9A9A;
  font-size: var(--fs-caption);
}
.erow__banner-empty svg { width: 46px; height: 46px; opacity: .7; }

.ecard { overflow: hidden; }
.ecard__banner { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4); }

/* バナーを入れたぶん、投稿サムネイルは控えめに */
.erow .thumbs { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.erow .thumbs__item { aspect-ratio: 1; border-radius: var(--r-sm); }
.erow__title { margin-top: 0; }

/* キャッチコピーは1行。狭い画面でだけ自然に折り返す */
.catch { font-size: clamp(28px, 4.6vw, 62px); }
.catch .nw { display: inline-block; }
@media (max-width: 900px) {
  .catch { font-size: clamp(26px, 5.4vw, 44px); }
}
@media (max-width: 600px) {
  .catch { font-size: 27px; line-height: 1.5; }
}

/* カード全体が押せることを、カーソルと沈み込みで示す */
.erow {
  cursor: pointer;
  justify-content: flex-start;
}
.erow:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* -----------------------------------
   おしらせ：カテゴリと新着を並べる
   ----------------------------------- */
.newsrow { grid-template-columns: 104px 190px 1fr; }
.newsrow:has(.newsrow__react) {
  grid-template-columns: 104px 190px 1fr auto;
}
.newsrow__tag {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-self: start;
}
.badge--cat {
  background: var(--c-bg-surface);
  border: 1px solid var(--c-line-strong);
  color: var(--c-text-muted);
  font-weight: 500;
}
.badge--new {
  background: var(--c-brand);
  color: #fff;
  font-weight: 700;
}

@media (max-width: 900px) {
  .newsrow,
  .newsrow:has(.newsrow__react) { grid-template-columns: 92px 170px 1fr; }
}
@media (max-width: 600px) {
  .newsrow,
  .newsrow:has(.newsrow__react) { grid-template-columns: 1fr; }
}

/* タブのカテゴリ件数 */
.tabs__count {
  margin-left: 6px;
  font-size: var(--fs-caption);
  color: var(--c-text-subtle);
  font-weight: 400;
}
.tabs a.is-on .tabs__count { color: rgba(255, 255, 255, .8); }

/* -----------------------------------
   アイコン・イラストの色
   ヨシケイマーク以外は単色にそろえています。
   濃さだけを変えて、奥行きを出しています。
   ----------------------------------- */

/* あしらいのイラスト */
.deco--ill { color: var(--c-deco); opacity: 1; }
.deco--ill-sparkle { color: var(--c-pink-d); }
.deco--ill-bubble { color: var(--c-deco); opacity: .85; }
.deco--ill-plate,
.deco--ill-carrot,
.deco--ill-pot,
.deco--ill-onigiri { color: var(--c-deco); opacity: .9; }

/* 王冠などのあしらい */
.deco--ribbon { color: var(--c-pink-d); opacity: .9; }

/* ページ見出しのイラスト */
.page-head__art { color: var(--c-deco); }
.page-head__art svg { width: 100%; height: auto; }

/* マイページの既定アイコン */
.avatar__default { color: var(--c-deco); }

/* バナー未設定の表示 */
.erow__banner-empty { color: #B9B9B9; }
.erow__banner-empty svg { color: #C9C9C9; }

/* ヨシケイマークだけはブランド色を保つ */
.logo__mark,
.hero__notice-mark,
.modal__mark svg { color: var(--c-brand); }

/* -----------------------------------
   ロゴ（ご支給いただいた正式データ）
   SVGと文字は、中央で揃えます。
   ベースラインで揃えると「ひろば」が下にずれます。
   ----------------------------------- */
.logo__mark {
  width: 32px;
  height: 27px;
  color: var(--c-brand);
  flex: none;
}
.logo__wm {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
}
.logo__word {
  display: block;
  width: 88px;
  height: 19px;
  color: var(--c-brand);
}
.logo__wm em {
  display: block;
  font-style: normal;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  margin: 0;
  color: var(--c-text);
  transform: translateY(1px);
}
.logo__tx { gap: 3px; }

@media (max-width: 600px) {
  .logo__mark { width: 26px; height: 22px; }
  .logo__word { width: 72px; height: 16px; }
  .logo__wm em { font-size: 15px; }
}

/* -----------------------------------
   線画アイコンの太さ
   小さく使うものは太めに、大きく使うものは細めに。
   ----------------------------------- */
.deco--ill svg { stroke-width: 2.4; }
.page-head__art svg { stroke-width: 3.2; }
.avatar__default svg { stroke-width: 3; }
.erow__banner-empty svg { stroke-width: 3; }


/* -----------------------------------
   イラストの配置（線画に描き直したもの）
   ----------------------------------- */
.deco--ill-cutlery { left: 4%; top: 22%; width: 56px; transform: rotate(-8deg); }
.deco--ill-camera  { right: 5%; top: 18%; width: 62px; transform: rotate(7deg); }
.deco--ill-onigiri { left: 10%; bottom: 14%; width: 54px; transform: rotate(-6deg); }
.deco--ill-carrot  { right: 10%; bottom: 12%; width: 54px; transform: rotate(14deg); }
.deco--ill-plate   { left: 3%; top: 18%; width: 62px; }
.deco--ill-pot     { right: 4%; bottom: 12%; width: 64px; transform: rotate(5deg); }
.deco--ill-bubble  { right: 5%; top: 8%; width: 58px; transform: rotate(-5deg); }
.deco--ill-sparkle { left: 46%; top: 8%; width: 44px; }

@media (max-width: 900px) {
  .deco--ill-camera,
  .deco--ill-carrot,
  .deco--ill-pot { display: none; }
  .deco--ill-cutlery { width: 40px; left: 2%; }
  .deco--ill-onigiri { width: 40px; left: 4%; }
  .deco--ill-plate { width: 44px; }
  .deco--ill-bubble { width: 44px; }
}

/* -----------------------------------
   イラストの配置（調整）
   1画面に2つまで。左右に離して置きます。
   ----------------------------------- */
.deco--ill-cutlery {
  left: 6%;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: 52px;
}
.deco--ill-camera {
  right: 6%;
  top: 50%;
  transform: translateY(-50%) rotate(7deg);
  width: 58px;
}
.deco--ill-onigiri {
  left: 4%;
  top: 46%;
  transform: rotate(-6deg);
  width: 50px;
}
.deco--ill-pot {
  right: 4%;
  bottom: 16%;
  transform: rotate(5deg);
  width: 58px;
}

/* ドットとイラストが重ならないように */
.deco--dots-l { left: 0; top: 8%; width: 96px; }
.deco--dots-r { right: 0; top: 6%; width: 110px; }
.deco--squiggle { right: auto; left: 50%; top: 2%; width: 54px; transform: translateX(-50%); }

@media (max-width: 1100px) {
  .deco--ill-cutlery,
  .deco--ill-camera,
  .deco--ill-onigiri,
  .deco--ill-pot { display: none; }
}

/* -----------------------------------
   応募規約
   ----------------------------------- */
.terms-link { margin-top: var(--sp-4); }
.terms-link button,
.link-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-brand);
  font-size: var(--fs-small);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.terms-link button .ico { width: 16px; height: 16px; }
.terms-link button:hover,
.link-like:hover { color: var(--c-brand-d); }

/* 規約のモーダル */
.modal__panel--wide {
  max-width: 640px;
  max-height: 82vh;
  overflow-y: auto;
  text-align: left;
  padding: var(--sp-7) var(--sp-6);
}
.modal__sub {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-5);
}
.modal--terms .modal__title { text-align: left; }

.terms {
  font-size: var(--fs-small);
  line-height: 1.95;
  color: var(--c-text-muted);
}
.terms h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-brand-l);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
}
.terms h3:first-child { margin-top: 0; }
.terms p { margin-bottom: var(--sp-3); }
.terms p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .modal__panel--wide { padding: var(--sp-6) var(--sp-5); max-height: 88vh; }
}

/* -----------------------------------
   投稿一覧の切り替え
   ----------------------------------- */
.tabs button {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: var(--fs-small);
  padding: 9px var(--sp-5);
  border: 1px solid var(--c-line-strong);
  background: #fff;
  border-radius: var(--r-pill);
  white-space: nowrap;
  color: var(--c-text-muted);
  cursor: pointer;
  transition: .15s;
}
.tabs button:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.tabs button.is-on {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  font-weight: 700;
}

/* 読み込み中 */
.js-entries-list { transition: opacity .18s; min-height: 120px; }
.js-entries-list.is-loading { opacity: .45; pointer-events: none; }

/* 一覧内のページ送り */
.js-entries-list .pagination .page-numbers { cursor: pointer; }

/* ヨシケイ先生（既定のプロフィール画像） */
.avatar__default {
  color: var(--c-brand);
  background: var(--c-pink-l);
  padding: 6px;
}
.avatar__default svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* -----------------------------------
   画像の見え方（#121／#127）
   縦横比を変えずに収めます。
   ----------------------------------- */

/* 応募フォームのお写真えらび */
.picker__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-5);
  border: 2px dashed var(--c-line-strong);
  border-radius: var(--r-lg);
  background: var(--c-pink-l);
  cursor: pointer;
  text-align: center;
  transition: .15s;
}
/*
 * hidden を付けたときに、確実に隠したい箇所だけを指定します。
 * display を指定した要素は hidden だけでは隠れないためですが、
 * すべての要素にかけると思わぬところまで消えてしまいます。
 */
.picker__drop[hidden],
.picker__preview[hidden],
.row[hidden],
.js-news-more[hidden],
.js-hist-more[hidden],
.js-rank-more[hidden],
.panel-block[hidden] { display: none !important; }

.picker__drop:hover {
  border-color: var(--c-brand-l);
  background: var(--c-brand-tint);
}
.picker__ico { width: 40px; height: 40px; color: var(--c-brand); }
.picker__label { font-size: var(--fs-small); font-weight: 700; color: var(--c-brand); }
.picker__hint { font-size: var(--fs-caption); color: var(--c-text-subtle); }

.picker__preview {
  margin: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg-subtle);
  /* 親が縮まないと枠からはみ出るため、ここで抑えます */
  min-width: 0;
  max-width: 100%;
}
.picker__preview img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 340px;
  /* 縦横比を保ったまま収めます（引き伸ばしません） */
  object-fit: contain;
  background: #fff;
}
/* 写真を選ぶ枠そのものも、はみ出さないようにします */
.picker {
  min-width: 0;
  max-width: 100%;
}
.picker__preview figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  background: var(--c-bg-surface);
  border-top: 1px solid var(--c-line);
}
.picker__preview figcaption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker__change {
  flex: none;
  padding: 5px 12px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  cursor: pointer;
}
.picker__change:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* 投稿の詳細では、作品を切り取らずに全体を見せます */
.entry-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg-subtle);
}
.entry-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}

/* 投稿カードの作品は、切り取らずに全体を見せます（#121） */
.thumb--fit {
  aspect-ratio: 4 / 3;
  background: #F7F7F7;
}
.thumb--fit img {
  object-fit: contain;
}

/* -----------------------------------
   いいねの見え方（#102）
   まだ押していない状態はグレー、押した状態は赤。
   ----------------------------------- */
.likebtn {
  color: #9A9A9A;
  border-color: var(--c-line-strong);
  background: #fff;
}
.likebtn .ico { color: #B5B5B5; }
/*
 * ホバーはマウスのある環境だけに当てます（#268）。
 * スマホではタップ後もホバーが残り、いいねを取り消しても
 * 赤い枠だけが残って見えていました。
 */
@media (hover: hover) {
  .likebtn:hover {
    border-color: var(--c-brand-l);
    color: var(--c-brand);
  }
  .likebtn:hover .ico { color: var(--c-brand-l); }
}

.likebtn.is-on {
  background: var(--c-brand-tint);
  border-color: var(--c-brand);
  color: var(--c-brand);
  font-weight: 700;
}
.likebtn.is-on .ico { color: var(--c-brand); }

/* 押せない状態（ご自身の投稿・期間外） */
.likebtn.is-static {
  background: #F6F6F6;
  border-color: #E4E4E4;
  color: #A8A8A8;
}
.likebtn.is-static .ico { color: #C4C4C4; }

/* おしらせの反応ボタンも同じ扱い */
.reactbtn { color: #9A9A9A; }
.reactbtn__ico { color: #B5B5B5; }
.reactbtn.is-on { background: var(--c-brand-tint); border-color: var(--c-brand); color: var(--c-brand); }
.reactbtn.is-on .reactbtn__ico { color: var(--c-brand); }

/* -----------------------------------
   スマートフォンの見出し領域を詰める（#97）
   画面の半分ほどが中身で埋まるようにします。
   ----------------------------------- */
@media (max-width: 700px) {
  .hero--flat,
  .hero--compact { padding: var(--sp-5) 0 var(--sp-4); }

  .page-head__grid { gap: var(--sp-3); }
  .page-title { font-size: 22px; line-height: 1.45; margin-bottom: var(--sp-2); }
  .page-lead { font-size: 13px; line-height: 1.8; }
  .eyebrow { font-size: 12px; }

  .section { padding: var(--sp-5) 0; }
  .section--tight { padding-top: var(--sp-4); }

  /* イベント詳細の見出しまわり */
  .hero-wrap .badge { margin-bottom: var(--sp-2); }
}

/* チェックボックスの上限に達したとき */
.checks input[type="checkbox"]:disabled + .check__box,
.checks input[type="checkbox"]:disabled ~ span {
  opacity: .45;
}
.field__hint {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--c-text-subtle);
}

/* 応募要項の項目ごとの画像（#108） */
.spec__image {
  display: block;
  margin-top: var(--sp-2);
}
.spec__image img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: var(--r-md);
}

/* -----------------------------------
   選択肢の画像と、正解の解説（#109）
   ----------------------------------- */
.check--image { align-items: flex-start; }
.check__image {
  display: block;
  margin-top: var(--sp-2);
}
.check__image img {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
}

.qa__note {
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-subtle);
  border-radius: var(--r-md);
  font-size: var(--fs-caption);
  line-height: 1.9;
  color: var(--c-text-muted);
}

/* -----------------------------------
   お題（みんなのお声）の表示
   掲示板のように、短い文章を縦に並べます。
   ----------------------------------- */
.voices {
  display: grid;
  gap: var(--sp-3);
}
.voice {
  padding: var(--sp-5);
  background: var(--c-bg-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.voice__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.voice__author {
  font-size: var(--fs-small);
  font-weight: 700;
}
.voice__date {
  font-size: var(--fs-caption);
  color: var(--c-text-subtle);
}
.voice__body {
  font-size: var(--fs-small);
  line-height: 1.95;
  color: var(--c-text);
  white-space: pre-wrap;
}
.voice__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-3);
}

/* 紹介ランク（#14） */
.rank {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.rank__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--c-brand-tint);
  color: var(--c-brand-d);
  font-weight: 700;
}
.rank__badge .ico { width: 16px; height: 16px; }

/* -----------------------------------
   アイコンの基本サイズ
   個別の指定がないアイコンが、画面いっぱいに
   広がってしまうのを防ぎます。
   ----------------------------------- */
.ico {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.15em;
}

/* 下部タブのアイコン（画面幅にかかわらず一定に） */
.tabbar__ico { width: 21px; height: 21px; flex: none; }

/* -----------------------------------
   スマートフォンの下部タブ（#101）
   ホーム・イベント・ランキング・おしらせ
   ----------------------------------- */
.tabbar { display: none; }

@media (max-width: 900px) {
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--c-bg-surface);
    border-top: 1px solid var(--c-line);
    box-shadow: 0 -6px 20px -14px rgba(51, 51, 51, .3);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 2px 8px;
    text-decoration: none;
    color: var(--c-text-subtle);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
  }
  .tabbar__item.is-current { color: var(--c-brand); }
  .tabbar__item.is-current .tabbar__ico { color: var(--c-brand); }

  /* タブに隠れないよう、下に余白を足す */
  body { padding-bottom: 62px; }
  .pagetop { bottom: 74px; }
}

/* あしらいのイラストは、親の幅に合わせます */
.deco svg,
.page-head__art svg,
.avatar__default svg,
.erow__banner-empty svg,
.picker__ico {
  width: 100%;
  height: auto;
}
.picker__ico { width: 40px; height: 40px; }

/* 保険：どの指定にも当てはまらないSVGが巨大にならないように */
.container svg:not([class]),
.panel-block svg:not([class]) {
  max-width: 40px;
  max-height: 40px;
}

/* -----------------------------------
   2026/09/03 いただいたご要望
   ----------------------------------- */

/* #206 みんなの投稿の呼びかけ */
.sec-catch {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-brand);
}

/* #198 #199 #200 マイページの数値 */
.nums--stack > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nums--stack span {
  order: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
}
.nums--stack b {
  order: 2;
  font-size: 26px;
  color: var(--c-brand);
}
@media (max-width: 600px) {
  /* スマホでも左右に並べます */
  .nums--stack { grid-template-columns: repeat(2, 1fr); }
  .nums--stack.nums--3 { grid-template-columns: repeat(3, 1fr); }
  .nums--stack span { font-size: 11px; }
  .nums--stack b { font-size: 22px; }
}

/* #184 ランキングの企画名を目立たせる */
.rank-title {
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-brand-l);
}

/* #186 #208 順位の数字を丸の中央に。1〜3位は金・銀・銅に */
.rank {
  width: 34px;
  height: 34px;
  /* line-height を1にしないと、数字が下にずれます */
  line-height: 1;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.rank--1 { background: #E3B23C; color: #fff; }
.rank--2 { background: #A8AEB5; color: #fff; }
.rank--3 { background: #C1794A; color: #fff; }

/* #210 応募要項の画像は、スマホでも大きすぎないように */
.spec__image img { max-width: 200px; }
@media (max-width: 600px) {
  .spec__image img { max-width: 140px; }
}

/* -----------------------------------
   応募規約の見出し（#180 #181 #219 #242）
   赤線をやめ、下線にそろえたうえで、
   大見出しと小見出しを罫線と文字サイズで分けます。
   ----------------------------------- */
/* 大見出し：「●●に関わるご案内」など */
.terms .terms__section,
.terms__section {
  margin: var(--sp-7) 0 var(--sp-3);
  padding: 0 0 6px;
  border-left: 0;
  border-bottom: 2px solid var(--c-brand-l);
  font-size: 17px;
  font-weight: 900;
  color: var(--c-text);
}
/* 小見出し：規約の中の項目 */
.terms h3:not(.terms__section) {
  margin: var(--sp-5) 0 var(--sp-2);
  padding: 0 0 4px;
  border-left: 0;
  border-bottom: 1px solid var(--c-line-strong);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
}
.terms .terms__section:first-child,
.terms__section:first-child,
.terms h3:first-child { margin-top: 0; }

/* 企画名を見出しとして見せる（#269 #271 #282 #288） */
.page-title--name {
  display: inline-block;
  text-align: left;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.4;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--c-brand-l);
}
.page-head__grid.is-solo .page-title--name { text-align: left; }

/*
 * 企画名を添える場合だけ、見出しらしく見せます（#269）。
 * すべてのリード文に当てると、ランキングなどの見出しまで
 * 左に寄ってしまうため、企画名の隣にあるものに限ります。
 */
.page-title--name + .page-lead,
.page-head__tx .page-title--name ~ .page-lead {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  text-align: left;
}
@media (max-width: 600px) {
  .page-title--name { font-size: 21px; }
  .page-title--name ~ .page-lead { font-size: 17px; }
}

/* 解説は少し大きめに（#294） */
.qa__note { font-size: var(--fs-small); line-height: 1.9; }

/* ご応募・ご回答済みのご案内 */
.done-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--c-text);
  line-height: 1.8;
}
.done-note .ico {
  flex: none;
  color: var(--c-brand);
}

/*
 * 見出しの位置（#304）。
 * あしらいがある画面は2列になるため、文字だけを中央に寄せると
 * 画面の中央からずれて見えます。あしらいのない画面だけ中央にします。
 */
.page-head__grid.is-solo .page-logo,
.page-head__grid.is-solo .page-title,
.page-head__grid.is-solo .page-lead { text-align: center; }
.page-head__grid.is-solo .page-logo img { margin-inline: auto; }

@media (min-width: 901px) {
  .page-head__grid.is-solo .page-head__tx { margin-inline: auto; max-width: 640px; }
}

/* 上部の余白を詰めます（#306・全ページ共通） */
.section--tight { padding: var(--sp-5) 0; }
.hero-wrap .section--tight { padding-top: var(--sp-4); }

/* 数値カードの補足（#318） */
.nums small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--c-text-subtle);
  line-height: 1.5;
}

/* 絞り込みと並び替えの並び（#267） */
.listbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.listbar .tabs { margin-bottom: 0; }
.listbar__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--c-text-muted);
  white-space: nowrap;
}
.listbar__sort select {
  font-size: var(--fs-small);
  padding: 6px 10px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: var(--c-bg-surface);
  color: var(--c-text);
}
@media (max-width: 600px) {
  .listbar { gap: var(--sp-2); }
  .listbar__sort { margin-left: auto; }
}

/*
 * 横にはみ出したタブの目印（#387）
 * はみ出しているときだけ ui.js が is-scrollable を付けます。
 * スクロールバーを常に出し、右端を薄くして続きがあることをお示しします。
 * iPhoneではスクロールバーの見た目を変えられないため、右端のぼかしを併用しています。
 */
.listbar .tabs.is-scrollable { padding-bottom: 8px; }
/*
 * Chromeは scrollbar-width / scrollbar-color があると ::-webkit-scrollbar を無視し、
 * Macでは触るまでスクロールバーを隠してしまうため、これらはFirefoxにだけ当てます。
 */
@supports not selector(::-webkit-scrollbar) {
  .listbar .tabs.is-scrollable {
    scrollbar-width: thin;
    scrollbar-color: #C4C4C4 #F0F0F0;
  }
}
.listbar .tabs.is-scrollable::-webkit-scrollbar { height: 4px; }
.listbar .tabs.is-scrollable::-webkit-scrollbar-track { background: #F0F0F0; border-radius: 2px; }
.listbar .tabs.is-scrollable::-webkit-scrollbar-thumb { background: #C4C4C4; border-radius: 2px; }
.listbar .tabs.is-scrollable:not(.is-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

/* ご自身と同じ属性の集計（#344） */
.rate-attr.is-mine {
  background: var(--c-orange-tint);
  border-radius: var(--r-md, 10px);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.rate-attr.is-mine > .rate-attr__head { color: var(--c-text); font-weight: 700; }

/* ご自身の回答を見分けやすくします（#290） */
.chart__row.is-mine .chart__bar > span { background: var(--c-orange); }
.chart__row.is-mine .chart__label { font-weight: 700; }
.chart__mine {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--c-orange-tint);
  color: var(--c-orange);
  font-size: var(--fs-caption);
  font-weight: 700;
  white-space: nowrap;
}

/* トップのロゴ（#302） */
.catch--logo { margin: 0 0 var(--sp-5); line-height: 1; }
.catch--logo img {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin-inline: auto;
}
/* 左寄せのレイアウトでは、ロゴも左に置きます */
.hero__grid:not(.is-center) .catch--logo img { margin-inline: 0; }
@media (max-width: 600px) {
  .catch--logo img { width: min(100%, 260px); }
}

/* 「もっと見る」をボタンで置いたときの見た目をそろえます */
button.sec-more {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
button.sec-more:hover { text-decoration: underline; }

/* おしらせの見出しと本文の間 */
.single-yhb_news .page-title { margin-bottom: var(--sp-5); }
.single-yhb_news .newsrow__date { display: block; margin-bottom: var(--sp-2); }
.single-yhb_news .entry-content { line-height: 1.9; }

/* すでに無くなったイベントの参加履歴 */
.row__gone { color: var(--c-text-subtle); }

/* 参加履歴の正解数（#291） */
.row__score {
  flex: none;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--c-brand-d);
  background: var(--c-brand-tint);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  white-space: nowrap;
}

/* ホーム画面への追加のご案内 */
.yhb-a2hs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: var(--c-bg-surface);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .5);
}
.yhb-a2hs__body {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 640px;
  margin: 0 auto;
}
.yhb-a2hs__text {
  flex: 1;
  font-size: var(--fs-caption);
  line-height: 1.6;
  margin: 0;
}
.yhb-a2hs__btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: none;
}
@media (max-width: 600px) {
  .yhb-a2hs__body { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .yhb-a2hs__btns { flex-direction: row; }
  .yhb-a2hs__btns .btn { flex: 1; }
}

/* マイページから参加履歴へのジャンプ（#252） */
.sec-more-wrap { margin-top: var(--sp-4); text-align: right; }
#yhb-history { scroll-margin-top: calc(var(--header-h) + 16px); }

/* #184 ランキングの企画名 */
.rank-event-title {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--c-brand-l);
  font-size: 18px;
  font-weight: 900;
}

/* ランキングの導線（#185） */
.rank-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: var(--sp-3) 0 var(--sp-4);
}

/* -----------------------------------
   おしらせカテゴリの色分け（#195）
   ----------------------------------- */
.badge--cat-1 { background: #FFF1F2; border-color: #F5C6CA; color: #C4000F; }
.badge--cat-2 { background: #FFF6E5; border-color: #F0D8A0; color: #A56A00; }
.badge--cat-3 { background: #EDF6EE; border-color: #BFDDC4; color: #2E7D46; }
.badge--cat-4 { background: #EDF3FA; border-color: #BFD4EC; color: #2A5C8F; }
.badge--cat-5 { background: #F4F0FA; border-color: #D3C8E8; color: #5B4A8A; }

/* -----------------------------------
   メニューの階層（#197）
   親にはアイコン、子は一段下げます。
   ----------------------------------- */
.drawer__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drawer__head .ico {
  width: 20px;
  height: 20px;
  color: var(--c-text-muted);
}
.drawer__link--child {
  padding-left: calc(var(--sp-5) + 30px);
  font-size: var(--fs-small);
}
.drawer__link--child::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1px;
  margin-right: 8px;
  background: var(--c-line-strong);
  vertical-align: middle;
}

/* -----------------------------------
   属性ごとの正答率（#156）
   ----------------------------------- */
.attr-head {
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--c-brand-l);
  font-size: 16px;
  font-weight: 900;
}
.attr-group {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line);
}
.attr-group:last-child { border-bottom: 0; }
.attr-group__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 700;
}
.attr-group__count {
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--c-text-subtle);
}

/* -----------------------------------
   応募フォームの区切り（#164）
   ここから下は個人情報をうかがう、という合図。
   ----------------------------------- */
.formsep {
  margin: var(--sp-7) 0 var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 2px dashed var(--c-line-strong);
}
.formsep__text {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-text-muted);
}

/* ご登録画面のロゴ（#75） */
.page-logo {
  margin: 0 0 var(--sp-4);
}
.page-logo img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
}
@media (max-width: 600px) {
  .page-logo img { max-width: 240px; }
}

/* -----------------------------------
   退会手続き
   ----------------------------------- */
.leave__summary {
  padding: var(--sp-3) 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  cursor: pointer;
}
.leave__summary:hover { color: var(--c-brand); }
.leave__body { padding-top: var(--sp-3); }
.leave__body .check { margin-top: var(--sp-4); }

.btn--danger {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.btn--danger:hover {
  background: var(--c-brand);
  color: #fff;
}

/* -----------------------------------
   ボタンのすぐ下の文字リンク（#372）
   ボタンと近く、押し間違えやすいというご意見をいただいたため、
   間をあけ、リンクの押せる範囲も広げます。
   ボタンの直後（または同じ .cta の中）にある .note-s だけに絞っています。
   ----------------------------------- */
.cta + .note-s,
.cta > .note-s {
  margin-top: var(--sp-5);
}
.cta + .note-s a,
.cta > .note-s a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-1);
}