@charset "UTF-8";

/* 読み物としての文字組みと、メニュー単位の区切り。キットの色は継承する。 */
:root {
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --round: 3px;
}
body {font-family:var(--font-body);font-size:17px;font-weight:400;line-height:1.95;letter-spacing:.015em;word-break:normal;line-break:strict}
h1,h2,h3 {font-family:var(--font-body);letter-spacing:.035em}
h2 {font-size:clamp(26px,2.7vw,34px);line-height:1.65}
.prose,.about .prose,.research .prose,.host-content .prose {font-size:17px;line-height:2}
.quiet,.note,.research .note,.preparation-columns .quiet,.host-cta p,.hero-note,.contents-samples>.quiet {font-size:14px;line-height:1.9}
.hero-lead,.host-lead {font-size:18px;line-height:2}
.hero-small,.community-intro,.download-intro,.benefits p,.experience p,.timeline p,.checklist,.host-request li,.host-audience p,.faq details>p {font-size:16px;line-height:1.95}
.eyebrow,.research-caption,.host-audience h3 {font-size:14px}
.benefits h3,.timeline h3,.preparation-columns h3,.host-request h3 {font-size:18px;line-height:1.7}
.community-title {font-size:23px;line-height:1.65}
.small-callout p {font-size:15px;line-height:1.9}
.button,.text-link {font-size:16px;min-height:48px}
.facts {font-size:16px;gap:28px}
.facts svg {width:21px;height:21px}
.experience-ribbon {font-size:16px;border-block:1px solid var(--line)}

/* 小さなカプセルではなく、各まとまりを示す文字見出し。 */
.label:not(.label-secondary) {display:block;width:fit-content;background:transparent;color:var(--sage-dark);font-size:20px;font-weight:700;letter-spacing:.035em;border-radius:0;border-bottom:2px solid var(--sage);padding:0 0 9px}
.label.label-secondary,#flow-heading.label,#download-heading.label {font-size:15px;line-height:1.65;letter-spacing:.025em}
.label.label-secondary.label-beige {padding:6px 12px;border-radius:3px}
.research h2,.faq-section h2 {font-size:28px}
.host-panel h2 {font-size:clamp(28px,3.2vw,38px)}

/* ロゴとメニューの役割を分け、リンクの間に十分な間隔を取る。 */
.header {display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-block:25px 0;border-bottom:1px solid var(--line)}
.brand-name {font-size:26px;letter-spacing:.08em}
.brand-sub {font-size:12px;line-height:1.7}
.brand-icon {width:39px;height:39px}
.header nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;gap:0;border-top:1px solid var(--line);font-size:15px;font-weight:600;letter-spacing:.015em}
.header nav a {display:flex;align-items:center;justify-content:center;min-height:56px;padding:12px 8px;line-height:1.6;text-align:center;position:relative}
.header nav a+a:before {content:"";position:absolute;left:0;top:18px;bottom:18px;border-left:1px solid var(--line)}
.header .nav-host {margin-left:0;border-bottom:0}
.header nav a:hover {background:var(--cream);text-decoration:none}
.header nav a:focus-visible {outline-offset:-4px}

