/* ======================================================================
   SORYNO 公式サイト  共通スタイル
   assets/soryno.css        作成 2026-09-09（サイト全面改装）

   ★★★ 色・間隔・部品の見た目は、すべてこの1本で決まります。
        直すのはここだけ。全ページに反映されます。
   ★★  このファイルを直したら、ConoHa の
        public_html/pinzu.tech/assets/soryno.css に上げてください。
        HTML を上げてこれを上げ忘れると、見た目が崩れます。
   ====================================================================== */

/* ---------- 1. 色と寸法 ---------- */
:root{
  --bg:#0b0e14;  --panel:#151a24;  --panel-2:#0f131b;  --line:#262e3d;
  --text:#eef1f7;  --dim:#a8b2c6;  --faint:#7b8698;
  --violet:#9b8cf5;  --blue:#5b9de8;  --pink:#ef7099;  --green:#5ecb7a;
  --amber:#e8b155;   --gold:#d0aa52;
  --accent:var(--blue);                 /* 製品ごとに上書きします */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:104px;
  --radius:14px; --radius-lg:20px;
  --maxw:1180px; --readw:760px;
  --header-h:66px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 18px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  font-size:16px; line-height:1.85;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue); text-underline-offset:3px}
a:hover{color:#8bbdf0}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:4px}
hr{border:0; border-top:1px solid var(--line); margin:var(--s5) 0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s3)}
.wrap-read{max-width:var(--readw); margin:0 auto; padding:0 var(--s3)}
.skip{position:absolute; left:-9999px; top:0; background:var(--blue); color:#08111c;
      padding:10px 18px; border-radius:0 0 8px 0; z-index:100; font-weight:700}
.skip:focus{left:0}
.sr-only{position:absolute; left:-9999px}

/* ---------- 2. 言語切り替え（表示だけを入れ替えます） ---------- */
html[data-lang="ja"] .t-en{display:none}
html[data-lang="en"] .t-ja{display:none}

/* ---------- 3. ヘッダ ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(11,14,20,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; gap:var(--s3); height:var(--header-h)}
.logo{display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--text)}
.logo b{font-size:21px; font-weight:800; letter-spacing:.16em}
.logo span{font-size:11px; color:var(--faint); letter-spacing:.08em; font-weight:600}
.nav-links{display:flex; gap:var(--s3); align-items:center; margin-right:auto; margin-left:var(--s4)}
.nav-links a{color:var(--dim); text-decoration:none; font-size:14.5px; white-space:nowrap; padding:4px 0;
             border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text); border-bottom-color:var(--blue)}
.nav-right{display:flex; align-items:center; gap:var(--s2); margin-left:auto}
.nav .btn{padding:9px 18px; font-size:14px; min-height:40px}
.nav-links .btn{display:none}          /* 広い画面では右の1個だけ出します */

.langsw{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.langsw button{
  appearance:none; background:transparent; border:0; color:var(--faint);
  font:inherit; font-size:12.5px; font-weight:700; padding:6px 12px; cursor:pointer; line-height:1.6;
}
.langsw button[aria-pressed="true"]{background:var(--panel); color:var(--text)}

/* ハンバーガー（狭い画面だけ出ます） */
.navtoggle{
  display:none; appearance:none; background:var(--panel); border:1px solid var(--line);
  color:var(--text); border-radius:10px; width:44px; height:40px; cursor:pointer;
  align-items:center; justify-content:center;
}
.navtoggle svg{width:20px; height:20px; display:block}

@media (max-width:940px){
  .navtoggle{display:inline-flex}
  .nav{gap:var(--s2)}
  .nav-links{
    display:none;                          /* ハンバーガーを押すと出ます */
    position:absolute; left:0; right:0; top:var(--header-h);
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--panel-2); border-bottom:1px solid var(--line);
    padding:var(--s1) var(--s3) var(--s3);
    max-height:calc(100vh - var(--header-h)); overflow:auto;
  }
  .site-header.nav-open .nav-links{display:flex}
  .nav-links a{padding:13px 0; border-bottom:1px solid var(--line); font-size:16px}
  .nav-links a[aria-current="page"]{border-bottom-color:var(--line); color:var(--blue)}
  .nav-right .btn{display:none}            /* 狭い画面ではメニューの中に出します */
  .nav-links .btn{display:inline-flex; margin-top:var(--s2); justify-content:center; min-height:48px}
}
@media (max-width:420px){ .logo span{display:none} }

