@charset "UTF-8";

/* 入口は各々違う図形で識別。準備中も状態を示して案内ページへ進める。 */
body.page-home .home-doors-wrap { padding-block: 40px 56px; }
body.page-home .home-doors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
body.page-home .home-door {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: center;
  gap: 16px 8px;
  min-height: 152px;
  padding: 24px;
  border: var(--home-line);
  border-radius: var(--home-round);
  background: var(--home-yellow);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
body.page-home .home-door:nth-child(2) { background: var(--home-blue); }
body.page-home .home-door--soon { background: var(--paper); border-color: var(--hair-strong); }
body.page-home .home-door:hover { transform: translateY(-4px); box-shadow: var(--home-shadow); border-color: var(--ink); }
body.page-home .home-door__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.page-home .home-icon__fill { fill: var(--kaki-light); }
body.page-home .home-icon__paper { fill: var(--paper); }
body.page-home .home-door:nth-child(2) .home-icon__fill { fill: var(--paper); }
body.page-home .home-door--soon .home-icon__fill { fill: var(--home-blue); }
body.page-home .home-door__body { flex: 1 0 100%; display: flex; flex-direction: column; gap: 4px; }
body.page-home .home-door__label { font-size: 1rem; font-weight: 700; }
body.page-home .home-door__soon {
  position: absolute;
  top: 24px;
  right: 16px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--paper-2);
  font-size: 0.6875rem;
  color: var(--ink-soft);
}
body.page-home .home-door > .home-arrow { position: absolute; top: 32px; right: 24px; }
body.page-home .home-door--soon > .home-arrow { display: none; }

@media (max-width: 959px) {
  body.page-home .home-door { padding: 16px; }
  body.page-home .home-door__label { font-size: 0.875rem; }
  body.page-home .home-door__soon { top: 16px; right: 8px; }
  body.page-home .home-door > .home-arrow { right: 16px; }
}
@media (max-width: 699px) {
  body.page-home .home-doors-wrap { padding-block: 32px 40px; }
  body.page-home .home-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.page-home .home-door { min-height: 128px; gap: 8px; border-radius: var(--home-round-sm); }
  body.page-home .home-door__icon { width: 40px; height: 40px; }
  body.page-home .home-door > .home-arrow { top: 24px; width: 20px; height: 20px; }
}