/* 全幅の背景で大項目、細い線と間隔でその中の項目を分ける。 */
.workshop-shell {background:var(--paper)}
.implementation {background:#f1f3ed;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.host-shell {background:var(--paper)}
.faq-shell {background:#f7f3ec;border-top:1px solid var(--line)}
.experience-panel,.implementation>.benefits-shell>.wrap {background:#f8f7f3;border-radius:3px}
.implementation>.flow-section {padding-top:8px;padding-bottom:64px}
.implementation>.benefits-shell {margin-bottom:56px}
.host-shell>.research {padding-top:24px}
.flow-header {padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:32px}
.flow-section .timeline {row-gap:30px}
.timeline li>span {width:36px;height:36px;font-size:14px}
.benefits li {border-bottom-style:solid}
.benefits li>div,.timeline li>div,.section-intro,.prose {min-width:0}
.preparation-columns {gap:32px}
.preparation-columns>div {border-radius:3px}
.preparation-columns h3 {padding-bottom:16px;border-bottom:1px solid var(--line)}
.checklist {column-gap:16px;row-gap:12px}
.checklist li:before {top:12px}
.host-request {border-left-style:solid}
.host-audience {border-top-style:solid}
.host-panel {background:#eef1e9;border-radius:3px}
.download-shell {border-radius:3px}
.kit-gallery a,.kit-gallery .kit-preview,.sample-cards>a {border-radius:3px}
.kit-gallery a>span,.kit-gallery .kit-caption,.sample-cards a>span {font-size:15px;line-height:1.7}
.kit-gallery .card-sides a>span {font-size:14px;line-height:1.7;min-height:44px}
.faq summary {font-size:17px;line-height:1.8;padding-block:24px}
.faq details>p {padding-bottom:26px}
.q {font-size:23px}
.footer-main p,.footer-main p.quiet,.footer-links {font-size:14px;line-height:1.9}
.footer-links a {min-height:36px;display:flex;align-items:center}
.footer-bottom {font-size:12px}
.preview-header h2,.preview-close {font-size:16px}

@media (max-width:1050px) and (min-width:801px) {
  .about,.research {gap:32px;grid-template-columns:1fr 1fr}
  .implementation>.preparation-materials .preparation-columns>div {padding-inline:30px}
  .checklist {grid-template-columns:1fr}
  .experiences {gap:22px}
  .experience-title {gap:7px}
  .experience h3 {font-size:17px}
}
@media (max-width:800px) {
  body {font-size:16px}
  .prose,.about .prose,.research .prose,.host-content .prose {font-size:16px}
  .hero-lead,.host-lead {font-size:17px}
  .header {gap:18px;padding-top:22px}
  .header nav {font-size:14px;grid-template-columns:1fr 1fr}
  .header nav a {min-height:48px;padding:10px 4px;white-space:normal}
  .header nav a:nth-child(3),.header nav a:nth-child(4) {border-top:1px solid var(--line)}
  .header nav a:nth-child(3):before {display:none}
  .header nav a+a:before {top:14px;bottom:14px}
  .brand-name {font-size:25px}
  .brand-sub {font-size:11px}
  .label:not(.label-secondary) {font-size:18px;padding-bottom:8px}
  .experiences {grid-template-columns:1fr 1fr;gap:30px 24px}
  .experience h3 {font-size:19px}
  .experience-title>span {width:28px;height:28px;font-size:12px;flex-shrink:0}
  .community-title {font-size:21px}
  .research h2,.faq-section h2 {font-size:27px}
  .implementation>.flow-section {padding-top:4px;padding-bottom:44px}
  .implementation>.benefits-shell {margin-bottom:40px}
  .host-shell>.research {padding-top:12px}
  .host-request {border-top-style:solid}
  .preparation-columns {gap:20px}
  .faq details>p {padding-inline:0}
  .footer-links {gap:12px 20px}
}
@media (max-width:520px) {
  h2 {font-size:26px;letter-spacing:.025em}
  #hero-heading {font-size:clamp(24px,7.2vw,36px);letter-spacing:.035em;line-height:1.65}
  .hero-small br {display:none}
  .eyebrow {font-size:13px}
  .hero-note {font-size:14px}
  .facts {font-size:15px;gap:22px}
  .facts svg {width:19px;height:19px}
  .button {font-size:15px;padding:13px 14px;gap:14px}
  .hero .button {width:100%}
  .hero .actions {align-items:stretch}
  .text-link {font-size:15px;width:fit-content}
  .experience-ribbon {font-size:13px;gap:10px}
  .experience-ribbon i {font-size:10px}
  .label.label-secondary,#flow-heading.label,#download-heading.label {font-size:14px}
  .experience-panel {padding-block:32px}
  .experiences {grid-template-columns:1fr;gap:26px}
  .experience {grid-template-columns:76px minmax(0,1fr);column-gap:14px;border-top-style:solid}
  .experience img {width:76px;height:95px}
  .experience-title {gap:8px}
  .experience p {font-size:16px}
  .small-callout {gap:10px}
  .small-callout p {font-size:14px}
  .community-title {font-size:20px}
  .benefits h3,.timeline h3,.preparation-columns h3,.host-request h3 {font-size:18px}
  .community-intro,.benefits p,.timeline p,.download-intro,.host-request li,.host-audience p {font-size:16px}
  .timeline li {gap:14px}
  .checklist {grid-template-columns:1fr;font-size:16px}
  .preparation-columns>div {padding-block:26px}
  .flow-header {gap:20px}
  .host-panel h2 {font-size:29px}
  .host-lead {font-size:17px}
  .host-audience h3 {font-size:16px}
  .host-cta p {font-size:14px}
  .research h2 {font-size:26px}
  .kit-gallery a>span,.kit-gallery .kit-caption {font-size:15px}
  .kit-gallery .card-sides a>span {font-size:13px}
  .sample-cards {gap:8px}
  .sample-cards>a {padding:7px}
  .sample-cards a>span {font-size:13px;line-height:1.65;min-height:58px}
  .faq summary {font-size:16px;gap:12px}
  .faq details>p {font-size:16px}
  .footer-bottom {font-size:12px}
  .preview-header h2,.preview-close {font-size:15px}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto}}

/* 指定された持ち物ブロックと、移動した募集案内の説明。 */
.preparation-materials .preparation-columns>div:nth-child(2) {background:var(--paper)}
.hero .eyebrow {align-items:flex-start;gap:10px}
.hero .eyebrow .dot {flex-shrink:0;margin-top:.8em}
.host-panel>.host-emphasis {font-size:17px;line-height:1.9;margin-bottom:20px}
@media(max-width:520px){.host-panel>.host-emphasis{font-size:16px}}
@media(max-width:350px){#about-heading{font-size:24px}}

/* 募集メニューの線画アイコン。 */
.header .nav-host {gap:8px}
.announcement-icon {width:22px;height:22px;flex-shrink:0}
/* カードを通常のグリッド内に置き、画像に応じて高さを確保する。 */
.hero .kit-stage {display:grid;height:auto;min-height:0;padding-bottom:calc(24px + 5%)}
.hero .hero-sheet {position:relative;grid-area:1 / 1;align-self:start;top:auto;left:auto;width:84%;height:auto}
.hero .sheet-front {margin:20px 0 0 3%}
.hero .sheet-back {margin:clamp(90px,12vw,160px) 0 0 12%}
.experience-panel .experience {border-top:0}
.preparation-materials .preparation-columns>div {background:var(--paper)}
.host-cta .button.primary[aria-disabled=true] {background:var(--sage-dark);color:#fff;border-color:var(--sage-dark)}
.benefits-caption {font-size:16px;font-weight:600;color:var(--sage-dark);margin-top:28px}
.benefits-status {margin-top:8px}

/* 紹介の始まりと、地域で実施する中の白いブロック。 */
.workshop-shell {border-top:1px dashed var(--line)}
.implementation>.flow-section {background:var(--paper);border-radius:6px;padding:40px 64px;margin-bottom:40px}
#community .benefits {gap:20px;margin-top:20px}
#community .benefits li {background:var(--paper);border:0;border-radius:6px;padding:24px;gap:16px}
@media(min-width:801px) and (max-width:1050px){.implementation>.flow-section{padding-inline:46px}}
@media(max-width:800px){.implementation>.flow-section{width:calc(100% - 2 * var(--mobile-panel-inset));padding:32px calc(var(--mobile-body-inset) - var(--mobile-panel-inset))}}
@media(max-width:520px){#community .benefits li{padding:20px 14px;gap:12px}#community .benefits{gap:16px}}

/* 地域への変化を点線で囲み、サンプルを必要なときに開く。 */
.implementation>.benefits-shell>.wrap {border:1px dashed var(--line);border-radius:6px}
.download-shell {position:relative}
.download-shell:before {content:"";position:absolute;top:-15px;left:calc((100% - 65px)/4 - 14px);width:28px;height:28px;background:var(--paper);border-top:1px solid var(--line);border-left:1px solid var(--line);transform:rotate(45deg);pointer-events:none}
.kit-accordion>summary {padding:24px 64px;min-height:72px;font-size:18px;font-weight:600;color:var(--sage-dark);border-radius:3px}
.kit-accordion[open]>summary {border-bottom:1px solid var(--line)}
.download-shell .sample-body {padding:40px 64px}
@media(min-width:801px) and (max-width:1050px){.kit-accordion>summary{padding-inline:46px}.download-shell .sample-body{padding-inline:46px}.download-shell:before{left:calc((100% - 25px)/4 - 14px)}}
@media(max-width:800px){
 .implementation>.benefits-shell>.wrap{padding-inline:calc(var(--mobile-body-inset) - var(--mobile-panel-inset) - 1px)}
 .kit-accordion>summary{padding:20px calc(var(--mobile-body-inset) - var(--mobile-panel-inset) - 1px);font-size:17px}
 .download-shell .sample-body{padding:28px calc(var(--mobile-body-inset) - var(--mobile-panel-inset) - 1px)}
 .download-shell:before{left:calc(25% - 14px)}
}

.research-document-link {display:flex;align-items:center;gap:9px;width:fit-content;max-width:100%;margin-top:20px;min-height:44px;color:var(--sage-dark);font-size:16px;text-decoration:underline;text-underline-offset:5px}
.research-document-link svg {width:22px;height:22px;flex-shrink:0}

.flow-description {grid-column:1 / -1;margin:0 0 20px}

.kit-distribution-status {margin-top:8px}