@charset "utf-8";
/*********************************
HOBBY ROUND 34 2026.05.02 STYLE-CONTENT
last update - 2026.03.12
*********************************/
.page-frame {
  position: relative;
  overflow: clip;
  color: var(--c-txt);
  background:
    linear-gradient(180deg, #f3f3f3 0%, #f7f5f2 20%, #f3f3f3 100%);
}
.page-frame .sub-hero__inner, .page-frame .page-intro__inner, .page-frame .section-shell, .page-frame .page-cta__inner {
  width: min(100%, var(--container));
  margin-inline: auto;
}
/* =========================================
   Sub Hero
   かなり軽め
========================================= */
.page-frame .sub-hero {
  padding: clamp(44px, 6vw, 84px) var(--sp-unit) clamp(18px, 3vw, 28px);
  background: radial-gradient(circle at 12% 20%, rgb(239 68 68 / 8%), transparent 50%), radial-gradient(circle at 88% 18%, rgb(250 204 21 / 7%), transparent 50%), radial-gradient(circle at 80% 86%, rgb(34 197 94 / 6%), transparent 55%), radial-gradient(circle at 18% 88%, rgb(6 182 212 / 6%), transparent 55%), #fff;
}
.page-frame .sub-hero__eyebrow {
  margin: 0 0 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(34 34 34 / 56%);
}
.page-frame .sub-hero__title {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(3rem, 6.4vw, 4.4rem);
  font-weight: 800;
  font-style: italic;
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.page-frame .sub-hero__lead {
  margin: 0.75rem 0 0;
  font-size: var(--fs-md);
  font-weight: 700;
  color: rgb(34 34 34 / 66%);
}
/* =========================================
   Breadcrumb
========================================= */
.page-breadcrumb {
  width: min(100%, var(--container));
  margin-inline: auto;
  margin-bottom: var(--sp-lg);
  padding: 0 var(--sp-unit) 0;
  position: relative;
}
.page-breadcrumb::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 0.7rem;
  background:
    linear-gradient(90deg, rgb(230 0 18 / 22%) 0%, rgb(255 239 0 / 14%) 35%, rgb(0 191 255 / 14%) 68%, rgb(0 230 118 / 16%) 100%);
}
.page-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-breadcrumb__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(34 34 34 / 52%);
}
.page-breadcrumb__item + .page-breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 1.1rem;
  height: 1px;
  margin: 0 0.2rem 0 0.1rem;
  background: rgb(34 34 34 / 22%);
  transform: translateY(-1px) rotate(-18deg);
}
.page-breadcrumb__item a {
  color: inherit;
  text-decoration: none;
  transition:
    color 0.24s ease, transform 0.24s ease;
}
.page-breadcrumb__item a:hover {
  color: var(--c-main);
  transform: translateY(-1px);
}
.page-breadcrumb__item[aria-current="page"] {
  color: var(--c-main);
}
.page-breadcrumb__item[aria-current="page"]::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.45rem;
  border-radius: 999px;
  background: var(--c-main);
  box-shadow: 0 0 0 4px rgb(230 0 18 / 10%);
}
/* =========================================
   Intro
   説明 + 検索窓などを受ける共通箱
========================================= */
.page-intro {
  padding: 0 var(--sp-unit) var(--sp-xl);
}
.page-intro__inner {
  width: min(100%, var(--container));
  margin-inline: auto;
  position: relative;
}
/* 背景タイポ */
.page-intro__bg-word {
  position: absolute;
  inset: 0 auto auto 0;
  translate: -1% -12%;
  font-family: var(--font-en);
  font-size: clamp(2.8rem, 11vw, 7rem);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.06em;
  color: rgb(230 0 18 / 4%);
  pointer-events: none;
}
/* 横長写真 */
.page-intro__visual {
  margin-bottom: var(--sp-md);
  border-radius: 1rem;
  overflow: hidden;
  background: rgb(0 0 0 / 4%);
}
.page-intro__visual img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}
/* 見出し */
/* リード */
.page-intro__lead {
  margin-bottom: var(--sp-xs);
}
.page-intro__lead p {
  font-size: calc(var(--fs-base) * 1.8);
  font-weight: 700;
  line-height: 1.6;
}
/* 本文 */
.page-intro__body {
  margin-bottom: var(--sp-md);
}
.page-intro__body p {
  margin: 0 0 .8rem;
  line-height: var(--lh-base);
  /* color: rgb(34 34 34 / 72%); */
  font-size: calc(var(--fs-base) * 1.2);
}
.page-intro__notice li {
  color: rgb(34 34 34 / 72%);
  text-indent: -1em;
  padding-left: 1em;
}
/* モジュール（検索 / ガントなど） */
.page-intro__module {
  padding-top: var(--sp-md);
  border-top: 1px solid rgb(0 0 0 / 8%);
}
.page-intro__module-body {
  margin-top: var(--sp-sm);
}
/* 仮ボックス */
.placeholder-box--intro {
  min-height: 140px;
  border: 1px solid rgb(0 0 0 / 6%);
  border-radius: .8rem;
  background: rgb(255 255 255 / 70%);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
}
@media (max-width: 767px) {
  .page-intro__lead p {
    font-size: calc(var(--fs-base) * 1.4);
  }
}
/* =========================================
   Page Sections
========================================= */
.page-sections {
  position: relative;
  padding: clamp(48px, 7vw, 96px) var(--sp-unit);
  background:
    radial-gradient(circle at 12% 20%, rgba(239, 68, 68, .06), transparent 50%), radial-gradient(circle at 88% 18%, rgba(250, 204, 21, .05), transparent 50%), radial-gradient(circle at 80% 86%, rgba(34, 197, 94, .04), transparent 55%), radial-gradient(circle at 18% 88%, rgba(6, 182, 212, .04), transparent 55%), #ffffff;
}
.page-sections::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background:
    linear-gradient(90deg, var(--c-main), var(--c-yellow), var(--c-blue), var(--c-green));
  opacity: .45;
}
.page-sections + .page-sections {
  border-top: 1px solid rgb(0 0 0 / 6%);
}
/* 背景トーン違い */
.page-sections--plain {
  background: transparent;
}
.page-sections--soft {
  background: rgb(0 0 0 / 2.5%);
}
.page-sections--warm {
  background: rgb(230 0 18 / 2.5%);
}
.page-sections--cool {
  background: rgb(0 191 255 / 2.5%);
}
/* 必要なら上のアクセントライン */
.page-sections--accent::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--c-main) 0%, var(--c-yellow) 35%, var(--c-blue) 68%, var(--c-green) 100%);
  opacity: 0.7;
}
/* =========================================
   Section Shell
========================================= */
.section-shell {
  width: min(100%, var(--container));
  margin-inline: auto;
  position: relative;
}
.section-shell__bg-word {
  position: absolute;
  inset: 0 auto auto 0;
  translate: -1% -14%;
  font-family: var(--font-en);
  font-size: clamp(2.8rem, 11vw, 7.8rem);
  font-weight: 800;
  font-style: italic;
  line-height: 0.8;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: rgb(0 0 0 / 3%);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.section-shell__head, .section-shell__body {
  position: relative;
  z-index: 1;
}
.section-shell__head {
  margin-bottom: var(--sp-md);
}
.section-shell__eyebrow {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(34 34 34 / 54%);
}
.section-shell__title {
  margin: 0.25rem 0 0;
  font-family: var(--font-en);
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  font-weight: 800;
  font-style: italic;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.section-shell__desc {
  margin: 0.7rem 0 0;
  max-width: 52rem;
  font-size: var(--fs-sm);
  color: rgb(34 34 34 / 70%);
}
.section-shell__body {
  margin-top: var(--sp-md);
}
/* =========================================
   Box / Card
========================================= */
.page-frame .frame-box, .page-frame .frame-card {
  position: relative;
  border: 1px solid rgb(0 0 0 / 6%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 76%);
  box-shadow: 0 8px 20px rgb(50 50 50 / 5%);
}
.page-frame .frame-box::after, .page-frame .frame-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-main) 0%, var(--c-yellow) 35%, var(--c-blue) 68%, var(--c-green) 100%);
  border-radius: 0 0 1rem 1rem;
  opacity: 0.82;
}
.page-frame .frame-box--hero {}
.page-frame .frame-grid {
  display: grid;
  gap: var(--sp-md);
}
.page-frame .frame-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page-frame .frame-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.page-frame .placeholder-box {
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: var(--sp-lg);
  text-align: center;
  color: rgb(34 34 34 / 48%);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.page-frame .placeholder-box--hero {
  min-height: clamp(220px, 28vw, 380px);
}
/* =========================================
   CTA
   ここも少し軽め
========================================= */
.page-frame .page-cta {
  padding: clamp(44px, 6vw, 84px) var(--sp-unit) clamp(56px, 7vw, 104px);
  background:
    linear-gradient(180deg, rgb(14 20 32 / 98%), rgb(18 25 40 / 98%));
  color: var(--c-wht);
}
.page-frame .page-cta__eyebrow {
  margin: 0 0 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 60%);
}
.page-frame .page-cta__title {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(2.1rem, 5.5vw, 4.2rem);
  font-weight: 800;
  font-style: italic;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.page-frame .page-cta__text {
  margin: 0.9rem 0 0;
  max-width: 44rem;
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 74%);
}
.page-frame .page-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  margin-top: var(--sp-md);
}
.page-frame .page-cta__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.05rem;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 16%);
  background: rgb(255 255 255 / 8%);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}
