/* トップページの写真・紙の質感・余白を、下層ページにも引き継ぐ。 */
.subpage.site-wrapper {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 0;
  --subpage-ink: #174563;
  --subpage-green: #445148;
}

.subpage-header .mbody {
  padding: 26px 32px 30px;
}

.subpage-header .mbody h1 {
  font-size: clamp(28px, 4.6vw, 42px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.subpage-brand {
  display: block;
  margin-bottom: 10px;
  color: var(--subpage-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.subpage .page-home-return {
  justify-content: flex-start;
  margin-top: 8px;
}

.subpage .home-return-link {
  padding: 8px 4px;
  color: #526256;
  background: transparent;
  font-size: 12px;
  font-weight: 400;
}

.subpage .home-return-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.subpage-main {
  flex: 1;
  width: min(100%, 800px);
  min-width: 0;
  margin: 24px auto 0;
  overflow-wrap: anywhere;
}

.subpage-main-compact {
  max-width: 520px;
}

.page-lead {
  margin-bottom: 32px;
}

.page-lead h2 {
  margin: 0 0 18px;
  color: #243d37;
  border: 0;
  font-size: clamp(25px, 3.8vw, 34px);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.035em;
}

.page-lead > p:not(.admin-post-date):not(.content-type-badge) {
  margin: 0;
  color: #566159;
  font-size: 15px;
  line-height: 2;
}

.subpage .paper-panel,
.subpage .sentence,
.subpage .admin-post-card,
.subpage .post-list-card {
  padding: 28px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 4px 4px 0 rgb(23 27 30 / 6%);
  line-height: 1.9;
}

.paper-panel > :first-child,
.subpage .sentence > :first-child {
  margin-top: 0;
}

.paper-panel > :last-child,
.subpage .sentence > :last-child {
  margin-bottom: 0;
}

.paper-panel h2 {
  margin: 0 0 24px;
  color: var(--subpage-green);
  font-size: 20px;
  line-height: 1.6;
}

.paper-panel h3,
.purpose-points h2,
.join-steps h3 {
  margin: 0 0 8px;
  color: var(--subpage-green);
  font-size: 19px;
  line-height: 1.6;
}

.purpose-points,
.join-steps {
  margin: 0;
  padding-left: 30px;
}

.purpose-points { padding-left: 0; list-style: none; }
.purpose-points > li { padding-left: 0; }

.purpose-points > li,
.join-steps > li {
  padding: 22px 0 22px 10px;
}

.purpose-points > li + li,
.join-steps > li + li {
  border-top: 1px solid var(--line);
}

.purpose-points > li:first-child,
.join-steps > li:first-child {
  padding-top: 0;
}

.purpose-points > li:last-child,
.join-steps > li:last-child {
  padding-bottom: 0;
}

.purpose-points > li::marker,
.join-steps > li::marker,
.rules-list > li::marker {
  color: #687d42;
  font-weight: 700;
}

.purpose-points p,
.join-steps p {
  margin: 0;
  color: #566159;
  font-size: 15px;
  line-height: 1.9;
}

.rules-list {
  margin: 0;
  padding-left: 30px;
}

.rules-list > li {
  padding: 20px 0 20px 12px;
  line-height: 2;
}

.rules-list > li + li { border-top: 1px solid var(--line); }
.rules-list > li:first-child { padding-top: 0; }
.rules-list > li:last-child { padding-bottom: 0; }

.page-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
}

.page-benefits li {
  padding-inline: 3px;
  background: linear-gradient(transparent 55%, #c6ed75 55%, #c6ed75 90%, transparent 90%);
}

.page-actions,
.public-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 28px;
}

.subpage-text-link,
.subpage-back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #526256;
  font-size: 14px;
  text-underline-offset: 5px;
  line-height: 1.7;
}

.page-note {
  margin-top: 24px;
  padding: 16px 20px;
  color: #566159;
  background: #eef2e7;
  border-left: 3px solid #aacd05;
  font-size: 14px;
  line-height: 1.9;
}

.page-note p { margin: 0; }

/* 活動は開閉式、投稿は紙のカードで読みやすくまとめる。 */
.subpage .activity-project-section { margin-top: 0; }

.subpage .activity-section-title,
.subpage .post-management-title {
  padding-bottom: 12px;
  border-bottom: 1px solid #d5ddd5;
}

.subpage .activity-section-title h2,
.subpage .post-management-title h2 {
  margin: 0;
  color: var(--subpage-green);
  font-size: 20px;
}

.subpage .activity-section-title p { margin: 0; }

.subpage .activity-project-card {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  box-shadow: 3px 3px 0 rgb(23 27 30 / 5%);
}

.subpage .activity-project-card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 12px;
  gap: 12px 20px;
  padding: 22px 24px;
  color: var(--subpage-green);
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1.7;
  list-style: none;
}

.subpage .activity-project-card > summary::-webkit-details-marker { display: none; }

.subpage .activity-project-card > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #687d42;
  border-bottom: 2px solid #687d42;
  transform: rotate(45deg);
}

.subpage .activity-project-card[open] > summary {
  background: #f0f5e9;
}

.subpage .activity-project-card[open] > summary::after {
  transform: rotate(225deg);
}