/* ---------- 4. ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:10px; text-decoration:none;
  font-weight:700; font-size:15.5px; line-height:1.2;
  border:1px solid transparent; min-height:46px;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue); color:#08111c}
.btn-primary:hover{background:#83b8f0; color:#08111c}
.btn-accent{background:var(--accent); color:#08111c}
.btn-accent:hover{filter:brightness(1.12); color:#08111c}
.btn-ghost{border-color:var(--line); color:var(--text); background:var(--panel)}
.btn-ghost:hover{border-color:var(--faint)}

/* ---------- 5. セクションの土台 ---------- */
.section{padding:var(--s6) 0; border-top:1px solid var(--line)}
.hero + .section, .pagehead + .section, .subnav + .section{border-top:0}
.section-head{max-width:var(--readw); margin:0 0 var(--s5)}
.section h2{
  font-size:clamp(24px,3.4vw,34px); line-height:1.35; margin:0 0 var(--s2);
  letter-spacing:.01em; font-weight:800;
}
.section .sub{color:var(--dim); margin:0; font-size:16.5px}
.section .sub strong{color:var(--text)}
.eyebrow{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.18em;
  color:var(--faint); text-transform:uppercase; margin:0 0 var(--s1);
}

/* ---------- 6. ヒーロー ---------- */
.hero{
  padding:var(--s7) 0 var(--s6);
  background:
    radial-gradient(760px 300px at 12% -60px, rgba(155,140,245,.20), transparent 70%),
    radial-gradient(700px 320px at 88% 0px, rgba(91,157,232,.16), transparent 72%);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--s6); align-items:center}
.hero h1{font-size:clamp(31px,4.8vw,52px); line-height:1.24; margin:0 0 var(--s3); font-weight:800; letter-spacing:.01em}
.hero .lead{font-size:clamp(16px,1.5vw,18.5px); color:var(--dim); max-width:34em; margin:0 0 var(--s4)}
.hero .lead strong{color:var(--text); font-weight:700}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:var(--s4)}
.facts{display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0}
.facts li{font-size:13px; color:var(--dim); background:var(--panel);
          border:1px solid var(--line); border-radius:999px; padding:6px 15px}
.facts li b{color:var(--text); font-weight:700}
.hero-shot{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--panel-2); box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.hero-shot img{width:100%}
@media (max-width:900px){
  .hero{padding:var(--s5) 0}
  .hero-grid{grid-template-columns:1fr; gap:var(--s4)}
}

/* ページ見出し（下層ページの上部） */
.pagehead{padding:var(--s6) 0 var(--s5); border-bottom:1px solid var(--line);
  background:radial-gradient(760px 260px at 20% -40px, rgba(91,157,232,.14), transparent 70%)}
.pagehead h1{font-size:clamp(28px,4.4vw,44px); line-height:1.25; margin:0 0 var(--s2); font-weight:800}
.pagehead .lead{color:var(--dim); font-size:17px; max-width:38em; margin:0}
.pagehead .lead strong{color:var(--text)}
.crumb{color:var(--faint); font-size:13.5px; margin:0 0 var(--s2)}
.crumb a{color:var(--faint); text-decoration:none}
.crumb a:hover{color:var(--text); text-decoration:underline}

/* ---------- 7. 製品カード（一覧） ---------- */
.pcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:var(--s3);
  list-style:none; padding:0; margin:0}
.pcard{
  display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--text);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.pcard:hover{border-color:var(--accent); transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,.35); color:var(--text)}
.pcard-shot{aspect-ratio:16/9; object-fit:cover; object-position:center top;
  border-bottom:1px solid var(--line); width:100%}
.pcard-body{padding:var(--s3); display:flex; flex-direction:column; gap:4px; flex:1}
.pcard-name{font-size:19px; font-weight:800; letter-spacing:.04em; margin:0}
.pcard-kind{font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.pcard-text{color:var(--dim); font-size:14.5px; margin:6px 0 0; line-height:1.75}
.pcard-go{margin-top:auto; padding-top:var(--s2); font-weight:700; font-size:14.5px; color:var(--accent)}

/* ---------- 8. 3つの強み ---------- */
.feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s3)}
.feat{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4)}
.feat h3{margin:0 0 var(--s1); font-size:18px; font-weight:800}
.feat p{margin:0; color:var(--dim); font-size:15px}
.feat p strong{color:var(--text)}
.feat .ico{width:40px; height:40px; margin-bottom:var(--s2); color:var(--accent)}

