/* ジャーク株式会社 サイト共通のスタイル。
   もとは index.html に直書きだったものを、ページを分けたときに切り出した。
   .page / .page.on は1枚もの時代の名残。いまは各ファイルが常に on を付けている。 */

:root{
  --ground:#FCFBF8;
  --paper:#FFFFFF;
  --sunk:#F4F1EB;
  --line:#E3DED3;
  --line-2:#EFEBE3;
  --ink:#1A1815;
  --ink-2:#4E4940;
  --muted:#847C6E;
  --accent:#2C5A4B;
  --accent-2:#E6EFEA;
  --blue:#3D6FA8;
  --blue-2:#325C8C;

  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --wrap:min(1000px, 100% - 2.5rem);
  --narrow:min(720px, 100% - 2.5rem);
}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
body{margin:0; padding:0; background:var(--ground); color:var(--ink); font-family:var(--gothic); font-size:16px; line-height:1.95; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; font-family:var(--mincho); font-weight:600; line-height:1.5; text-wrap:balance}
p{margin:0}

/* ---- shell nav ---- */
.shell{
  position:sticky; top:0; z-index:50;
  background:rgba(252,251,248,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.shell-in{
  width:var(--wrap); margin-inline:auto; display:flex; align-items:center;
  gap:1.2rem 2rem; min-height:62px; flex-wrap:wrap; padding:.5rem 0;
}
.logo{font-family:var(--mincho); font-weight:700; font-size:1.1rem; letter-spacing:.04em; white-space:nowrap}
/* ページを分けてロゴをトップへのリンクにしたので、下線と色を消す */
.logo a{color:inherit; text-decoration:none}
.logo a:hover{opacity:.75}

.nav{display:flex; gap:.2rem 1.5rem; margin-left:auto; flex-wrap:wrap}
.nav a{
  font-size:.87rem; color:var(--ink-2); text-decoration:none;
  padding:.35rem 0; white-space:nowrap; border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.nav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media(max-width:640px){
  .shell-in{gap:.6rem 1.2rem}
  .nav{margin-left:0; width:100%; gap:.2rem 1.1rem}
  .nav a{font-size:.82rem}
}

/* ---- blue image placeholders ---- */
.img{
  background:var(--blue); aspect-ratio:var(--ar,16/9);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  color:#fff; text-align:center; padding:1rem;
}
.img b{font-family:var(--mono); font-size:.9rem; letter-spacing:.06em}
.img span{font-size:.78rem; opacity:.82; line-height:1.5; max-width:30ch}
.img.sq{--ar:1/1}
.img.four{--ar:4/3}
.img.wide{--ar:21/9}
.img.strip{--ar:3/1}

img.img{display:block; width:100%; object-fit:cover; padding:0; background:none}

/* ---- sections ---- */
.page{display:none}
.page.on{display:block}
section{padding:4.5rem 0; scroll-margin-top:70px}
section + section{border-top:1px solid var(--line-2)}
.wrap{width:var(--wrap); margin-inline:auto}
.narrow{width:var(--narrow); margin-inline:auto}
.eyebrow{font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; color:var(--accent); margin-bottom:.9rem}
h2.head{font-size:clamp(1.35rem,3.2vw,1.75rem); margin-bottom:1.6rem}
.lead{color:var(--ink-2); font-size:1rem; line-height:2.1}
.lead + .lead{margin-top:1.1rem}

/* ---- hero ---- */
.hero{padding:3.5rem 0 4rem}
.hero h1{font-size:clamp(1.7rem,5vw,2.7rem); line-height:1.6; letter-spacing:.01em}
.hero .sub{margin-top:1.2rem; font-size:1.05rem; color:var(--ink-2); line-height:2}
.hero .cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem}

/* ---- hero over image ---- */
.hero-img{
  position:relative; background:var(--blue) url(hero-poster.jpg) center/cover;
  min-height:min(560px, 62vw);
  display:flex; align-items:center;
  padding:4.5rem 0; overflow:hidden;
}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero-img::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(10,14,20,.62) 0%, rgba(10,14,20,.42) 55%, rgba(10,14,20,.28) 100%)}
.hero-img .wrap{position:relative; z-index:2}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-img h1{color:#fff; font-size:clamp(1.55rem,4.4vw,2.5rem); line-height:1.65; text-shadow:0 1px 24px rgba(0,0,0,.35)}
.hero-img .sub{color:rgba(255,255,255,.94); margin-top:1.3rem; font-size:clamp(.9rem,1.6vw,1.02rem); line-height:2.1; max-width:46rem; text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero-img .cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2.2rem}
.hero-img .btn.ghost{border-color:rgba(255,255,255,.75); color:#fff; background:rgba(255,255,255,.08)}
.imgtag{
  position:absolute; right:1.1rem; bottom:.9rem; z-index:2;
  font-family:var(--mono); font-size:.72rem; color:rgba(255,255,255,.72); letter-spacing:.06em;
}
.btn{
  display:inline-block; padding:.85rem 1.7rem; border-radius:2px;
  font-weight:700; font-size:.92rem; text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  font-family:var(--gothic);
}
.btn.line{background:#06C755; color:#fff}
.btn.ghost{border-color:var(--line); color:var(--ink); background:var(--paper)}

/* ---- compare ---- */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.8rem}
@media(max-width:700px){.compare{grid-template-columns:1fr}}
.compare .c-label{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--muted); margin-bottom:.5rem}
table.cmp{width:100%; border-collapse:collapse; margin-top:1.8rem; font-size:.9rem}
table.cmp th, table.cmp td{padding:.75rem .9rem; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top}
table.cmp thead th{font-size:.8rem; color:var(--muted); font-weight:500; border-bottom:1px solid var(--line)}
table.cmp thead th:last-child{color:var(--accent); font-weight:700}
table.cmp td:first-child{color:var(--muted); font-size:.82rem; white-space:nowrap; width:7rem}
table.cmp td:last-child{font-weight:700; color:var(--accent)}
.tw{overflow-x:auto}

/* ---- genre grid ---- */
.genres{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 1.2rem; margin-top:2rem}
@media(max-width:820px){.genres{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.genres{grid-template-columns:1fr}}
.genre h3{font-family:var(--gothic); font-size:.98rem; font-weight:700; margin-top:.8rem; min-height:3em}
.genre p{font-size:.84rem; color:var(--muted); line-height:1.8; margin-top:.2rem; min-height:3.6em}

/* ---- points ---- */
.points{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem 1.2rem; margin-top:2rem}
@media(max-width:820px){.points{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.points{grid-template-columns:1fr}}
.point .n{font-family:var(--mono); font-size:.68rem; color:var(--accent); letter-spacing:.1em; margin-top:.85rem; display:block}
.point h3{font-family:var(--gothic); font-size:1.05rem; font-weight:700; margin-top:.15rem; min-height:1.6em}
.point p{font-size:.86rem; color:var(--ink-2); line-height:1.9; margin-top:.45rem; min-height:3.8em}

.grouphead{
  font-family:var(--gothic); font-size:1rem; font-weight:700; color:var(--ink);
  margin-top:2.6rem; padding-bottom:.6rem; border-bottom:1px solid var(--line);
}
.grouphead:first-of-type{margin-top:1.4rem}
.uses + .grouphead{margin-top:3rem}

/* ---- about over image ---- */
.about-img{
  position:relative; background:var(--blue) url(img/IMG-10.jpg) center/cover;
  min-height:min(420px, 46vw);
  display:flex; align-items:center; overflow:hidden;
  padding:4.5rem 0; border-top:0;
}
.about-img::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,14,20,.66) 0%, rgba(10,14,20,.46) 60%, rgba(10,14,20,.3) 100%)}
.about-img .wrap{position:relative; z-index:2}
.about-img h2{color:#fff; font-size:clamp(1.4rem,3.4vw,2rem); line-height:1.6; text-shadow:0 1px 24px rgba(0,0,0,.35)}
.about-img p{color:rgba(255,255,255,.94); margin-top:1.1rem; font-size:clamp(.88rem,1.5vw,1rem); line-height:2.1; text-shadow:0 1px 16px rgba(0,0,0,.4)}

/* ---- who ---- */
.who{margin-top:1.6rem; display:grid; gap:.1rem}
.who li{list-style:none; padding:.75rem 0 .75rem 1.6rem; border-bottom:1px solid var(--line-2); position:relative; font-size:.95rem}
.who li::before{content:""; position:absolute; left:.3rem; top:1.5rem; width:5px; height:5px; background:var(--accent); border-radius:50%}
.who li:last-child{font-weight:700}
ul.who{padding:0; margin:1.6rem 0 0}

/* ---- flow ---- */
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2rem}
@media(max-width:820px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.flow{grid-template-columns:1fr}}
.step{background:var(--paper); border:1px solid var(--line); padding:1.2rem 1.1rem}
.step .n{font-family:var(--mono); font-size:.66rem; color:var(--accent); letter-spacing:.1em}
.step h3{font-family:var(--gothic); font-size:.95rem; font-weight:700; margin-top:.3rem}
.step p{font-size:.8rem; color:var(--muted); line-height:1.8; margin-top:.4rem; min-height:5.4em}

