/* ============================================================
   NEBULA OPEN CAMP 専用のスタイル
   site.css / mobile.css / ios.css は読み込まない。
   HOUKAGO! と同じく、同じドメインの中の「別サイト」として独立させる
   ============================================================ */

:root{
  /* ロゴから実測した色 */
  --oc-ink:#001048;        /* 一番深い紺。見出しと本文 */
  --oc-blue:#0020A0;
  --oc-bright:#0030C0;
  --oc-paper:#fff;
  --oc-mist:#F2F5FC;       /* 淡い面 */
  --oc-line:#C9D3E8;
  --oc-muted:#6A7699;

  --oc-disp:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
  --oc-body:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN',sans-serif;
  --oc-gutter:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--oc-body);
  background:var(--oc-paper);
  color:var(--oc-ink);
  font-size:16px;line-height:1.95;font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@supports (overflow:clip){body{overflow-x:clip}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--oc-bright);outline-offset:2px}

/* ---------- 共通 ---------- */
.oc-sec{
  padding:clamp(64px,9vw,128px) var(--oc-gutter);
  max-width:1180px;margin:0 auto;
}
@supports (padding-left: max(0px, env(safe-area-inset-left))){
  .oc-sec,.oc-hero,.oc-foot{
    padding-left:max(var(--oc-gutter),env(safe-area-inset-left));
    padding-right:max(var(--oc-gutter),env(safe-area-inset-right));
  }
}
.oc-label{
  display:block;
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(11px,1.1vw,13px);letter-spacing:.3em;
  color:var(--oc-bright);
  margin-bottom:clamp(20px,2.6vw,30px);
}
.oc-h{
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(26px,3.8vw,48px);line-height:1.3;letter-spacing:-.01em;
  margin-bottom:clamp(28px,3.6vw,48px);
}

/* ---------- ヒーロー ---------- */
/* 開いたときはここだけが見えるように、画面の高さいっぱいにする。
   iOS は 100vh だとツールバーの分はみ出すので 100svh を使う */
.oc-hero{
  position:relative;overflow:hidden;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(48px,7vw,84px) var(--oc-gutter) clamp(88px,9vw,120px);
  text-align:center;
}
@supports (height:100svh){ .oc-hero{min-height:100svh} }

.oc-hero-in{position:relative;z-index:1;max-width:980px;margin:0 auto}
/* 横幅だけでなく画面の高さでも上限をかけ、下の SCROLL が画面外に出ないようにする */
.oc-hero-logo{
  width:min(820px,90vw,150vh);
  margin:0 auto clamp(30px,4vw,48px);
}
@supports (height:100svh){
  .oc-hero-logo{width:min(820px,90vw,150svh)}
}
.oc-tag{
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(20px,2.8vw,36px);line-height:1.45;letter-spacing:.01em;
  margin:0 auto clamp(30px,3.8vw,46px);
}
.oc-next{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,1.7vw,20px);
}
/* 左右に短い線を引いた小見出し */
.oc-next .k{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);
  font-family:var(--oc-disp);font-weight:900;
  font-size:11px;letter-spacing:.34em;color:var(--oc-bright);line-height:1;
}
.oc-next .k::before,.oc-next .k::after{
  content:"";width:clamp(22px,4vw,54px);height:2px;background:currentColor;opacity:.55;
}
/* 年・曜日を小さく添え、月日だけを大きく見せる */
.oc-date{
  display:flex;align-items:baseline;justify-content:center;
  gap:clamp(10px,1.6vw,20px);
  font-family:var(--oc-disp);font-weight:900;
}
.oc-date .y,.oc-date .w{
  font-size:clamp(12px,1.4vw,17px);letter-spacing:.2em;
  color:var(--oc-ink);opacity:.7;
}
.oc-date .md{
  font-size:clamp(54px,8.4vw,116px);line-height:.88;letter-spacing:-.02em;
  /* ロゴのイタリックに合わせて少しだけ傾ける */
  display:inline-block;transform:skewX(-8deg);
  color:var(--oc-ink);
}
/* 文字そのものにロゴと同じ青のグラデーションを流す。
   対応していない環境では上の単色のまま */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .oc-date .md{
    background:linear-gradient(100deg,#001048 0%,#0020A0 42%,#0030C0 72%,#2E6BFF 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}

/* 入ってきたときの動き */
@keyframes oc-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes oc-logo-in{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}}
@keyframes oc-fade{from{opacity:0}to{opacity:1}}
.oc-hero-logo{animation:oc-logo-in 1.3s cubic-bezier(.16,.84,.24,1) both}
.oc-tag       {animation:oc-rise .95s cubic-bezier(.16,.84,.24,1) .42s both}
.oc-next      {animation:oc-rise 1s cubic-bezier(.16,.84,.24,1) .6s both}
.oc-scroll    {animation:oc-fade 1s ease 1.1s both}

/* ---------- 下へ誘導する印 ---------- */
.oc-scroll{
  position:absolute;z-index:1;
  left:50%;bottom:clamp(22px,3vw,38px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:8px 12px;
  font-family:var(--oc-disp);font-weight:900;
  font-size:10px;letter-spacing:.3em;color:var(--oc-ink);
  transition:opacity .5s ease;
}
.oc-scroll .ln{
  display:block;width:1px;height:44px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--oc-ink) 0%,rgba(0,16,72,.12) 100%);
}
.oc-scroll .ln::after{
  content:"";position:absolute;left:0;width:1px;height:16px;
  background:var(--oc-bright);
  animation:oc-drop 2.2s cubic-bezier(.6,.05,.3,1) infinite;
}
@keyframes oc-drop{
  0%{top:-16px;opacity:0}18%{opacity:1}82%{opacity:1}100%{top:44px;opacity:0}
}
.oc-scrolled .oc-scroll{opacity:0;pointer-events:none}

