@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#FAFAF9;
  --surface:#F1F0ED;
  --ink:#121212;
  --ink-soft:#686763;
  --ink-faint:#A9A7A1;
  --line:#DEDCD5;
  --line-strong:#121212;

  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-6:48px;
  --sp-8:64px;
  --sp-10:80px;
  --sp-12:96px;
  --sp-16:128px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth; overflow-x:hidden;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-weight:400;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}

.eng{
  font-family:'Inter', sans-serif;
}

.container{
  max-width:1140px;
  margin:0 auto;
  padding:0 var(--sp-6);
}

/* ===== ヘッダー ===== */
.site-header{
  padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  row-gap:var(--sp-1);
}
.brand-mark{
  font-size:14px;
  font-weight:700;
  letter-spacing:0.06em;
  text-decoration:none;
  color:var(--ink);
}
.header-nav{
  display:flex;
  gap:var(--sp-4);
  font-size:11.5px;
  letter-spacing:0.04em;
  font-family:'Inter', sans-serif;
  font-weight:500;
}
.header-nav a{
  text-decoration:none;
  color:var(--ink-soft);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .15s ease, border-color .15s ease;
}
.header-nav a:hover{color:var(--ink); border-color:var(--ink);}

/* ===== マストヘッド:タイポグラフィのみで構成するヒーロー ===== */
.masthead{
  padding:var(--sp-16) 0 var(--sp-12);
  border-bottom:1px solid var(--line);
}
.masthead-eyebrow{
  display:block;
  font-family:'Inter', sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.32em;
  color:var(--ink-faint);
  margin-bottom:var(--sp-4);
}
.wordmark-en{
  margin:0;
  font-family:'Inter', sans-serif;
  font-size:clamp(40px, 6.4vw, 84px);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1;
  color:var(--ink);
}
.wordmark-jp{
  margin:var(--sp-3) 0 0;
  font-size:clamp(22px, 2.6vw, 32px);
  font-weight:500;
  letter-spacing:0.5em;
  color:var(--ink-soft);
}
.masthead-lead{
  margin:var(--sp-6) 0 0;
  max-width:460px;
  font-size:14.5px;
  color:var(--ink-soft);
  letter-spacing:0.02em;
  line-height:2.1;
}

/* ===== アプリ索引 ===== */
.apps-section{
  padding:var(--sp-10) 0 var(--sp-16);
}
.index-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--line-strong);
  margin-bottom:0;
}
.index-head .label{
  font-family:'Inter', sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.3em;
  color:var(--ink);
}
.index-head .count{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--ink-faint);
}

.index-row{
  display:grid;
  grid-template-columns:64px 1fr 120px;
  grid-template-areas:"num main status";
  align-items:center;
  column-gap:var(--sp-4);
  padding:var(--sp-8) 0;
  border-bottom:1px solid var(--line);
  transition:background-color .18s ease;
}
.index-row:hover{background-color:var(--surface);}

.index-row .idx-num{
  grid-area:num;
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
  align-self:start;
  padding-top:6px;
}

.index-row .idx-main{grid-area:main;}
.index-row .idx-name{
  font-size:clamp(24px, 3vw, 34px);
  font-weight:700;
  letter-spacing:0.01em;
  margin:0 0 10px;
  line-height:1.3;
}
.index-row .idx-desc{
  font-size:13.5px;
  color:var(--ink-soft);
  letter-spacing:0.01em;
}

.index-row .idx-status{
  grid-area:status;
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  letter-spacing:0.14em;
  color:var(--ink-faint);
  font-weight:500;
  white-space:nowrap;
  text-align:right;
  align-self:start;
  padding-top:8px;
}
.index-row.is-live .idx-status{color:var(--ink); font-weight:700;}
.index-row.is-live .idx-num{color:var(--ink); font-weight:700;}

/* ===== ブランドの結び ===== */
.brand-close{
  padding-top:var(--sp-16);
  padding-bottom:var(--sp-16);
  border-bottom:1px solid var(--line);
  text-align:center;
}