/* ---- faq ---- */
.faq{margin-top:1.8rem; border-top:1px solid var(--line)}
.qa{padding:1.3rem 0; border-bottom:1px solid var(--line-2)}
.qa .q{display:flex; gap:.85rem; align-items:flex-start; font-weight:700; font-size:.98rem; line-height:1.7}
.qa .a{display:flex; gap:.85rem; align-items:flex-start; color:var(--ink-2); font-size:.93rem; line-height:1.9; margin-top:.6rem}
.qm,.am{
  flex:none; width:1.7rem; height:1.7rem; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.85rem; font-weight:600; line-height:1; margin-top:.1rem;
}
.qm{background:var(--accent); color:#fff}
.am{background:var(--accent-2); color:var(--accent); border:1px solid var(--accent)}

/* ---- cta band ---- */
.band{background:var(--sunk); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.lineband .cta{display:flex}
.band .box{background:var(--paper); border:1px solid var(--line); padding:2rem 2rem 2.2rem; margin-top:1.8rem}
.band .price{font-size:.95rem; color:var(--ink-2); line-height:2.1}
.band .strong{font-weight:700; color:var(--ink); margin-top:1rem; font-size:1rem}
.ways{display:grid; gap:.6rem; margin-top:1.6rem}
.way{display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem; border:1px solid var(--line-2); background:var(--paper)}
.way.pri{border-color:#06C755; background:#F2FCF6}
.way .k{font-weight:700; font-size:.92rem; flex:none; width:5.5rem}
.way .v{font-size:.85rem; color:var(--ink-2)}
@media(max-width:560px){.way{flex-wrap:wrap; gap:.2rem} .way .k{width:auto}}

/* ---- company table ---- */
table.co{width:100%; border-collapse:collapse; margin-top:1.6rem; font-size:.93rem}
table.co th{width:9.5rem; text-align:left; font-weight:500; color:var(--muted); font-size:.86rem; padding:.95rem .8rem .95rem 0; border-bottom:1px solid var(--line-2); vertical-align:top; white-space:nowrap}
table.co td{padding:.95rem 0; border-bottom:1px solid var(--line-2); vertical-align:top}
@media(max-width:560px){
  table.co th{width:auto; display:block; border:0; padding-bottom:0}
  table.co td{display:block; padding-top:.2rem}
}
.biz{margin-top:1.4rem; display:grid; gap:1.6rem}
.biz h3{font-family:var(--gothic); font-size:1rem; font-weight:700; padding-left:.8rem; border-left:3px solid var(--accent)}
.biz p{font-size:.92rem; color:var(--ink-2); line-height:2; margin-top:.5rem}
.photos{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem}
@media(max-width:700px){.photos{grid-template-columns:1fr}}

/* ---- uses ---- */
.uses{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem 1.2rem; margin-top:2rem}
@media(max-width:820px){.uses{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.uses{grid-template-columns:1fr}}
.use h3{font-family:var(--gothic); font-size:1rem; font-weight:700; margin-top:.85rem; min-height:1.6em}
.use p{font-size:.85rem; color:var(--ink-2); line-height:1.9; margin-top:.3rem; min-height:3.8em}

/* ---- form ---- */
.form{background:var(--paper); border:1px solid var(--line); padding:2rem; margin-top:1.8rem}
.field{display:grid; gap:.4rem; margin-bottom:1.3rem}
.field label{font-size:.86rem; font-weight:700}
.field label .req{color:#B3402A; font-size:.72rem; font-weight:500; margin-left:.4rem}
.field label .opt{color:var(--muted); font-size:.72rem; font-weight:400; margin-left:.4rem}
.field input, .field textarea{
  font-family:var(--gothic); font-size:.95rem; padding:.7rem .8rem;
  border:1px solid var(--line); border-radius:2px; background:var(--ground); color:var(--ink); width:100%;
}
.field textarea{min-height:8rem; resize:vertical; line-height:1.9}
.field input:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
@media(max-width:600px){.form .row{grid-template-columns:1fr} .form{padding:1.4rem}}
.form .submit{background:var(--accent); color:#fff; border:0; padding:.95rem 2.4rem; font-weight:700; font-size:.95rem; border-radius:2px; cursor:pointer; font-family:var(--gothic)}
.formmsg{margin-top:1rem; padding:.9rem 1.1rem; font-size:.9rem; border-radius:2px}
.formmsg.ok{background:var(--accent-2); color:var(--accent); border-left:3px solid var(--accent)}
.formmsg.ng{background:#FBEDE9; color:#8A2E1C; border-left:3px solid #B3402A}
.form .privacy{font-size:.8rem; color:var(--muted); margin-top:1rem; line-height:1.8}

.photos2{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem}
@media(max-width:700px){.photos2{grid-template-columns:1fr}}
.subhead{font-family:var(--gothic); font-size:1.05rem; font-weight:700; margin-top:3rem; padding-bottom:.7rem; border-bottom:2px solid var(--ink)}

.pagehead{padding:3.2rem 0 1rem}
.pagehead h1{font-size:clamp(1.6rem,4vw,2.2rem)}
.draft{background:var(--accent-2); color:var(--accent); font-size:.84rem; padding:.8rem 1.1rem; margin-bottom:2rem; border-left:3px solid var(--accent)}
.legal h3{font-family:var(--gothic); font-size:1rem; font-weight:700; margin-top:2rem}
.legal h3:first-child{margin-top:0}
.legal p{font-size:.9rem; color:var(--ink-2); line-height:2.1; margin-top:.5rem}
.legal p.pre{margin-bottom:2rem}
.legal p.post{margin-top:2.5rem; color:var(--muted); font-size:.85rem}

/* ---- footer ---- */
footer{background:var(--ink); color:#CFC9BE; padding:2.6rem 0; font-size:.82rem; line-height:2}
footer .wrap{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
footer b{color:#fff; font-family:var(--mincho); font-size:1rem; display:block; margin-bottom:.4rem}
footer a{color:#CFC9BE}
.flinks{display:flex; flex-direction:column; gap:.15rem; align-items:flex-start}
.flinks .copy{opacity:.6; margin-top:.7rem; font-size:.76rem}
@media(max-width:700px){.flinks{margin-top:1.2rem}}

/* ---- note bar ---- */
.note{
  background:var(--blue-2); color:#fff; font-size:.78rem; padding:.6rem 0;
  font-family:var(--mono); letter-spacing:.02em;
}
.note .wrap{display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}