@charset "utf-8";
:root{
      /* 仮：サクっとPOP（オレンジ系） */
      --brand-900:#054c48;
      --brand-700:#08726d;
      --brand-600:#098a83;
      --brand-500:#0ba29a;
      --brand-200:#c4eeec;

      --ink:#0f172a;
      --muted:#475569;
      --line:#e2e8f0;
      --bg:#ffffff;
      --bg2:#f8fafc;
      --white:#f3f3f3;

      --radius:18px;
      --shadow: 0 14px 30px rgba(2, 6, 23, .10);
      --shadow2: 0 10px 20px rgba(2, 6, 23, .08);
      --max: 1100px;
    }
   html, body{
  overflow-x: hidden;
}
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN","Noto Sans JP", "Yu Gothic", sans-serif;
      color:var(--ink);
      background:linear-gradient(180deg, #fff 0%, var(--bg2) 65%, #fff 100%);
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}

    .container{max-width:var(--max); margin:0 auto; padding:0 20px;}
    .container-hero{
      max-width:var(--max); margin:0 auto; 
      padding:0 20px;  
      background: url(../images/tejun-hero.png);
      background-repeat: no-repeat;
      background-position: center;
      max-width: 1100px;
      margin: 0 auto;}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      height:46px; padding:0 18px;
      border-radius:999px; border:1px solid transparent;
      font-weight:800; letter-spacing:.02em;
      transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
      cursor:pointer;
      user-select:none;
    }
    .btn:active{transform:translateY(1px)}
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--brand-700), var(--brand-500));
      box-shadow: 0 12px 24px rgba(11,162,154,.25), 0 10px 22px rgba(0,0,0,.10);
    }
    .btn-primary:hover{filter:brightness(1.02)}
    .btn-ghost{
      color:var(--brand-700);
      background:#fff;
      border-color:rgba(8,114,109,.25);
      box-shadow: var(--shadow2);
    }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(11,162,154,.10);
      border:2px solid rgba(11,162,154,.25);
      color:var(--brand-700);
      font-weight:800;
      font-size:12px;
      background-color: #fff;
    }
    .dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--brand-500);
      box-shadow:0 0 0 4px rgba(11,162,154,.14);
    }

    /* ===== Header (PC menu) ===== */
    header{
      position:sticky; top:0; z-index:999;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,.82);
      border-bottom:3px solid var(--brand-500);
    }
    .head{
      display:flex; align-items:center; justify-content:space-between;
      height:72px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:900;
      letter-spacing:.02em;
    }
    /* .logo{
      width:38px; height:38px; border-radius:12px;
      background: radial-gradient(circle at 30% 30%, #fff 0%, var(--brand-200) 45%, rgba(11,162,154,.18) 100%),
                  linear-gradient(135deg, var(--brand-700), var(--brand-500));
      box-shadow: 0 12px 24px rgba(11,162,154,.25);
      position:relative;
      overflow:hidden;
    } */
    .logo:after{
      content:"";
      position:absolute; inset:-20%;
      background: linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0));
      transform: rotate(15deg);
    }
    .brand small{
      display:block;
      font-weight:800;
      font-size:12px;
      color:var(--muted);
      margin-top:2px;
      letter-spacing:0;
    }
    nav{
      display:flex; align-items:center; gap:18px;
      font-weight:800;
      color:#0b1224;
    }
    nav a{
      padding:10px 10px;
      border-radius:12px;
      color:#0b1224;
      opacity:.92;
    }
    nav a:hover{
      background:rgba(2,6,23,.04);
    }
    .head-cta{display:flex; gap:10px; align-items:center}

    /* ===== Hero ===== */
    .hero{
      position:relative;
      overflow:hidden;
      /* padding: 46px 0 24px; */
      z-index: 100;
      max-width: 1100px;
      margin: 0 auto;
    }
    .hero:before{
      content:"";
      position:absolute; inset:-120px -120px auto -120px;
      height:530px;
      background: linear-gradient(rgba(47, 46, 46, 0.4), rgba(0, 0, 0, 0.6));
      filter: blur(2px);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      padding: 40px 0;
      grid-template-columns: 1fr .95fr;
      gap:22px;
      align-items:stretch;
      z-index: 10000;
    }
    @media screen and (max-width:768px) {
      .hero{
        padding: 0;
      }
      .hero:before{
      content:"";
      position:absolute; inset:-200px -120px auto -120px;
      height:530px;
      background: linear-gradient(rgba(47, 46, 46, 0.4), rgba(0, 0, 0, 0.6));
      filter: blur(2px);
      pointer-events:none;
    }
    }

      @media screen and (max-width:512px) {
        .hero:before{
          position:absolute; inset:-180px -120px auto -120px;
        }
      }

        @media screen and (max-width:468px) {
        .hero:before{
          position:absolute; inset:-140px -120px auto -120px;
        }
        }

        @media screen and (max-width:308px) {
         .hero:before{
          position:absolute; inset:-100px -120px auto -120px;
        }
        }


    .hero h1{
      margin:14px 0 10px;
      font-size: clamp(28px, 3.2vw, 42px);
      line-height:1.15;
      letter-spacing:-.01em;
      color: var(--white);
    }
    .lead{
      margin:0 0 18px;
      color:var(--white);
      font-size:16px;
      line-height:1.75;
      max-width: 56ch;
    }
    .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin: 16px 0 18px}
    .trust{
      display:flex; gap:12px; flex-wrap:wrap;
      margin-top: 10px;
      color:var(--muted);
      font-weight:800;
      font-size:12px;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 12px;
      border:1px solid var(--line);
      border-radius:999px;
      background: rgba(255,255,255,.75);
    }
    .pill b{color:#0b1224}
    .hero-card{
      /* border:1px solid var(--line); */
      border-radius: var(--radius);
      /* background: rgba(255,255,255,.86); */
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero-card .topbar{
      display:flex; gap:8px; align-items:center;
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.7));
    }
    .mini-dot{width:10px;height:10px;border-radius:50%; background:#e2e8f0}
    .mini-dot:nth-child(1){background:#ffb4b4}
    .mini-dot:nth-child(2){background:#ffd79b}
    .mini-dot:nth-child(3){background:#b9f6ca}
    .screen{
      padding:16px;
      display:grid;
      gap:12px;
    }
    .screen .panel{
      border:1px solid var(--line);
      border-radius:16px;
      background: #fff;
      padding:12px;
      box-shadow: 0 8px 18px rgba(2,6,23,.06);
    }
    .panel .row{display:flex; gap:10px; align-items:center}
    .avatar{
      width:44px;height:44px;border-radius:14px;
      background: linear-gradient(135deg, rgba(11,162,154,.22), rgba(11,162,154,.06));
      border:1px solid rgba(11,162,154,.22);
      flex:0 0 auto;
    }
    .lines{flex:1}
    .line{
      height:10px; border-radius:999px;
      background:#e2e8f0;
      margin:7px 0;
    }
    .line.w{width:70%}
    .line.m{width:52%}
    .line.s{width:36%}

    .kpi{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:10px;
      margin-top: 10px;
    }
    .kpi .panel{padding:12px}
    .kpi .num{font-weight:900; font-size:18px}
    .kpi .cap{font-size:12px; color:var(--muted); font-weight:800}

    /* ===== Section common ===== */
    section{padding: 44px 0;}
    .sec-head{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:16px; margin-bottom: 18px;
    }
    .sec-head h2{
      margin:0;
      font-size: clamp(20px, 2.4vw, 28px);
      letter-spacing:-.01em;
    }
    .sec-head p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      max-width: 62ch;
      font-weight:600;
    }

    /* ===== Select (4 cards) ===== */
    .select{
      background:linear-gradient(180deg, var(--bg2), #fff);
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .grid4{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:14px;
    }
    .card{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:#fff;
      box-shadow: var(--shadow2);
      padding:16px;
      position:relative;
      overflow:hidden;
      transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 34px rgba(2,6,23,.12);
      border-color: rgba(11,162,154,.30);
    }
    .card .ic{
      width:46px;height:46px;border-radius:16px;
      display:grid; place-items:center;
      background: rgba(11,162,154,.10);
      border:1px solid rgba(11,162,154,.22);
      color: var(--brand-700);
      font-weight:900;
    }
    .card h3{
      margin:12px 0 6px;
      font-size:16px;
      letter-spacing:-.01em;
    }
    .card p{
      margin:0;
      color:var(--muted);
      line-height:1.7;
      font-weight:600;
      font-size:13px;
    }
    .card .go{
      margin-top:12px;
      display:inline-flex;
      gap:8px;
      align-items:center;
      color: var(--brand-700);
      font-weight:900;
      font-size:13px;
    }
    .arrow{
      width:18px;height:18px;border-radius:6px;
      display:grid; place-items:center;
      background: rgba(11,162,154,.14);
      border:1px solid rgba(11,162,154,.22);
    }

    /* ===== Detail blocks ===== */
    .detail{
      background:#fff;
    }
    .detail.alt{background:var(--bg2)}
    .two{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:18px;
      align-items:center;
    }
    .shot{
      border-radius: var(--radius);
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.8));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .shot .topbar{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center}
    .shot .body{padding:16px}
    .mock{
      border:1px solid var(--line);
      border-radius: 16px;
      background:#fff;
      padding:14px;
      box-shadow: 0 8px 18px rgba(2,6,23,.06);
    }
    .mock .big{
      height:14px; border-radius:999px; background:#e2e8f0; width:78%;
    }
    .mock .small{
      height:10px; border-radius:999px; background:#e2e8f0; width:52%; margin-top:10px;
    }
    .mock .gridbtn{
      margin-top:12px;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:10px;
    }
    .chip{
      height:38px;border-radius:14px;background:rgba(11,162,154,.10);
      border:1px solid rgba(11,162,154,.22);
      display:flex;align-items:center;justify-content:center;
      font-weight:900;color:var(--brand-700);
      font-size:12px;
    }

    .copy h3{
      margin:0 0 10px;
      font-size:22px;
      letter-spacing:-.01em;
    }
    .copy p{
      margin:0 0 14px;
      color:var(--muted);
      line-height:1.85;
      font-weight:600;
    }
    .list{
      display:grid;
      gap:10px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .li{
      display:flex; gap:10px; align-items:flex-start;
      padding:12px 12px;
      border:1px solid var(--line);
      border-radius:16px;
      background: rgba(255,255,255,.85);
    }
    .check{
      width:22px;height:22px;border-radius:8px;
      background: rgba(11,162,154,.14);
      border:1px solid rgba(11,162,154,.22);
      flex:0 0 auto;
      display:grid; place-items:center;
      color: var(--brand-700);
      font-weight:900;
      margin-top:2px;
    }
    .li b{display:block; margin-bottom:2px}
    .li span{color:var(--muted); font-weight:650; line-height:1.7}

    /* ===== System diagram ===== */
    .system{
      background: linear-gradient(180deg, #fff, var(--bg2));
      border-top:1px solid var(--line);
    }
    .diagram{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:#fff;
      box-shadow: var(--shadow);
      padding:18px;
      overflow:hidden;
      margin: 0 auto;
    }
    .nodes{
      display:grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items:center;
      gap:12px;
    }
    .node{
      border:1px solid var(--line);
      border-radius: 16px;
      padding:14px 12px;
      background: rgba(255,255,255,.9);
    }
    .node h4{margin:0 0 6px;font-size:14px}
    .node p{margin:0;color:var(--muted);font-weight:650;line-height:1.65;font-size:12px}
    .pipe{
      height:2px; background: linear-gradient(90deg, rgba(11,162,154,.45), rgba(15,23,42,.10));
      border-radius:999px;
      position:relative;
    }
    .pipe:after{
      content:"";
      position:absolute; right:-2px; top:50%;
      width:10px; height:10px;
      background: rgba(11,162,154,.55);
      border-radius: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 0 4px rgba(11,162,154,.12);
    }
    .note{
      margin-top:14px;
      padding:12px 14px;
      border-radius:16px;
      background: rgba(11,162,154,.08);
      border:1px solid rgba(11,162,154,.18);
      color: var(--brand-900);
      font-weight:750;
      line-height:1.8;
      font-size:13px;
      text-align: center;
    }

    /* ===== Footer ===== */
    footer{
      border-top:1px solid var(--line);
      background: rgba(255,255,255,.9);
      padding: 18px 0;
      color: var(--muted);
      font-weight:650;
    }
    .foot{
      display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap;
      align-items:center;
    }
    .foot a{padding:8px 10px;border-radius:12px}
    .foot a:hover{background:rgba(2,6,23,.04)}

    /* ===== Responsive ===== */
    @media (max-width: 980px){
      nav{gap:8px}
      nav a{padding:10px 8px}
      .nodes{grid-template-columns: 1fr; }
      .pipe{display:none}
    }
    @media (max-width: 768px){
      nav{display:none}
      .head{height:66px}
      .hero-grid{grid-template-columns: 1fr; padding: 0;}
      .badge{margin: 5px;}
      .grid4{grid-template-columns: repeat(2, 1fr)}
      .two{grid-template-columns: 1fr}
      .head-cta .btn-ghost{display:none}
    }
    @media (max-width: 420px){
      .grid4{grid-template-columns: 1fr}
      .hero-actions .btn{width:100%}
    }

    /* ===== PC Dropdown Menu ===== */
.pc-nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
  align-items:center;
}

.pc-nav-list > li{
  position:relative;
}

.pc-nav-list a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
}

.pc-nav-list a:hover{
  background:rgba(11,162,154,.08);
}

/* Dropdown */
.has-dropdown > .dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:200px;
  background:#fff;
  border:1px solid rgba(11,162,154,.25);
  border-radius:14px;
  box-shadow:0 16px 32px rgba(0,0,0,.12);
  padding:8px;
  display:none;
  z-index:1000;
}

.has-dropdown:hover > .dropdown{
  display:block;
}

.dropdown li{
  list-style:none;
}

.dropdown a{
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  white-space:nowrap;
}

.dropdown a:hover{
  background:rgba(11,162,154,.12);
}
/* ===== Dropdown arrow (left) ===== */
.has-dropdown > a{
  display:flex;
  align-items:center;
  gap:6px;
}

/* ▼アイコン */
.nav-arrow{
  font-size:11px;
  line-height:1;
  color:rgb(11,162,154);
  transition:transform .15s ease;
}

/* hover時に▼を回転（任意） */
.has-dropdown:hover .nav-arrow{
  transform:rotate(180deg);
}

/* SPではPCプルダウンを無効化 */
@media (max-width:768px){
  .pc-nav{display:none;}
}

/* ===== Hamburger (SP) ===== */
.hm-btn{
  display:none; /* SPのみ表示 */
  width:46px; height:46px;
  border:1px solid rgba(11,162,154,.28);
  background:#fff;
  border-radius:14px;
  box-shadow: 0 10px 20px rgba(2,6,23,.08);
  cursor:pointer;
  position:relative;
}
.hm-icon{display:grid; gap:6px; align-content:center; justify-items:center;}
.hm-icon span{
  width:20px; height:2px;
  background: rgb(11,162,154);
  border-radius:999px;
  display:block;
}
.hm-overlay{ opacity:0; transition: opacity .28s ease; }
.hm-overlay.is-open{ opacity:1; }

/* Overlay */
.hm-overlay{
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  position:fixed; inset:0;
  background: rgba(2,6,23,.45);
  z-index:2000;
}

/* Drawer */
.hm-drawer{
  position:fixed;
  top:0; right:0;
  width:min(86vw, 380px);
  height:100vh;
  background:#fff;
  border-left:1px solid rgba(11,162,154,.22);
  z-index:2100;

  transform: translateX(100%);

  /* ★閉じる時に一瞬で消えないようにする */
  visibility: hidden;
  pointer-events: none;

  /* transformは即アニメ、visibilityはアニメ時間ぶん遅らせて隠す */
  transition:
    transform .28s ease,
    visibility 0s linear .28s;

  box-shadow: -18px 0 40px rgba(2,6,23,.18);
  display:flex;
  flex-direction:column;
}

.hm-drawer.is-open{
  transform: translateX(0);

  /* 開いている間は表示 */
  visibility: visible;
  pointer-events: auto;

  /* 開くときはvisibilityを遅らせない（即表示） */
  transition:
    transform .28s ease,
    visibility 0s linear 0s;
}


.hm-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px;
  border-bottom:1px solid #e2e8f0;
}
.hm-title{font-weight:900;}
.hm-close{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(11,162,154,.24);
  background:#fff;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

.hm-nav{padding:10px 12px 18px; overflow:auto;}
.hm-link, .hm-sublink{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  font-weight:800;
  color:#0f172a;
}
.hm-link:hover, .hm-sublink:hover{
  background: rgba(11,162,154,.10);
}
.hm-sublink{
  margin-left:8px;
  font-weight:750;
  color:#334155;
  border:1px solid rgba(11,162,154,.14);
  background: rgba(11,162,154,.05);
}

/* Accordion */
.hm-acc-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-radius:12px;
  border:none;
  background:transparent;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
}
.hm-acc-btn:hover{background: rgba(11,162,154,.08);}
.hm-acc-arrow{
  color: rgb(11,162,154);
  font-size:12px;
  transition: transform .18s ease;
}
.hm-acc-btn[aria-expanded="true"] .hm-acc-arrow{
  transform: rotate(180deg);
}
.hm-acc-panel{
  max-height:0;
  overflow:hidden;
  transition: max-height .22s ease;
  padding:0 6px;
}
.hm-acc-panel.is-open{
  /* JSで中身の高さに合わせてmax-heightを設定 */
}

/* CTA強調（任意） */
.hm-cta{
  margin-top:10px;
  color:#fff;
  background: linear-gradient(135deg, rgb(11,162,154), rgba(11,162,154,.80));
}

/* SP表示：右上に配置 */
@media (max-width:768px){
  /* PC nav / CTA の既存非表示があるならそのままでOK */
  .hm-btn{display:inline-flex; align-items:center; justify-content:center;}
  /* 右上にしたい場合：ヘッダーの右側に置いた前提。必要なら margin-left:auto を当てる */
  .hm-btn{margin-left:auto;}
}
@media (min-width:769px){
    .sp-view{
        display: none;
    }
}
/* ===== Hamburger menu: vertical stack ===== */
.hm-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hm-link,
.hm-acc-btn{
  width:100%;
}

.price3-area{
  max-width:1100px;
  margin:0 auto;
  padding:80px 20px;
  text-align:center;
}

.price3-title{
  font-size:30px;
  font-weight:800;
  margin-bottom:10px;
}

.price3-lead{
  color:#555;
  margin-bottom:50px;
}

.price3-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.price3-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.price3-head{
  padding:24px 20px;
  background:#f0fdfa;
}

.price3-head h3{
  font-size:22px;
  margin:8px 0 4px;
}

.price3-head p{
  font-size:14px;
  color:#555;
}

.price3-label{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  color:rgb(11,162,154);
}

.price3-badge{
  display:inline-block;
  background:rgb(11,162,154);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
}

.price3-body{
  padding:24px 20px;
  /* text-align:left; */
  text-align: center;
  flex-grow:1;
}

.price3-body ul{
  list-style:none;
  padding:0;
  margin:0;
}

.price3-body li{
  padding:8px 0;
  border-bottom:1px solid #eee;
  font-size:14px;
}

.price3-total{
  padding:20px;
  background:#fafafa;
  font-size:14px;
}

.price3-total strong{
  display:block;
  font-size:22px;
  color:rgb(11,162,154);
  margin-top:4px;
}

.price3-note{
  margin-top:30px;
  text-align:left;
  font-size:13px;
  color:#555;
}
.shiryou-area{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:stretch;
}
@media screen and (max-width:689px){
 .shiryou-area{
  display: block;
 }
}
/* おすすめ強調 */
/* .price3-card.recommend{
  transform:translateY(-10px);
  border:2px solid rgb(11,162,154);
} */

/* Responsive */
@media (max-width:900px){
  .price3-grid{
    grid-template-columns:1fr;
  }
  .price3-card.recommend{
    transform:none;
  }
}

  :root{
      --brand: rgb(11,162,154);
      --ink:#0f172a;
      --muted:#475569;
      --line:#e2e8f0;
      --bg:#ffffff;
      --bg2:#f8fafc;
      --radius:18px;
      --shadow:0 14px 30px rgba(2,6,23,.10);
      --max:1100px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic", sans-serif;
      color:var(--ink);
      background:linear-gradient(180deg,#fff 0%, var(--bg2) 60%, #fff 100%);
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

    /* ===== Top / Header ===== */
    .topbar{
      position:sticky; top:0; z-index:50;
      background:rgba(255,255,255,.85);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }
    .topbar-inner{
      height:72px;
      display:flex; align-items:center; justify-content:space-between;
      gap:16px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      font-weight:900;
    }
    /* .logo{
      width:40px;height:40px;border-radius:14px;
      background: radial-gradient(circle at 30% 30%, #fff 0%, rgba(11,162,154,.22) 45%, rgba(11,162,154,.06) 100%),
                  linear-gradient(135deg, rgba(11,162,154,.95), rgba(11,162,154,.65));
      box-shadow: 0 12px 24px rgba(11,162,154,.22);
    } */
    .brand small{display:block;font-size:12px;color:var(--muted);font-weight:800;margin-top:2px}
    .nav{
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
      font-weight:800; color:#0b1224;
    }
    .nav a{
      padding:10px 10px;
      border-radius:12px;
    }
    .nav a:hover{background:rgba(2,6,23,.04)}
    .cta{
      display:flex; gap:10px; align-items:center;
    }
    .btn{
      height:42px; padding:0 16px; border-radius:999px;
      display:inline-flex; align-items:center; justify-content:center;
      font-weight:900;
      border:1px solid transparent;
      cursor:pointer;
      user-select:none;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, rgba(11,162,154,.95), rgba(11,162,154,.72));
      box-shadow: 0 14px 28px rgba(11,162,154,.22);
    }
    .btn-ghost{
      color:var(--brand);
      background:#fff;
      border-color: rgba(11,162,154,.25);
      box-shadow: 0 10px 18px rgba(2,6,23,.08);
    }

    /* ===== Hero ===== */
    .hero1{padding:34px 0 12px}
    .hero-grid1{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:18px;
      align-items:stretch;
    }
    .badge1{
      display:inline-flex; align-items:center; gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(11,162,154,.10);
      border:1px solid rgba(11,162,154,.22);
      color:rgba(9,120,114,1);
      font-weight:900;
      font-size:12px;
    }
    .dot1{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(11,162,154,.12)}
    h1{
      margin:12px 0 10px;
      font-size: clamp(26px, 3vw, 40px);
      line-height:1.15;
      letter-spacing:-.01em;
    }
    .lead1{
      margin:0;
      color:var(--muted);
      line-height:1.9;
      font-weight:650;
    }
    .hero-card1{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:rgba(255,255,255,.9);
      box-shadow:var(--shadow);
      overflow:hidden;
      padding: 3%;
    }
    .hero-card1 .head{
      padding:14px 16px;
      border-bottom:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between;
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.85));
      font-weight:900;
    }
    .hero-card1 .body{padding:16px}
    .quick1{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:12px;
    }
    .quick1 a{
      border:1px solid rgba(11,162,154,.18);
      background:rgba(11,162,154,.06);
      border-radius:16px;
      padding:12px 12px;
      font-weight:900;
    }
    .quick a:hover{background:rgba(11,162,154,.10)}
    .quick span{display:block;font-size:12px;color:var(--muted);font-weight:750;margin-top:4px}

    /* ===== Section ===== */
    section.block{padding:28px 0}
    .sec-title{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:14px; margin-bottom:12px;
    }
    .sec-title h2{
      margin:0;
      font-size: clamp(18px, 2.2vw, 26px);
      letter-spacing:-.01em;
    }
    .sec-title p{
      margin:0;
      color:var(--muted);
      font-weight:650;
      line-height:1.7;
      max-width: 68ch;
    }

    .card{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background:#fff;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card-inner{padding:18px}

    /* ===== Keyboard spec ===== */
    .kb-grid{
      display:grid;
      grid-template-columns: 260px 1fr;
      gap:16px;
      align-items:start;
    }
    .kb-img{
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,.9));
      box-shadow: 0 10px 20px rgba(2,6,23,.08);
    }
    .spec{
      display:grid;
      gap:10px;
      margin:0;
    }
    .spec-row{
      display:grid;
      grid-template-columns: 160px 1fr;
      gap:10px;
      padding:12px 12px;
      border:1px solid var(--line);
      border-radius:16px;
      background:rgba(248,250,252,.6);
    }
    .spec-row dt{margin:0;font-weight:900;color:#0b1224}
    .spec-row dd{margin:0;color:var(--muted);font-weight:650;line-height:1.7}

    /* ===== Option parts ===== */
    .opt-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:14px;
    }
    .opt{
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
      overflow:hidden;
      box-shadow: 0 10px 18px rgba(2,6,23,.08);
    }
    .opt .img{
      background:linear-gradient(180deg, rgba(11,162,154,.08), rgba(248,250,252,.9));
      padding:16px;
      display:flex; align-items:center; justify-content:center;
      border-bottom:1px solid var(--line);
    }
    .opt .txt{padding:14px}
    .opt .txt b{display:block;margin-bottom:6px}
    .opt .txt p{margin:0;color:var(--muted);line-height:1.8;font-weight:650;font-size:13px}

    /* ===== Requirements table (responsive) ===== */
    .req{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border-radius:18px;
      border:1px solid var(--line);
      background:#fff;
      box-shadow: var(--shadow);
    }
    .req th, .req td{
      padding:14px 14px;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align:top;
    }
    .req thead th{
      background:rgba(11,162,154,.10);
      font-weight:900;
    }
    .req tbody th{
      width:180px;
      background:rgba(248,250,252,.8);
      font-weight:900;
    }
    .note{
      margin-top:12px;
      padding:12px 14px;
      border-radius:16px;
      background:rgba(11,162,154,.08);
      border:1px solid rgba(11,162,154,.18);
      color:#0b1224;
      line-height:1.85;
      font-weight:650;
      font-size:13px;
    }
    .muted{color:var(--muted)}

    /* ===== Footer ===== */
    footer{
      border-top:1px solid var(--line);
      background:rgba(255,255,255,.9);
      padding:18px 0;
      color:var(--muted);
      font-weight:650;
      margin-top:22px;
    }
    .foot{
      display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap; align-items:center;
    }
    .foot a{padding:8px 10px;border-radius:12px}
    .foot a:hover{background:rgba(2,6,23,.04)}

    /* ===== Responsive ===== */
    @media (max-width: 920px){
      .hero-grid{grid-template-columns:1fr}
      .kb-grid{grid-template-columns:1fr}
      .kb-img{max-width:360px}
      .opt-grid{grid-template-columns:1fr}
      .nav{display:none}
    }
    @media (max-width: 520px){
      .topbar-inner{height:66px}
      .cta .btn-ghost{display:none}
      .quick{grid-template-columns:1fr}
      .spec-row{grid-template-columns: 1fr}
      .req tbody th{width:auto}
      .req th, .req td{padding:12px 12px}
    }
     .muted1{color:var(--muted)}
     .hero1-grid1{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:18px;
      align-items:stretch;
    }

       @media (max-width: 689px){
          .hero1-grid1{
            display: block;
          }
       }


       :root{
  --brand:rgba(11,162,154,.95); --brand-ink:#666; --accent:#0ba29a;;
  --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 }
