@charset "utf-8";

/* ============================================================
   オウンドサウンド｜Owned Sound（B2B）
   情緒で売らない。仕様書とスタジオの世界。
   基調はネイビー1色、差し色はくすんだ朱1色のみ。
   明朝は使わない。数字を大きく扱う。
   A4印刷で6枚に収まる密度で組む。
   ============================================================ */

:root{
  --paper:   #FAFAF8;
  --white:   #FFFFFF;
  --sumi:    #1A1A1A;
  --sumi-2:  #55585C;
  --sumi-3:  #8A8E93;
  --rule:    #DCDCD6;
  --rule-2:  #EDEDE8;

  --navy:     #1B2A41;
  --navy-2:   #2C4066;
  --navy-tint:#EDF0F5;

  --shu:      #C1502E;
  --shu-tint: #F8EAE4;

  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", -apple-system, sans-serif;
  /* 数字・ラベル用。等幅フォントはゼロが細い楕円になり一般的な 0 と見た目が変わるため、
     同じ IBM Plex 系の proportional を使い、桁揃えは tabular-nums で担保する。 */
  --tech: "IBM Plex Sans", "Noto Sans JP", "Hiragino Sans", -apple-system, sans-serif;

  --read: 760px;
  --wide: 1040px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important} }

body{
  margin:0; background:var(--paper); color:var(--sumi);
  font-family:var(--sans); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--sans); font-weight:700; margin:0; line-height:1.5; text-wrap:balance; }
p{ margin:0; }
a{ color:var(--navy); }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--shu); outline-offset:3px; }
img{ max-width:100%; display:block; }

