/* Tagtelier 製品紹介サイト 共通スタイル
   配色はリンクページ（mono.tagtelier.com）に合わせている。
   ⚠ このファイルはサイト直下に置く前提。画像URLはここからの相対パス。 */

:root{
  --bg:#0d141d; --bg-1:#111b26; --panel:#18242f; --panel2:#1f2e3b; --line:#2b3d4d;
  --fg:#e9f1f6; --muted:#90a5b4; --accent:#58c8dd; --amber:#f0bf6b;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; color:var(--fg); background:var(--bg);
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  line-height:1.8; font-size:16px; font-feature-settings:"palt" 1}
.wrap{max-width:1040px; margin:0 auto; padding:0 22px}
a{color:var(--accent)}
img{max-width:100%}

/* ── 上の固定バー：ヒーローを過ぎたら降りてくる ── */
.bar{position:fixed; top:0; left:0; right:0; z-index:30; background:rgba(13,20,29,.92);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border-bottom:1px solid var(--line);
  transform:translateY(-100%); transition:transform .22s ease}
.bar.on{transform:none}
.bar-in{max-width:1040px; margin:0 auto; padding:10px 22px; display:flex; align-items:center;
  justify-content:space-between; gap:14px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em;
  text-decoration:none; color:var(--fg)}
.logo img{width:26px; height:26px; border-radius:7px}
.bar .btn{padding:8px 16px; font-size:.85rem}
/* 下層ページはヒーローがないので最初から出す */
.bar--static{position:sticky; transform:none}
body.sub{padding-top:0}
@media (prefers-reduced-motion:reduce){ .bar{transition:none} }

/* ── ヒーロー：イラスト全面 ── */
.hero{position:relative; min-height:80vh; display:grid; align-items:center; overflow:hidden;
  border-bottom:1px solid var(--line)}
.hero-bg{position:absolute; inset:0;
  background:url(img/hero-wide.jpg) center 32%/cover no-repeat}
/* 左＝文字を置く面なので暗く、右＝イラストは明るいまま残す */
.hero-veil{position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(13,20,29,.90) 0%, rgba(13,20,29,.74) 34%, rgba(13,20,29,.10) 62%, rgba(13,20,29,0) 100%),
    linear-gradient(180deg, rgba(13,20,29,.42) 0%, rgba(13,20,29,0) 30%, rgba(13,20,29,.92) 100%)}
/* 左端は本文（.wrap）と同じ位置に揃える */
.hero-in{position:relative; text-align:left; padding:76px 22px 60px;
  width:100%; max-width:1040px; margin:0 auto}
.hero-in > *{max-width:570px}
.eyebrow{display:inline-flex; align-items:center; gap:9px; padding:7px 16px; border-radius:999px;
  background:rgba(88,200,221,.12); border:1px solid rgba(88,200,221,.32); color:var(--accent);
  font-size:.8rem; letter-spacing:.06em; margin-bottom:24px}
.eyebrow img{width:18px; height:18px; border-radius:5px}
.hero h1{font-size:clamp(32px,6.4vw,58px); line-height:1.34; margin:0 0 18px; font-weight:800;
  text-shadow:0 4px 30px rgba(0,0,0,.55)}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero p{font-size:clamp(15px,2.1vw,18px); color:#dbe6ee; margin:0 0 30px; max-width:540px;
  text-shadow:0 2px 16px rgba(0,0,0,.6)}
