/* =========================================================
   NEW MADE  CREATION（APPAREL OEM / JEWELRY OEM / ONE OF ONE）共通
   style.css の後に読み込む
   ========================================================= */

/* ---------- 左：文章と流れ ／ 右：写真 ---------- */
.oo{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(32px,4.5vw,90px);
  align-items:start;
  padding:clamp(24px,3.4vw,68px) clamp(16px,3.6vw,72px) 0 clamp(16px,4.6vw,92px);
}
.oo-side{max-width:720px}
/* 今いる場所（CREATION / ページ名）。CREATION を押すと HOME の CREATION 一覧へ戻る */
.oo-crumb{
  display:flex;align-items:center;gap:.7em;
  margin:0 0 clamp(14px,1.4vw,26px);
  font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--mute);
}
.oo-crumb a{color:inherit;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:rgba(138,138,138,.5)}
.oo-crumb a:hover,.oo-crumb a:focus-visible{color:var(--ink)}
.oo-title{
  margin:0;
  font-weight:400;
  font-size:clamp(28px,2.6vw,52px);
  line-height:1;letter-spacing:-.005em;
}
/* 事業名の日本語：SP だけ出す（PC は今のまま） */
.oo-title-ja{
  display:none;
  margin-top:12px;
  font-family:var(--font-ja);font-weight:500;
  font-size:12px;letter-spacing:.06em;
  color:#666;
}
.oo-lead{
  margin-top:clamp(20px,2.4vw,48px);
  font-family:var(--font-ja);font-weight:500;
  font-size:clamp(13px,1.2vw,22px);
  line-height:2;letter-spacing:.04em;
}

/* ---------- 対応可能アイテム（JEWELRY OEM）：押すと下にアイテム名が開く（.is-open は oneofone.js が付ける） ---------- */
.oo-items{
  margin-top:clamp(24px,2.6vw,52px);
  border-top:1px solid rgba(13,13,13,.12);border-bottom:1px solid rgba(13,13,13,.12);
}
.oo-items-btn{
  display:flex;align-items:baseline;gap:1em;
  width:100%;padding:clamp(14px,1.4vw,26px) 0;
  font:inherit;color:inherit;text-align:left;
  background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.oo-items-en{font-size:clamp(15px,1.25vw,24px);font-weight:500;letter-spacing:.04em;line-height:1}
.oo-items-ja{font-family:var(--font-ja);font-size:clamp(12px,.95vw,17px);font-weight:500;letter-spacing:.06em;color:#666;line-height:1}
.oo-items-btn .oo-step-icon{align-self:center}
.oo-items-btn:hover .oo-items-en,.oo-items-btn:focus-visible .oo-items-en{text-decoration:underline;text-underline-offset:.3em}
.oo-items-btn:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.oo-items.is-open .oo-step-icon::after{transform:rotate(0deg)}
/* 開き方は工程と同じ */
.oo-items-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}
.oo-items.is-open .oo-items-panel{grid-template-rows:1fr}
.oo-items-inner{
  min-height:0;overflow:hidden;
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.2,1);
}
.oo-items.is-open .oo-items-inner{opacity:1;transform:none;transition:opacity .5s ease .15s,transform .7s cubic-bezier(.2,.7,.2,1) .15s}
.oo-items-group + .oo-items-group{margin-top:clamp(16px,1.4vw,26px)}
.oo-items-group:last-child{padding-bottom:clamp(18px,1.8vw,34px)}
.oo-items-label{
  display:flex;align-items:baseline;gap:.8em;
  margin-bottom:.8em;
  font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--mute);
}
.oo-items-label span{font-family:var(--font-ja);font-size:clamp(13px,1vw,17px);letter-spacing:.06em;color:var(--ink)}
.oo-items .oo-step-tags{padding-bottom:0}
.oo-items .oo-step-tags li{font-size:12px;color:rgba(13,13,13,.75)}
.oo-items-note{
  margin-top:.9em;
  font-family:var(--font-ja);font-size:11px;letter-spacing:.04em;line-height:1.7;color:#666;
}
.oo-items-note + .oo-items-note{margin-top:.3em}

/* ---------- 操作の案内（.is-tap は oneofone.js が付ける） ----------
   SP・タッチ：タップすると開く（PCは案内を出さない） */