.subpage .activity-project-card > summary:hover { background: #f5f8ef; }

.subpage .activity-project-content {
  padding: 24px;
  border: 0;
  border-top: 1px solid var(--line);
  box-shadow: none;
}

.subpage .activity-empty-state { margin-top: 20px; }

.subpage .post-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
  margin-top: 16px;
}

.subpage .post-list > .sentence { grid-column: 1 / -1; }

.subpage .post-list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 28px 24px 24px;
}

.subpage .post-list-card::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 24px;
  width: 52px;
  height: 15px;
  background: #d9e9a6;
  transform: rotate(5deg);
}

.subpage .post-list-card:nth-child(3n + 2)::before { background: #b8dce4; }
.subpage .post-list-card:nth-child(3n + 3)::before { background: #eee0a9; }

.subpage .post-list-card h2 {
  margin: 0 0 12px;
  color: var(--subpage-green);
  font-size: 21px;
  line-height: 1.6;
}

.subpage .post-list-card > p:not(.admin-post-date) {
  margin: 0 0 20px;
  color: #566159;
  font-size: 14px;
  line-height: 1.9;
}

.subpage .post-list-card .post-detail-link {
  align-self: flex-end;
  margin-top: auto;
  font-size: 14px;
}

.subpage .public-post { margin-top: 0; }
.subpage .public-post .post-content { line-height: 1.9; }

.subpage .content-type-badge {
  border-radius: 4px;
  font-weight: 600;
}

/* 入力や管理の操作も、同じ色・角丸・余白にそろえる。 */
.subpage .login-area { margin-top: 0; }
.subpage .login-area > h2 { border: 0; }
.subpage .login-form { margin-top: 26px; }

.subpage .login-field label,
.subpage .admin-form-field label,
.subpage .post-type-field legend { color: var(--subpage-green); }

.subpage .login-field input,
.subpage .admin-form-field input:not([type="radio"]):not([type="hidden"]),
.subpage .admin-form-field textarea {
  min-height: 48px;
  border: 1px solid #b9c8c3;
  border-radius: 6px;
}

.subpage .login-field input:focus,
.subpage .admin-form-field input:focus,
.subpage .admin-form-field textarea:focus {
  border-color: #687d42;
  outline: 2px solid #dce7c9;
}

.subpage .login-button,
.subpage .post-submit-button,
.subpage .delete-button,
.subpage .logout-button,
.subpage .admin-link-button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  line-height: 1.6;
}

.subpage .login-button,
.subpage .post-submit-button {
  min-height: 48px;
  font-size: 16px;
}

.subpage .admin-link-button {
  box-sizing: border-box;
  color: var(--subpage-ink);
  border-color: var(--line-blue);
  font-size: 14px;
}

.subpage .admin-post-card { margin-top: 24px; }
.subpage .admin-post-card h3 { color: var(--subpage-green); }
.subpage .admin-post-body { padding: 16px; border-radius: 3px; }
.subpage .admin-logout-area { padding-bottom: 0; }
.subpage .post-create-area { margin-top: 0; }
.subpage .post-create-area > h2 { margin-bottom: 20px; color: var(--subpage-green); border: 0; font-size: 20px; }
.subpage .post-type-option { display: flex; align-items: flex-start; gap: 12px; border-radius: 6px; }
.subpage .post-type-option:has(input:checked) { background: #f0f5e9; border-color: #8a9e62; }
.subpage .login-error,
.subpage .admin-success { border-radius: 4px; line-height: 1.8; }

.subpage :is(a, button, summary):focus-visible {
  outline: 3px solid #687d42;
  outline-offset: 3px;
}

.subpage .home-footer :is(a, button):focus-visible { outline-color: #c6de50; }

@media (max-width: 760px) {
  .subpage-header .mbody { padding: 24px 20px 24px 52px; }
  .subpage-header .mbody h1 { font-size: clamp(27px, 6.7vw, 36px); line-height: 1.45; }
  .subpage-brand { max-width: 25em; margin-bottom: 8px; font-size: 10px; }
  .subpage-main { margin-top: 18px; }
}

@media (max-width: 600px) {
  .page-lead { margin-bottom: 24px; }
  .page-lead h2 { font-size: 25px; }
  .subpage .paper-panel,
  .subpage .sentence,
  .subpage .admin-post-card,
  .subpage .post-list-card { padding: 24px 20px; }
  .subpage .post-list { grid-template-columns: minmax(0, 1fr); }
  .subpage .activity-project-card > summary { grid-template-columns: minmax(0, 1fr) 12px; gap: 4px 12px; padding: 18px 20px; font-size: 16px; }
  .subpage .activity-project-card > summary time { grid-column: 1; grid-row: 2; }
  .subpage .activity-project-card > summary::after { grid-column: 2; grid-row: 1 / 3; }
  .subpage .activity-project-content { padding: 20px; }
  .page-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
  .page-actions .recruitment-link { width: 100%; }
  .purpose-points,
  .join-steps,
  .rules-list { padding-left: 22px; }
  .purpose-points > li,
  .join-steps > li,
  .rules-list > li { padding-left: 5px; }
  .page-note { padding: 14px 16px; }
  .purpose-points,
  .purpose-points > li { padding-left: 0; }
}

@media (max-width: 360px) {
  .subpage .home-footer { grid-template-columns: minmax(0, 1fr); }
  .subpage .home-footer-top { justify-self: start; }
}
