/* 日高つい 利用規約サイト */
:root{
  --bg:#0a0a0d; --pink:#c0597a; --hot:#e60067; --ink:#ececf0; --dim:#9b98a4;
  --star:polygon(50% 0,67% 33%,100% 50%,67% 67%,50% 100%,33% 67%,0 50%,33% 33%);
  --display:'Dela Gothic One','Zen Kaku Gothic New',sans-serif;
  --text:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;
  --pad:clamp(20px,6vw,120px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* 文言の途中では折り返さず、収まらない時だけフレーズの切れ目で改行する */
.nb{display:inline-block;white-space:nowrap}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--text);font-size:16px;line-height:1.9;
}
/* ノイズ + 走査線(控えめ) */
/* body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40}
body::before{opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");animation:noise .6s steps(3) infinite}
body::after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)}
@keyframes noise{33%{background-position:40px 20px}66%{background-position:-30px 60px}}
a{color:var(--pink)}
a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:3px} */

/* ===== HERO ===== */
.hero{position:relative;padding:clamp(56px,8vw,120px) 0 clamp(36px,5vw,70px);overflow:hidden}
.rule{position:absolute;left:clamp(70px,9vw,180px);right:clamp(70px,9vw,180px);height:1px;background:var(--pink)}
.rule.t{top:clamp(30px,4.3vw,82px)}.rule.b{bottom:clamp(28px,4vw,76px)}
.spark{position:absolute;width:clamp(30px,4.4vw,84px);aspect-ratio:1;background:var(--pink);clip-path:var(--star)}
.spark.tl{top:clamp(16px,2.2vw,42px);left:clamp(16px,2.3vw,44px)}
.spark.tr{top:clamp(16px,2.2vw,42px);right:clamp(16px,2.3vw,44px)}
.spark.bl{bottom:clamp(14px,2.2vw,42px);left:clamp(16px,2.3vw,44px)}
.spark.br{bottom:clamp(14px,2.2vw,42px);right:clamp(16px,2.3vw,44px)}

