/* =========================================================
   NEW MADE  WEB DESIGN
   style.css の後に読み込む
   ========================================================= */

/* ---------- GALLERY ---------- */
/* .web-gallery の高さ分だけスクロールする間、.web-gallery-pin が画面に固定され、
   写真の輪（.ring）がスクロールに合わせて回る。各写真の位置・大きさは web.js が決める */
.web-gallery{
  position:relative;
  height:calc(var(--pin-h) + 380svh);   /* 長くするほど、ゆっくり進む */
  background:var(--night);color:#fafafa;
  --pin-h:calc(100svh - var(--header-h));
}
.web-gallery-pin{
  position:sticky;top:var(--header-h);
  height:var(--pin-h);
  overflow:hidden;
}
/* 奥行きのある舞台。輪は少し上から見下ろす角度（手前の写真ほど下・大きく） */
.ring-stage{
  position:absolute;inset:0;
  perspective:2400px;
  perspective-origin:50% 30%;
}
.ring{
  position:absolute;left:50%;top:38%;  /* 輪の中心。正面で大きくなった写真の下まで画面に収まる高さ */
  width:0;height:0;
  transform-style:preserve-3d;
}
.ring-card{
  position:absolute;left:0;top:0;
  width:var(--card-w,240px);aspect-ratio:16/10;
  margin-left:calc(var(--card-w,240px) / -2);
  margin-top:calc(var(--card-w,240px) * -.3125);
  background:transparent;  /* 写真は切らずに枠の中へ収める（縦横比が違う写真は上下か左右が少し空く） */
  will-change:transform,opacity;
}
.ring-card img{width:100%;height:100%;object-fit:contain}

/* 中央の言葉 */
.web-gallery-copy{
  position:absolute;left:50%;top:44%;z-index:1;
  transform:translate(-50%,-50%);
  margin:0;width:max-content;max-width:calc(100% - var(--gutter) * 2);
  text-align:center;pointer-events:none;
  /* 英語コピー：太めのゴシック（Helvetica）・すべて大文字 */
  font-weight:700;
  font-size:clamp(22px,2.6vw,52px);
  line-height:1.5;letter-spacing:-.005em;
  text-transform:uppercase;
}
/* 1行ずつ、下から出てくる（.is-ready は web.js が付ける）。
   PC はスクロールで1枚目の写真がせり上がって大きくなる間に --copy（1→0）で消え、写真だけが見えるようになる */
