@charset "utf-8";
/* ============== Design Tokens ============== */
:root {
  --brand: #6b4ce6;        /* メイン紫 */
  --brand-ink: #4a2fb5;    /* 濃い紫（hover・強調用） */
  --accent: #b38ef6;       /* 補助アクセント（ボタンやグラデ背景） */
  --ink: #111827;
  --sub: #6b7280;
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --line: #e5e7eb;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --maxw: 1120px;
}
/* ============== Reset ============== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin-inline:auto;padding:clamp(16px,3vw,24px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.9rem 1.25rem;font-weight:700}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-ink)}
.btn--ghost{border:1px solid  var(--brand);background:#fff;color: #5834ea;}
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;font-size:.85rem;color:var(--sub)}
.eyebrow{font-size:.9rem;color:var(--accent);font-weight:700;letter-spacing:.03em}
.h1{font-size:clamp(28px,4vw,40px);line-height:1.2;margin:.4rem 0}
.h2{font-size:clamp(22px,3vw,28px);line-height:1.3;margin:0 0 .75rem}
.lead{color:#374151;font-size:clamp(16px,2.2vw,18px)}
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid--2,.grid--3{grid-template-columns:1fr}}

/* ============== Header ============== */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.header__row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--brand-ink)}
.nav{display:flex;align-items:center;gap:1rem}
.nav a{padding:.75rem .5rem;color:#374151}
.nav a[aria-current="page"]{color:var(--brand-ink);font-weight:700}
.nav__cta{margin-left:.5rem}
.hamburger{display:none}
@media (max-width:860px){
  .nav{display:none}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff}
  /* ===== ドロワーメニュー（全幅対応） ===== */
.drawer{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;            /* ← 初期非表示 */
  z-index: 1000;            /* ← ヘッダーより前面 */
}
.drawer[aria-hidden="false"]{ display:block; }
.drawer__panel{
  margin-left: auto;
  width: min(86vw,360px);
  height: 100%;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}

/* ===== ハンバーガー（PC非表示・スマホ表示） ===== */
.hamburger{ display: none !important; }

@media (max-width:860px){
  .hamburger{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    z-index: 1001;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  /* スマホでは通常ナビを隠す */
  .nav{ display: none; }
}

}

/* ============== Hero ============== */
/* ============== Hero ============== */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #fff;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: url("../images/tanaoroshibig.jpg") center center / cover no-repeat;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(126, 122, 122, 0.351); /* オーバーレイ */
}


.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: center;
  min-height: 480px;
  z-index: 1;
}
.hero__copy {
  color: #fff;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  justify-content: center;
}
.hero__card {
  background: rgba(195, 195, 195, 0.595);
  /* border: 1px solid var(--line); */
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 24px);
  box-shadow: var(--shadow);
}
@media (max-width:900px){
  .hero__inner { grid-template-columns:1fr; text-align:center; }
  .hero__card { margin-top:16px; }
}