/* ---------- 文章の右に写真を置く ---------- */
.oc-split{
  display:grid;grid-template-columns:1fr minmax(0,.84fr);
  gap:clamp(30px,4.6vw,72px);
  align-items:start;
}
.oc-col{min-width:0}
.oc-figure{
  margin:0;overflow:hidden;
  border:2px solid var(--oc-ink);background:var(--oc-mist);
  /* 本文の書き出しと写真の上端を揃える */
  margin-top:clamp(4px,.8vw,10px);
}
.oc-figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* 写真を縦に重ねるとき */
.oc-figures{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(4px,.8vw,10px)}
.oc-figures .oc-figure{margin-top:0}
.js .oc-figures .oc-figure:nth-child(2){transition-delay:.22s}
/* 紺地の帯は中の1枚を幅の基準にしている */
.oc-invert .oc-inner{width:100%}
/* 左寄せ1列のまま、本文の幅の上限を外して横いっぱいに伸ばす */
.oc-invert .oc-body{max-width:none}

/* ---------- 文章のセクション ---------- */
/* 2段組の中では、幅は列が決めるので上限をかけない */
.oc-body{max-width:36em}
.oc-split .oc-body{max-width:none}
.oc-p{font-size:clamp(16px,1.6vw,20px);line-height:2.05;letter-spacing:.01em}
.oc-p+.oc-p{margin-top:1.5em}
/* 言い切りの一文。少し大きく、紺で */
.oc-strong{
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(19px,2.3vw,30px);line-height:1.6;letter-spacing:.01em;
  margin-top:clamp(28px,3.4vw,44px);
}
/* かぎかっこの並び */
.oc-quotes{list-style:none;margin:1.5em 0;display:grid;gap:.5em}
.oc-quotes li{
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(16px,1.9vw,24px);line-height:1.6;
  color:var(--oc-blue);
}

/* ---------- WHAT WE DO の3段 ---------- */
.oc-steps{display:grid;gap:clamp(18px,2.6vw,32px)}
.oc-step{
  border:2px solid var(--oc-ink);
  padding:clamp(26px,3.4vw,46px);
  background:var(--oc-paper);
  display:grid;grid-template-columns:clamp(110px,14vw,210px) 1fr;
  column-gap:clamp(20px,3vw,44px);
  align-items:start;
}
.oc-step .en{
  grid-row:1 / span 99;
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(26px,3.6vw,50px);line-height:1;letter-spacing:-.01em;
  color:var(--oc-bright);
  transform:skewX(-8deg);transform-origin:left top;
}
.oc-step h3{
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(20px,2.3vw,30px);line-height:1.4;
  margin-bottom:clamp(12px,1.4vw,18px);
}
.oc-step p{font-size:clamp(14.5px,1.35vw,17px);line-height:1.95}
.oc-step p+p{margin-top:.9em}
.oc-step .quotes{list-style:none;margin:1em 0;display:grid;gap:.35em}
.oc-step .quotes li{
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(14.5px,1.5vw,19px);line-height:1.6;color:var(--oc-blue);
}