.cta{display:flex; gap:12px; justify-content:flex-start; flex-wrap:wrap}
.btn{display:inline-block; padding:15px 30px; border-radius:12px; text-decoration:none; font-weight:700;
  border:1px solid rgba(233,241,246,.26); color:var(--fg); background:rgba(13,20,29,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:.98rem}
.btn--go{background:var(--accent); border-color:var(--accent); color:#06121a}
.tags{display:flex; gap:9px; justify-content:flex-start; flex-wrap:wrap; margin-top:24px}
.tags span{font-size:.78rem; color:#c9d8e2; background:rgba(13,20,29,.5);
  border:1px solid rgba(233,241,246,.2); padding:5px 13px; border-radius:999px}
.cta-note, .hero .cta-note{color:var(--muted); font-size:.86rem; margin:16px 0 0}

/* 狭い画面：横に文字を逃がす余白がないので、上イラスト・下文字の積み上げにする。
   横長を切ると顔が外れるため、絵は元の正方形を使って画面幅にほぼ収める */
@media(max-width:860px){
  .hero{min-height:0; display:block; padding-top:min(400px, 84vw)}
  .hero-bg{inset:0 0 auto 0; height:min(444px, 94vw);
    background-image:url(img/hero-tall.jpg); background-position:center top}
  .hero-veil{inset:0 0 auto 0; height:min(444px, 94vw);
    background:linear-gradient(180deg, rgba(13,20,29,0) 46%, rgba(13,20,29,.62) 78%, var(--bg) 100%)}
  .hero-in{text-align:center; padding:6px 20px 46px}
  .hero-in > *{max-width:none}
  .hero p{margin-left:auto; margin-right:auto}
  .cta, .tags{justify-content:center}
  .hero h1, .hero p{text-shadow:none}
}

/* #limits へ飛んだとき、見出しが上のバーに隠れないように */
[id]{scroll-margin-top:72px}

/* ── 下層ページの見出し ── */
.pagehead{padding:44px 0 8px; border-bottom:1px solid var(--line)}
.crumb{font-size:.84rem; color:var(--muted); margin:0 0 10px}
.crumb a{text-decoration:none}
.pagehead h1{font-size:clamp(26px,4vw,38px); line-height:1.35; margin:0 0 12px; font-weight:800}
.pagehead p{color:#cfdde6; max-width:680px; margin:0 0 28px}

/* ── 本文 ── */
section{padding:56px 0}
.head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px;
  border-bottom:1px solid var(--line); padding-bottom:12px; flex-wrap:wrap}
h2{font-size:1.28rem; margin:0}
.head a{font-size:.86rem; text-decoration:none}
.read{color:#cfdde6; max-width:680px; margin:0 0 6px}
h3{font-size:1.06rem; margin:34px 0 8px; line-height:1.5}
.sub h3:first-of-type{margin-top:8px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:14px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 18px 20px}
.card .n{font-size:.72rem; letter-spacing:.14em; color:var(--accent); display:block; margin-bottom:9px}
.card b{display:block; font-size:1rem; margin-bottom:6px}
.card span{color:var(--muted); font-size:.88rem; line-height:1.7}
.card.wide{grid-column:1/-1; display:grid; gap:22px; align-items:start}
.card.wide .txt{padding-top:2px}
.card ul{list-style:none; margin:10px 0 0; padding:0}
.card ul li{color:var(--muted); font-size:.88rem; line-height:1.7; padding-left:16px; position:relative}
.card ul li::before{content:""; position:absolute; left:0; top:.72em; width:6px; height:6px;
  border-radius:50%; background:var(--accent); opacity:.85}
@media(min-width:760px){ .card.wide{grid-template-columns:1fr 1.15fr} }
.card.wide img{width:100%; height:auto; border-radius:10px; display:block; border:1px solid var(--line)}

.two{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:760px){ .two{grid-template-columns:1fr 1fr} }
.box{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px}
.box .yen{font-size:2.3rem; font-weight:800; display:block; line-height:1.25}
.box .sub-note{color:var(--muted); font-size:.88rem; margin:2px 0 20px}
.spec{list-style:none; margin:0; padding:0}
.spec li{display:flex; gap:12px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:.9rem}
.spec li:last-child{border-bottom:0}
.spec b{flex:0 0 108px; color:var(--muted); font-weight:600}
.warn{color:var(--amber); font-size:.86rem; margin-top:14px}

/* 記事本文まわり（下層ページ） */
.prose p{margin:12px 0; color:#cfdde6}
.prose ul{padding-left:1.3em; margin:12px 0; color:#cfdde6}
.prose li{margin:6px 0}
.prose figure{margin:22px 0}
.prose figure img{width:100%; height:auto; border:1px solid var(--line); border-radius:12px; display:block}
.prose figcaption{color:var(--muted); font-size:.88rem; margin-top:8px}
.prose strong{color:var(--fg)}
.grid-feat{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:20px 0 8px}
.grid-feat figure{margin:0}
.grid-feat img{width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:12px}
.grid-feat figcaption{color:var(--muted); font-size:.86rem; line-height:1.65; margin-top:8px}
.grid-feat figcaption b{display:block; color:var(--fg); font-size:.95rem; margin-bottom:2px}

.tbl-wrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; margin:16px 0; font-size:.94rem}
th,td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
th{background:var(--panel); width:32%; font-weight:600; white-space:nowrap}

.qa details{background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; padding:0 18px}
.qa summary{cursor:pointer; padding:15px 0; font-weight:700; list-style:none; font-size:.96rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q. "; color:var(--accent)}
.qa div{padding:14px 0 16px; color:var(--muted); font-size:.92rem; border-top:1px solid var(--line)}

.note-card{background:var(--panel2); border:1px solid #3a3040; border-radius:14px; padding:20px 22px; margin:16px 0}
.note-card ul{margin:0; padding-left:1.25em; color:#cfdde6}
.note-card li{margin:9px 0}

.links{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:12px; margin:16px 0}
.link-item{display:flex; align-items:center; gap:13px; padding:12px 14px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--fg)}
.link-item .txt{min-width:0; flex:1}
.link-item b{display:block; color:var(--accent); line-height:1.5}
.link-item span.d{display:block; font-size:.86rem; color:var(--muted); line-height:1.6}
.li-thumb{flex:0 0 auto; width:52px; height:52px; border-radius:11px; object-fit:cover;
  border:1px solid var(--line); background:var(--bg)}
.li-ico{flex:0 0 auto; width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:16px; line-height:1}
.b-x{background:#101418; border:1px solid var(--line)}
.b-pixiv{background:linear-gradient(135deg,#3aa5ff,#0a7cf0)}
.b-note{background:linear-gradient(135deg,#3ecdb0,#22a58a)}
.b-mono{background:linear-gradient(135deg,#58c8dd,#2f9fb5)}
.r18{color:#e88; font-weight:700}

.endcta{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:30px 26px;
  text-align:center; margin:8px 0 0}
.endcta b{display:block; font-size:1.15rem; margin-bottom:16px}
.endcta .cta{justify-content:center}

footer{padding:56px 0 84px; color:var(--muted); font-size:.85rem; text-align:center; line-height:2;
  border-top:1px solid var(--line); margin-top:40px}
footer a{text-decoration:none}