/* ============== Trust ============== */
.trust{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.trust img{height:28px;opacity:.8}

/* ============== Feature Cards ============== */
.card{border:1px solid #b2a7dd;border-radius:var(--radius);background:#fff;padding:20px}
.card h3{margin:.25rem 0 .5rem;font-size:1.1rem}
.card p{color:#4b5563;font-size:.95rem}

/* ============== KPI ============== */
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.kpi{grid-template-columns:repeat(2,1fr)}}
.kpi__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center}
.kpi__value{font-size:clamp(24px,4vw,34px);font-weight:800;color:var(--brand-ink)}
.kpi__label{color:#4b5563}

/* ============== Comparison ============== */
/* .table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid #b2a7dd;border-radius:var(--radius);background:#fff}
.table th,.table td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
.table thead th{background:#f8fafc;text-align:left}
.table tbody tr:last-child td{border-bottom:none} */

/* ============== Steps ============== */
.steps{counter-reset:step}
.step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.step__num{min-width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:800}

/* ============== CTA band ============== */
.cta-band{background:linear-gradient(90deg,var(--brand),var(--accent));color:#fff;border-radius:var(--radius);padding:20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}
.cta-band .btn{background:#fff;color:var(--brand-ink)}

/* ============== FAQ ============== */
details{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:#fff}
summary{cursor:pointer;font-weight:700}

/* ============== Footer ============== */
.footer{border-top:1px solid var(--line);color:#6b7280}

/* ============== Mobile Sticky CTA ============== */
.sticky-cta{position:sticky;bottom:0;z-index:40; background: rgba(29, 29, 29, 0.3);padding:10px}
.sticky-cta .btn{width:100%}
@media (min-width:861px){.sticky-cta{display:none}}

/* ===== talk bubbles ===== */
.talk{display:grid;gap:16px;margin-top:8px;margin-bottom:8px}
.talk__row{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
.talk_flame{width:100%;object-fit:cover;border-radius:14px;}
.talk__img{width:80%;margin: 0 auto;}
.talk__bubble{position:relative;background:#fff;border:1px solid #b2a7dd;border-radius:16px;padding:12px 14px;box-shadow:var(--shadow)}
.talk__bubble::before{
  content:"";position:absolute;left:-10px;top:20px;width:0;height:0;
  border-width:8px 10px 8px 0;border-style:solid;border-color:transparent #b2a7dd transparent transparent;
}
.talk__bubble::after{
  content:"";position:absolute;left:-8px;top:21px;width:0;height:0;
  border-width:7px 9px 7px 0;border-style:solid;border-color:transparent #fff transparent transparent;
}
.talk__name{font-size:.9rem;color:var(--sub);margin-bottom:4px}
@media (max-width:720px){
  .talk__row{grid-template-columns:72px 1fr}
  .talk_flame{height:72px;border-radius:12px}
  .talk__img{height:72px;border-radius:12px}
}
/* ours highlight */
.table th.is-ours,.table td.is-ours{
  /* background: #eaf8f2;         */
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  font-weight: 800;
}
.table thead th.is-ours{
  position: relative;
  background: #d4f3e7;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.table thead th.is-ours .badge{
  position:absolute;top:-10px;left:12px;
  background: var(--brand);color:#fff;font-size:.75rem;
  padding:.2rem .5rem;border-radius:999px;font-weight:800;
}
.table tbody tr:first-child td.is-ours{border-top:2px solid var(--accent)}
.table tbody tr:last-child  td.is-ours{border-bottom:2px solid var(--accent);border-bottom-left-radius:0;border-bottom-right-radius:12px}
.table thead tr:first-child th.is-ours{border-top-left-radius:0;border-top-right-radius:12px}

.table tbody tr:first-child td.is-ours1{border-top:2px solid var(--accent)}
.table tbody tr:last-child  td.is-ours{border-bottom:2px solid var(--accent);border-bottom-left-radius:0;border-bottom-right-radius:12px}
.table thead tr:first-child th.is-ours{border-top-left-radius:0;border-top-right-radius:12px}

@media (max-width:720px){
  .talk__row{
    grid-template-columns:1fr;     /* 縦並び */
  }
  .talk__img{
    width:80px;
    height:80px;
    margin:0 auto 8px;
    border-radius:50%;
    object-fit:cover;
  }
  .talk__bubble{
    order:2;
    text-align:center;
  }
  .talk__bubble::before,
  .talk__bubble::after{
    display:none;                  /* 吹き出しの三角を非表示 */
  }
}
/* ===== Pricing ===== */
.pricing{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
@media (max-width:980px){.pricing{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pricing{grid-template-columns:1fr}}

.pricecard{position:relative;border:1px solid #b7a4e5;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column}
.pricecard__head{margin-bottom:8px}
.pricecard__name{margin:0 0 4px;font-size:1.15rem}
.pricecard__desc{margin:0;color:#6b7280;font-size:.95rem}
.pricecard__price{margin:6px 0 10px}
.pricecard__num{font-size:clamp(22px,4vw,28px);font-weight:800;color:var(--brand-ink)}
.pricecard__per{color:#6b7280;margin-left:6px}
.pricecard__list{margin:0 0 14px;padding-left:18px}
.pricecard__list li{margin:.35rem 0}
.pricecard__cta{margin-top:auto;text-align:center}

.is-rec{border:2px solid var(--accent);transform:translateY(-2px)}
.is-rec .pricecard__num{color:var(--brand)}
.pricecard__ribbon{
  position:absolute;top:-10px;left:12px;
  /* background:var(--brand); */
  color:#fff;
  font-size:.75rem;padding:.2rem .5rem;border-radius:999px;font-weight:800
}
/* ===== Header Logo & Info ===== */
.logo__img{
  height:48px;
  width:auto;
  display:block;
}

.header__info{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:.9rem;
  line-height:1.3;
  color:var(--ink);
}
.header__time{margin:0;font-weight:500}
.header__tel{margin:2px 0 0}
.header__tel-link{color:var(--brand);font-weight:700;text-decoration:none}
.header__tel-link:hover{text-decoration:underline}

/* スマホ対応 */
@media (max-width:860px){
  .header__info{display:none;} /* スマホでは非表示にしてCTA優先 */
  .logo__img{height:40px;}
}
/* ===== Header layout two rows ===== */
.header__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 0;
}
.header__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:6px 0;
}
.logo__img{
  height:56px;
  width:auto;
}
.header__info{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:.9rem;
  line-height:1.3;
}
.header__time{margin:0;font-weight:500}
.header__tel{margin:2px 0 0}
.header__tel-link{color:var(--brand);font-weight:700;text-decoration:none}
.header__tel-link:hover{text-decoration:underline}

/* ===== Responsive ===== */
@media (max-width:860px){
  .header__top{justify-content:space-between;padding:8px 0}
  .header__bottom{display:none}          /* PCナビは非表示 */
  .header__info{display:none}            /* 上部の連絡先も非表示 */
  .logo__img{height:44px}
}

/* ドロワー内情報 */
.drawer__info{
  font-size:.9rem;
  color:var(--ink);
  line-height:1.4;
  margin-top:12px;
}
/* 二段ヘッダー + ロゴ縦断 */
.header__grid{
  display:grid;
  grid-template-columns: auto 1fr max-content; /* ロゴ | 余白 | 右カラム */
  grid-template-rows: auto auto;               /* 上段 | 下段 */
  align-items:center;
  column-gap:16px;
  row-gap:6px;
  padding:8px 0;
}
.logo{grid-column:1; grid-row:1 / span 2;}     /* 縦に2段分またぐ */
.logo__img{height:60px; width:auto; display:block}

.header__contact{
  grid-column:3; grid-row:1;
  margin:0; white-space:nowrap; font-size:.95rem; color:var(--ink);
}
.header__tel-link{color:var(--brand);font-weight:700;text-decoration:none}
.header__tel-link:hover{text-decoration:underline}

.nav{grid-column:3; grid-row:2; display:flex; align-items:center; gap:1rem}
.nav__cta{margin-left:.5rem}

/* 既存 .header スタイルは流用。下線を段間の境界に */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}

/* スマホ時：情報とPCナビ非表示。ハンバーガー表示。ロゴ縮小。 */
@media (max-width:860px){
  .header__grid{
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
  }
  .logo{grid-row:1}
  .logo__img{height:44px}
  .header__contact{display:none}
  .nav{display:none}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;
    grid-column:3}
}

/* ドロワー内の補足（既存流用） */
.drawer__info{font-size:.9rem;line-height:1.4;margin-top:12px}
/* ===== Pricing (table version) ===== */
.table--pricing{
  border:1px solid #b2a7dd;
  border-radius:var(--radius);
  background:#fff;
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  box-shadow:var(--shadow);
}
.table--pricing th,
.table--pricing td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.table--pricing thead th{
  /* background:#f8fafc; */
  font-weight:700;
}
.table--pricing tbody tr:last-child td{
  border-bottom:none;
}
.table--pricing strong{color:var(--brand-ink)}
@media screen and (min-width:450px) and (max-width:640px){
  .table--pricing th,.table--pricing td{font-size:.9rem;padding:10px}
}
@media screen and (min-width:450px){
  .table--pricing th,.table--pricing td{padding:10px}
}
@media only screen and (min-width: 769px) {
  .sp-view {
    display: none;
  }
  .tb-view {
    display: none;
  }
}

/* ===== Feature Section enhancement ===== */
.feature-group {
  font-size:1.1rem;
  font-weight:700;
  color:var(--brand-ink);
  margin-top:32px;
  margin-bottom:12px;
  border-left:4px solid var(--brand);
  padding-left:8px;
}
@media(max-width:640px){
  .feature-group{margin-top:24px;font-size:1rem}
}
/* ===== Requirements ===== */
.table--reqs{
  border:1px solid #b2a7dd;
  border-radius:var(--radius);
  background:#fff;
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  box-shadow:var(--shadow);
}
.table--reqs th, .table--reqs td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  text-align:left;
}
.table--reqs thead th{
  /* background:#f8f7ff;                  */
  color:var(--brand-ink);
  font-weight:700;
}
.table--reqs tbody tr:last-child td{ border-bottom:none }
.table--reqs td:first-child{ width:140px; font-weight:700; color:#374151 }
@media screen and (min-width:450px) and (max-width:640px){
  .table--reqs th, .table--reqs td{ font-size:.95rem; padding:10px }
  .table--reqs td:first-child{ width:auto }
}
@media screen and (max-width:450px){
  .table--reqs th, .table--reqs td{ padding:10px }
  .table--reqs td:first-child{ width:auto }
}
/* 注意書き */
.reqs__notes{
  margin:12px 0 0;
  padding-left:18px;
  color:#6b7280;
  font-size:.6rem;
  line-height:1.6;
}
.reqs__notes li{ margin:.25rem 0 }
.reqs__notes li::before{
  content: '※';
}

/* ===== System Structure ===== */
.sys{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(20px,3vw,28px);
  align-items:center;
  font-size:  80%;
}
.sys__img{
  width:100%;
  height:auto;
  border-radius:12px;
  /* border:1px solid var(--line); */
}
.sys__desc p{
  margin:.5rem 0 1rem;
  color:#374151;
  
}
.sys__desc ul{
  margin:0 0 1rem 1.2rem;
  color:#4b5563;
  /* font-size:.95rem; */
   font-size:  50%;
  line-height:1.6;
}
.sys__desc li{margin:.3rem 0}
@media(max-width:860px){
  .sys{grid-template-columns:1fr;gap:16px}
  .sys__desc ul{margin-left:1rem}
}
/* ===== System Structure (vertical layout) ===== */
.sys--vertical{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#fff;
  border:1px solid #b2a7dd;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(20px,3vw,28px);
  text-align:left;
}
.sys__diagram{
  width:100%;
  margin-bottom:20px;
}
.sys__img{
  width:100%;
  height:auto;
  /* border-radius:12px;
  border:1px solid var(--line); */
}
.sys__desc{
  width:100%;
  max-width:800px;
}
.sys__desc p{
  margin:.5rem 0 1rem;
  color:#374151;
}
.sys__desc ul{
  margin:0 0 1rem 1.2rem;
  color:#4b5563;
  font-size:.95rem;
  line-height:1.6;
}
.sys__desc li{margin:.3rem 0}
@media(max-width:640px){
  .sys__desc ul{margin-left:1rem}
}
/* 表示制御 */
.only-mobile{display:none}
@media (max-width:860px){ .only-mobile{display:block} }

/* 横スクロール容器 */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow);
}
.table--mobile{min-width:720px} /* 列幅を確保 */
.table-scroll::-webkit-scrollbar{height:8px}
.table-scroll::-webkit-scrollbar-thumb{background:#ddd;border-radius:8px}
/* 縦積み比較カード */
.cmp-stack{display:grid;gap:12px}
.cmp-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px
}
.cmp-term{margin:0 0 8px;font-size:1rem;color:var(--brand-ink)}
.cmp-cols{display:grid;gap:8px}
.cmp-col{
  border:1px dashed var(--line);border-radius:12px;padding:10px
}
.cmp-label{font-size:.85rem;color:#6b7280;margin-bottom:4px}
.cmp-col.is-ours{border-color:var(--accent);background:#f7f3ff}
@media(min-width:861px){
  /* PCでは非表示（スマホ専用） */
  #comparison-mobile-scroll, #comparison-mobile-stack{display:none}
}
/* --- 既存修正版：スマホのみ表示 --- */
.only-mobile { display: none; }

/* スマホ(〜860px)のみ表示、タブレット・PCは非表示 */
@media (max-width: 860px) {
  .only-mobile { display: block; }
}

@media (min-width: 861px) {
  .only-mobile { display: none !important; }
}
/* @media (max-width: 860px) {
  #comparison {
    display: none !important;
  }
} */
/* Back-to-top */
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  width:44px; height:44px; border-radius:999px; border:none;
  background:var(--brand); color:#fff; font-weight:800; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.18); opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top.is-show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--brand-ink); }
.to-top:focus{ outline:2px solid var(--accent); outline-offset:3px; }

/* 余白微調整（タブバーやCTAと干渉しない） */
@media (max-width:860px){
  .to-top{ right:12px; bottom:72px; } /* モバイル固定CTAがあるため少し上 */
}

/* アニメ無効派の配慮 */
@media (prefers-reduced-motion: reduce){
  .to-top{ transition:none }
}
/* ===== 手書き棚卸デメリット ===== */
.cons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width:980px){ .cons{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cons{grid-template-columns:1fr} }

.cons__item{
  background:#fff;
  border:1px solid #b2a7dd;;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  position:relative;
}
.cons__icon{
  width:36px;height:36px;color:var(--brand);margin-bottom:8px;
}
.cons__icon svg{width:100%;height:100%}
.cons__item h3{
  margin:.2rem 0 .4rem;
  font-size:1.05rem;
  color:var(--brand-ink);
}
.cons__item p{margin:0;color:#4b5563;font-size:.95rem;line-height:1.6}

.cons__cta{
  margin-top:12px;
  display:flex;
  justify-content:center;
}
/* ===== Comparison Highlight ===== */
.table--compare{width:100%;border:1px solid #b7a4e5;border-radius:var(--radius);border-collapse:separate;border-spacing:0;box-shadow:var(--shadow);background:#fff}
.table--compare th,.table--compare td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.table--compare thead th{color:var(--brand-ink);font-weight:700}
.table--compare tbody tr:last-child td{border-bottom:none}

/* スマホ版強調列 */
.table--compare th.is-ours,.table--compare td.is-ours{
  border-left:2px solid var(--accent);
  border-right:2px solid var(--accent);
  font-weight:700;
}
.table--compare thead th.is-ours{
  position:relative;
  background:#e8dfff;
  box-shadow:inset 0 -2px 0 var(--accent);
}
.table--compare thead th.is-ours .badge{
  position:absolute;top:-10px;left:12px;
  background:var(--brand);color:#fff;
  font-size:.75rem;padding:.2rem .5rem;border-radius:999px;
  font-weight:800;
}
/* 表示切替：スマホのみ表示 */
.only-mobile { display: none; }
@media (max-width: 860px) {
  .only-mobile { display: block; }
}
@media (min-width: 861px) {
  .only-mobile { display: none !important; }
}

/* 横スクロール表 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.table--compare-mobile {
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}
.table--compare-mobile th,
.table--compare-mobile td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.table--compare-mobile thead th {
  background: #f7f3ff;
  color: var(--brand-ink);
  font-weight: 700;
}

/* 縦積みカード比較 */
.cmp-stack { display: grid; gap: 12px; }
.cmp-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.cmp-term { margin: 0 0 8px; font-size: 1rem; color: var(--brand-ink); }
.cmp-cols { display: grid; gap: 8px; }
.cmp-col {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 10px;
}
.cmp-label { font-size: .85rem; color: #6b7280; margin-bottom: 4px; }
.cmp-col.is-ours {
  border-color: var(--accent);
  background: #f7f3ff;
}

/* PC/タブレットでは非表示（スマホ専用） */
@media (min-width: 861px) {
  #comparison-mobile-scroll, #comparison-mobile-stack { display: none; }
}
/* ===== Full-screen Request Form ===== */
:root{
  --brand:#6b4ce6; --brand-ink:#4a2fb5; --accent:#b38ef6;
  --ink:#111827; --sub:#6b7280; --line:#e5e7eb; --bg:#ffffff;
  --radius:16px; --shadow:0 12px 28px rgba(0,0,0,.08);
}
.fullform__wrap{
  width:min(1200px,100%);
  display:grid; grid-template-columns:1.05fr 1fr; gap:24px;
}
@media (max-width:980px){ .fullform__wrap{ grid-template-columns:1fr } }

.fullform__aside{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(20px,3vw,28px);
}
.fullform__aside h1{ margin:0 0 8px; font-size:clamp(22px,3vw,28px); color:var(--brand-ink) }
.fullform__aside p{ margin:0 0 10px; color:#374151 }
.fullform__aside ul{ margin:0; padding-left:18px; color:#4b5563; line-height:1.8 }

.fullform__card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(20px,3vw,28px);
}
.fullform__form{ width:100% }

.ff__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:640px){ .ff__grid{ grid-template-columns:1fr } }

.ff__row{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px }
.ff__label{ font-weight:700; color:var(--ink); font-size:.95rem }
.req{
  display:inline-block; font-size:.75rem; color:#fff; background:var(--brand);
  border-radius:999px; padding:.1rem .45rem; margin-right:.4rem; vertical-align:middle
}
.ff__input,.ff__textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-size:1rem; font-family:inherit; background:#fff;
}
.ff__input:focus,.ff__textarea:focus{ outline:2px solid var(--accent); outline-offset:2px }

.ff__note{ color:var(--sub); font-size:.9rem; margin:4px 0 12px }

.ff__actions{ display:flex; gap:10px; flex-wrap:wrap }
.ff__submit{
  background:var(--brand); color:#fff; border:none; border-radius:999px;
  padding:.9rem 1.4rem; font-weight:800; cursor:pointer;
}
.ff__submit:hover{ background:var(--brand-ink) }
.ff__reset{
  background:#f1f5f9; color:var(--ink); border:none; border-radius:999px;
  padding:.9rem 1.4rem; cursor:pointer;
}

/* 小型端末での余白調整 */
@media (max-width:860px){
  .fullform{ padding:12px }
  .fullform__aside{ display:none } /* モバイルはフォームに集中 */
}
/* ===== Full-screen Request Form (説明上 / フォーム下) ===== */
.fullform{background:linear-gradient(180deg,#f7f5ff 0%,#fff 40%);display:flex;justify-content:center;padding:clamp(16px,3vw,32px)}
.fullform__wrap{width:min(800px,100%);display:flex;flex-direction:column;gap:24px}
.fullform__desc,.fullform__card{background:#fff;border:1px solid #8551ce;border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(20px,3vw,28px)}
.fullform__desc h1{margin:0 0 8px;font-size:clamp(22px,3vw,28px);color:var(--brand-ink)}
.fullform__desc p{margin:0 0 10px;color:#374151;line-height:1.7}
.fullform__desc ul{margin:0;padding-left:18px;color:#4b5563;line-height:1.8}
.ff__form{width:100%}
.ff__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.ff__grid{grid-template-columns:1fr}}
.ff__row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ff__label{font-weight:700;color:var(--ink);font-size:.95rem;text-align: left;}
.ff__label::before{content: "　";}
.req{display:inline-block;font-size:.75rem;color:#fff;background:var(--brand);border-radius:999px;padding:.1rem .45rem;margin-right:.4rem;vertical-align:middle}
.ff__input,.ff__textarea{width:100%;border:1px solid #a98bd3;border-radius:10px;padding:12px 14px;font-size:1rem;font-family:inherit;background:#fff}
.ff__input:focus,.ff__textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.ff__note{color:var(--sub);font-size:.9rem;margin:4px 0 12px}
.ff__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content: center;}
.ff__submit{background:var(--brand);color:#fff;border:none;border-radius:999px;padding:.9rem 1.4rem;font-weight:800;cursor:pointer}
.ff__submit:hover{background:var(--brand-ink)}
.ff__reset{background:#f1f5f9;color:var(--ink);border:none;border-radius:999px;padding:.9rem 1.4rem;cursor:pointer}
@media (max-width:860px){.fullform__wrap{gap:16px}.fullform__desc,.fullform__card{padding:16px}}
/* ===== スマホ画面イメージ一覧 ===== */
.appshots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0;
}
.appshots__item {
  /* background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius); */
  /* box-shadow: var(--shadow); */
  padding: 12px;
  text-align: center;
}
.appshots__caption {
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 8px;
  font-size: 1rem;
}
.appshots__item img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* レスポンシブ */
@media (max-width:980px) {
  .appshots {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width:640px) {
  .appshots {
    grid-template-columns: 1fr;
  }
}
.filter-glass{
  border-radius: 10px; background: rgba(29, 29, 29, 0.3); border-radius: 10px;     /* 半透明の白 */
}
.filter-glass2{
  border-radius: 10px; background: rgba(193, 188, 196, 0.2);      /* 半透明の白 */
}
    /* backdrop-filter: blur(8px); */
  /* === 別ページリンク用カード === */
/* === リンクカード基本 === */
article.card-link {
  position: relative;
  overflow: hidden;
  border: 2px solid #1e0d58f7;        /* 通常カードより明るい紫の枠 */
  border-radius: 12px;
  background: linear-gradient(180deg,#fff,#faf8ff);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
}

/* 軽い影を常時付与 */
article.card-link {
  box-shadow: 0 2px 6px rgba(107,76,230,0.08);
}

/* ホバー時の反応 */
article.card-link:hover {
  transform: translateY(-3px);
  border-color: #6b4ce6;
  box-shadow: 0 6px 14px rgba(107,76,230,0.25);
}

/* 透明なクリック領域をカード全面に拡張 */
article.card-link a.stretched-link::after{
  content:"";
  position:absolute;
  inset:0;           /* aの外側まで広げるために次の指定を使う */
  top:-9999px; left:-9999px; right:-9999px; bottom:-9999px;
  z-index:0;
}

/* 視覚的な矢印ヒント（任意） */
article.card-link a.stretched-link::before{
  content:"→";
  order:2;
  opacity:.75;
  transition:transform .2s ease, opacity .2s ease;
}
article.card-link:hover a.stretched-link::before{
  transform:translateX(3px);
  opacity:1;
}

/* レイアウト */
.bottom-cta{
  margin-top: 48px;
  padding: 32px 0;
  border-top: 1px solid #eee;
  background: #faf8ff;
}
.bottom-cta__grid{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr 320px; /* 左広め 右メニュー固定幅 */
  gap: 24px;
}
.bottom-cta__heading{
  font-size: 1.1rem;
  margin: 0 0 12px;
}

/* 左：カード群 */
.product-cards{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
@media (max-width: 999px){
  .bottom-cta__grid{ grid-template-columns: 1fr; }
  .product-cards{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 599px){
  .product-cards{ grid-template-columns: 1fr; }
}

/* リンクカード（前回の.stretched-link方式に整合） */
article.card-link{
  position: relative;
  overflow: hidden;
  border: 2px solid #b6a3f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(107,76,230,.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
  padding: 12px;
}
article.card-link:hover{
  transform: translateY(-3px);
  border-color: #6b4ce6;
  box-shadow: 0 8px 18px rgba(107,76,230,.22);
}
.card-link__img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  background: #f2f2f5;
}
.card-link__title{
  font-size: 1rem;
  margin: 10px 0 4px;
}
.card-link__text{
  font-size: .9rem;
  color: #555;
  margin: 0 0 8px;
}

/* テキスト表示 + 全面クリック化 */
article.card-link .stretched-link{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  color: #6b4ce6;
  text-decoration: none;
}
article.card-link .stretched-link::before{
  content:"→";
  opacity:.8;
  transition: transform .2s ease, opacity .2s ease;
}
article.card-link:hover .stretched-link::before{
  transform: translateX(3px);
  opacity:1;
}
/* クリック領域拡張 */
article.card-link .stretched-link::after{
  content:"";
  position:absolute;
  top:-9999px; left:-9999px; right:-9999px; bottom:-9999px;
  z-index:0;
}

/* 右：ページ内メニュー */
.page-menu{
  position: sticky;
  top: 20px;
  align-self: start;
  border: 1px solid #e6e0ff;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.page-menu__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.page-menu__list a{
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  transition: background .15s ease, color .15s ease;
}
.page-menu__list a:hover{
  background: #f3efff;
  color: #4c36c9;
}
/* 任意：現在位置強調用クラス */
.page-menu__list a.is-active{
  background: #e7e0ff;
  color: #3a29a8;
  font-weight: 600;
}
/* 親を基準にする */
article.card-link{ position:relative; overflow:hidden; }

/* テキストは表示したまま */
article.card-link a.stretched-link{
  position:relative; /* テキストのレイヤー */
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-weight:600;
  text-decoration:none;
}

/* 透明なクリック領域をカード全面に拡張 */
article.card-link a.stretched-link::after{
  content:"";
  position:absolute;
  inset:0;           /* aの外側まで広げるために次の指定を使う */
  top:-9999px; left:-9999px; right:-9999px; bottom:-9999px;
  z-index:0;
}

/* 視覚的な矢印ヒント（任意） */
article.card-link a.stretched-link::before{
  content:"→";
  order:2;
  opacity:.75;
  transition:transform .2s ease, opacity .2s ease;
}
article.card-link:hover a.stretched-link::before{
  transform:translateX(3px);
  opacity:1;
}
/* デフォルト非表示（SP/タブレット） */
.local-nav{ display:none; }

/* PCのみ表示 */
@media (min-width: 1024px){
  .local-nav{
    display:block;
    /* border-top:1px solid #9c81c1;
    border-bottom:1px solid #9c81c1; */
    border-radius: 10px;
    /* background:#faf8ff; */
    padding:12px 0;
 
  }
  .local-nav__list{
    max-width:1100px;
    margin:0 auto;
    padding:0 16px;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
  }
  .local-nav__list a{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    border:1px solid #b6a3f2;
    border-radius:9999px;
    text-decoration:none;
    color:#4c36c9;
    font-weight:600;
    transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .local-nav__list a:hover{
    background:#eae4ff;
    box-shadow:0 2px 8px rgba(107,76,230,.18);
    transform:translateY(-1px);
  }
  /* 現在ページ強調用クラス */
  .local-nav__list a.is-current{
    background:#6b4ce6; color:#fff; border-color:#6b4ce6;
  }
}
/* ===== 棚卸比較テーブル ===== */
.table-wrapper {
  overflow-x: auto;
  margin: 0 auto;
  max-width: 900px;
}
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  text-align: center;
  font-size: 0.95rem;
  background: #fff;
}
.compare-table th,
.compare-table td {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}
.compare-table thead th {
  background: rgb(179, 142, 246);
  color: #fff;
  font-weight: 700;
}
.compare-table tbody th {
  background: #f4f1ff;
  text-align: left;
  font-weight: 600;
  color: #333;
}
.compare-table td {
  background: #fafafa;
}

.compare-table td:contains("◎") { font-weight: 700; color: #4caf50; }
.compare-table td:contains("○") { color: #2196f3; }
.compare-table td:contains("△") { color: #ff9800; }
.compare-table td:contains("×") { color: #e53935; }

@media (max-width:768px){
  .compare-table th, .compare-table td {
    font-size: 0.85rem;
    padding: 8px;
  }
}
/* ===== 棚卸比較テーブル（レスポンシブ対応） ===== */
.table-wrapper { overflow-x:auto; margin:0 auto; max-width:900px; }
.compare-table { width:100%; border-collapse:separate; border-spacing:4px; text-align:center; font-size:0.95rem; background:#fff; }
.compare-table th, .compare-table td { padding:10px; border:1px solid #ddd; border-radius:6px; }
.compare-table thead th { background:rgb(179,142,246); color:#fff; font-weight:700; }
.compare-table tbody th { background:#f4f1ff; text-align:left; font-weight:600; color:#333; }
.compare-table td { background:#fafafa; }



/* スマホ用カード表示 */
/* .for-mobile { display: none; } */
.compare-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}
.compare-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--brand-ink);
}
.compare-card p {
  margin: 4px 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.compare-card p strong {
  display: inline-block;
  width: 6.5em;
}

/* 表示切替 */
/* PC/タブレットで表示 */
.for-desktop { display:block; }
.for-mobile  { display:none;  }

@media (max-width:860px){
  .for-desktop { display:none !important; } /* ← PC用だけ消す */
  .for-mobile  { display:block !important; }/* ← モバイル用だけ出す */
}
/* スマホ表：横スクロール＋カテゴリ帯 */
.only-mobile{display:none}
@media (max-width:860px){.only-mobile{display:block}}

.mtable-wrap{display:grid;gap:14px}
.mgroup{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.mgroup__head{background:#e06b6b;color:#fff;font-weight:800;text-align:center;padding:8px 10px}

.mtable{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(#fff7d9,#fff);padding:8px}
.mtable table{min-width:640px;border-collapse:separate;border-spacing:0;width:100%}
.mtable thead th{position:sticky;top:0;background:#f7f3ff;color:var(--brand-ink);font-weight:700;z-index:1}
.mtable th,.mtable td{padding:10px 12px;border-bottom:1px solid #e5e7eb;text-align:center}
.mtable tbody th.col--term{background:#fde7f2;text-align:left;font-weight:700;width:36%}

.mtable td.is-ours{font-weight:800;border-left:2px solid var(--accent);border-right:2px solid var(--accent)}
/* 記号色 */
/* .mtable td:contains("◎"){color:#2e7d32}
.mtable td:contains("○"){color:#1e88e5}
.mtable td:contains("△"){color:#ef6c00}
.mtable td:contains("×"){color:#c62828} */


/* 表示切替 */
@media (max-width:860px){
  .for-desktop{display:none}
  .for-mobile{display:block}
}
/* スマホ比較（縦リスト）。PC/タブレットでは非表示 */
.only-mobile{display:none}
@media (max-width:860px){.only-mobile{display:block}}

#comparison-sp-panels .mgroup{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
  margin-bottom:16px;
  overflow:hidden;
}
#comparison-sp-panels .mgroup__head{
  background:var(--brand);
  color:#fff;
  font-weight:800;
  text-align:center;
  padding:10px 12px;
  letter-spacing:.03em;
}
#comparison-sp-panels .mgroup.mgroup--accent .mgroup__head{
  background:var(--brand-ink);
}
#comparison-sp-panels .mlist{
  list-style:none; margin:0; padding:0;
  background:linear-gradient(#faf8ff,#fff);
}
#comparison-sp-panels .mlist li{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:12px; align-items:center;
  padding:12px;
  border-top:1px solid #eee;
}
#comparison-sp-panels .mlist li:first-child{border-top:none}
#comparison-sp-panels .mlist__th{
  background:#f0e9ff;
  color:#4b5563;
  font-weight:700;
  border-radius:8px;
  padding:8px 10px;
  text-align:center;
}
#comparison-sp-panels .mlist__td{
  color:#111827;
  font-weight:700;
}

/* ===== 比較表（棚卸方法の比較） ===== */

/* ラッパー */
.table-wrapper{overflow-x:auto}

/* テーブル共通 */
.compare-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
  text-align:center;
  font-size:.95rem;
}

/* 見出し */
.compare-table thead th{
  background:var(--brand);
  color:#fff;
  font-weight:800;
  padding:12px;
}

/* 項目列 */
.compare-table tbody th{
  background:#f3f0ff;
  text-align:left;
  font-weight:700;
  color:var(--brand-ink);
  width:28%;              /* PC幅の項目列 */
  white-space:nowrap;
}

/* データ列 */
.compare-table td{
  padding:12px;
  border-top:1px solid #e5e7eb;
  background:#fff;
  white-space:nowrap;
}
#comparison-sp-panels .mlist__td:contains("◎"){color:#2e7d32}
#comparison-sp-panels .mlist__td:contains("○"){color:#1e88e5}
#comparison-sp-panels .mlist__td:contains("△"){color:#ef6c00}
#comparison-sp-panels .mlist__td:contains("×"){color:#c62828}

/* 備考 */
.table-wrapper .note{margin-top:8px;color:#6b7280;font-size:.9rem}

/* ===== スマホ最適化（横幅を収める） ===== */
@media (max-width:860px){
  .compare-table{
    table-layout:fixed;   /* 列幅を固定して折り返し防止 */
    font-size:0.85rem;
  }
  .compare-table thead th{padding:8px}
  .compare-table tbody th{
    width:30%;            /* 項目列をさらに狭く */
    padding:6px 8px;
  }
  .compare-table td{
    padding:6px 8px;
  }
  .compare-table th,
  .compare-table td{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .font-s{
    font-size: xx-small;
  }
}
@media (max-width:480px){
  .compare-table{
    font-size:7rem;
  }
}

@media (min-width:480px){
  .sl-view{display: none;}
}