/* ---------- 9. 表 ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-2)}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:14.5px}
th,td{padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
thead th{color:var(--faint); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
         background:rgba(255,255,255,.02); white-space:nowrap}
tbody th{color:var(--text); font-weight:800; white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td{color:var(--dim)}
td b,td strong{color:var(--text)}
.spec-table table{min-width:0}
.spec-table th{width:8.5em; color:var(--faint); font-weight:700; white-space:nowrap}

/* ---------- 10. 注記 ---------- */
.note{
  border:1px solid var(--line); border-left:3px solid var(--amber);
  background:var(--panel-2); border-radius:10px; padding:var(--s3);
  margin:var(--s3) 0; color:var(--dim); font-size:15px;
}
.note b,.note strong{color:var(--text)}
.note.info{border-left-color:var(--blue)}
.note.good{border-left-color:var(--green)}
.note p{margin:0 0 .6em}
.note p:last-child{margin-bottom:0}

/* ---------- 11. 手順 ---------- */
.steps{counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:var(--s2)}
.steps li{
  counter-increment:step; position:relative; padding:var(--s3) var(--s3) var(--s3) 68px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); color:var(--dim);
}
.steps li::before{
  content:counter(step); position:absolute; left:var(--s3); top:var(--s3);
  width:30px; height:30px; border-radius:999px; background:var(--blue); color:#08111c;
  font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center;
}
.steps li b{color:var(--text)}
code{background:rgba(255,255,255,.06); border-radius:5px; padding:2px 6px;
  font-family:Consolas,"Courier New",monospace; font-size:.92em; color:var(--text); word-break:break-all}

/* ---------- 12. ブログ一覧 ---------- */
.bloglist{list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s2)}
.bloglist a{display:block; height:100%; padding:var(--s3); border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel); text-decoration:none; color:var(--text);
  transition:border-color .15s,background .15s}
.bloglist a:hover{border-color:rgba(155,140,245,.7); background:rgba(155,140,245,.07); color:var(--text)}
.bloglist strong{display:block; margin-bottom:4px; font-size:16px; line-height:1.6}
.bloglist span{display:block; font-size:13.5px; color:var(--dim)}

/* ---------- 13. よくある質問（開いて読む） ---------- */
.faq{display:grid; gap:10px; margin:0}
.faq details{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); overflow:hidden}
.faq summary{
  cursor:pointer; list-style:none; padding:16px var(--s3); font-weight:700; font-size:16px;
  display:flex; align-items:center; gap:12px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋"; margin-left:auto; color:var(--faint); font-weight:800; flex:none}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq summary:hover{background:rgba(255,255,255,.03)}
.faq .a{padding:var(--s3); color:var(--dim); font-size:15px}
.faq .a p{margin:0 0 .7em}
.faq .a p:last-child{margin-bottom:0}
.faq .a strong{color:var(--text)}

/* ---------- 14. 画面写真 ---------- */
.shot{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-2); width:100%}
.shot-cap{color:var(--faint); font-size:13.5px; margin:10px 0 var(--s4); line-height:1.7}
.shot-cap b{color:var(--dim)}

/* ---------- 15. 製品ページの部品 ---------- */
.subnav{
  position:sticky; top:var(--header-h); z-index:20;
  background:rgba(11,14,20,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.subnav ul{display:flex; gap:var(--s3); list-style:none; margin:0; padding:0;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block; padding:14px 0; color:var(--dim); text-decoration:none; font-size:14px;
  white-space:nowrap; border-bottom:2px solid transparent}
.subnav a:hover{color:var(--text)}

.badge{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.12em;
  padding:3px 9px; border-radius:999px; vertical-align:middle; margin-left:8px}
.badge-free{background:rgba(94,203,122,.16); color:var(--green); border:1px solid rgba(94,203,122,.35)}
.badge-pro{background:rgba(208,170,82,.16); color:var(--gold); border:1px solid rgba(208,170,82,.4)}

.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s3)}
.tier{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4);
  display:flex; flex-direction:column}
.tier.pro{border-color:rgba(208,170,82,.35)}
.tier h3{margin:0 0 4px; font-size:19px; font-weight:800}
.tier .price{color:var(--dim); font-size:14px; margin:0 0 var(--s3)}
.tier .price b{color:var(--text); font-size:17px}
.tier ul{margin:0 0 var(--s3); padding-left:1.25em; color:var(--dim); font-size:15px}
.tier li{margin:0 0 .5em}
.tier li b{color:var(--text)}
.tier .btn{width:100%; justify-content:center; margin-top:auto}

.links{display:flex; flex-wrap:wrap; gap:var(--s2); margin:0 0 var(--s3); align-items:center}
.prose{max-width:var(--readw)}
.prose p{color:var(--dim)}
.prose strong{color:var(--text)}
.prose ul{color:var(--dim)}
.prose h3{font-size:18px; margin:var(--s4) 0 var(--s1); color:var(--text)}