.page-frame .page-cta__actions a:hover {
  transform: translateY(-2px);
  background: rgb(255 255 255 / 14%);
}
/* =========================================
   Scoped Variants
========================================= */
@scope (.page-frame[data-page-type="standard"]) {
  .page-intro__bg-word {
    color: rgb(230 0 18 / 3.5%);
  }
  .section-shell__bg-word {
    color: rgb(0 0 0 / 2.5%);
  }
}
@scope (.page-frame[data-page-type="directory"]) {
  .page-intro__body {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
  }
  .page-intro__bg-word {
    color: rgb(0 191 255 / 5%);
  }
  .section-shell__bg-word {
    color: rgb(0 191 255 / 4%);
  }
}
@scope (.page-frame[data-page-type="feature"]) {
  .sub-hero__lead {
    color: rgb(255 140 0 / 78%);
  }
  .page-intro__bg-word {
    color: rgb(255 239 0 / 5%);
  }
  .section-shell__bg-word {
    color: rgb(255 140 0 / 4%);
  }
}
/* =========================================
   Local Scopes
========================================= */
@scope (.page-frame .section-shell) {
  .section-shell__head + .section-shell__body {
    margin-top: 0.15rem;
  }
}
@scope (.page-frame .page-cta) {
  .page-cta__actions a:first-child {
    background: var(--c-main);
    border-color: var(--c-main);
    color: var(--c-wht);
  }
}
/* =========================================
   Responsive
========================================= */
@media (max-width: 960px) {
  .page-frame .frame-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .page-frame .sub-hero__inner, .page-frame .page-intro__inner, .page-frame .section-shell, .page-frame .page-cta__inner {
    width: min(100%, var(--container));
  }
  .page-frame .page-intro__body, .page-frame .frame-grid--2, .page-frame .frame-grid--3 {
    grid-template-columns: 1fr;
  }
  .page-frame .section-shell {
    padding: 20px 0;
  }
  .page-frame .page-cta__actions {
    flex-direction: column;
  }
  .page-frame .page-cta__actions a {
    width: 100%;
  }
}