.band{position:relative;background:var(--pink);color:#000}
/* 縦書き内の flex は row = 縦方向 */
.vert{writing-mode:vertical-rl;font-weight:900;line-height:1.6;color:#fff}
.tab{display:flex;align-items:center;margin:0;background:var(--pink)}
.tab::before{content:"";width:1px;background:#fff}
.quote{margin:0;background:var(--pink)}
/* Zen Kaku Gothic の「…」は縦書きで左に寄るため、縦書き字形を持つフォントで表示する */
.tate-dots{font-family:'Hiragino Sans','Yu Gothic','Noto Sans JP','Noto Sans CJK JP',sans-serif}
.bust{display:none}
/* ロゴ画像の透過余白を切り落とし、文字部分だけを h1 の箱にする(元画像 638x307 / 文字領域 x44-547, y109-245) */
h1.logo{margin:0;aspect-ratio:503/136;overflow:hidden;line-height:0}
h1.logo img{display:block;width:126.84%;max-width:none;height:auto;margin:-21.67% 0 0 -8.75%}
.tagline{margin:0;border-left:4px solid #000;font-weight:700;line-height:1.2}
.plabel{position:relative;display:inline-block;margin:0;font-family:var(--display);font-style:italic;color:#fff;line-height:1.2;z-index:1}
.plabel::before{content:"";position:absolute;left:0;right:0;bottom:.15em;height:.48em;background:#000;z-index:-1}
dl.profile{display:grid;grid-template-columns:max-content 1fr;margin:0;font-weight:500;line-height:1.45}
dl.profile dt,dl.profile dd{margin:0}
/* 白抜きX と 黒X を隙間なく交互に並べる(1タイル = 正方形2マス) */
.xx{pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 200 100'><path transform='translate(50 50) rotate(45)' d='M-15 -53h30v38h38v30h-38v38h-30v-38h-38v-30h38z' fill='none' stroke='%23000' stroke-width='5'/><path transform='translate(150 50) rotate(45)' d='M-15 -55h30v40h40v30h-40v40h-30v-40h-40v-30h40z' fill='%23000'/></svg>") repeat-x left bottom/auto 100%}

/* 立ち絵(枠なし・帯の手前に直接立たせる) */
.tachie{position:relative;z-index:4;margin:0;aspect-ratio:2894/4093}
.tachie img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.tachie .ph{position:absolute;inset:0;display:grid;place-content:center;gap:4px;text-align:center;font-size:12px;color:#fff;padding:12px;background:rgba(0,0,0,.25)}
.tachie .ph b{font-family:var(--display);font-weight:400;font-size:20px}

/* PC: 参考デザイン(2000x1125)と同じ比率で配置する。数値は参考画像の px / 20 = vw */
@media (min-width:861px){
  .hero{padding:9.5vw 0 17vw}
  .band{height:32.1vw}
  .tab{position:absolute;z-index:3;left:4.25vw;top:2.5vw;width:2.75vw;height:34vw;gap:1vw;font-size:1.5vw;letter-spacing:.05em;box-shadow:.9vw 1vw 0 #000}
  .tab::before{flex:0 0 10vw}
  .quote{position:absolute;z-index:3;left:32.15vw;top:-2.25vw;width:3.85vw;height:32.75vw;padding:.5vw .2vw;font-size:1.45vw;line-height:1.25;letter-spacing:.05em;box-shadow:1vw 1vw 0 #000}
  .bust{display:block;position:absolute;z-index:1;left:7.9vw;top:-10vw;bottom:0;width:32vw;margin:0;overflow:hidden}
  .bust img{position:absolute;left:-24.8vw;top:-2.85vw;width:77.8vw;max-width:none}
  .main{position:absolute;z-index:2;left:41.75vw;top:5vw;width:28vw}
  h1.logo{width:26vw;margin-bottom:.5vw}
  .tagline{margin-bottom:2.4vw;padding-left:.6vw;border-left-width:.35vw;font-size:1.4vw}
  .plabel{min-width:11.35vw;margin-bottom:.9vw;padding:0 .7vw 0 2.15vw;font-size:1.9vw}
  dl.profile{grid-template-columns:6.4vw 1fr;font-size:1.1vw}
  .xx{position:absolute;left:57.2vw;bottom:0;width:24vw;height:6vw}
  .tachie{position:absolute;left:61.7vw;top:-7.43vw;width:36.6vw}
}

/* ===== SECTIONS 共通 ===== */
section.sec{position:relative;padding:clamp(64px,9vw,130px) var(--pad)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;margin:0 0 clamp(28px,4vw,56px);text-align:center}
.sec-head h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(28px,4.4vw,60px);line-height:1.1;color:#fff}
.sec-head::before{content:"";width:clamp(18px,2vw,30px);aspect-ratio:1;background:var(--pink);clip-path:var(--star);flex:none}
.sec-head small{flex:1 1 100%;color:var(--dim);font-size:13px}

/* ===== TERMS ===== */
.lead,.tabs,.terms-wrap{max-width:1100px;margin-left:auto;margin-right:auto}
.lead{margin-top:0;margin-bottom:28px;padding:14px 18px;border:1px solid var(--pink);background:rgba(192,89,122,.07)}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(32px,4vw,56px);border-bottom:2px solid var(--pink)}
.tab-btn{flex:1 1 0;min-width:0;padding:14px 20px;border:2px solid var(--pink);border-bottom:0;background:#000;color:var(--pink);
  font-family:var(--display);font-size:clamp(15px,1.6vw,20px);line-height:1.3;cursor:pointer;transition:background .15s,color .15s}
.tab-btn:hover{background:rgba(192,89,122,.2)}
.tab-btn[aria-selected="true"]{background:var(--pink);color:#000}
.tab-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.terms-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,5vw,80px)}
.toc{position:sticky;top:24px;align-self:start;max-height:calc(100vh - 48px);overflow-y:auto;font-size:14px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--pink)}
.toc a{display:block;padding:5px 0 5px 14px;color:var(--ink);text-decoration:none;opacity:.8;line-height:1.5}
.toc a:hover{color:var(--pink);opacity:1}
.terms{max-width:760px;font-size:16px;line-height:2.05}
.terms-title{margin:0 0 clamp(28px,4vw,48px);font-size:clamp(20px,2.2vw,28px);font-weight:900;color:#fff;line-height:1.5}
.terms article{margin:0 0 44px;scroll-margin-top:24px}
.terms .ch{margin:0 0 12px;display:flex;align-items:baseline;gap:12px;font-weight:900;font-size:clamp(18px,1.8vw,22px);color:#fff;line-height:1.4}
.terms .ch span{color:var(--pink);font-size:.8em;flex:none}
.terms ol.cl{margin:0;padding:0;list-style:none;counter-reset:cl}
.terms ol.cl>li{counter-increment:cl;position:relative;padding:0 0 12px 2.2em}
.terms ol.cl>li::before{content:counter(cl)".";position:absolute;left:0;color:var(--pink);font-weight:700}
.terms ol.sub{margin:6px 0 0;padding:0;list-style:none;counter-reset:sub}
.terms ol.sub>li{counter-increment:sub;position:relative;padding:0 0 4px 2.6em}
.terms ol.sub>li::before{content:"("counter(sub)")";position:absolute;left:0;color:var(--pink)}
.terms .plain{margin:0}

/* ===== DOWNLOAD ===== */
.dl{text-align:center;border-top:1px solid var(--pink);border-bottom:1px solid var(--pink);margin:0 var(--pad);padding-left:0;padding-right:0}
.dl p{margin:0 0 28px}
.btn{
  display:inline-block;padding:18px clamp(16px,5vw,64px);background:var(--pink);color:#000;text-decoration:none;
  font-family:var(--display);font-size:clamp(15px,2vw,24px);line-height:1.4;border:2px solid var(--pink);
  box-shadow:7px 7px 0 #000,7px 7px 0 1px var(--pink);transition:transform .15s,box-shadow .15s,background .15s,color .15s;
}
.btn:hover{background:#000;color:var(--pink);transform:translate(3px,3px);box-shadow:4px 4px 0 var(--pink)}
.btn small{display:block;font-family:var(--text);font-size:12px;opacity:.8}
.ret{display:block;width:fit-content;margin:40px auto 0;color:var(--ink);font-size:14px;text-decoration:none;border-bottom:1px solid var(--pink)}
.ret:hover{color:var(--pink)}

footer{position:relative;padding:34px var(--pad) 40px;text-align:center;font-size:13px;color:var(--dim)}
footer::before{content:"";display:block;width:22px;aspect-ratio:1;background:var(--pink);clip-path:var(--star);margin:0 auto 14px}

/* ===== レスポンシブ ===== */
@media (max-width:860px){
  .hero{padding-top:72px;padding-bottom:72px}
  .band{display:flex;flex-wrap:wrap}
  /* 腰から上の立ち絵をヒーロー画像にし、縦書き2本を左右に重ねる */
  .bust{display:block;position:relative;flex:1 1 100%;margin:0;aspect-ratio:1;overflow:hidden;clip-path:inset(0 0 0 12px)}
  .bust img{position:absolute;left:-50%;top:-21%;width:200%;max-width:none}
  /* PCと同様に、右(quote)は帯の上へはみ出させ、左(tab)は下げて段違いにする */
  .tab,.quote{position:absolute;z-index:2;height:min(92vw,340px);padding:14px 0;font-size:min(15px,4vw);letter-spacing:.05em}
  .tab{left:12px;top:min(48px,12vw);width:44px;gap:14px;box-shadow:6px 6px 0 #000}.tab::before{flex:0 0 40px}
  .quote{right:12px;top:-14px;width:62px;padding-inline:7px;box-shadow:6px 6px 0 #000}
  .main{flex:1 1 100%;padding:24px 18px}
  h1.logo{width:min(100%,260px);margin-bottom:16px}
  .tagline{margin-bottom:20px;padding-left:12px;font-size:15px}
  .plabel{margin-bottom:10px;padding:0 14px 0 32px;font-size:22px}
  dl.profile{gap:0 24px;font-size:14px}
  .xx{flex:1 1 100%;height:48px}
  .tachie{display:none}
  .terms-wrap{grid-template-columns:1fr}
  .toc{position:static;max-height:none}.toc ol{display:flex;flex-wrap:wrap;gap:0 16px;border-left:0}.toc a{padding:3px 0;font-size:13px}
  .tabs{gap:6px}.tab-btn{flex:1 1 auto;padding:12px 6px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}