.n{ font-family:var(--tech); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.big{ font-family:var(--tech); font-variant-numeric:tabular-nums; font-weight:600; font-size:2.4em; letter-spacing:-.02em; line-height:1.1; }
.big small{ font-size:.36em; font-weight:400; color:var(--sumi-2); letter-spacing:0; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- ヘッダー ---------- */
.top{ position:sticky; top:0; z-index:60; background:var(--white); border-bottom:1px solid var(--rule); }
.top__in{ max-width:var(--wide); margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px; }
.brand{ text-decoration:none; color:var(--navy); font-weight:700; font-size:17px; letter-spacing:.04em; line-height:1.3; }
.brand small{ display:block; font-size:10px; letter-spacing:.14em; color:var(--sumi-3); font-weight:400; }
.top__note{ font-size:12px; color:var(--sumi-3); }
@media(max-width:760px){ .top__note{display:none} }
.top__cta{ margin-left:auto; background:var(--navy); color:#fff; text-decoration:none; padding:9px 16px; font-size:13px; font-weight:700; white-space:nowrap; }
.top__cta:hover{ background:var(--navy-2); }

/* ---------- セクション ---------- */
.sec{ padding:64px 20px; border-top:1px solid var(--rule); }
.sec:first-of-type{ border-top:0; }
.sec--white{ background:var(--white); }
.sec--navy{ background:var(--navy); color:#E9ECF1; border-top:0; }
.read{ max-width:var(--read); margin:0 auto; }
.wide{ max-width:var(--wide); margin:0 auto; }
.secno{ font-family:var(--tech); font-size:11px; letter-spacing:.16em; color:var(--shu); font-weight:600; margin-bottom:10px; }
.sec--navy .secno{ color:#D98D6E; }
.sec h2{ font-size:clamp(20px,3.6vw,27px); margin-bottom:16px; letter-spacing:.01em; }
.lead{ color:var(--sumi-2); margin-bottom:24px; }
.sec--navy .lead{ color:#B6BECB; }
.sec h3{ font-size:16px; margin:30px 0 8px; padding-left:10px; border-left:3px solid var(--navy); }
.body p + p{ margin-top:14px; }
.body{ font-size:15.5px; }

/* ---------- ヒーロー ---------- */
.hero{ background:var(--white); padding:56px 20px 44px; border-bottom:1px solid var(--rule); }
.hero__in{ max-width:var(--wide); margin:0 auto; }
.hero h1{ font-size:clamp(26px,5.2vw,40px); letter-spacing:.005em; }
.hero__sub{ margin-top:14px; color:var(--sumi-2); font-size:15.5px; max-width:62ch; }
.hero__price{ margin-top:26px; display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; }
.hero__price .big{ font-size:44px; }
.hero__price .meta{ font-size:13px; color:var(--sumi-2); font-family:var(--tech); font-variant-numeric:tabular-nums; }
.hero__ctas{ margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
.btn{ display:inline-block; text-decoration:none; padding:13px 22px; font-weight:700; font-size:14.5px; border:1px solid var(--navy); }
.btn--fill{ background:var(--navy); color:#fff; }
.btn--fill:hover{ background:var(--navy-2); }
.btn--line{ background:transparent; color:var(--navy); }
.btn--line:hover{ background:var(--navy-tint); }
.btn--shu{ background:var(--shu); border-color:var(--shu); color:#fff; }
.btn--shu:hover{ background:#A84427; }

/* ---------- 4尺プレイヤー ---------- */
.lens{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:30px; }
@media(min-width:840px){ .lens{ grid-template-columns:repeat(4,1fr); } }
.lens__col{ background:var(--white); padding:16px; display:flex; flex-direction:column; gap:10px; }
.lens__hd{ display:flex; align-items:baseline; gap:8px; }
.lens__name{ font-weight:700; font-size:14.5px; }
.lens__dur{ font-family:var(--tech); font-variant-numeric:tabular-nums; font-size:12px; color:var(--shu); font-weight:600; }
.lens__use{ font-size:12px; color:var(--sumi-2); line-height:1.65; min-height:3.3em; }
.lens__row{ display:flex; align-items:center; gap:10px; }
.pbtn{ flex:0 0 auto; width:40px; height:40px; border:1px solid var(--navy); background:var(--white); cursor:pointer; display:grid; place-items:center; }
.pbtn svg{ width:15px; height:15px; fill:var(--navy); }
.pbtn:hover{ background:var(--navy); }
.pbtn:hover svg{ fill:#fff; }
.pbtn[disabled]{ border-color:var(--rule); cursor:not-allowed; }
.pbtn[disabled] svg{ fill:var(--sumi-3); }
.wv{ flex:1 1 auto; height:38px; position:relative; cursor:pointer; min-width:0; }
.wv canvas{ width:100%; height:100%; display:block; }
.wv__none{ position:absolute; inset:0; display:grid; place-items:center; border:1px dashed var(--rule); font-size:10.5px; color:var(--sumi-3); text-align:center; padding:0 6px; line-height:1.4; }
.lens__t{ font-family:var(--tech); font-variant-numeric:tabular-nums; font-size:11px; color:var(--sumi-3); }
.lens__bar{ height:5px; background:var(--navy-tint); position:relative; }
.lens__bar i{ position:absolute; left:0; top:0; bottom:0; background:var(--navy); }
.lens__scale{ font-family:var(--tech); font-variant-numeric:tabular-nums; font-size:10.5px; color:var(--sumi-3); }
.loopmark{ font-size:11px; color:var(--shu); font-weight:700; }

/* ---------- テーブル ---------- */
.tw{ overflow-x:auto; margin-top:22px; }
table{ border-collapse:collapse; width:100%; font-size:14px; min-width:560px; background:var(--white); }
th,td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--rule-2); vertical-align:top; line-height:1.7; }
thead th{ font-size:11.5px; letter-spacing:.06em; color:var(--sumi-3); border-bottom:1px solid var(--rule); white-space:nowrap; font-weight:700; }
tbody tr:last-child td{ border-bottom:1px solid var(--rule); }
td.num{ font-family:var(--tech); font-variant-numeric:tabular-nums; white-space:nowrap; }
.self{ background:var(--navy-tint); }
.priv{ color:var(--sumi-3); }
.mark{ color:var(--shu); font-weight:700; }

/* ---------- 工程表 ---------- */
.gantt{ margin-top:24px; border:1px solid var(--rule); background:var(--white); }
.gantt__row{ display:grid; grid-template-columns:74px 1fr; border-bottom:1px solid var(--rule-2); }
.gantt__row:last-child{ border-bottom:0; }
.gantt__day{ font-family:var(--tech); font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--sumi-3); padding:12px 10px; border-right:1px solid var(--rule-2); background:#FCFCFA; white-space:nowrap; }
.gantt__body{ padding:12px 14px; font-size:14px; }
.gantt__body b{ display:block; font-size:14.5px; margin-bottom:2px; }
.gantt__body span{ font-size:13px; color:var(--sumi-2); line-height:1.7; display:block; }
.gantt__row--gate{ background:var(--shu-tint); }
.gantt__row--gate .gantt__day{ background:var(--shu); color:#fff; border-right-color:var(--shu); }
.gantt__row--gate b{ color:var(--shu); }
.who{ display:inline-block; font-size:10.5px; font-weight:700; padding:1px 7px; margin-left:8px; vertical-align:2px; border:1px solid var(--rule); color:var(--sumi-2); background:#fff; }
.who--me{ border-color:var(--navy); color:var(--navy); }
.who--out{ border-color:var(--sumi-3); color:var(--sumi-3); }
.who--you{ border-color:var(--shu); color:var(--shu); }

/* ---------- 権利図 ---------- */
.rights-fig{ margin-top:24px; background:var(--white); border:1px solid var(--rule); padding:24px 18px; overflow-x:auto; }
.rights-fig svg{ display:block; margin:0 auto; max-width:100%; height:auto; }

/* ---------- 逆算 ---------- */
.calc{ background:var(--white); border:1px solid var(--rule); padding:22px; margin-top:22px; }
.calc label{ display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.calc input[type="date"], .calc select{
  font:inherit; font-family:var(--tech); padding:9px 11px; border:1px solid var(--rule);
  background:var(--white); color:var(--sumi); max-width:230px; width:100%;
}
.calc__row{ display:flex; gap:18px; flex-wrap:wrap; }
.calc__out{ margin-top:20px; padding-top:18px; border-top:1px solid var(--rule); }
.calc__line{ display:flex; justify-content:space-between; gap:14px; padding:6px 0; font-size:14px; border-bottom:1px solid var(--rule-2); }
.calc__line:last-child{ border-bottom:0; }
.calc__line b{ font-family:var(--tech); font-variant-numeric:tabular-nums; }
.calc__verdict{ margin-top:14px; padding:13px 16px; font-size:14px; line-height:1.75; }
.calc__verdict--ok{ background:var(--navy-tint); border-left:3px solid var(--navy); }
.calc__verdict--ng{ background:var(--shu-tint); border-left:3px solid var(--shu); color:#8C3620; }

/* ---------- コピー可能ブロック ---------- */
.copyblock{ background:var(--white); border:1px solid var(--rule); margin-top:20px; }
.copyblock__hd{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--rule); background:#FCFCFA; font-size:12.5px; font-weight:700; }
.copyblock__btn{ margin-left:auto; background:var(--navy); color:#fff; border:0; padding:6px 13px; font-size:12px; font-weight:700; cursor:pointer; }
.copyblock__btn:hover{ background:var(--navy-2); }
.copyblock ul{ margin:0; padding:16px 16px 16px 34px; font-size:14px; line-height:1.95; }
.copyblock li{ margin-bottom:5px; }

/* ---------- 注記・空欄 ---------- */
.note{ margin-top:18px; padding:13px 16px; background:#F4F4F0; border-left:3px solid var(--rule); font-size:13.5px; line-height:1.85; color:var(--sumi-2); }
.note--warn{ background:var(--shu-tint); border-left-color:var(--shu); }
.note b{ color:var(--sumi); }
.todo{ display:inline-block; font-family:var(--tech); font-size:10.5px; font-weight:600; background:var(--shu-tint); color:var(--shu); padding:1px 7px; margin-right:6px; }
.empty{ border:1px dashed var(--rule); padding:22px; background:var(--white); font-size:14.5px; color:var(--sumi-2); line-height:1.9; }
.phgrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-top:18px; }
.ph{ border:1px dashed var(--rule); background:var(--white); aspect-ratio:4/3; display:grid; place-items:center; text-align:center; font-size:11.5px; color:var(--sumi-3); padding:12px; line-height:1.6; }

/* ---------- FAQ ---------- */
details{ border-bottom:1px solid var(--rule-2); background:var(--white); }
summary{ cursor:pointer; padding:15px 34px 15px 16px; font-weight:700; font-size:14.5px; position:relative; list-style:none; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"＋"; position:absolute; right:14px; top:15px; color:var(--shu); font-weight:400; }
details[open] summary::after{ content:"－"; }
details p{ padding:0 16px 16px; font-size:14px; color:var(--sumi-2); line-height:1.95; }

/* ---------- リスト ---------- */
ul.pts{ list-style:none; padding:0; margin:16px 0 0; font-size:15px; }
ul.pts li{ padding-left:20px; position:relative; margin-bottom:9px; line-height:1.8; }
ul.pts li::before{ content:""; position:absolute; left:0; top:12px; width:9px; height:2px; background:var(--navy); }

/* ---------- フッター ---------- */
.foot{ background:var(--navy); color:#AEB7C4; padding:40px 20px 96px; font-size:13px; }
.foot__in{ max-width:var(--wide); margin:0 auto; }
.foot a{ color:#E9ECF1; }
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:16px; }
.foot p{ line-height:1.9; }

/* ---------- 固定バー ---------- */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--white); border-top:1px solid var(--rule); display:flex; gap:10px; padding:9px 14px; align-items:center; }
.dock span{ font-size:12.5px; color:var(--sumi-2); flex:1 1 auto; }
@media(max-width:600px){ .dock span{ display:none } }
.dock a{ text-decoration:none; padding:9px 15px; font-size:13px; font-weight:700; white-space:nowrap; }
body{ padding-bottom:58px; }

/* ---------- 印刷 ---------- */
@media print{
  .top,.dock,.pbtn,.wv,.copyblock__btn{ display:none !important; }
  body{ padding-bottom:0; background:#fff; font-size:10.5pt; line-height:1.6; }
  .sec{ padding:14pt 0; border-top:1px solid #ccc; page-break-inside:avoid; }
  .sec--navy{ background:#fff !important; color:#1A1A1A !important; }
  .sec--navy .lead{ color:#55585C !important; }
  .hero{ padding:0 0 14pt; }
  .btn{ display:none; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#666; }
  .ph,.empty{ border-color:#ccc; }
}