@charset "UTF-8";

/*!
 * レスポンシブ（900px / 600px）※必ず最後に読み込む
 * ヨシケイひろば / yoshikei-hiroba
 */

/* -----------------------------------
   reset
   ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* -----------------------------------
   デザイン案の一括指定
   ----------------------------------- */
@media (max-width: 900px) {
  :root { --fs-body: 16px; --fs-small: 14px; --header-h: 72px; }
  .gnav { display: none; }
  .hamburger { display: flex; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid > .span-3 { grid-column: span 2; }
  .postgrid { grid-template-columns: repeat(4, 1fr); }
  .admin-nums { grid-template-columns: repeat(2, 1fr); }
  .wp { grid-template-columns: 1fr; }
  .wp__side { display: none; }
  .wp__kpis { grid-template-columns: repeat(2, 1fr); }
  .screens { grid-template-columns: repeat(2, 1fr); }
  .footer__links { grid-template-columns: repeat(2, 1fr); }
  .page-title { font-size: 26px; }
  .sec-title { font-size: 20px; }
  .section { padding: var(--sp-7) 0; }
}
@media (max-width: 600px) {
  .grid, .grid--2 { grid-template-columns: 1fr; }
  .grid > .span-2, .grid > .span-3 { grid-column: span 1; }
  .postgrid { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .field--side { grid-template-columns: 1fr; gap: var(--sp-2); }
  .field--side .field__note { padding-top: 0; }
  .screens { grid-template-columns: 1fr; }
  .footer__links { grid-template-columns: 1fr; }
  .admin-nums { grid-template-columns: 1fr; }
  .nums { grid-template-columns: 1fr; }
  .page-title { font-size: 23px; }
  /* 縦に積むと余白がなくなるため、間隔を持たせます */
  .cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  .cta .btn, .btn { width: 100%; }
  .cta .btn { margin: 0; }
  .container { padding: 0 var(--sp-4); }
  .kv { flex-wrap: wrap; }
  .kv > span { width: 100%; }
}

/* -----------------------------------
   デザイン案の追記分
   ----------------------------------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero--split { text-align: center; padding: var(--sp-7) 0 var(--sp-6); }
  .hero__lede h1 { font-size: 27px; }
  .hero__notice { text-align: left; }
  .handwrite, .deco--squiggle, .deco--heart, .deco--curve { display: none; }
  .dots { display: flex; }
  .ecard { padding: var(--sp-4); }
  .panel-block { padding: var(--sp-6) var(--sp-5); border-radius: 22px; }
  .feature__title { font-size: 19px; }
}
@media (max-width: 600px) {
  .hero__lede h1 { font-size: 24px; }
  .ecard__title { font-size: 18px; }
  .feature__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .deco--dots-l, .deco--dots-r { display: none; }
}

/* -----------------------------------
   下層ページの見出しブロック
   ----------------------------------- */
@media (max-width: 900px) {
  .panel-block .sec-head:not(:first-child) { margin-top: var(--sp-6); }
}

/* -----------------------------------
   下層ページの見出しブロック
   ----------------------------------- */
@media (max-width: 600px) {
  .admin-wrap { border-radius: 14px; }
}

/* -----------------------------------
   おしらせ（1行レイアウト）
   ----------------------------------- */
@media (max-width: 900px) {
  .catch { font-size: 32px; }
  .carousel__nav { display: none; }

  .newsrow { grid-template-columns: 92px 56px 1fr; gap: var(--sp-2); }
}

/* -----------------------------------
   おしらせ（1行レイアウト）
   ----------------------------------- */
@media (max-width: 600px) {
  .catch { font-size: 27px; }
  .newsrow { grid-template-columns: 1fr; gap: 4px; padding: var(--sp-3) 0; }
  .newsrow__date { display: inline; }
  .newsrow__tag { justify-self: start; }
}

/* -----------------------------------
   おしらせ（1行レイアウト）
   ----------------------------------- */
@media (max-width: 900px) { .deco-swirl { display: none; } }

/* -----------------------------------
   おしらせ（1行レイアウト）
   ----------------------------------- */
@media (max-width: 600px) {
  .sec-lead { flex-direction: column; align-items: flex-start; }
}

/* -----------------------------------
   仕上げの調整
   ----------------------------------- */
@media (max-width: 900px) {
  .hero__lede { padding-right: 0; }
  .hero__notice { max-width: none; }
  .ecard__title { font-size: 19px; }
}

/* -----------------------------------
   イベント詳細
   ----------------------------------- */
@media (max-width: 900px) {
  .event-hero { aspect-ratio: 16 / 9; }
  .event-intro { grid-template-columns: 1fr; gap: var(--sp-5); }
  .event-title { font-size: 24px; }
}

/* -----------------------------------
   イベント詳細
   ----------------------------------- */
@media (max-width: 600px) {
  .event-hero { aspect-ratio: 4 / 3; }
  .event-title { font-size: 21px; }
  .spec__row { grid-template-columns: 1fr; gap: 2px; }
}

/* -----------------------------------
   セクションの見出し（#160／#174／#175）
   ここは最後に読み込むファイルのため、
   画面幅の指定に上書きされないよう、まとめて置いています。
   ----------------------------------- */

/* 色は黒で統一します */
.sec-title .hl,
.sec-title--left .hl,
.sec-title span,
.sec-title--left span {
  background: none;
  color: inherit;
  padding: 0;
}

/*
 * .sec-title--left は flex のため、要素の間に空きが入ります。
 * アイコンとの間隔だけ残し、文字どうしはくっつけます。
 */
.sec-title--left {
  gap: 0;
  flex-wrap: wrap;
}
.sec-title--left .ico { margin-right: var(--sp-3); }

/*
 * 見出しは Zen Maru Gothic（丸ゴシック）です。
 * ロゴの丸みに合わせています。
 * 見出しに使う文字だけに絞って読み込むため、45KB程度で済みます。
 */
.sec-title,
.sec-title--left,
.sec-title.sec-title--left,
.page-title {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--c-text);
}

.page-title { font-size: 30px; }

@media (max-width: 700px) {
  .page-title { font-size: 23px; }
}

@media (max-width: 900px) {
  .sec-title,
  .sec-title--left,
  .sec-title.sec-title--left { font-size: 23px; }
}

@media (max-width: 600px) {
  .sec-title,
  .sec-title--left,
  .sec-title.sec-title--left { font-size: 20px; }
}

/* -----------------------------------
   見出し領域の余白（上下を詰めます）
   ----------------------------------- */
.hero--flat {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-4);
}
.hero--flat .page-head__grid {
  align-items: center;
  gap: var(--sp-4);
}
.hero--flat .page-lead { margin-bottom: 0; }