.req1{
  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 var(--brand-ink);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: "　";}
.req1{display:inline-block;font-size:.95rem;color:#fff;background:var(--brand);border-radius:999px;padding:.3rem .65rem;margin-right:.4rem;vertical-align:middle}
.ff__input,.ff__textarea{width:100%;border:1px solid var(--brand);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;
  }
}

.sk-sp-area{
  border:1px solid #32b9a5;
}

.related-grid {
  display: grid;
  gap: 18px;
  justify-content: center;
}

@media (min-width: 640px) {
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 各カード */
.related-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px 14px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 230px;
}

/* 小さなタグ */
.related-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #4a6fbf;
  background: rgba(102,153,255,0.12);
  border-radius: 999px;
  margin-bottom: 8px;
}

/* タイトル・本文・リンク */
.related-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
}

.related-text {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.6;
  margin-bottom: 10px;
  flex: 1;
}

.related-link {
  font-size: 12px;
  font-weight: 600;
  color: #4a6fbf;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-align: center;
  margin: 0 auto;
}

.related-link::after {
  content: "›";
  font-size: 13px;
  transform: translateY(0.5px);
}

.related-link:hover {
  text-decoration: underline;
}
.center {
    text-align: center;
    display: block;
}
.center-left {
    text-align: left;
    display: inline-block;
}

