@charset "utf-8";

/* =============================================
   Loading
   ============================================= */
#loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity .8s ease;
}
#loading.hide {
  opacity: 0;
}

.loading-text {
  position: relative;
  font-weight: 200;
  font-size: clamp(1.2rem, 3vw, 2.4rem);
  text-transform: none;
  line-height: 1;
  font-style: italic;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 背景テキスト (#ccc) */
.lt-bg {
  display: block;
  color: #ccc;
  user-select: none;
}

/* 前景テキスト (#000) clip-pathで左から右に着色 */
.lt-fg {
  position: absolute;
  left: 0;
  top: 0;
  color: #766662;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.lt-fg.active {
  clip-path: inset(0 0% 0 0);
}


#main{ width:100%; margin:0 auto; opacity: 0; transition: opacity 1s ease; }
#main.is-loaded{ opacity: 1; }
#main-inner{ margin:0 auto; }

/* =============================================
   main-mv
   ============================================= */
.main-mv{ width: 100%; margin:0 auto; overflow: hidden; }
.main-mv img{ width: 100%; display: block; transform: scale(1.08); transition: transform 1.8s cubic-bezier(.16,.84,.44,1); }
#main.is-loaded .main-mv img{ transform: scale(1); }

/* =============================================
   page-nav
   — 初期は.sec1内、スクロールで画面右上に追従
   ============================================= */
.page-nav{
  position: sticky;
  top: 0;
  padding-top: 2em;
  height: 0;
  overflow: visible;
  z-index: 20;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.page-nav ul{
  display: flex;
  flex-direction: column;
  gap: .6em;
  padding-right: 2%;
  pointer-events: auto;
}
.page-nav li a{
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: sideways;
  min-width: 2em;
  height: 7em;
  padding: .6em .4em;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  color: #000;
  font-size: .6rem;
  letter-spacing: .1em;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  transition: .3s;
}
.page-nav li a:hover{
  background: #000;
  color: #fff;
}
@media screen and (max-width: 600px) {
  .page-nav{ top: 1.2em; }
  .page-nav ul{ gap: .4em; padding-right: 3%; }
}

/* =============================================
   sec1
   ============================================= */
.sec1{ padding: 12em 4%; display: flex; align-items: center; }
.sec1-inner{ display: flex; align-items: center; justify-content: center; gap: 5%; max-width: 1200px; margin: 0 auto; width: 100%; }
.sec1-mov{ width: 42%; aspect-ratio: 2 / 3; overflow: hidden; }
.sec1-mov video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.sec1-txt{ width: 48%; text-align: center; }
.sec1-logo{ margin-bottom: 3em; }
.sec1-logo img{ width: 80%; max-width: 340px; margin: 0 auto; }
.sec1-lead{ line-height: 2; letter-spacing: 0.03em; }
.sec1-sign{ margin-top: 2.5em; }
.sec1-sign img{ width: 70%; max-width: 240px; margin: 0 auto; }

@media screen and (max-width: 810px) {
  .sec1{ padding: 6em 6% 12em; }
  .sec1-inner{ flex-direction: column; gap: 5em; }
  .sec1-mov{ width: 70%; }
  .sec1-txt{ width: 100%; }
}
@media screen and (max-width: 600px) {
  .sec1-mov{ width: 90%; }
  .sec1-logo img{ width: 52vw; }
  .sec1-sign img{ width: 44vw; }
}

/* =============================================
   quote-sec
   — 引用キャプション付きの写真パネル（複数カテゴリで使い回す）
   — .sec1 → 1つ目の.quote-sec → 2つ目の.quote-sec ...と
     スクロールのたびに画面上部で止め(sticky, topはJSで動的計算)、
     次の要素がその上にせり上がってかぶさる多段構成
   ============================================= */
.reveal1{ position: relative; }
.sec1{ position: sticky; top: 0; z-index: 1; }
.quote-sec{
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8em 0 2em;
  background-color: #a5a1a3;
  text-align: center;
}
.nav-anchor{ display: block; }
#stone02 + .quote-sec{ z-index: 3; }
.quote-inner{ margin: 0 auto 6em; max-width: 1200px; }
.quote-photo{ padding: 10px; background: #000; line-height: 0; max-width: 900px; margin: 0 auto; }
#stone02 + .quote-sec .quote-photo{ padding: 0; background: none; }
.quote-caption{ font-style: italic; font-size: 240%; line-height: 1.3; margin-top: 1.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.quote-lead{ font-size: 90%; line-height: 2; letter-spacing: 0.03em; margin-top: 1.5em; }

@media screen and (max-width: 810px) {
  .quote-sec{ padding: 5em 6% 7em; }
  .quote-photo{ padding: 6px; }
  .quote-lead{ font-size: 100%;}
}
@media screen and (max-width: 600px) {
  
}

/* =============================================
   cat-sec
   — カテゴリ紹介セクションの共通レイアウト
     （RING/NECKLACE/EAR JEWELRYなど複数カテゴリで使い回す）
   ============================================= */
.cat-sec{ background-color: #a5a1a3; }
.cat-main{ width: 100%; line-height: 0; }
.cat-main img{ width: 100%; display: block; }
.cat-inner{ display: flex; margin: 2em auto; text-align: left; justify-content: right; padding-right: 5rem; }
.cat-inner.is-reverse{ flex-direction: row-reverse; justify-content:left; padding-right: 0; }
.cat-txt{ flex: 1; min-width: 0; align-self: flex-start; position: sticky; top: 0; height: 100vh; padding: 3em 5% 3em 6%; display: flex; flex-direction: column; justify-content: center; z-index: 4; max-width: 800px; }
.cat-inner.is-reverse .cat-txt{ padding: 3em 6% 3em 8%; }
.cat-title{ font-style: italic; font-size: 300%; font-weight: 300; letter-spacing: 0.05em; margin-bottom: .2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.cat-desc p{ font-size: 90%; line-height: 1.9; letter-spacing: 0.03em; margin-bottom: 1.6em; }
.cat-desc p:last-child{ margin-bottom: 0; }
.cat-list{ margin-top: 1.5em; }
.cat-list li{ font-size: 100%; letter-spacing: 0.03em; }
.cat-list-link{ display: inline-flex; align-items: center; padding: .3em 0; color: inherit; }
.cat-list-name,
.cat-list-price{ font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif; }
.cat-list-name{ width: 15em; }
.cat-list-price{ width: 6em; text-align: right; margin-right: 2em; }
.cat-buy{ display: inline-flex; align-items: center; justify-content: center; min-width: 4.5em; padding: .1em .6em; border: 1px solid #000; border-radius: 999px; font-size: 75%; letter-spacing: 0.1em; transition: .3s; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.cat-list-link:hover .cat-buy{ background: #000; color: #fff; }
.cat-photo{ flex: none; position: relative; width: calc(100vh * 2 / 3); }
.cat-photo-slide{ position: sticky; top: 0; height: 100vh; overflow: hidden; line-height: 0; }
.cat-photo-slide:nth-of-type(1){ z-index: 1; }
.cat-photo-slide:nth-of-type(2){ z-index: 2; }
.cat-photo-slide:nth-of-type(3){ z-index: 3; }
.cat-photo-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.cat-duo{ display: flex; align-items: flex-start; justify-content: space-between; gap: 4%; width: 90%; margin: 0 auto; padding: 4em 4% 8em; }
.cat-duo-ph1{ width: 45%; line-height: 0; }
.cat-duo-ph2{ width: 35%; margin-top: 40%; line-height: 0; }
.cat-duo-ph1 img,
.cat-duo-ph2 img{ width: 100%; display: block; }
.cat-duo-ph1.has-frame,
.cat-duo-ph2.has-frame{ padding: 15px; background: #000; }
.is-even .cat-duo-ph1.has-frame,
.is-even .cat-duo-ph2.has-frame{ padding: 10px; }
.cat-duo.is-even .cat-duo-ph1{ width: 45%; }
.cat-duo.is-even .cat-duo-ph2{ width: 43%; margin-top: 25%; }
.cat-duo-ph2.has-fade{ position: relative; }
.cat-duo-ph2.has-fade img{ animation: catFade 12s infinite; }
.cat-duo-ph2.has-fade img:last-child{ position: absolute; inset: 0; width: auto; height: 100%; object-fit: cover; animation-delay: -6s; }

.cat-collage{ position: relative; width: 90%; margin: 4em auto 8em; padding: 0 4%; aspect-ratio: 694 / 743; }
.cat-collage-ph1{ position: absolute; left: 8%; top: 3%; width: 37%; line-height: 0; }
.cat-collage-ph2{ position: absolute; left: 48%; top: 26%; width: 48%; line-height: 0; }
.cat-collage-ph3{ position: absolute; left: 4%; top: 63%; width: 46%; line-height: 0; overflow: hidden; }
.cat-collage img{ width: 100%; display: block; }
.cat-collage.is-alt{ aspect-ratio: 692 / 900; }
.cat-collage.is-alt .cat-collage-ph1{ left: 5%; top: 5%; width: 42%; }
.cat-collage.is-alt .cat-collage-ph2{ left: 58%; top: 14%; width: 40%; }
.cat-collage.is-alt .cat-collage-ph3{ left: 15%; top: 62%; width: 34%; }
.cat-collage-ph3 img:nth-child(1):nth-last-child(2),
.cat-collage-ph3 img:nth-child(2){ animation: catFade 12s infinite; }
.cat-collage-ph3 img:nth-child(2){ position: absolute; inset: 0; height: 100%; object-fit: cover; animation-delay: -6s; }

/* cat-collage-ph1（sec7）: 表示後、同位置で別カットにフェード切り替え（1回のみ） */
.cat-collage-ph1 .ph-after{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease 2.4s; }
.cat-collage-ph1.ef-photo.play .ph-after{ opacity: 1; }

@keyframes catFade{
  0%, 43%  { opacity: 1; }
  50%, 93% { opacity: 0; }
  100%     { opacity: 1; }
}

@media screen and (max-width: 810px) {
  .cat-main{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .cat-inner,.cat-inner.is-reverse{ flex-direction: column; margin-top: 0; padding-right: 0; }
  .cat-title{ margin-bottom: .5em; text-align: center; }
  .cat-txt,.cat-inner.is-reverse .cat-txt{ width: 100%; position: static; height: auto; padding: 4em 3% 3em; }
  .cat-desc p{ text-align: center; }
  .cat-photo{ width: 100%; }
  /* SPは画面高さ(100vh)基準だと機種ごとにアスペクト比がまちまちで
     見切れ方が安定しないため、PC版と同じ2:3の比率を幅基準で固定する */
  .cat-photo-slide{ height: calc(100vw * 3 / 2); }
  .cat-duo{ flex-direction: column; gap: 3em; padding: 3em 6% 5em; }
  .cat-duo-ph1{ width: 105%; }
  .cat-duo-ph2{ width: 80%; }
  .cat-duo.is-even .cat-duo-ph1{ width: 90%; }
  .cat-duo.is-even .cat-duo-ph2{ width: 80%; }
  .cat-duo-ph2{ margin-top: 0; align-self: flex-end; }
  .cat-duo.is-even .cat-duo-ph2{ margin-top: 0; }
  .cat-duo-ph1.has-frame,
  .cat-duo-ph2.has-frame{ padding: 6px; }
  .cat-collage{ position: static; aspect-ratio: auto; padding: 0 6%; margin: 3em auto 5em; display: flex; flex-direction: column; align-items: flex-start; gap: 3em; }
  .cat-collage-ph1,
  .cat-collage-ph2,
  .cat-collage-ph3,
  .cat-collage.is-alt .cat-collage-ph1,
  .cat-collage.is-alt .cat-collage-ph2,
  .cat-collage.is-alt .cat-collage-ph3{ position: static; left: auto; top: auto; width: 85%; }
  .cat-collage.is-alt .cat-collage-ph1{ width: 95%; }
  .cat-collage-ph2,
  .cat-collage.is-alt .cat-collage-ph2{ align-self: flex-end; width: 110%; }
  .cat-collage-ph1,
  .cat-collage-ph3,
  .cat-collage.is-alt .cat-collage-ph1,
  .cat-collage.is-alt .cat-collage-ph3{ position: relative; }
  .cat-desc p { font-size: 100%; }
  .cat-list { margin-top: 2em; }
  .cat-list li { font-size: 110%; text-align: center; }
  .cat-list-link { text-align: left; }
}
@media screen and (max-width: 600px) {
  .cat-list-price{ width: 5em; margin-right: 1em; }
}

/* =============================================
   allprod
   — 全商品一覧。左テキスト固定、右は写真＋商品情報が縦に並びスクロール
   ============================================= */
.allprod{ background-color: #fff; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 8em 4% 10em; }
.allprod-inner{ max-width: 1200px; }
.allprod-list{ flex: 1; min-width: 0; max-width: 640px; display: flex; flex-direction: column; gap: 6em; }
.allprod-photo{ line-height: 0; }
.allprod-photo img{ width: 100%; display: block; }
.allprod-row{ margin-top: 1.2em; }
.allprod-gift-text{ margin-top: 1.5em; text-align: center; font-size: 90%; line-height: 2; letter-spacing: 0.03em; }

@media screen and (max-width: 810px) {
  .allprod{ padding: 5em 6% 6em; }
  .allprod-list{ max-width: none; gap: 4em; }
  .allprod .cat-list-link{ font-size: 130%; }
  .allprod-gift-text { font-size: 100%; }
}
@media screen and (max-width: 600px) {
  .allprod-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 2em 4%; }
  .allprod-item.allprod-gift{ grid-column: 1 / -1; }
  .allprod-row { margin-top: .6em; }
  .allprod-item .cat-list-link{ align-items: flex-start; gap: 1em; font-size: 90%; width: 100%; }
  .allprod-item .cat-list-name{ width: 65%; margin: 0; text-align: left; }
  .allprod-item .cat-list-price{ width: 25%; margin: 0; text-align: left; }
}

/* =============================================
   profile
   — クリエイタープロフィール
   ============================================= */
.profile{ background-color: #f7f7f7; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 10em 4%; }
.profile-inner{ display: flex; align-items: center; gap: 6%; max-width: 1200px; margin: 0 auto; }
.profile-photo{ flex: 0 0 40%; line-height: 0; }
.profile-photo img{ width: 100%; display: block; }
.profile-txt{ flex: 1; min-width: 0; }
.profile-name-en{ font-size: 180%; letter-spacing: 0.05em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.profile-name-jp{ font-size: 110%; margin-top: .2em; }
.profile-bio{ margin-top: 2em; }
.profile-bio p{ font-size: 90%; line-height: 2; letter-spacing: 0.03em; margin-bottom: 1.6em; }
.profile-bio p:last-child{ margin-bottom: 0; }
.profile-link{ margin-top: 2em; font-size: 90%; letter-spacing: 0.03em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.profile-link a{ text-decoration: underline; }
.profile-sns{ margin-top: 1.2em; }
.profile-insta{
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjNDQyZjEyIiBkPSJNMzcwLjkgNkgxNDEuMUM2Ni42IDYgNiA2Ni42IDYgMTQxLjF2MjI5LjhDNiA0NDUuNCA2Ni42IDUwNiAxNDEuMSA1MDZoMjI5LjhjNzQuNSAwIDEzNS4xLTYwLjYgMTM1LjEtMTM1LjFWMTQxLjFDNTA2IDY2LjYgNDQ1LjQgNiAzNzAuOSA2em05NC43IDM2NC45YzAgNTIuMi00Mi41IDk0LjctOTQuNyA5NC43SDE0MS4xYy01Mi4yIDAtOTQuNy00Mi41LTk0LjctOTQuN1YxNDEuMWMwLTUyLjIgNDIuNS05NC43IDk0LjctOTQuN2gyMjkuOGM1Mi4yIDAgOTQuNyA0Mi41IDk0LjcgOTQuN3YyMjkuOHoiLz48cGF0aCBmaWxsPSIjNDQyZjEyIiBkPSJNMzY3LjkgMjM4LjZjLTMuNi0yNC0xNC41LTQ1LjctMzEuNi02Mi44LTE3LjEtMTcuMS0zOC45LTI4LjEtNjIuOC0zMS42LTEwLjktMS42LTIyLTEuNi0zMi45IDAtMjkuNiA0LjQtNTUuOCAyMC4xLTczLjYgNDQuMXMtMjUuMiA1My42LTIwLjkgODMuMmM0LjQgMjkuNiAyMC4xIDU1LjggNDQuMSA3My42IDE5LjUgMTQuNSA0Mi43IDIyLjEgNjYuNiAyMi4xIDUuNSAwIDExLjEtLjQgMTYuNy0xLjIgMjkuNi00LjQgNTUuOC0yMC4xIDczLjYtNDQuMSAxNy44LTI0LjIgMjUuMi01My43IDIwLjgtODMuM3pNMjY3LjUgMzI2Yy0xOSAyLjgtMzcuOS0xLjktNTMuMi0xMy4zLTE1LjQtMTEuNC0yNS40LTI4LjEtMjguMi00Ny4xLTIuOC0xOSAxLjktMzcuOSAxMy4zLTUzLjIgMTEuNC0xNS40IDI4LjEtMjUuNCA0Ny4xLTI4LjIgMy41LS41IDctLjggMTAuNS0uOHM3IC4zIDEwLjUuOGMzMS41IDQuNyA1NS44IDI5IDYwLjQgNjAuNCA1LjggMzktMjEuMyA3NS42LTYwLjQgODEuNHpNMzk2LjcgMTE1LjNjLTMuOC0zLjgtOS01LjktMTQuMy01LjktNS4zIDAtMTAuNSAyLjItMTQuMyA1LjktMy44IDMuOC01LjkgOS01LjkgMTQuM3MyLjIgMTAuNSA1LjkgMTQuM2MzLjggMy44IDkgNS45IDE0LjMgNS45IDUuMyAwIDEwLjUtMi4yIDE0LjMtNS45IDMuOC0zLjggNS45LTkgNS45LTE0LjMgMC01LjMtMi4yLTEwLjUtNS45LTE0LjN6Ii8+PC9zdmc+);
  background-repeat: no-repeat;
  background-size: cover;
  transition: .3s;
}
.profile-insta:hover{ opacity: .6; }

@media screen and (max-width: 810px) {
  .profile{ padding: 4em 6%; }
  .profile-inner{ flex-direction: column; align-items: flex-start; gap: 2.5em; }
  .profile-photo{ flex: none; width: 70%; }
  .profile-txt{font-size: 110%; }
}
@media screen and (max-width: 600px) {
  .profile-photo{ width: 100%; }
}

/* =============================================
   footer credit
   ============================================= */
.fCredit{ font-family: "Noto Serif JP", "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif; font-size: 140%; line-height: 2; letter-spacing: 0.03em; margin-bottom: 6em; color: #000; }

@media screen and (max-width: 810px) {
  .fCredit{ font-size: 100%; }
}

/* =============================================
   表示アニメーション（スクロールで一度だけフェードイン）
   — common.css の .ef / .ef.play にtransformを追加し、
     IntersectionObserver（base.js）で .play を付与
   ============================================= */
.ef{ transform: translateY(28px); transition: opacity .9s ease, transform .9s ease, filter .9s ease; }
.ef.play{ opacity: 1; filter: blur(0); transform: translateY(0); animation: none; }

/* タイトルのみ、フェードではなくワイプで表示 */
.cat-title.ef{ opacity: 1; filter: none; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65,0,.35,1); }
.cat-title.ef.play{ clip-path: inset(0); }

/* =============================================
   表示アニメーション（写真）
   — フェード＋ズームアウトでスクロールインさせる
   ============================================= */
.ef-photo{ opacity: 0; overflow: hidden; transition: opacity 1s ease; }
.ef-photo img{ transform: scale(1.12); transition: transform 1.4s cubic-bezier(.16,.84,.44,1); }
.ef-photo.play{ opacity: 1; }
.ef-photo.play img{ transform: scale(1); }

.cat-collage-ph2.ef-photo.play{ transition-delay: .12s; }
.cat-collage-ph3.ef-photo.play{ transition-delay: .24s; }

/* 枠（has-frame）があるタイプは、画像が表示されてから枠を表示 */
.ef-photo.has-frame{ opacity: 1; background-color: transparent; transition: background-color 1s ease .8s; }
.ef-photo.has-frame img{ opacity: 0; transition: opacity 1s ease, transform 1.4s cubic-bezier(.16,.84,.44,1); }
.ef-photo.has-frame.play{ background-color: #000; }
.ef-photo.has-frame.play img{ opacity: 1; }

/* =============================================
   表示アニメーション（マスク）
   — clip-pathで端から広がるように表示（sec1-mov動画、
     cat-duo is-even の写真ペアなどで使用）
   ============================================= */
.ef-mask{ clip-path: inset(0 0 0 100%); transition: clip-path 1.4s cubic-bezier(.65,0,.35,1); }
.ef-mask.play{ clip-path: inset(0); }

.ef-mask-left{ clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.65,0,.35,1); }
.ef-mask-left.play{ clip-path: inset(0); }

/* 枠（has-frame）があるタイプは、マスクが開いてから枠を表示 */
.ef-mask.has-frame,
.ef-mask-left.has-frame{ background-color: transparent; transition: clip-path 1.4s cubic-bezier(.65,0,.35,1), background-color .5s ease 1.2s; }
.ef-mask.has-frame.play,
.ef-mask-left.has-frame.play{ background-color: #000; }