.brand-close-mark{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:22px;
}
.crescent-icon{
  width:17px;
  height:17px;
  color:var(--ink);
}
.brand-close-mark .eng{
  font-size:14px;
  font-weight:700;
  letter-spacing:0.22em;
  color:var(--ink);
}

.brand-close-tagline{
  margin:0 auto 40px;
  max-width:none;
  white-space:nowrap;
  font-size:clamp(15px, 3.4vw, 25px);
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.7;
  color:var(--ink);
}

.brand-close-body{
  max-width:460px;
  margin:0 auto;
  text-align:left;
}
.brand-close-body p{
  margin:0 0 26px;
  font-size:13.5px;
  color:var(--ink-soft);
  letter-spacing:0.02em;
  line-height:2.15;
}
.brand-close-body p:last-child{margin-bottom:0;}

/* ===== フッター ===== */
.site-footer{
  padding:var(--sp-4) 0 var(--sp-6);
}
.site-footer .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2);
}
.footer-links{
  display:flex;
  gap:var(--sp-4);
  font-family:'Inter', sans-serif;
  font-size:11px;
  font-weight:500;
}
.footer-links a{text-decoration:none; color:var(--ink-soft);}
.footer-links a:hover{color:var(--ink);}
.copyright{
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  color:var(--ink-faint);
  letter-spacing:0.02em;
}

/* ===== プライバシーポリシー用 ===== */
.legal{
  max-width:720px;
  margin:0 auto;
  padding:var(--sp-12) var(--sp-6) var(--sp-16);
}
.legal h1{
  font-size:25px;
  font-weight:700;
  letter-spacing:0.01em;
  margin:0 0 var(--sp-1);
}
.legal .updated{
  font-family:'Inter', sans-serif;
  font-size:11px;
  color:var(--ink-faint);
  margin-bottom:var(--sp-8);
  letter-spacing:0.02em;
}
.legal section{
  padding:var(--sp-4) 0;
  border-top:1px solid var(--line);
}
.legal section:last-child{border-bottom:1px solid var(--line);}
.legal h2{
  font-size:14px;
  font-weight:700;
  letter-spacing:0.02em;
  margin:0 0 var(--sp-2);
}
.legal p, .legal li{
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:2.05;
}
.legal ul{padding-left:20px; margin:10px 0;}
.legal strong{color:var(--ink); font-weight:700;}
.mail-box{
  display:inline-block;
  margin-top:var(--sp-2);
  padding:11px 20px;
  border:1px solid var(--ink);
  font-weight:700;
  color:var(--ink);
  letter-spacing:0.02em;
  font-size:13px;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.mail-box:hover{background:var(--ink); color:var(--bg);}

/* ===== レスポンシブ ===== */
@media (max-width:760px){
  .container{padding:0 var(--sp-3);}
  .masthead{padding:var(--sp-12) 0 var(--sp-8);}
  .apps-section{padding:var(--sp-8) 0 var(--sp-10);}

  .index-row{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "num status"
      "main main";
    row-gap:var(--sp-2);
    padding:var(--sp-6) 0;
  }
  .index-row .idx-num{padding-top:0;}
  .index-row .idx-status{align-self:start; padding-top:0;}

  .brand-close{padding-top:var(--sp-10); padding-bottom:var(--sp-10);}
}

a:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .index-row{transition:none;}
}
/* ===== ブランドクラム(スタジオ階層ナビ) ===== */
.brand-crumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.06em;
}
.studio-link{
  text-decoration:none;
  color:var(--ink-soft);
  transition:color .15s ease;
}
.studio-link:hover{color:var(--ink);}
.crumb-sep{
  color:var(--ink-faint);
  font-weight:400;
}

/* ===== 汎用ブランドアイコン ===== */
.brand-icon{
  width:17px;
  height:17px;
  color:var(--ink);
}

/* ===== スタジオトップの、クリック可能な行 ===== */
.index-row-link{
  text-decoration:none;
  color:inherit;
  display:grid;
}