.tagline{font-size:clamp(18px,2.4vw,24px); color:var(--accent); font-weight:700; margin:0 0 var(--s3)}
.kindtag{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 var(--s1)}

/* ---------- 15b. 更新履歴 ---------- */
.vers{display:grid; gap:var(--s3)}
.ver{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4)}
.ver.latest{border-color:rgba(94,203,122,.42)}
.ver h2{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  font-size:22px; margin:0 0 var(--s2); font-weight:800}
.ver .date{font-size:14px; color:var(--faint); font-weight:600; letter-spacing:.02em}
.ver p{color:var(--dim); margin:0 0 var(--s2)}
.ver p strong{color:var(--text)}
.ver ul{color:var(--dim); padding-left:1.25em; margin:0; font-size:15px}
.ver li{margin:0 0 .5em}
.ver li strong{color:var(--text)}

/* ---------- 15c. 法務の文書（terms.html / privacy.html） ---------- */
.legal{max-width:var(--readw)}
.legal h2{font-size:20px; font-weight:800; margin:var(--s5) 0 var(--s2)}
.legal h3{font-size:17px; font-weight:800; margin:var(--s4) 0 var(--s1)}
.legal p{color:var(--dim); margin:0 0 var(--s2)}
.legal .lead{font-size:17px}
.legal ul,.legal ol{color:var(--dim); padding-left:1.3em; margin:0 0 var(--s3)}
.legal li{margin:0 0 .45em}
.legal strong,.legal b{color:var(--text)}
.legal table{min-width:0}
.legal .tablewrap{margin:0 0 var(--s3)}
.legal dt{color:var(--text); font-weight:700; margin-top:var(--s2)}
.legal dd{color:var(--dim); margin:0 0 var(--s1)}
.updated{color:var(--faint); font-size:13.5px; margin:0}
/* 狭い画面では見出し列を折り返し、表の中の横スクロールをなくす（特商法・動作環境の表） */
@media (max-width:600px){
  .legal .spec-table th{white-space:normal; width:34%; min-width:6.5em}
  .legal .spec-table th,.legal .spec-table td{padding:12px}
}

/* ---------- 16. 帯（最後のひと押し） ---------- */
.band{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s5);
  background:linear-gradient(135deg, rgba(91,157,232,.12), rgba(155,140,245,.10));
  text-align:center;
}
.band h2{margin:0 0 var(--s2)}
.band p{color:var(--dim); margin:0 auto var(--s4); max-width:40em}
.band p strong{color:var(--text)}
.band .cta{justify-content:center; margin-bottom:0}

/* ---------- 17. フッタ ---------- */
.site-footer{border-top:1px solid var(--line); padding:var(--s5) 0 var(--s4); margin-top:var(--s6);
  background:var(--panel-2)}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s4); margin-bottom:var(--s4)}
.foot-grid h3{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
  margin:0 0 12px; font-weight:800}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.foot-grid a{color:var(--dim); text-decoration:none; font-size:14.5px}
.foot-grid a:hover{color:var(--text); text-decoration:underline}
.copy{color:var(--faint); font-size:13px; margin:0; border-top:1px solid var(--line); padding-top:var(--s3)}

/* ---------- 18. ダウンロードの確認（製品ページ・2026-09-13） ---------- */
/* 「公式サイトからダウンロード」を押すと開く窓。開け閉めは soryno.js の ④、中身は build_product_pages.py の GET_SECTION */
.dl-dialog{
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto;
  padding:0; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); color:var(--text);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.dl-dialog::backdrop{background:rgba(5,7,11,.72); backdrop-filter:blur(3px)}
.dl-dialog-body{padding:var(--s4)}
.dl-dialog h3{margin:0 0 6px; font-size:20px; line-height:1.5; font-weight:800}
.dl-file{margin:0 0 var(--s3); color:var(--dim); font-size:14px}
.dl-dialog .note{margin:0 0 var(--s3); font-size:14.5px}
.dl-dialog .links{margin:0}
.dl-dialog button.btn{font-family:inherit; cursor:pointer}
.dl-dialog h3 .dl-sub{display:block; margin-top:2px; font-size:15px; font-weight:700; color:var(--dim)}
.dl-dialog .note p + p{border-top:1px solid var(--line); padding-top:.7em; margin-top:.7em}
@media (max-width:600px){ .dl-dialog-body{padding:var(--s3)} }