.oo-hint{
  display:none;align-items:center;gap:.8em;
  margin:clamp(32px,3.6vw,72px) 0 0;
  font-size:clamp(12px,.85vw,15px);font-weight:700;letter-spacing:.14em;color:var(--ink);
}
.oo.is-tap .oo-hint-tap{display:flex}
.oo-hint-ja{font-family:var(--font-ja);font-size:clamp(12px,.9vw,16px);font-weight:500;letter-spacing:.06em;color:rgba(13,13,13,.6)}
.oo-hint svg{flex:none;width:20px;height:20px;color:var(--ink)}
/* 案内のアイコンが小さく波打って、押せることを見せる */
.oo-hint-tap .tap-ring{transform-box:fill-box;transform-origin:center;animation:oo-hint-tap 1.8s ease-out infinite}
@keyframes oo-hint-tap{0%{transform:scale(.5);opacity:.9}70%,100%{transform:scale(1.4);opacity:0}}
.oo.is-tap .oo-steps{margin-top:clamp(12px,1.2vw,22px)}

/* ---------- 制作の流れ：押すと下に内容が開く ---------- */
.oo-steps{
  list-style:none;margin:clamp(36px,4.2vw,84px) 0 0;padding:0;
  border-top:1px solid rgba(13,13,13,.12);
}
.oo-step{border-bottom:1px solid rgba(13,13,13,.12)}
.oo-step h3{margin:0;font:inherit}
.oo-step button{
  display:flex;align-items:center;gap:.4em;
  width:100%;
  padding:clamp(18px,2.1vw,42px) 0;
  font:inherit;color:inherit;text-align:left;
  background:none;border:0;cursor:pointer;
  font-weight:500;
  font-size:clamp(20px,2.1vw,40px);
  line-height:1;letter-spacing:-.01em;
}
.oo-step-num{font-variant-numeric:tabular-nums}
/* 名前はカーソルが乗る・開くと少し右へずれる */
.oo-step-name{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.oo-step button:hover .oo-step-name,
.oo-step button:focus-visible .oo-step-name,
.oo-step.is-open .oo-step-name{transform:translateX(.3em)}
.oo-step button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
/* 右端の「＋」。開くと「－」になる */
.oo-step-icon{
  position:relative;flex:none;margin-left:auto;
  width:clamp(12px,1vw,18px);height:clamp(12px,1vw,18px);
}
.oo-step-icon::before,.oo-step-icon::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:1px;margin-top:-.5px;background:currentColor;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.oo-step-icon::after{transform:rotate(90deg)}
.oo-step.is-open .oo-step-icon::after{transform:rotate(0deg)}

/* 開く部分：高さ 0 → 中身の高さへなめらかに開き、文字は少し遅れてふわっと出る */
.oo-step-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1);
}
.oo-step.is-open .oo-step-panel{grid-template-rows:1fr}
.oo-step-inner{
  min-height:0;overflow:hidden;
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease,transform .5s cubic-bezier(.2,.7,.2,1);
}
.oo-step.is-open .oo-step-inner{
  opacity:1;transform:none;
  transition:opacity .5s ease .15s,transform .7s cubic-bezier(.2,.7,.2,1) .15s;
}
.oo-step-ja{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1.2em;
  font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--mute);
}
.oo-step-ja span{font-family:var(--font-ja);font-size:clamp(13px,1.05vw,19px);letter-spacing:.06em;color:var(--ink)}
.oo-step-text{
  max-width:34em;
  margin-top:clamp(10px,1vw,18px);
  padding-bottom:clamp(20px,2.2vw,44px);
  font-family:var(--font-ja);
  font-size:clamp(12px,1vw,18px);
  line-height:1.95;letter-spacing:.03em;
}
/* 工程のキーワード（OEMページ） */
.oo-step-text:has(+ .oo-step-tags){padding-bottom:clamp(12px,1.1vw,20px)}
.oo-step-tags{
  list-style:none;margin:0;padding:0 0 clamp(20px,2.2vw,44px);
  display:flex;flex-wrap:wrap;gap:.45rem;
}
.oo-step-tags li{
  font-family:var(--font-ja);font-size:11px;font-weight:600;letter-spacing:.06em;
  color:rgba(13,13,13,.55);
  border:1px solid rgba(13,13,13,.14);border-radius:999px;
  padding:.4em .9em;
}

/* ---------- タッチ：押せるとわかる見た目 ----------
   ＋ を丸いボタンにして、まだ一度も押していない間は、閉じた項目の ＋ がゆっくり波打つ。
   押した瞬間は行がうっすらグレーになる */
