/* ヒキコムサイネージ — 配色は :root、スマホ表示は末尾の @media で編集 */

:root {
  color-scheme:light;
  --ink:#151714;
  --mute:#646a61;
  --bg:#fff;
  --bg2:#f3f5f0;
  --line:#dce1d7;
  --accent:#d4ff45;
  --dark:#10130f;
  --maxw:1240px
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.8;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
a,button,input,select,textarea,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #79a500;
  outline-offset:5px
}
.wrap {
  max-width:var(--maxw);
  margin:auto;
  padding:0 42px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  font-size:15px;
  font-weight:700;
  padding:17px 26px;
  border:1px solid transparent;
  border-radius:5px;
  cursor:pointer;
  transition:background .2s,transform .2s
}
.btn:after {
  content:'↗';
  font-size:19px
}
.btn:hover {
  transform:translateY(-2px)
}
.btn-red {
  background:var(--accent);
  color:#11150a
}
.btn-red:hover {
  background:#e0ff7d
}
.btn-ghost {
  color:#fff;
  border-color:#62685c;
  background:transparent
}
.kicker {
  display:block;
  font:600 13px/1.5 Arial,sans-serif;
  letter-spacing:.14em;
  margin-bottom:20px;
  color:#52603f
}
.kicker:before {
  content:'●';
  font-size:8px;
  margin-right:10px;
  vertical-align:middle
}
.kicker.light {
  color:var(--accent)
}
section {
  padding:100px 0
}
h2 {
  font-size:clamp(27px,3.1vw,42px);
  line-height:1.5;
  letter-spacing:-.035em;
  font-weight:800
}
.lead {
  color:var(--mute);
  font-size:16px;
  max-width:690px;
  margin-top:20px
}
.center {
  text-align:left
}
.center .lead {
  margin-left:0
}
.nav {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
header {
  position:sticky;
  top:0;
  z-index:50;
  background:#10130ff5;
  color:white;
  border-bottom:1px solid #ffffff18;
  backdrop-filter:blur(15px)
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.04em;
  white-space:nowrap
}
.logo {
  width:26px;
  height:30px;
  display:block;
  position:relative
}
.logo span {
  position:absolute;
  width:17px;
  height:23px;
  border:2px solid var(--accent);
  transform:skewY(-15deg);
  top:3px
}
.logo span:nth-child(2) {
  left:8px;
  top:0
}
.navlinks {
  display:flex;
  align-items:center;
  gap:23px
}
.navlinks a {
  font-size:13px;
  color:#c4cabf
}
.navlinks a:hover {
  color:var(--accent)
}
.navlinks .btn {
  padding:11px 20px;
  color:#111
}
.navlinks a[href='#problem'],.navlinks a[href='#flow'] {
  display:none
}
.burger {
  display:none;
  color:#fff;
  background:none;
  border:1px solid #454b40;
  padding:3px 11px;
  font-size:24px
}
.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#10130f;
  color:#fff;
  padding:95px 0 0;
  min-height:720px
}
.hero .wrap {
  position:relative;
  z-index:2
}
.hero .kicker {
  color:var(--accent);
  letter-spacing:.2em
}
.hero h1 {
  font-size:clamp(44px,5.6vw,76px);
  line-height:1.35;
  letter-spacing:-.055em;
  margin:24px 0 26px;
  font-weight:900
}
.hero .em {
  color:var(--accent)
}
.hero p {
  max-width:510px;
  font-size:16px;
  line-height:2;
  color:#c1c8ba
}
.hero .cta {
  display:flex;
  gap:12px;
  margin-top:36px;
  flex-wrap:wrap
}
.hero .tag {
  font-size:12px;
  color:#9da893;
  letter-spacing:.08em;
  margin-top:27px
}
.heroart {
  position:absolute;
  inset:0 0 0 34%;
  z-index:0;
  background:#10130f
}
.heroart img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:65% center
}
.heroart:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#10130f 0%,transparent 42%),linear-gradient(0deg,#10130f,transparent 30%)
}
.hero-caption {
  position:absolute;
  right:35px;
  bottom:125px;
  color:#aeb7a4;
  font-size:12px;
  z-index:1
}
.hero-strip {
  margin-top:68px;
  border-top:1px solid #ffffff25;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  position:relative;
  z-index:3
}
.hero-strip div {
  padding:23px 0;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:16px
}
.hero-strip b {
  color:var(--accent);
  font:500 13px Arial
}
.hero-strip span {
  color:#858d7f;
  margin-left:auto;
  margin-right:30px;
  font:12px Arial;
  letter-spacing:.1em
}
.prob {
  background:var(--bg2);
  padding:80px 0
}
.prob .center {
  display:flex;
  align-items:baseline;
  gap:70px
}
.prob h2 {
  font-size:28px
}
.grid,.steps,.feats,.modes,.models,.flow {
  display:grid;
  gap:28px
}
.g3,.steps,.feats,.modes {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.card {
  padding:26px 0;
  border-top:1px solid #bcc5b3
}
.n {
  font:14px Arial;
  color:#6a755e
}
.card h3 {
  font-size:20px;
  margin:14px 0 10px
}
.card p,.step p,.feat-card p,.mode p,.model p {
  font-size:16px;
  color:var(--mute)
}
.steps,.feats,.modes,.models,.flow {
  margin-top:48px
}
.step {
  border-top:2px solid #151914;
  padding:27px 8px 20px 0
}
.num {
  font:400 56px/1 Arial,sans-serif;
  color:#9caf83
}
.step:nth-child(2) .num {
  color:#65833c
}
.step:nth-child(3) .num {
  color:#2e4920
}
.step h3 {
  font-size:25px;
  margin:27px 0 15px
}
.note {
  margin-top:27px;
  font-size:14px;
  background:#f1f5e9;
  border-left:3px solid #8ba840;
  padding:18px 24px;
  color:#546344
}
.feat {
  background:var(--bg2)
}
.feats {
  gap:0
}
.feat-card {
  padding:30px 30px 34px 0;
  border-top:1px solid #cbd3c3
}
.feat-card:nth-child(3n+2),.feat-card:nth-child(3n) {
  padding-left:30px;
  border-left:1px solid #cbd3c3
}
.ic {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid #a5b195;
  border-radius:50%;
  font-size:19px;
  margin-bottom:26px
}
.feat-card h3 {
  font-size:18px;
  margin-bottom:13px
}
.dark {
  background:#10130f;
  color:white
}
.modes {
  gap:24px
}
.mode {
  padding:0 0 20px
}
.scr {
  height:175px;
  border:1px solid #49533d;
  background:#1a2015;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--accent);
  font:500 49px Arial;
  margin-bottom:25px
}
.scr small {
  font:12px Arial;
  color:#9ca88f;
  letter-spacing:.16em
}
.mode h3 {
  font-size:20px
}
.mode p {
  color:#aeb7a5;
  margin-top:10px
}
.inds {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:35px;
  justify-content:flex-start!important
}
.chip {
  border:1px solid #ced6c6;
  padding:15px 24px;
  border-radius:3px;
  font-size:16px
}
.chip b {
  font-size:10px;
  color:#849871;
  margin-right:7px
}
.models {
  grid-template-columns:1fr 1fr;
  gap:24px
}
.model {
  background:white;
  padding:40px;
  border:1px solid #dce1d7;
  border-radius:8px
}
.model:first-child {
  border-top:4px solid #83a246
}
.model h3 {
  font-size:27px;
  margin-bottom:18px
}
.model .small {
  font-size:14px;
  color:#727b68;
  margin-top:25px
}
.partner {
  background:#d4ff45;
  padding:64px 0
}
.partner .row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:42px
}
.partner h2 {
  font-size:32px
}
.partner p {
  max-width:700px;
  font-size:16px;
  margin-top:18px
}
.partner .kicker {
  color:#37461d
}
.partner .btn {
  background:#151b0d;
  color:white;
  flex-shrink:0
}
.flow {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0
}
.fstep {
  padding:25px 24px 15px 0;
  border-top:1px solid #adb8a3
}
.fn {
  font:16px Arial;
  color:#6f805d;
  margin-bottom:28px
}
.fstep h3 {
  font-size:17px
}
.fstep p {
  font-size:14px;
  color:var(--mute);
  margin-top:8px
}
.faqwrap {
  max-width:900px;
  margin:40px 0 0 auto
}
details {
  border-bottom:1px solid #c7d0bd
}
summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:25px;
  cursor:pointer;
  padding:25px 0;
  font-size:17px;
  font-weight:700
}
summary::-webkit-details-marker {
  display:none
}
summary:after {
  content:'+';
  font:25px Arial;
  color:#667b48
}
details[open] summary:after {
  content:'−'
}
details p {
  padding:0 42px 24px 0;
  color:var(--mute);
  font-size:16px
}
.ctaband {
  background:#10130f;
  color:#fff
}
.ctaband>.wrap {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px
}
.ctaband h2 {
  font-size:clamp(30px,3.5vw,46px)
}
.ctaband .lead {
  color:#aeb9a3!important;
  line-height:2
}
.form {
  background:#1b2116;
  border:1px solid #38442b;
  border-radius:8px;
  padding:30px;
  margin:0
}
.form label {
  display:block;
  font-size:14px;
  color:#d2dcc8;
  margin:12px 0 8px
}
.form input,.form select,.form textarea {
  width:100%;
  min-width:0;
  border:1px solid #556149;
  background:#10150c;
  color:white;
  border-radius:4px;
  padding:12px;
  font-size:16px
}
.form input::placeholder,.form textarea::placeholder {
  color:#839376
}
.form .row2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.form .btn {
  width:100%;
  margin-top:22px
}
.formnote {
  font-size:12px;
  color:#adbaa2;
  margin-top:14px
}
.form-status {
  font-size:14px;
  color:var(--accent);
  margin-top:14px
}
footer {
  background:#10130f;
  color:#9ba88e;
  border-top:1px solid #313b26;
  padding:35px 0
}
.fnav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  flex-wrap:wrap;
  font-size:12px
}
.themebar {
  display:none
}
@media(min-width:1500px) {
  .heroart {
    left:42%
  }
}
@media(max-width:1050px) {
  .navlinks {
    gap:16px
  }
  .navlinks a[href='#faq'] {
    display:none
  }
  .wrap {
    padding:0 30px
  }
  .hero h1 {
    font-size:60px
  }
  .hero p {
    max-width:440px
  }
  .heroart {
    left:25%;
    opacity:.75
  }
  .ctaband>.wrap {
    gap:35px
  }
  .partner .row {
    align-items:flex-start;
    flex-direction:column
  }
  .hero-strip span {
    display:none
  }
}
@media(max-width:760px) {
  .wrap {
    padding:0 23px
  }
  .nav {
    height:72px
  }
  .brand {
    font-size:17px
  }
  .burger {
    display:block
  }
  .navlinks {
    display:none
  }
  .navlinks.open {
    display:flex;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    flex-direction:column;
    background:#10130f;
    padding:25px;
    align-items:stretch
  }
  .navlinks a {
    font-size:16px
  }
  .hero {
    padding-top:49px;
    min-height:0
  }
  .hero h1 {
    font-size:clamp(40px,9vw,58px);
    margin-top:19px
  }
  .hero p {
    font-size:15px;
    max-width:none
  }
  .hero .cta {
    margin-top:26px
  }
  .hero .btn {
    font-size:14px;
    padding:14px 17px;
    gap:15px
  }
  .heroart {
    inset:auto 0 76px 0;
    height:370px;
    opacity:1
  }
  .heroart img {
    object-position:70% center
  }
  .heroart:after {
    background:linear-gradient(180deg,#10130f,transparent 28%),linear-gradient(0deg,#10130f,transparent 25%)
  }
  .hero .tag {
    margin-top:18px
  }
  .hero-strip {
    margin-top:320px
  }
  .hero-strip div {
    padding:20px 0;
    font-size:12px;
    gap:7px
  }
  .hero-caption {
    bottom:96px;
    right:23px;
    font-size:12px
  }
  section {
    padding:65px 0
  }
  .prob .center {
    display:block
  }
  .prob h2 {
    font-size:25px
  }
  .g3,.steps,.modes {
    grid-template-columns:1fr;
    gap:10px
  }
  .card {
    padding:22px 0
  }
  .steps {
    margin-top:35px
  }
  .step {
    padding:25px 0
  }
  .num {
    font-size:40px
  }
  .step h3 {
    margin-top:18px;
    font-size:23px
  }
  .feats {
    grid-template-columns:1fr 1fr
  }
  .feat-card,.feat-card:nth-child(3n+2),.feat-card:nth-child(3n) {
    padding:23px 15px 25px 0;
    border-left:0
  }
  .feat-card:nth-child(even) {
    padding-left:15px;
    border-left:1px solid #cbd3c3
  }
  .feat-card h3 {
    font-size:16px
  }
  .feat-card p {
    font-size:14px
  }
  .modes {
    gap:25px
  }
  .scr {
    height:140px
  }
  .models {
    grid-template-columns:1fr
  }
  .model {
    padding:28px
  }
  .flow {
    grid-template-columns:1fr 1fr;
    gap:22px
  }
  .fstep {
    padding-right:10px
  }
  .ctaband>.wrap {
    grid-template-columns:1fr;
    gap:30px
  }
  .form {
    padding:22px
  }
  .form .row2 {
    grid-template-columns:1fr;
    gap:0
  }
  .chip {
    padding:10px 14px;
    font-size:14px
  }
  .kicker {
    font-size:12px;
    margin-bottom:15px
  }
  .fnav {
    flex-direction:column;
    align-items:flex-start
  }
  summary {
    font-size:16px
  }
  .hero-strip div b {
    font-size:11px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

/* 配色案。data-paletteで切替。共通デザインは上部を編集してください。 */
html[data-palette="blue"] { --accent:#87c8ff; --dark:#0b1626; --bg2:#f0f5fb; --mute:#5e6d7d; --line:#d7e1ec; --tint:#354c67; --panel:#14243a; --soft:#dbeafa; --edge:#435970; --subtext:#b7c7da; --label:#456c92; }
html[data-palette="gold"] { --accent:#dcc28b; --dark:#171613; --bg2:#f5f3ee; --mute:#716b5e; --line:#e1dbcf; --tint:#56503f; --panel:#25221b; --soft:#eee7d9; --edge:#635b47; --subtext:#c5bcaa; --label:#7f6939; }
html[data-palette="clean"] { --accent:#087f79; --dark:#f4f9f8; --bg2:#edf5f3; --mute:#566f6b; --line:#d1e2de; --tint:#cadeda; --panel:#fff; --soft:#e5f3ee; --edge:#b8d4cb; --subtext:#42665e; --label:#087f79; }
html[data-palette]:not([data-palette="lime"]) header,
html[data-palette]:not([data-palette="lime"]) .hero,
html[data-palette]:not([data-palette="lime"]) .heroart,
html[data-palette]:not([data-palette="lime"]) .dark,
html[data-palette]:not([data-palette="lime"]) .ctaband,
html[data-palette]:not([data-palette="lime"]) footer { background:var(--dark); }
html[data-palette]:not([data-palette="lime"]) .heroart:after { background:linear-gradient(90deg,var(--dark),transparent 42%),linear-gradient(0deg,var(--dark),transparent 30%); }
html[data-palette="blue"] .heroart img { filter:hue-rotate(130deg) saturate(.7); }
html[data-palette="gold"] .heroart img { filter:hue-rotate(-28deg) saturate(.35); }
html[data-palette="clean"] .heroart img { filter:hue-rotate(75deg) saturate(.55); }
html[data-palette]:not([data-palette="lime"]) .form,
html[data-palette]:not([data-palette="lime"]) .scr { background:var(--panel);border-color:var(--edge); }
html[data-palette]:not([data-palette="lime"]) .form input,
html[data-palette]:not([data-palette="lime"]) .form select,
html[data-palette]:not([data-palette="lime"]) .form textarea { background:var(--dark);border-color:var(--edge); }
html[data-palette]:not([data-palette="lime"]) .kicker { color:var(--label); }
html[data-palette]:not([data-palette="lime"]) .hero .kicker,
html[data-palette]:not([data-palette="lime"]) .kicker.light { color:var(--accent); }
html[data-palette]:not([data-palette="lime"]) .num { color:var(--label); }
html[data-palette]:not([data-palette="lime"]) .note { background:var(--soft);color:var(--label);border-color:var(--label); }
html[data-palette]:not([data-palette="lime"]) .partner { background:var(--accent); }
html[data-palette]:not([data-palette="lime"]) .model:first-child { border-top-color:var(--label); }
html[data-palette]:not([data-palette="lime"]) .hero p,
html[data-palette]:not([data-palette="lime"]) .mode p,
html[data-palette]:not([data-palette="lime"]) .ctaband .lead { color:var(--subtext)!important; }
html[data-palette]:not([data-palette="lime"]) .card,
html[data-palette]:not([data-palette="lime"]) .feat-card,
html[data-palette]:not([data-palette="lime"]) details { border-color:var(--line); }
html[data-palette]:not([data-palette="lime"]) .ic { border-color:var(--label); }
html[data-palette]:not([data-palette="lime"]) .btn-red:hover { background:var(--accent);filter:brightness(1.08); }
html[data-palette="clean"] .hero,
html[data-palette="clean"] header,
html[data-palette="clean"] .dark,
html[data-palette="clean"] .ctaband,
html[data-palette="clean"] footer,
html[data-palette="clean"] .form input,
html[data-palette="clean"] .form select,
html[data-palette="clean"] .form textarea { color:#163f38; }
html[data-palette="clean"] .brand { color:#163f38!important; }
html[data-palette="clean"] .navlinks a,
html[data-palette="clean"] .form label,
html[data-palette="clean"] .formnote,
html[data-palette="clean"] .hero .tag,
html[data-palette="clean"] .hero-strip span { color:#42665e; }
html[data-palette="clean"] .btn-red,
html[data-palette="clean"] .navlinks .btn,
html[data-palette="clean"] .partner,
html[data-palette="clean"] .partner .kicker { color:#fff; }
html[data-palette="clean"] .btn-ghost { color:#087f79;border-color:#087f79; }
html[data-palette="clean"] .partner .btn { background:white;color:#087f79; }
html[data-palette="clean"] .hero-strip { border-color:#b8d4cb; }
html[data-palette="clean"] .burger { color:#087f79;border-color:#b8d4cb; }
html[data-palette="clean"] .heroart { inset:35px 25px 115px 49%;border-radius:12px;overflow:hidden; }
html[data-palette="clean"] .heroart:after { display:none; }
html[data-palette="clean"] .hero-caption { bottom:93px;color:#42665e; }










@media(max-width:760px) {
 html[data-palette]:not([data-palette="lime"]) .navlinks.open { background:var(--dark); }
 html[data-palette]:not([data-palette="lime"]) .heroart:after { background:linear-gradient(180deg,var(--dark),transparent 28%),linear-gradient(0deg,var(--dark),transparent 25%); }
 html[data-palette="clean"] .heroart { inset:auto 23px 92px 23px;height:275px; }
 html[data-palette="clean"] .hero-caption { bottom:74px; }
 
 
}

/* 日本語の組版：短い意味単位は分割せず、単位の間で折り返します。 */
body { line-break:strict;word-break:normal;overflow-wrap:normal; }
h1,h2,h3 { text-wrap:balance; }
p,.lead { text-wrap:pretty; }
.phrase { display:inline-block;white-space:nowrap;max-width:100%; }
.btn { white-space:nowrap; }
.question-text { min-width:0; }
summary::after { flex-shrink:0; }
@media(max-width:520px) {
 .feats { grid-template-columns:1fr; }
 .feat-card,.feat-card:nth-child(3n+2),.feat-card:nth-child(3n),.feat-card:nth-child(even) { padding:25px 0;border-left:0; }
 .feat-card h3 { font-size:18px; }
 .feat-card p { font-size:16px; }
 .partner .btn { font-size:13px;padding:15px;gap:12px; }
 .hero h1 { font-size:clamp(36px,9vw,58px); }
 .form { padding:18px; }
}
/* 拡大表示・極小画面では文字の欠けを避けます。 */
@media(max-width:340px) { .phrase { white-space:normal; } .btn { white-space:normal; } }

/* 05 — 元案の赤を活かした、濃紺 × 深めの朱赤 */
html[data-palette="red"] {
  --accent:#ef6557;
  --dark:#111827;
  --bg2:#f3f4f7;
  --mute:#616979;
  --line:#dce0e8;
  --tint:#404b60;
  --panel:#1d2738;
  --soft:#fcece9;
  --edge:#4a5368;
  --subtext:#c4ccda;
  --label:#a63f35;
}
html[data-palette="red"] .heroart img { filter:hue-rotate(-65deg) saturate(.8); }
html[data-palette="red"] .btn-red { background:#bd3f34;color:#fff; }
html[data-palette="red"] .btn-red:hover { background:#a9332a; }
html[data-palette="red"] .partner { background:#182338;color:#fff; }
html[data-palette="red"] .partner .kicker { color:#ef6557; }
html[data-palette="red"] .partner .btn { background:#bd3f34;color:#fff; }