/* :root{
  --brand: rgb(11,162,154);
  --ink:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --bg:#ffffff;
  --bg2:#f8fafc;
  --radius:18px;
  --shadow:0 14px 30px rgba(2,6,23,.10);
  --max:1100px;
} */
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic", sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#fff 0%, var(--bg2) 60%, #fff 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ===== Header (簡易) ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  height:72px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:900;
}
/* .logo{
  width:40px;height:40px;border-radius:14px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, rgba(11,162,154,.22) 45%, rgba(11,162,154,.06) 100%),
              linear-gradient(135deg, rgba(11,162,154,.95), rgba(11,162,154,.65));
  box-shadow: 0 12px 24px rgba(11,162,154,.22);
} */
.brand small{display:block;font-size:12px;color:var(--muted);font-weight:800;margin-top:2px}

.nav{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-weight:850;
}
.nav a{padding:10px 10px;border-radius:12px}
.nav a:hover{background:rgba(2,6,23,.04)}
.cta{display:flex;gap:10px;align-items:center}
.btn{
  height:42px; padding:0 16px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900;
  border:1px solid transparent;
}
/* .btn-primary{
  color:#fff;
  background:linear-gradient(135deg, rgba(11,162,154,.95), rgba(11,162,154,.72));
  box-shadow: 0 14px 28px rgba(11,162,154,.22);
} */
/* .btn-ghost{
  color:var(--brand);
  background:#fff;
  border-color: rgba(11,162,154,.25);
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
} */

