/* ============================================================
   スマートフォン専用の設計
   すべての css のあとに読み込む。820px 以下でのみ効く。
   PC 版を縮めるのではなく、縦長の画面に合わせて組み直している
   ============================================================ */
@media (max-width:820px){

/* ---------- 土台：文字と余白の基準 ---------- */
:root{
  --gutter:22px;
  --m-gap:clamp(72px,17vw,104px);   /* 節と節のあいだ */
  --m-body:15.5px;
  --m-lh:1.95;
}
body{font-size:var(--m-body);line-height:var(--m-lh)}
section{padding:var(--m-gap) var(--gutter)}

/* 見出しの階層をはっきりさせる */
.h2{font-size:31px;line-height:1.18;letter-spacing:-.01em;margin-bottom:30px}
.h2 small{font-size:10px;letter-spacing:.3em;margin-bottom:1.6em;opacity:.5}
.h2-about{font-size:29px}

/* 画面の端まで使う写真 */
.m-bleed{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));width:100vw;max-width:100vw}

/* ---------- 案内 ---------- */
.nav{padding-left:var(--gutter);padding-right:var(--gutter)}
.nav .logo{height:24px}

/* ---------- ヒーロー：文字が上、写真は下に整列 ---------- */
.hero{
  display:grid;grid-template-columns:1fr 1fr;
  gap:6px;align-content:start;
  min-height:auto;
  padding:118px var(--gutter) 30px;
}
.hero .copy{grid-column:1 / -1;margin-bottom:26px}
.hero .eyebrow{font-size:10px;letter-spacing:.24em}
.hero h1{font-size:clamp(38px,11.4vw,54px);line-height:1.12}
.hero .sub{font-size:14.5px;line-height:1.85;margin-top:20px}
.hero .sub br{display:none}

/* ばら撒きをやめ、2列に並べる。site.css で3枚が隠されているので戻す */
.hero-ink.i1,.hero-ink.i2,.hero-ink.i3,.hero-ink.i5{display:block;opacity:1}
.hero-ink{
  position:static !important;
  width:auto !important;height:auto !important;
  inset:auto !important;transform:none !important;
  aspect-ratio:4/3;
}
.hero-ink.i3{aspect-ratio:4/3}
.hero .map{
  width:74vw;right:-14vw;left:auto;top:auto;bottom:8vh;opacity:.5;
}

/* ---------- ABOUT ---------- */
.about .h2{text-align:left}
.about>p{text-align:left;font-size:16px;line-height:1.95;letter-spacing:.02em}
.about>p br{display:none}
.about-mark::before{opacity:.035;width:70vw}

.facts{margin-top:38px;padding-bottom:0;border-bottom:0;grid-template-columns:1fr}
.facts div{
  padding:20px 0;border-left:0 !important;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;text-align:left;
}
.facts div:last-child{border-bottom:1px solid var(--line)}
.facts dt{font-size:11px;letter-spacing:.16em;color:var(--muted);margin:0}
.facts dd{font-size:26px;line-height:1.1}
.facts dd em{font-size:.5em}

/* ---------- 私たちの想い ---------- */
.thoughts{
  margin-top:var(--m-gap);
  padding:calc(52px + 30vw) var(--gutter) 64px;
}
.thoughts-ink.tl{width:40vw;top:34px;left:3%}
.thoughts-ink.tr{width:42vw;top:26px;right:3%}
.thoughts .label{font-size:9.5px;letter-spacing:.34em;margin-bottom:14px}
.thoughts h3{font-size:29px;margin-bottom:28px}
.thoughts h3::before{height:26px;margin-bottom:16px}
.thoughts p{text-align:left;font-size:15.5px;line-height:1.95;letter-spacing:.02em}
.thoughts p:first-of-type{font-size:16.5px}
.thoughts p+p{margin-top:1.9em}
.js .thoughts .ln,.thoughts .ln{display:inline;overflow:visible}
.js .thoughts .ln>i{display:inline;transform:none;opacity:1;transition:none}
.thoughts .grain{display:none}
.thoughts .dust{animation-duration:38s}
.thoughts .leak,.thoughts .leak2{animation-duration:26s}
.thoughts::after{inset:12px}

/* ---------- 名前の由来 ---------- */
.origin{margin-top:var(--m-gap)}
.origin h3{text-align:left;font-size:25px}
.origin .lead{text-align:left;font-size:16px;line-height:1.95}
.origin .lead br{display:none}
.origin-grid{grid-template-columns:1fr;gap:26px;margin-top:32px}
.words>div:nth-child(1){grid-area:auto;grid-row:1;grid-column:1}
.origin-grid>.photo.pa{grid-area:auto;grid-row:2;grid-column:1}
.words>div:nth-child(2){grid-area:auto;grid-row:3;grid-column:1}
.origin-grid>.photo.pb{grid-area:auto;grid-row:4;grid-column:1}
.origin-grid>.photo:has(img){margin-right:0;box-shadow:12px 12px 0 var(--accent-soft)}
.words .w{font-size:36px}
.words .y{font-size:15px}
.words .word-head{margin-bottom:16px}
.words p{font-size:15.5px;line-height:1.95}