/* 見出しのすぐ下にくる本文も、近づけます */
.hero--flat + .section { padding-top: var(--sp-5); }

@media (max-width: 700px) {
  .hero--flat {
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-3);
  }
  .hero--flat + .section { padding-top: var(--sp-4); }
}

/* -----------------------------------
   ランキングの順位（#186／#208）
   ここは最後に読み込むファイルのため、確実に効きます。
   ----------------------------------- */
.rank {
  /*
   * 親が flex のため、inline-flex で中身を中央に寄せます。
   * grid の place-items だけでは、環境により中央になりません。
   */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* 1〜3位は、金・銀・銅の色にします */
.rank--1 { background: #E3B23C; color: #fff; }
.rank--2 { background: #A8AEB5; color: #fff; }
.rank--3 { background: #C1794A; color: #fff; }

/* -----------------------------------
   いいねの数を必ず表示する
   ----------------------------------- */
.likebtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 62px;
  justify-content: center;
}
.likebtn__count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

/* -----------------------------------
   部門のバッジ（#179）
   黒背景・白抜きで、目立つようにします。
   .part--adult / .part--kid より後ろかつ同じ詳細度で指定します。
   ----------------------------------- */
.part,
.part--adult,
.part--kid,
.part--sm {
  background: var(--c-text);
  color: #fff;
  border: 1px solid var(--c-text);
  font-weight: 700;
}

/* -----------------------------------
   投稿カードの下部（お名前・部門・いいね）
   部門名が折り返して崩れないようにします。
   ----------------------------------- */
.card__body .row {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-2);
}
.card__body .row__main {
  min-width: 0;
  flex: 1 1 auto;
}
.card__body .row__sub {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

/*
 * お名前が長いときは、末尾を省略します。
 * 以前は span:first-child で指定していましたが、お名前が span で囲まれておらず、
 * 部門のバッジに当たって部門のほうが見切れていました（#373）。
 * 省略はお名前だけにかけ、行全体は切り取らないようにします。
 */
.card__body .row__sub {
  white-space: nowrap;
}
.card__body .row__sub > .row__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 部門は折り返さず、そのままの幅を保ちます */
.part,
.part--sm {
  white-space: nowrap;
  flex: none;
}

/* いいねのボタンは縮まないようにします */
.card__body .likebtn {
  flex: none;
}

/* -----------------------------------
   ページ見出しのイラスト
   小さいと形が分かりにくいため、大きめにします。
   入れ物（グリッドの列）も一緒に広げないと、はみ出して縮みます。
   ----------------------------------- */
.page-head__grid { grid-template-columns: 1fr 200px; }

.page-head__art {
  width: 200px;
  justify-self: center;
  color: var(--c-deco);
}
.page-head__art svg {
  width: 100%;
  height: auto;
  /* 線を太めにして、うすい色でも形が見えるようにします */
  stroke-width: 2.6;
}

@media (max-width: 900px) {
  .page-head__grid { grid-template-columns: 1fr 150px; }
  .page-head__art { width: 150px; }
}

/* 画面が狭いときは、イラストを上に置いて1列にします */
@media (max-width: 700px) {
  .page-head__grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--sp-4);
  }
  .page-head__tx .page-title,
  .page-head__tx .page-lead { text-align: center; }
  .page-head__art { width: 120px; order: -1; }
}

/* -----------------------------------
   ロゴ（ご支給いただいた画像）
   ----------------------------------- */
.logo__img {
  display: block;
  width: auto;
  /* 上添えのロゴは2段組みのため、高さを取ります */
  height: 58px;
}

@media (max-width: 700px) {
  .logo__img { height: 46px; }
}

/* ご登録画面のロゴは、中央に大きく置きます */
.page-logo {
  margin: 0 auto var(--sp-5);
  text-align: center;
}
.page-logo img {
  display: inline-block;
  width: 100%;
  max-width: 280px;
  height: auto;
}
@media (max-width: 600px) {
  .page-logo img { max-width: 210px; }
}