/* ---------- 紺地に白で抜くセクション ---------- */
.oc-invert{
  background:var(--oc-ink);color:#fff;
  max-width:none;
}
/* 全幅の帯にするぶん、中身の幅は他のセクションと同じに揃える */
.oc-invert>*{max-width:calc(1180px - var(--oc-gutter) * 2);margin-left:auto;margin-right:auto}
.oc-invert .oc-label{color:#7FA8FF}
.oc-invert .oc-p{color:rgba(255,255,255,.84)}
.oc-invert .oc-strong{color:#fff}

/* ---------- 箇条書き ---------- */
.oc-for{list-style:none;display:grid;gap:clamp(10px,1.4vw,16px)}
.oc-for li{
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);
  padding:clamp(18px,2.4vw,28px) clamp(4px,1vw,12px);
  border-bottom:1px solid var(--oc-line);
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(16px,1.9vw,24px);line-height:1.5;
}
.oc-for li::before{
  content:"";flex:none;width:10px;height:10px;
  background:var(--oc-bright);transform:skewX(-8deg);
}

/* ---------- 次回の開催 ---------- */
.oc-nextbox{
  border:2px solid var(--oc-ink);
  box-shadow:10px 10px 0 var(--oc-bright);
  padding:clamp(28px,4vw,56px);
  text-align:center;
}
.oc-nextbox h2{
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(18px,2.2vw,28px);line-height:1.4;letter-spacing:.02em;
  margin-bottom:clamp(14px,1.8vw,22px);
}
.oc-nextbox .oc-date{justify-content:center;margin-bottom:clamp(20px,2.6vw,32px)}
.oc-nextbox .oc-p{max-width:none}
.oc-nextbox .note{
  margin-top:clamp(18px,2.2vw,28px);
  font-size:13px;line-height:1.9;color:var(--oc-muted);
}
/* ---------- vol.1 の写真 ---------- */
/* 見出しの日付は NEXT より控えめに */
.oc-date.is-sm .md{font-size:clamp(32px,4.4vw,58px)}
.oc-date.is-sm .y,.oc-date.is-sm .w{font-size:clamp(11px,1.1vw,14px)}
.oc-gallery{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.8vw,22px);
  margin-top:clamp(28px,3.6vw,46px);
}
.oc-gallery .g{
  margin:0;overflow:hidden;
  border:2px solid var(--oc-ink);background:var(--oc-mist);
}
.oc-gallery .g.wide{grid-column:1 / -1}
.oc-gallery img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
}

/* ---------- フッター ---------- */
.oc-foot{
  border-top:2px solid var(--oc-ink);
  padding:clamp(28px,4vw,48px) var(--oc-gutter) calc(clamp(28px,4vw,48px) + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;
  font-size:12.5px;letter-spacing:.04em;
}
.oc-by,.oc-foot a{position:relative;padding:10px 0;display:inline-flex;align-items:center;gap:8px}
.oc-by::before,.oc-foot a::before{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
.oc-by b{font-family:var(--oc-disp);font-weight:900}
@media (hover:hover){
  .oc-by:hover b{color:var(--oc-bright)}
  .oc-foot a:hover{color:var(--oc-bright)}
}

/* ---------- スクロールで浮かび上がる ----------
   JSが動いたときだけ隠す。動かなければ最初から見えている */
.js .rv{
  opacity:0;transform:translateY(30px);
  transition:opacity 1s cubic-bezier(.16,.84,.24,1),transform 1.1s cubic-bezier(.16,.84,.24,1);
}
.js .rv.is-in{opacity:1;transform:none}
.js .oc-step,
.js .oc-for li,
.js .oc-gallery .g{transition-delay:calc(var(--i,0) * .07s)}
.js .oc-figure{transition-delay:.12s}

/* ---------- 動きを減らす設定のとき ---------- */
@media (prefers-reduced-motion:reduce){
  .oc-scroll .ln::after{animation:none}
  .oc-hero-logo,.oc-tag,.oc-next,.oc-scroll{animation:none;opacity:1;transform:none}
  .js .rv{transition:none}
}

/* ---------- 横向きで画面が低いとき ---------- */
@media (orientation:landscape) and (max-height:600px){
  .oc-hero{min-height:0;padding-bottom:clamp(56px,7vw,84px)}
  .oc-hero-logo{width:min(560px,56vw)}
  .oc-scroll{display:none}
}

/* ---------- スマホ ---------- */
@media (max-width:860px){
  .oc-split{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .oc-figure{margin-top:0}
}
@media (max-width:640px){
  :root{--oc-gutter:22px}
  .oc-sec{padding-top:clamp(56px,13vw,76px);padding-bottom:clamp(56px,13vw,76px)}
  .oc-nextbox{box-shadow:6px 6px 0 var(--oc-bright)}
  /* 英字を上に置いて縦積みにする */
  .oc-split{grid-template-columns:1fr;gap:clamp(24px,6vw,34px)}
  .oc-figure{margin-top:0}
  .oc-gallery{grid-template-columns:1fr}
  .oc-step{grid-template-columns:1fr;row-gap:10px}
  .oc-step .en{grid-row:auto}
}

/* 日程が未定のとき。
   数字用の大きな字送りと傾きは日本語に合わないので、字を小さくして傾きも外す */
.oc-date.is-tbd{gap:0}
.oc-date.is-tbd .tbd{
  font-family:var(--oc-disp);font-weight:900;
  font-size:clamp(28px,4.6vw,62px);line-height:1.15;letter-spacing:.04em;
  color:var(--oc-ink);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .oc-date.is-tbd .tbd{
    background:linear-gradient(100deg,#001048 0%,#0020A0 42%,#0030C0 72%,#2E6BFF 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}