/* ---------- これまでの活動 ---------- */
.event,.event:nth-of-type(even){grid-template-columns:1fr;gap:24px;padding:44px 0}
.event:nth-of-type(even) .txt{order:0}
.event>.photo{order:-1}
/* 写真は画面の端まで */
.event>.photo,.event:nth-of-type(even)>.photo{
  margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
}
.event .txt::before{font-size:52px;opacity:.35;margin-bottom:6px}
.event .date{font-size:12px;letter-spacing:.16em}
.event h3{font-size:27px;line-height:1.25;margin:12px 0 16px}
.event .desc{font-size:15.5px;line-height:1.95;margin-bottom:24px}
.stats{gap:26px}
.stats .n{font-size:34px}
.stats .k{font-size:12px}
.works-lead{font-size:15.5px;line-height:1.95}
.works-lead br{display:none}

/* ---------- お知らせ ---------- */
.news-cards{gap:12px}
.ncard{width:78vw;min-width:78vw}
.ncard h3{font-size:17px;line-height:1.5}

/* ---------- 参加する ---------- */
.join .lanes{grid-template-columns:1fr}
.lane{padding:26px 22px}
.lane+.lane{border-left:0;border-top:3px solid #fff}

/* ---------- 提携 ---------- */
.tier{margin-top:52px}
.tier-name{font-size:19px;letter-spacing:.16em}
.logos.t1 div,.logos.t2 div{flex:0 0 calc(50% - 8px)}
.logos.t3 div{flex:0 0 calc(50% - 8px)}

/* ---------- お問い合わせ ---------- */
.contact .grid{grid-template-columns:1fr;gap:44px}
.contact-side{position:static}
.links a{font-size:19px}
.chips{gap:8px}
.chip span{padding:11px 15px;font-size:12.5px}
.form .row{grid-template-columns:1fr}
.form input,.form textarea{font-size:17px}   /* 16px 未満だと iOS が拡大する */
.form .btn{width:100%;text-align:center}

/* ---------- 脚部 ---------- */
footer{font-size:11px;letter-spacing:.14em}

/* ============================================================
   イベント／プロジェクトの詳細ページ
   ============================================================ */
.ev-hero{padding:112px var(--gutter) 40px}
.ev-hero-in .date{font-size:11px;letter-spacing:.2em}
.ev-hero-in h1{font-size:clamp(30px,8.4vw,40px);line-height:1.14}
.ev-hero-in .lead{font-size:15px;line-height:1.95}
.ev-hero-in .lead br{display:none}
body[data-ev] .ev-fx,body[data-ev] .ev-fx2{animation:none}
body[data-ev] .ev-fx2{opacity:.85}
.ev-main{padding:var(--m-gap) var(--gutter)}
.ev-numbers .stats{gap:24px}
.ev-numbers .stats .n{font-size:36px}

/* プロジェクトページ */
.pj-sec{padding:var(--m-gap) var(--gutter)}
.pj-hero-photo img{height:58vh;height:58svh;min-height:300px}   /* svh 非対応の iOS 15.3 以前は vh */
.pj-hero-in{padding:34px var(--gutter) 8px}
.pj-hero-in .pj-label{margin-bottom:16px;font-size:10px;letter-spacing:.3em}
.pj-hero-in h1{font-size:clamp(30px,8.6vw,40px);line-height:1.14}
.pj-en{font-size:10px;letter-spacing:.22em;margin-top:12px}
.pj-hero-lead{font-size:18px;line-height:1.75;margin-top:26px}
.pj-hero-lead::before{width:44px;margin-bottom:18px}

.pj-label{font-size:10px;letter-spacing:.3em}
.pj-h{font-size:26px;line-height:1.32}
.pj-body{font-size:15.5px;line-height:1.95}
.pj-intro .pj-in{grid-template-columns:1fr;gap:18px}
.pj-intro .pj-label{position:static}
.pj-intro .lead{font-size:19px;line-height:1.75;margin-bottom:1.2em}

/* 大きな写真は画面の端まで */
.pj-figure .pj-in{max-width:none}
.pj-big,.pj-pair{
  margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
}
.pj-big .frame{aspect-ratio:3/2}
.pj-pair{grid-template-columns:1fr;gap:8px;margin-top:8px}

.pj-story{padding-bottom:34px}
.pj-story .pj-in{grid-template-columns:1fr;gap:20px}
.pj-story .frame{
  aspect-ratio:4/3;
  margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
}
.pj-story .num{margin-bottom:12px}
.pj-story h3{font-size:22px;line-height:1.36;margin-bottom:16px}
.pj-story h3 br{display:none}

.pj-moments .pj-h{font-size:22px;letter-spacing:.04em;margin:14px 0 26px}
.pj-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:31vw;gap:8px;
  margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));
}
.pj-grid .m1{grid-column:1/3;grid-row:span 2}
.pj-grid .m2,.pj-grid .m3,.pj-grid .m4,.pj-grid .m5{grid-column:auto;grid-row:auto}
.pj-grid .m6{grid-column:1/3;grid-row:auto}

.pj-nums{margin-top:40px;padding-top:26px;gap:32px}
.pj-nums .n{font-size:44px}
.pj-back{padding-bottom:var(--m-gap)}

}   /* @media 終わり */

/* 画面がとても狭いとき */
@media (max-width:380px){
  :root{--gutter:18px}
  .hero h1{font-size:36px}
  .h2{font-size:28px}
  .pj-hero-in h1{font-size:28px}
}