/* ===== Breadcrumb ===== */
.breadcrumb{
  margin:18px 0 0;
  display:flex; flex-wrap:wrap; gap:8px;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
}
.breadcrumb a{color:var(--muted)}
.breadcrumb .sep{opacity:.6}

/* ===== Hero ===== */

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(11,162,154,.12)}
h1{
  margin:12px 0 10px;
  font-size: clamp(24px, 3vw, 38px);
  line-height:1.15;
  letter-spacing:-.01em;
}


/* ===== Layout ===== */
.main{padding:18px 0 64px}
.grid1{
  display:grid;
  /* grid-template-columns: 1fr 340px; */
  gap:18px;
  align-items:start;
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}

/* ===== Steps ===== */
.flow{
  display:grid;
  gap:16px;
}
.flow-block-title{
  display:flex; align-items:center; gap:10px;
  margin:0 0 10px;
  font-size:16px;
  font-weight:950;
}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:72px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}
.steps{
  display:grid;
  gap:12px;
}
.step{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(248,250,252,.55);
  padding:12px;
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:12px;
}
.step-no{
  width:44px;height:44px;border-radius:16px;
  display:grid; place-items:center;
  background:rgba(11,162,154,.12);
  border:1px solid rgba(11,162,154,.22);
  color:rgba(9,120,114,1);
  font-weight:950;
}
.step h4{
  margin:0 0 8px;
  font-size:14px;
  font-weight:900;
  line-height:1.5;
}
.step figure{margin:0}
.step img{
  border-radius:14px;
  border:1px solid rgba(2,6,23,.08);
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
}
.connector{
  display:flex; justify-content:center;
  margin:-4px 0 -2px;
}
.connector span{
  width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;
  background:#fff;
  border:1px solid rgba(11,162,154,.22);
  color:rgba(9,120,114,1);
  box-shadow: 0 10px 18px rgba(2,6,23,.08);
  font-weight:950;
}