.oo.is-tap .oo-step button{-webkit-tap-highlight-color:transparent;transition:background-color .2s}
.oo.is-tap .oo-step button:active{background:rgba(13,13,13,.04)}
.oo.is-tap .oo-step-icon{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(13,13,13,.28);
  transition:background-color .3s,color .3s,border-color .3s,transform .2s;
}
.oo.is-tap .oo-step-icon::before,.oo.is-tap .oo-step-icon::after{left:10px;right:10px}
.oo.is-tap .oo-step button:active .oo-step-icon{transform:scale(.9)}
.oo.is-tap .oo-step.is-open .oo-step-icon,.oo.is-tap .oo-items.is-open .oo-step-icon{background:var(--ink);border-color:var(--ink);color:#fff}
.oo.is-tap:not(.is-touched) .oo-step:not(.is-open) .oo-step-icon{animation:oo-pulse 2.6s ease-out infinite}
.oo.is-tap .oo-step:nth-child(3) .oo-step-icon{animation-delay:.3s}
.oo.is-tap .oo-step:nth-child(4) .oo-step-icon{animation-delay:.6s}
.oo.is-tap .oo-step:nth-child(5) .oo-step-icon{animation-delay:.9s}
.oo.is-tap .oo-step:nth-child(6) .oo-step-icon{animation-delay:1.2s}
@keyframes oo-pulse{0%{box-shadow:0 0 0 0 rgba(13,13,13,.22)}70%,100%{box-shadow:0 0 0 10px rgba(13,13,13,0)}}

/* ---------- 写真：PCではスクロールしても画面に残る ---------- */
.oo-visual{
  position:sticky;top:calc(var(--header-h) + clamp(24px,3.4vw,68px));
  margin:0;
  background:var(--tile);
  aspect-ratio:766/956;
  /* 写真全体が画面の高さに収まる幅にする */
  width:min(100%, (100svh - var(--header-h) - clamp(48px,6.8vw,136px)) * 766 / 956);
  overflow:hidden;
}
.oo-visual img{width:100%;height:100%;object-fit:cover}

/* ---------- ページを開いた時の動き（.is-ready は oneofone.js が付ける） ---------- */
.js .oo-title{overflow:hidden;padding-bottom:.08em}
.js .oo-title span{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .oo-title-ja,.js .oo-lead,.js .oo-items,.js .oo-hint,.js .oo-step{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .oo-visual{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) .1s}
.js .oo-visual img{transform:scale(1.12);transition:transform 1.8s cubic-bezier(.2,.7,.2,1) .1s}
.js .is-ready .oo-title span,
.js .is-ready .oo-title-ja,
.js .is-ready .oo-lead,
.js .is-ready .oo-items,
.js .is-ready .oo-hint,
.js .is-ready .oo-step{opacity:1;transform:none}
.is-ready .oo-hint{transition-delay:.2s}
.js .is-ready .oo-visual{clip-path:inset(0 0 0 0)}
.js .is-ready .oo-visual img{transform:none}
.is-ready .oo-title-ja{transition-delay:.08s}
.is-ready .oo-lead{transition-delay:.15s}
.is-ready .oo-items{transition-delay:.2s}
.is-ready .oo-step:nth-child(1){transition-delay:.25s}
.is-ready .oo-step:nth-child(2){transition-delay:.31s}
.is-ready .oo-step:nth-child(3){transition-delay:.37s}
.is-ready .oo-step:nth-child(4){transition-delay:.43s}
.is-ready .oo-step:nth-child(5){transition-delay:.49s}
.is-ready .oo-step:nth-child(6){transition-delay:.55s}

/* ---------- SP：パンくず → 事業名 → 日本語 → 写真 → 説明 → 対応可能アイテム → TAP の案内 → 工程 ----------
   HTML の順番（PC の左右の並び）はそのままで、.oo-side を display:contents にして
   中の要素を写真と同じ並びに出し、order で並べ替える */
@media (max-width:720px){
  .oo{grid-template-columns:1fr;row-gap:0;padding-inline:var(--gutter)}
  .oo-side{display:contents}
  .oo-crumb{order:1}
  .oo-title{order:2}
  .oo-title-ja{order:3;display:block}
  .oo-visual{order:4;position:relative;top:0;width:100%;margin-top:24px}
  .oo-lead{order:5;margin-top:28px}
  .oo-items{order:6}
  .oo-hint{order:7}
  .oo-steps{order:8}
  .oo-items-btn{padding:18px 0}
  .oo-items-en{font-size:17px}
  .oo-step button{font-size:20px}
}

@media (prefers-reduced-motion:reduce){
  .js .oo-title span,.js .oo-title-ja,.js .oo-lead,.js .oo-items,.js .oo-hint,.js .oo-step,.js .oo-visual,.js .oo-visual img{opacity:1;transform:none;clip-path:none;transition:none}
  .oo-items-panel,.oo-items-inner,.oo-step-panel,.oo-step-inner,.oo-step-name,.oo-step-icon::after{transition:none}
  .oo-hint svg,.oo-hint .tap-ring,.oo.is-tap .oo-step-icon{animation:none!important}
}