/* =============================
styles.css — SNS & Action buttons updated; fonts easy-config
============================= */
:root{
  /* Colors */
  --fg:#000000;            /* text (black) */
  --muted:#000000;         /* secondary text */
  --line:#e3e3e3;          /* hairline borders */
  --accent:#2700ec;        /* ruby red */

  /* Background gradient (fixed 100% height/width) */
  --bg-grad: linear-gradient(to right, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #cfe0f3, #b277b2, #bf3064, #a11f24);

  /* Fonts (place files under assets/fonts/jp and assets/fonts/en) */
  --font-jp: "YourJP-Min","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-jp2: "YourJP-Qulu","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-en: "YourEN",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  /* Sizes */
  --fs--1: clamp(0.72rem, 0.80rem + 0.20vw, 0.95rem);
  --fs-0: clamp(0.75rem, 0.70rem + 0.50vw, 0.9rem);
  --fs-1: clamp(1.15rem, 1.00rem + 1.00vw, 1.25rem);
  --fs-2: clamp(1.45rem, 1.10rem + 2.00vw, 2.35rem);
  --fs-3: clamp(2.1rem, 1.6rem + 3.5vw, 3.4rem);

  /* Radii */
  --radius-btn: 6px;       /* slight rounding for buttons only */
}

@font-face{
  font-family:"YourEN";
  src:url("assets/fonts/en/en.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"YourJP-Min";
  src:url("assets/fonts/jp/min.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"YourJP-Qulu";
  src:url("assets/fonts/jp/qulu.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}

.mast .jp{
  font-family: var(--font-jp2);
}

body{ font-family: var(--font-jp) !important; }
.en { font-family: var(--font-en) !important; }

*{box-sizing:border-box}
html{min-height:100%;}
body{min-height:100%;}
html,body{height:auto}
body{
  margin:0; color:var(--fg);
  font: 400 16px/1.6 var(--font-jp);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;

  background: var(--bg-grad);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

.en{
  font-family: var(--font-en);
  font-size-adjust: 0.92;
}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;}

/* Layout */
.wrap{max-width:min(1100px, 92vw); margin-inline:auto; padding:clamp(16px,4vw,48px);} 
.mast{padding-block:clamp(8px,2vw,16px); border-bottom:1px solid var(--line); margin-bottom:clamp(18px,3vw,36px)}
.mast .jp{font-size:var(--fs-3); letter-spacing:.06em; margin:0}
.mast .en{font-size:var(--fs-1); margin:.25em 0 0; color:var(--muted); font-weight:500}

.hero{display:grid; grid-template-columns: 1fr; gap:clamp(18px,3vw,28px); align-items:start}
.portrait{margin:0}
.portrait img{display:block; width:100%; height:auto; border-radius:0; box-shadow:none}
.bio-short p{margin:0 0 .5em; font-size:var(--fs-1)}
.bio-short{
  font-family: var(--font-en);
  font-size-adjust: 0.92;
}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.muted{color:var(--muted)}
.units{list-style:none; margin:0; padding:0}
.units li{display:flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:center; margin:.25rem 0}
.unit{
  display:inline-flex; gap:.5rem; align-items:center;
  text-decoration:underline;
  color:var(--accent);
}
.unit:hover{
  color: color-mix(in srgb, var(--accent) 85%, black 15%);
}
.unit img{width:1.4rem; height:1.4rem; object-fit:cover; border-radius:0;}
.unit.small img{width:1.1rem; height:1.1rem}
.role{
  color:var(--muted);
}

/* Zones */
.zone{ padding: clamp(16px, 2vw, 24px); margin: clamp(10px, 2vw, 16px) 0; }

/* SNS Buttons — white, thin border, slight radius; hover faint ruby */
.links ul{display:flex; flex-wrap:wrap; gap:.6rem .9rem; list-style:none; padding:0; margin:0}
.links a span{
  font-family: var(--font-en);
  font-size-adjust: 0.92;
}
.btn-sns{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid var(--line); background:#fff; color:var(--fg); text-decoration:none; border-radius:var(--radius-btn); transition: background-color .2s ease, color .2s ease, border-color .2s ease}
.btn-sns:hover{background: color-mix(in srgb, var(--accent) 8%, white); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); color: var(--fg)}
.btn-sns img{width:1rem; height:1rem; display:block}

/* LinksのUIを使い回し。中央揃えはせず、Linksと同じフロー */
.links.actions ul{
  /* Linksのまま（.links ul と同一） */
  display:flex; flex-wrap:wrap; gap:.6rem .9rem; list-style:none; padding:0; margin:0;
}

/* 反転（赤ベタ）バージョン。寸法/角/線はLinks(.btn-sns)と完全一致 */
.btn-sns--inverse{
  border-color: var(--accent);
  background: var(--accent);
  color:#fff;
}
.btn-sns--inverse:hover{
  background: color-mix(in srgb, var(--accent) 85%, black 15%);
  border-color: color-mix(in srgb, var(--accent) 85%, black 15%);
  color:#fff;
}
/* 「予約」だけ日本語フォント */
.links.actions .btn-sns span.jp{
  font-family: var(--font-jp);
  font-size: 0.74em;     /* ←好みで 0.90〜0.98 に調整 */
  line-height: 1;        /* 余白を締める */
  position: relative;
  top: 0px;             /* ベースライン微調整（±で調整可） */
}

/* メールは黒・小さめ（既存） */
.email{ margin:.6rem 0 0; font-size:var(--fs--1); color:var(--fg); }

/* Email — plain black text */
.email{margin:.1rem 0 0; font-size:var(--fs--1); color:var(--fg)}

/* 既存の .email { margin:.1rem 0 0; ... } を上書き */
.zone .email{
  margin-top: 1.25rem !important;  /* ← 確実に広げる */
  font-size: calc(var(--fs--1) * 1.15); /* 少しだけ大きく */
}

/* Long bio */
.bio-long{border:1px solid var(--line)}
.bio-long h3{font-size:var(--fs-1); margin:0 0 .5em}
.bio-long h3{
  font-family: var(--font-en);
  font-size-adjust: 0.92;
}
.bio-long h4{
  font-family: var(--font-en);
  font-size-adjust: 0.92;
}
.bio-long p{font-size:var(--fs-0); margin:.6em 0}
.bio-long .credit{color:var(--muted); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.bio-long .credit-link{color:var(--accent); text-decoration:underline; font-weight:600}

.foot{border-top:1px solid var(--line); margin-top:clamp(18px,2vw,28px); padding-top:clamp(12px,1.5vw,18px)}
.foot small{color:var(--muted)}

/* 幅100%＋16:9維持（確実に効くフォールバック付き） */
.video-wrapper{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.video-wrapper::before{
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}
.video-wrapper iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.playlist h3{
  font-size: var(--fs-1);
  margin-bottom:.5em;
  font-family: var(--font-en);
}

/* Glass — sharp corners */
.glass{background:rgba(255,255,255,0.60); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border:1px solid rgba(160,160,160,.25); border-radius:0;}

/* Larger viewports */
@media (min-width: 820px){
  .hero{grid-template-columns: min(38ch, 45%) 1fr; align-items:center}
}

@media screen and (max-width: 767px) {
  .bio-short {
    font-size: 50%;   /* 今の設定値の半分 */
    line-height: 1.4; /* 読みやすさ用に行間を少し調整 */
  }
}