/* ===== Side ===== */
.side{
  display:flex;
  gap:14px;
  /* position:sticky; */
  top:92px;
  margin: 0 auto;
}
.side .mini{
  max-width: 600px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow: 0 12px 24px rgba(2,6,23,.08);
}
.mini h3{margin:0 0 8px;font-size:14px;font-weight:950}
.mini p{margin:0;color:var(--muted);font-weight:650;line-height:1.85;font-size:13px}
.mini a{
  display:block;
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(11,162,154,.08);
  border:1px solid rgba(11,162,154,.18);
  font-weight:900;
}
.mini a:hover{background:rgba(11,162,154,.12)}

/* ===== Footer ===== */
footer{
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.9);
  padding:18px 0;
  color:var(--muted);
  font-weight:650;
}
.foot{
  display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap; align-items:center;
}
.foot a{padding:8px 10px;border-radius:12px}
.foot a:hover{background:rgba(2,6,23,.04)}

/* ===== Responsive ===== */
@media (max-width: 768px){
  .grid2{grid-template-columns:1fr}
  .side{display: grid;}
  .nav{display:none}
}
@media (max-width: 520px){
  .topbar-inner{height:66px}
  .cta .btn-ghost{display:none}
  .step{grid-template-columns: 40px 1fr}
  .step-no{width:40px;height:40px;border-radius:14px}
}

/*:: page top ジャンプ ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.to-top{
  color: #098a83;
  position:fixed; right:16px; bottom:16px; z-index:9999;
  width:44px; height:44px; border-radius:999px; border:none;
  background:var(--brand-600); 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-900); }
.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 }
}
/*:: /ジャンプ ::*/