.web-gallery-copy{opacity:var(--copy,1)}
.copy-line{display:block;overflow:hidden;padding-bottom:.08em}
.copy-line > span{display:inline-block}
.js .copy-line > span{transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .is-ready .copy-line > span{transform:none}
.is-ready .copy-line:nth-child(2) > span{transition-delay:.12s}
.is-ready .copy-line:nth-child(3) > span{transition-delay:.24s}
.is-ready .copy-line:nth-child(4) > span{transition-delay:.36s}
/* 英語コピーの下の日本語。大きさは他の事業ページの説明（.oo-lead）と同じ。暗い背景なので白 */
.web-gallery-ja{
  margin-top:clamp(16px,1.8vw,36px);
  font-family:var(--font-ja);font-weight:400;
  font-size:clamp(13px,1.2vw,22px);
  line-height:2;letter-spacing:.04em;
  text-transform:none;
}
.web-gallery-label{
  display:inline-block;margin-bottom:1.6em;
  font-size:12px;font-weight:700;letter-spacing:.14em;
  color:rgba(250,250,250,.5);
}
/* 事業名の日本語：SP だけ出す（他の事業ページの .oo-title-ja と同じ 12px・#666） */
.web-gallery-label-ja{display:none}
/* 正面に来ている写真の番号 */
.web-gallery-count{
  position:absolute;left:var(--gutter);bottom:clamp(16px,2.4vw,40px);
  font-size:12px;font-weight:600;letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:rgba(250,250,250,.55);
  opacity:var(--ring-vis,0);
}

/* 下のコンテンツは、ギャラリーの最後の「画面1枚分」に重ねて置く。
   固定されたギャラリーの上へ、白い面が下からせり上がってかぶさる（暗い余白を残さない） */
.web-content{
  position:relative;z-index:1;
  background:var(--paper);
  margin-top:calc((100svh - var(--header-h)) * -1);
}

/* ---------- 説明・SERVICE・WORKS 共通 ---------- */
.web-section{
  width:min(100% - var(--gutter) * 2, 1640px);
  margin-inline:auto;
  padding-top:var(--section-space);
}
.web-heading{
  font-weight:400;
  font-size:clamp(28px,4.2vw,84px);
  line-height:1.1;letter-spacing:-.01em;
  margin-bottom:clamp(32px,4.5vw,90px);
}

/* 説明 */
.web-about-body{padding-inline:clamp(0px,4vw,80px)}
.web-about-ja{
  font-family:var(--font-ja);font-weight:500;
  font-size:clamp(13px,1.25vw,25px);
  line-height:1.85;letter-spacing:.02em;
}
.web-about-en{
  margin-top:clamp(32px,4vw,80px);
  font-weight:500;
  font-size:clamp(12px,1.1vw,22px);
  line-height:1.95;
}

/* SERVICE：番号＋名前＋説明の行 */
.web-service-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(13,13,13,.12)}
.web-service-list li{
  display:grid;grid-template-columns:clamp(48px,8vw,160px) minmax(0,1fr) minmax(0,1fr);
  align-items:baseline;gap:clamp(12px,2vw,40px);
  padding:clamp(20px,2.4vw,44px) 0;
  border-bottom:1px solid rgba(13,13,13,.12);
}
.web-service-num{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--mute)}
.web-service-list h3{
  margin:0;font-weight:400;
  font-size:clamp(20px,2.6vw,52px);
  line-height:1.1;letter-spacing:-.01em;
}
.web-service-list p{
  font-family:var(--font-ja);
  font-size:clamp(12px,1vw,18px);line-height:1.9;letter-spacing:.03em;
}

/* WORKS：CREATION と同じく、細いすき間で2列（今は HTML をコメントアウトして非表示。実績がそろったら戻す） */
.web-works{width:auto}
.web-works .web-heading{padding-inline:var(--gutter)}
.web-works-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(4px,.5vw,10px);
  row-gap:clamp(40px,4.5vw,90px);
}
.web-work-img{margin:0;overflow:hidden;background:var(--tile);aspect-ratio:16/10}
.web-work-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.web-work:hover .web-work-img img{transform:scale(1.04)}
.web-work-info{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  column-gap:1em;row-gap:.4em;
  margin-top:clamp(14px,1.6vw,32px);
  padding-inline:var(--gutter);
}
.web-work-info h3{margin:0;font-weight:700;font-size:clamp(16px,1.8vw,36px);line-height:1;letter-spacing:-.005em}
.web-work-info span{grid-row:1;grid-column:2;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--mute)}
.web-work-info p{grid-column:1 / -1;font-size:clamp(11px,.9vw,15px);font-weight:600;letter-spacing:.08em;color:var(--mute)}

/* ---------- SP ---------- */
@media (max-width:720px){
  .web-gallery{height:calc(var(--pin-h) + 300svh)}
  /* SP：事業名（言葉）を上に、写真の輪をその下に。開いた最初の画面で両方が見えるように */
  .web-gallery-copy{top:clamp(24px,5svh,48px);transform:translateX(-50%)}
  .web-gallery-label-ja{
    display:block;margin-top:10px;
    font-family:var(--font-ja);font-weight:500;
    font-size:12px;letter-spacing:.06em;
    color:#666;
  }
  .ring{top:60%}
  .web-about-ja br,.web-about-en br{display:none}
  .web-service-list li{grid-template-columns:40px minmax(0,1fr)}
  .web-service-list p{grid-column:2}
  .web-works-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .web-gallery{height:auto}
  .web-gallery-pin{position:relative;top:0}
  .web-content{margin-top:0}
  .js .copy-line > span{transform:none;transition:none}
}