:root{
      --brand:#0ea5e9;            /* メインカラー（変更OK） */
      --brand-ink:#0b78a6;        /* 濃いめの補助色 */
      --bg: #0b0f14;              /* 背景（ダーク寄り） */
      --panel:#0f141b;            /* カード背景 */
      --ink:#e8eef5;              /* 文字色 */
      --muted:#9fb2c7;            /* サブテキスト */
      --ok:#22c55e;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --radius-lg: 22px;
    }
    @media (prefers-color-scheme: light){
      :root{ --bg:#f8fafc; --panel:#ffffff; --ink:#0b1220; --muted:#5b6b7c; }
      body{ background-image: radial-gradient(80vw 50vh at 10% -10%, #c7ebff40, transparent), radial-gradient(60vw 40vh at 90% 0%, #a7f3d040, transparent);}  
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{font-family: "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; 
    background:var(--bg); color:var(--ink); line-height:1.6;
  }
    a{color:#3b82f6; text-decoration:underline; text-underline-offset:0.15em; text-decoration-thickness:1.5px; transition:color .15s ease}
a:hover{color:#2563eb}
a:active{color:#1d4ed8}
a:visited{color:#3b82f6}
    img{max-width:100%; display:block}
    .container{width:min(1100px, 92%); margin-inline:auto}

    /* Header */
    header{position:sticky; top:0; z-index:60; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in oklab, var(--bg) 70%, transparent); border-bottom:1px solid color-mix(in oklab, var(--ink) 15%, transparent);} 
    .nav{display:flex; align-items:center; justify-content:flex-start; gap:.9rem; padding:.9rem 0}
    .logo{display:flex; align-items:center; gap:.7rem; font-weight:700}
    .logo .mark{width:36px; height:36px; border-radius:10px; box-shadow: var(--shadow)}

    /* Buttons */
    .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:12px; font-weight:700; border:1px solid transparent; transition:transform .08s ease, box-shadow .2s ease, background .2s ease}
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{background:linear-gradient(180deg, color-mix(in oklab, var(--brand) 86%, white), var(--brand)); color:#fff; box-shadow:0 8px 24px color-mix(in oklab, var(--brand) 30%, transparent)}
    .btn-ghost{background:transparent; border-color:color-mix(in oklab, var(--ink) 20%, transparent)}

    /* Hamburger */
    .hamburger{appearance:none; background:transparent; border:0; display:inline-grid; gap:4px; padding:8px; border-radius:10px; cursor:pointer}
    .hamburger span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px}
    .hamburger:focus-visible{outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent)}

    /* Drawer */
    .drawer{position:fixed; inset:0 auto 0 0; width:min(320px, 86vw); height:100vh; background:var(--panel); border-right:1px solid color-mix(in oklab, var(--ink) 12%, transparent); box-shadow:var(--shadow); transform:translateX(-102%); transition:transform .25s ease; z-index:80; display:flex; flex-direction:column}
    .drawer.open{transform:translateX(0)}
    .drawer-header{display:flex; align-items:center; justify-content:space-between; padding:14px 14px; border-bottom:1px solid color-mix(in oklab, var(--ink) 12%, transparent)}
    .drawer-header .mini{font-weight:700; display:flex; align-items:center; gap:.6rem}
    .drawer-close{appearance:none; background:transparent; border:0; font-size:24px; line-height:1; color:var(--ink); padding:6px 10px; border-radius:10px; cursor:pointer}
    .drawer-nav{padding:8px 10px 20px; overflow:auto}
    .drawer-group{padding:10px 6px 14px}
    .drawer-cat{font-weight:800; color:var(--muted); letter-spacing:.04em; padding:10px 8px 6px}
    .drawer-list{margin:0; padding:0 0 0 8px; list-style:none}
    .drawer-list li a{display:block; padding:10px 10px; border-radius:10px; border:1px solid transparent}
    .drawer-list li a:hover{background:color-mix(in oklab, var(--ink) 8%, transparent); border-color:color-mix(in oklab, var(--ink) 10%, transparent)}

    /* Backdrop */
    .backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); -webkit-tap-highlight-color:transparent; z-index:70; display:none}
    .backdrop.show{display:block}

    /* Hero */
    .hero{position:relative; overflow:hidden; padding: clamp(16px, 2vw, 100px) 0}
    .hero .grid{display:grid; grid-template-columns: .8fr 1.2fr; gap:min(2vw, 40px); align-items:center}
    .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.86rem; padding:.35rem .6rem; border-radius:999px; background:color-mix(in oklab, var(--brand) 18%, transparent); color:color-mix(in oklab, var(--brand) 90%, white)}


    .comicglass{font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;}
 
    .store-badges{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin-top:.8rem}
    .badge{display:inline-block; padding:0; border:0; border-radius:0; background:transparent; line-height:0}
    .badge svg{width:18px; height:18px}

    .mock{position:relative; border:0; background:none; box-shadow:none; border-radius:0; width:100%;}
    .mock::after{content:none}



    /* Footer */
    footer{padding:40px 0; border-top:1px solid color-mix(in oklab, var(--ink) 14%, transparent); color:var(--muted)}

    /* Responsive */
    @media (max-width: 980px){
      .hero .grid{grid-template-columns: 1fr;}
      .card{grid-column: span 6}
      .shots{grid-template-columns: repeat(2,1fr)}
      .reviews{grid-template-columns: repeat(2,1fr)}
    }
    @media (max-width: 640px){
      .card{grid-column: span 12}
      .shots{grid-template-columns: repeat(2, 1fr)}
      .reviews{grid-template-columns: 1fr}
      .nav-links{display:none}
    }

    /* Accessibility & scroll lock */
    .drawer :focus-visible{outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent); outline-offset:2px}
    body.no-scroll{overflow:hidden}
  
    /* Top-right inline menu */
    .top-links{margin-left:auto;display:flex;gap:1rem;align-items:center;flex-wrap:nowrap}
    .top-links a{font-weight:600;opacity:.92;white-space:nowrap}
    /* 画面幅が足りないときは非表示（左のハンバーガーを利用） */
    @media (max-width: 860px){
      .top-links{display:none}
    }
  
    /* Language switch */
    .lang-switch, .drawer-lang{display:inline-flex;align-items:center;gap:.4rem}
    .drawer-lang{display:flex;padding:10px 14px;border-bottom:1px solid color-mix(in oklab, var(--ink) 12%, transparent)}
    .lang-switch a, .drawer-lang a{font-weight:700;padding:.25rem .55rem;border-radius:999px;border:1px solid transparent;white-space:nowrap}
    .lang-switch a:hover, .drawer-lang a:hover{background:color-mix(in oklab, var(--ink) 8%, transparent);border-color:color-mix(in oklab, var(--ink) 10%, transparent)}
    .lang-switch .sep, .drawer-lang .sep{opacity:.6}
  
    /* Active language state */
    .lang-switch a.is-active, .drawer-lang a.is-active,
    .lang-switch a[aria-current="true"], .drawer-lang a[aria-current="true"]{
      background:color-mix(in oklab, var(--brand) 22%, transparent);
      border-color:color-mix(in oklab, var(--brand) 40%, transparent);
    }
  
    /* More features (clean list) */
    .more-features{margin-top:8px}
    .mf-grid{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
    @media (max-width: 720px){.mf-grid{grid-template-columns:1fr}}
    .mf-item{display:flex;gap:.6rem;align-items:flex-start;background:var(--panel);border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);border-radius:12px;padding:10px 12px}
    .mf-item .tick{line-height:1;color:var(--ok);margin-top:.15rem}
    .mf-item .label{color:var(--ink)}
    .mf-item .sub{display:inline; color:var(--muted)}
    .pill{display:inline-flex;align-items:center;gap:.3rem;padding:.08rem .5rem;border-radius:999px;background:color-mix(in oklab, var(--brand) 28%, transparent);border:1px solid color-mix(in oklab, var(--brand) 40%, transparent);font-size:.75rem;font-weight:700;margin-right:.35rem}
  
    /* Smart FAQ link */
    .faq-cta{margin-top:12px}
    .cta-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:color-mix(in oklab,var(--panel) 92%,transparent);border:1px solid color-mix(in oklab,var(--ink) 12%,transparent);transition:transform .12s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
    .cta-card:hover{transform:translateY(-1px);border-color:color-mix(in oklab,var(--brand) 42%,transparent);box-shadow:0 8px 24px color-mix(in oklab,var(--brand) 20%,transparent)}
    .cta-left{display:flex;align-items:center;gap:10px}
    .cta-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:color-mix(in oklab,var(--brand) 22%,transparent);color:color-mix(in oklab,var(--brand) 92%,white)}
    .cta-text{display:inline-flex;gap:.4rem;align-items:baseline}
    .cta-text .sub{color:var(--muted);margin-left:.25rem}
    .cta-arrow{opacity:.8}
  
    /* Screenshot images */
    .shot img{width:100%;height:100%;object-fit:cover;display:block}
  
    /* Explicit blue link style (apply to <a class="text-link">) */
    a.text-link{
      color:#3b82f6; /* clickable blue */
      text-decoration:underline;
      text-underline-offset:0.15em;
      text-decoration-thickness:1.5px;
      transition:color .15s ease;
    }
    a.text-link:hover{color:#2563eb}
    a.text-link:active{color:#1d4ed8}
    a.text-link:visited{color:#3b82f6} /* keep same color for consistency */
    a.text-link:focus-visible{outline:2px solid #60a5fa; outline-offset:2px; border-radius:4px}
  
    /* Keep original styling where needed */
    a.link-neutral{color:inherit; text-decoration:none}
    a.link-neutral:hover, a.link-neutral:active, a.link-neutral:visited{color:inherit; text-decoration:none}
    a.link-neutral:focus-visible{outline:2px solid color-mix(in oklab, var(--brand) 50%, transparent); outline-offset:2px; border-radius:4px}
  
  
h1 {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}

h1:before, h1:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
h1:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
h1:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}
h2 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  margin-top: 2em;
  background: transparent;/*背景透明に*/
  border-left: solid 5px #2589d0;/*左線*/
}
h3 {
    padding:0 .8em .2em;
    margin-top: 2em;
    border-bottom: 3px dashed #2589d0;
    color: #333333;
}
/* 記事本文などの親に付ける（フロートの回り込みを自動で収める） */
.article {
  display: flow-root;           /* clearfix 代替 */
  container-type: inline-size;  /* コンテナクエリ用 */
  color: black;
}

/* 画像（左寄せ・黒枠・最大幅300px・比率維持） */
.cg-img {
  border: 1px solid #000;       /* 黒枠1px */
  box-sizing: border-box;       /* 枠込みで最大幅を管理 */
  width: 100%;
  max-width: 300px;             /* 通常は 300px、狭い時は縮小 */
  height: auto;                 /* アスペクト比維持 */
  display: block;               /* 行内の隙間を避ける */
}

/* 右側にテキストを回り込ませるためのユーティリティ */
.cg-img--wrap {
  float: none;                  /* 狭い時の初期状態：回り込みなしで下にテキスト */
  margin: 12px 0 12px 0;
}

/* --- コンテナが十分広い時だけ回り込みを有効化 ---
   しきい値 556px = 画像300px + 余白16px + テキスト最小幅240px */
@container (min-width: 556px) {
  .cg-img--wrap {
    float: left;                          /* 右側へ回り込み */
    margin: 0 clamp(12px, 2vw, 16px) 12px 0;  /* 右と下に余白 */
    shape-outside: inset(0 round 4px);    /* 回り込みの角をやわらかく（任意） */
  }
}

/* --- コンテナクエリ非対応ブラウザ向けフォールバック ---
   大まかに画面幅で判定（必要に応じて値を調整） */
@media (min-width: 600px) {
  .cg-img--wrap {
    float: left;
    margin: 0 16px 12px 0;
  }
}

    /* Contact Page */


.intro-list{
  margin: 0 0 24px;
  padding-left: 1.2em;
  color: #6b7280; /* muted */
}
.intro-list li{ margin: .2em 0; }



/* Form */
form{ width: 100%; }
.field{ margin-bottom: 18px; }

label{
  display: inline-block;
  font-weight: 600;
  margin-bottom: 8px;
}

.required{
  display: inline-block;
  margin-left: .5em;
  font-size: .85em;
  color: #ffffff;
  background: #0ea5e9; /* brand */
  padding: .1em .5em;
  border-radius: 999px;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="file"],
textarea{
  width: 100%;
  display: block;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;        /* border */
  border-radius: 12px;
  background: #ffffff;
  color: #1f2937;                    /* text */
  font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease, background .2s ease;
}

input[type="file"]{
  padding: 10px 12px;
}

textarea{
  resize: vertical;
  min-height: 160px;
}

input:focus,
textarea:focus{
  outline: none;
  border-color: #0ea5e9; /* brand */
  box-shadow: 0 0 0 4px rgba(14,165,233,0.35); /* focus ring */
}



/* Actions */
.actions{
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
.btn-primary{
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0ea5e9, #0885bd);
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(14,165,233,.3);
  transition: transform .06s ease, box-shadow .2s ease, filter .15s ease;
}
.btn-primary:hover{ filter: brightness(1.02); }
.btn-primary:active{ transform: translateY(1px); }

/* Note section */
.note-list{
  margin: 8px 0 0;
  padding-left: 1.2em;
}
.note-list li{ margin: .35em 0; }

/* Visually hidden (for accessible headings) */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}