@font-face{
  font-family:"MPLUS1m";
  src:url("fonts/mplus-1m-bold.subset.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NotoSansJP";
  src:url("fonts/noto-sans-jp-japanese-400-normal.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"NotoSansJP";
  src:url("fonts/noto-sans-jp-japanese-700-normal.woff2") format("woff2");
  font-weight:700; font-display:swap;
}

:root{
  /* ---- Color ---- */
  --c-navy:#03429f;
  --c-blue:#2d8bff;
  --c-orange:#dd6915;
  --c-accent:#7cc4ff;
  --c-text:#000;
  --c-card-top:#d5e3e9;
  --c-card-bot:#e4d4e1;
  --c-cmp-bg:#f0f5f8;
  --c-cmp-label:#e5f1ff;
  --c-note:#4d4d4d;
  --c-dash:#bcbec0;
  --c-plan-meta:#eef3f7;

  /* ---- Font（Canva値 pt × 4/3 = px） ---- */
  --f-head:"MPLUS1m",sans-serif;
  --f-body:"NotoSansJP",sans-serif;
  --fs-h1:61.33px;   /* 46pt */
  --fs-h3:32px;      /* 24pt */
  --fs-base:24px;    /* 18pt */

  /* ---- Layout ---- */
  --w-canvas:1440px;
  --r-card:14px;
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:#555;font-family:var(--f-body);color:var(--c-text);-webkit-font-smoothing:antialiased}
ul{list-style:none}


.stage{position:relative;width:var(--w-canvas);margin:0 auto}


/* ================= HERO ================= */
.hero{
  position:relative;
  width:var(--w-canvas);
  height:1283px;
  padding-top:102px;
  overflow:hidden;

  background-color:var(--c-navy);
  background-image:url("img/bg-pattern.svg");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:1440px 1283px;
}
.hero > *{position:relative;z-index:1}
.hero__logo{display:block;margin:0 auto;width:281px;height:66px}

.hero__title{
  font-family:var(--f-head);
  font-weight:700;
  font-size:var(--fs-h1);
  line-height:79px;
  color:#fff;
  text-align:center;
  margin-top:62.25px;
}
.hero__title b{color:var(--c-accent);font-weight:inherit}

.hero__kicker{
  display:block;
  font-family:var(--f-body);
  font-weight:700;
  font-size:20px;
  line-height:1;
  letter-spacing:.08em;
  color:var(--c-accent);
  margin-bottom:24px;
}

/* Canva の約物詰めを手動再現（M+ 1m は palt 非搭載） */
.tp,.tp-r{margin-right:-.45em}

/* ---- 課題カード ---- */
.pains{
  width:1239px;                /* 391×3 + 33×2 */
  margin:172.75px auto 0;
  display:grid;
  grid-template-columns:repeat(3,391px);
  column-gap:33px;
  row-gap:26px;
}

.pain{
  position:relative;
  height:260px;
  border-radius:var(--r-card);
  background:linear-gradient(180deg,var(--c-card-top) 0%,var(--c-card-bot) 100%);
}

/* 白ピル（原本は中央から約4.5px左寄り。実測どおり再現） */
.pain::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:85px;
  width:354px; height:38px;
  background:#fff;
  border-radius:999px;
}

/* ---- イラスト（3x書き出し / 表示は1x換算） ---- */
.pain__fig{position:absolute;z-index:2;pointer-events:none}
.pain:nth-child(1) .pain__fig{width:114.33px;height:128px;    right:14px;top:-41px}
.pain:nth-child(2) .pain__fig{width:183.33px;height:123px;    right:12px;top:-44px}
.pain:nth-child(3) .pain__fig{width:145.67px;height:142.67px; right:4px; top:-58px}
.pain:nth-child(4) .pain__fig{width:146.67px;height:118.67px; right:14px;top:-28px}
.pain:nth-child(5) .pain__fig{width:154px;   height:119.67px; right:14px;top:-23px}
.pain:nth-child(6) .pain__fig{width:107.33px;height:104.33px; right:15px;top:-18px}

.pain__label{
  position:absolute;z-index:3;left:0;right:0;top:70.9px;
  font-weight:700;
  font-size:var(--fs-h3);
  line-height:32px;
  text-align:center;
}

.pain__desc{
  position:absolute;z-index:3;left:26px;top:143.3px;
  font-weight:400;
  font-size:var(--fs-base);
  line-height:33px;
}

/* ================= DAYS =================　*/

.days{
  position:relative;
  width:var(--w-canvas);
  height:586px;
  padding-top:60.25px;
  background-color:#fff;
  background-image:url("img/bg-sugu.svg");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:1440px 596px;
}
.days > *{position:relative;z-index:1}

.days__title{
  font-family:var(--f-head);
  font-weight:700;
  font-size:var(--fs-h1);   /* 61.33px */
  line-height:79px;
  text-align:center;
}

/* ---- 曜日5列 ---- */
.days__list{
  width:1200px;             /* 240 × 5 */
  margin:55.55px auto 0; /* 中央寄せ */
  display:grid;
  grid-template-columns:repeat(5,240px);
}

.day__label{
  font-weight:700;
  font-size:33.33px;        /* 25pt */
  line-height:33.33px;
}

.day__head{
  margin:12.27px 0 0 27px;  /* ラベルより27px右にインデント */
  font-weight:700;
  font-size:24px;           /* 18pt */
  line-height:24px;
}

.day__body{
  margin:28.35px 0 0 27px;
  font-weight:700;
  font-size:17.33px;        /* 13pt */
  line-height:22.7px;
}


/* ---- CTA ---- */
.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  width:414px;
  height:84px;
  margin:110px auto 0;
  background:var(--c-orange);
  border-radius:999px;
  color:#fff;
  text-decoration:none;
}

.cta__text{
  font-weight:700;
  font-size:24px;           /* 18pt */
}

/* icon-arrow.svg が届くまでの暫定 */
.cta__icon{
  width:34px;height:34px;
  border-radius:50%;
  background:#fff;
  position:relative;
}
.cta__icon::after{
  content:"";
  position:absolute;
  left:11px;top:12px;
  width:9px;height:9px;
  border-top:2.5px solid var(--c-orange);
  border-right:2.5px solid var(--c-orange);
  transform:rotate(45deg);
}

/* ================= COMPARE ================= */

.cmp{
  position:relative;
  width:var(--w-canvas);
  height:1495px;                /* y1879 - 3373 */
  padding-top:101.25px;
  background-color:var(--c-cmp-bg);
  background-image:url("img/bg-compare.svg");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:1440px 1495px;
}
.cmp > *{position:relative;z-index:1}

.cmp__title{
  font-family:var(--f-head);
  font-weight:700;
  font-size:var(--fs-h1);       /* 61.33px */
  line-height:79px;
  text-align:center;
}
.cmp__title-blue{color:var(--c-blue)}   /* #2d8bff */

.cmp__lead{
  margin-top:30.55px;
  font-weight:700;
  font-size:24px;               /* 18pt */
  line-height:34px;
  text-align:center;
}

.cmp__inner{
  width:1073px;
  margin:0 auto;
}

/* ---- ■付き小見出し ---- */
.subhead{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:69.1px;
  font-weight:700;
  font-size:var(--fs-h3);       /* 32px */
  line-height:32px;
}
.subhead::before{
  content:"";
  width:26px;height:26px;
  background:var(--c-blue);
  flex:none;
}

/* ---- 比較表 ---- */
.cmp-table{
  margin-top:22.1px;
  width:100%;
  border-collapse:separate;
  border-spacing:2.5px 3px;
}
.cmp-table thead,.cmp-table tbody,.cmp-table tr{display:contents}

.cmp-table{
  display:grid;
  grid-template-columns:repeat(5,212.5px);
  grid-template-rows:83px 79px 67px 83px 67px 67px 80px 81px 67px 68px 83px 80px;
  column-gap:2.5px;
  row-gap:3px;
}

.cmp-table__head,
.cmp-table__label,
.cmp-table__cell{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.cmp-table__head{
  background:var(--c-blue);
  color:#fff;
  font-family:var(--f-body);
  font-weight:700;
  font-size:24px;               /* 18pt */
  line-height:30px;
}

.cmp-table__label{
  background:var(--c-cmp-label);
  font-weight:400;
  font-size:24px;               /* 18pt */
  line-height:30px;
}

.cmp-table__cell{
  background:#fff;
  font-weight:400;
  font-size:32px;               /* 24pt */
  line-height:1;
}

/* ================= FEATURES =================
   背景は白のみ。パズルパターンなし。
   :root に追加：--c-note:#4d4d4d;
   ============================================= */

.feat{
  width:var(--w-canvas);
  height:780px;                /* y3374 - 4113 */
  padding-top:79.9px;          /* セクション上端 → ■見出しの行ボックス上端 */
  background:#fff;
}

.feat__inner{
  width:1073px;
  margin:0 auto;
}

/* .subhead は cmp セクションで定義済みのものを共用。
   ただし margin-top が入っているので、ここでは打ち消す */
.feat .subhead{margin-top:0}

.feat__list{
  margin-top:66.5px;
}

.feat__item{
  display:flex;
  align-items:flex-start;
  gap:66px;                    /* アイコン右端289 → テキスト左端355 */
  padding-left:20px;           /* inner左端183.5 → アイコン左端204 */
}
.feat__item + .feat__item{margin-top:78px}

.feat__icon{
  flex:none;
  width:85px;
  height:84px;
  margin-top:1px;
}

.feat__label{
  color:var(--c-blue);
  font-weight:700;
  font-size:17.33px;           /* 13pt */
  line-height:17.33px;
}

.feat__text{
  margin-top:19.5px;
  font-weight:700;
  font-size:28px;
  line-height:39px;
  color:var(--c-text);
}

.feat__note{
  margin-top:12px;
  font-weight:700;
  font-size:21.33px;
  line-height:29px;
  color:var(--c-note);         /* #4d4d4d */
}
.feat__indent{margin-left:42px}


/* ================= OPS ================= */

.ops{
  position:relative;
  width:var(--w-canvas);
  height:1594px;               /* y4114 - 5707 */
  padding-top:77.9px;
  background-color:var(--c-cmp-bg);
  background-image:url("img/bg-ops.svg");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:1440px 1594px;
}
.ops > *{position:relative;z-index:1}

.ops__inner{
  width:1073px;
  margin:0 auto;
}
.ops .subhead{margin-top:0}

/* ---- 表2 ---- */
.ops-table{
  margin-top:21.1px;
  width:100%;
  border-collapse:separate;
  border-spacing:5px 4px;
}
.ops-table thead,.ops-table tbody,.ops-table tr{display:contents}

.ops-table{
  display:grid;
  grid-template-columns:270px 259px 264px 265px;   /* 実測。等幅ではない */
  grid-template-rows:85px 96px 98px 97px 71px 97px;
  gap:4px 5px;
}

.ops-table__head,
.ops-table__label,
.ops-table__cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.ops-table__head{
  background:var(--c-blue);
  color:#fff;
  font-weight:700;
  font-size:24px;              /* 18pt ※要確認 */
  line-height:30px;
}

.ops-table__label{
  background:var(--c-cmp-label);
  font-weight:400;
  font-size:28px;              /* 21pt ※要確認 */
  line-height:1;
}

.ops-table__cell{
  background:#fff;
  gap:6px;
}
.ops-table__cell--blue{color:var(--c-blue)}

.ops-table__main{
  font-weight:400;
  font-size:36px;              /* ※要確認 */
  line-height:1;
}
.ops-table__sub{
  font-weight:400;
  font-size:21.33px;           /* 16pt */
  line-height:1;
  color:var(--c-text);
}
.ops-table__cell--blue .ops-table__sub{color:var(--c-text)}

.ops-table__mark{
  font-weight:400;
  font-size:21.33px;           /* ※要確認。表1の○×より小さい */
  line-height:1;
}

/* ================= 便利な機能（.ops セクション内） =================
   section-ops.css の末尾に追記。
   :root に追加：--c-dash:#bcbec0;
   ================================================================== */

.ops__title{
  margin-top:105.25px;
  font-family:var(--f-head);
  font-weight:700;
  font-size:var(--fs-h1);      /* 61.33px */
  line-height:79px;
  text-align:center;
}
.ops__title-blue{color:var(--c-blue)}

/* ---- カードのモザイク配置 ---- */
.uicards{
  position:relative;
  width:1138px;
  height:576px;
  margin:67.75px auto 0;
}

.uicard{position:absolute}
.uicard--a{left:0;    top:0;    width:676px; height:215px}
.uicard--b{left:690px;top:0;    width:448px; height:323px}
.uicard--c{left:0;    top:235px;width:330px; height:341px}
.uicard--d{left:344px;top:235px;width:332px; height:341px}
.uicard--e{left:690px;top:337px;width:448px; height:239px}

/* 破線枠。中身はここでクリップする */
.uicard__frame{
  width:100%;
  height:100%;
  border:4px dashed var(--c-dash);
  border-radius:24px;
  overflow:hidden;
}
.uicard__frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left top;
}

/* 白ピルのラベル。枠外にはみ出すのでクリップしない */
.uicard__label{
  position:absolute;
  z-index:2;
  font-weight:700;
  font-size:24px;              /* 18pt */
  line-height:44px;
}
.uicard__label span{
  background:#fff;
  border-radius:999px;
  padding:6px 16px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}


.uicard--a .uicard__label{left:8px;   top:15.8px}
.uicard--b .uicard__label{left:7px;   top:20.8px}
.uicard--c .uicard__label{left:4px; top:20px}
.uicard--d .uicard__label{left:4px;   top:103.8px}
.uicard--e .uicard__label{left:190px; top:13.8px}

/* ================= PLAN =================
   :root に追加：
   --c-plan-meta:#eef3f7;
   ※ y5708-7650 の濃紺帯。「まずは1つの会議からお試し」も
      この帯の続きなので、後で同じ .plan 内に追記する。
   ========================================= */

.plan{
  position:relative;
  width:var(--w-canvas);
  min-height:1943px;
  padding-top:60.25px;
  padding-bottom:80px;
  background-color:var(--c-navy);
  background-image:url("img/bg-plan.svg");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:1440px auto;
  overflow:hidden;
}
.plan > *{position:relative;z-index:1}

.plan::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-300;
  width:100%;
  height:1943px;
  background:url("img/bg-plan.svg") no-repeat left top / 1440px auto;
  transform: scaleX(-1) scaleY(-1);
  pointer-events:none;
  z-index:0;
}

.plan__title{
  font-family:var(--f-head);
  font-weight:700;
  font-size:var(--fs-h1);
  line-height:79px;
  color:#fff;
  text-align:center;
}
.plan__title-blue{color:var(--c-accent)}   /* #7cc4ff */

/* ---- 白い外枠カード ---- */
.plan__card{
  width:985px;
  height:1341px;               /* y5883 - 7223 */
  margin:35.75px auto 0;
  padding:24px;
  background:#fff;
  border-radius:16px;
}

/* ---- 月払い / 年払い トグル ---- */
.plan__toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:5px;
}
.plan__toggle-label{
  font-weight:700;
  font-size:21.33px;           /* 16pt ※要確認 */
  color:#9aa3ab;
  transition:color .2s;
}
.plan__toggle-label.is-active{color:var(--c-text)}

.plan__switch{position:relative;display:inline-block;width:56px;height:30px;cursor:pointer}
.plan__switch input{position:absolute;opacity:0;width:0;height:0}
.plan__slider{
  position:absolute;inset:0;
  background:#dfe5ea;
  border-radius:999px;
  transition:background .2s;
}
.plan__slider::before{
  content:"";
  position:absolute;
  left:3px;top:3px;
  width:24px;height:24px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s;
}
.plan__switch input:checked + .plan__slider{background:var(--c-blue)}
.plan__switch input:checked + .plan__slider::before{transform:translateX(26px)}

/* ---- プラン2枚 ---- */
.plan__grid{
  display:grid;
  grid-template-columns:441px 442px;
  gap:26px;
  margin-top:45px;
}

.pcard{
  position:relative;
  padding:44px 32px 32px;
  border:2px solid #e4e9ee;
  border-radius:20px;
}
.pcard--reco{border-color:var(--c-blue)}

.pcard__badge{
  position:absolute;
  left:50%;top:-16px;
  transform:translateX(-50%);
  padding:6px 22px;
  background:var(--c-blue);
  border-radius:999px;
  color:#fff;
  font-weight:700;
  font-size:17.33px;           /* 13pt */
  line-height:1;
}

.pcard__name{
  font-weight:700;
  font-size:28px;              /* 21pt ※要確認 */
  line-height:1;
  letter-spacing:.06em;
}

.pcard__meta{
  display:inline-block;
  margin-top:26px;
  padding:7px 16px;
  background:var(--c-cmp-label);
  border-radius:999px;
  font-weight:700;
  font-size:17.33px;           /* 13pt */
  line-height:1;
}
.pcard:not(.pcard--reco) .pcard__meta{background:var(--c-plan-meta)}

.pcard__price{
  margin-top:38px;
  color:var(--c-blue);
  white-space:nowrap;
}
.pcard__num{
  font-weight:700;
  font-size:48px;              /* ※要確認 */
  letter-spacing:.02em;
}
.pcard__unit{
  font-weight:700;
  font-size:18px;              /* ※要確認 */
  margin-left:2px;
}

.pcard__desc{
  margin-top:32px;
  font-size:21.33px;           /* 16pt */
  line-height:31px;
}

.pcard__list{
  margin-top:36px;
  list-style:none;
}
.pcard__list li{
  position:relative;
  padding-left:32px;
  font-weight:700;
  font-size:21.33px;           /* 16pt */
  line-height:39px;
}
.pcard__list li::before{
  content:"✓";
  position:absolute;
  left:0;top:0;
  width:22px;height:22px;
  margin-top:8px;
  background:#e5f1ff;
  border-radius:50%;
  color:var(--c-blue);
  font-size:13px;
  line-height:22px;
  text-align:center;
}

/* ---- 独自サーバー ---- */
.pserver{
  margin-top:46px;
  padding:36px 32px;
  border:2px solid #e4e9ee;
  border-radius:20px;
}
.pserver__head{display:flex;align-items:baseline;gap:32px}
.pserver__name{font-weight:700;font-size:28px;letter-spacing:.06em}
.pserver__price{font-weight:700;font-size:30px;color:var(--c-blue)}
.pserver__desc{margin-top:20px;font-size:21.33px;line-height:31px}
.pserver__list{margin-top:24px}

/* ========== まずは1つの会議からお試し ========== */

.trial{
  margin-top:80px;          /* 白カード下端7223 → H2行ボックス上端7249.25 */
  text-align:center;
  color:#fff;
}

.trial__title{
  font-family:var(--f-head);
  font-weight:700;
  font-size:var(--fs-h1);      /* 61.33px */
  line-height:79px;
}

.trial__lead{
  margin-top:16.5px;
  font-weight:700;
  font-size:24px;              /* 18pt ※要確認 */
  line-height:32px;
}

/* CTA は .cta を流用。上マージンだけ上書き */
.trial .cta{margin-top:48px}

/* ================= FAQ ================= */

.faq{
  width:985px;
  margin:60px auto 0;
  color:#fff;
}

.faq__title{
  font-family:var(--f-head);
  font-weight:700;
  font-size:var(--fs-h1);
  line-height:79px;
  text-align:center;
}

.faq__list{
  margin-top:36px;
}

.faq__item{
  border-bottom:1px solid rgba(255,255,255,.2);
  padding:28px 0;
}
.faq__item:first-child{
  border-top:1px solid rgba(255,255,255,.2);
}

.faq__q{
  font-weight:700;
  font-size:24px;
  line-height:34px;
  padding-left:40px;
  position:relative;
}
.faq__q::before{
  content:"Q";
  position:absolute;
  left:0;top:0;
  font-family:var(--f-head);
  font-weight:700;
  font-size:24px;
  line-height:34px;
  color:var(--c-accent);
}

.faq__a{
  margin-top:14px;
  padding-left:40px;
  font-weight:400;
  font-size:21.33px;
  line-height:34px;
  color:rgba(255,255,255,.85);
  position:relative;
}
.faq__a::before{
  content:"A";
  position:absolute;
  left:0;top:0;
  font-family:var(--f-head);
  font-weight:700;
  font-size:24px;
  line-height:34px;
  color:var(--c-blue);
}

/* ================= FOOTER ================= */

.ft{
  position:relative;
  z-index:1;
  width:var(--w-canvas);
  padding:64px 0 32px;
  background:#2e2e2e;
  color:#fff;
}

.ft__inner{
  width:1240px;
  margin:0 auto;
}

.ft__top{
  display:grid;
  grid-template-columns:1fr 200px 240px;
  gap:40px;
}

.ft__logo{display:block;width:140px;height:auto}

.ft__desc{
  margin-top:20px;
  font-size:14px;
  line-height:24px;
  color:#c9c9c9;
}

.ft__head{
  font-weight:700;
  font-size:15px;
  line-height:1;
}

.ft__list{
  margin-top:18px;
  list-style:none;
}
.ft__list li + li{margin-top:12px}
.ft__list a{
  font-size:14px;
  line-height:1.6;
  color:#c9c9c9;
  text-decoration:none;
}
.ft__list a:hover{color:#fff}

.ft__bot{
  margin-top:56px;
  padding-top:20px;
  border-top:1px solid #454545;
  font-size:12px;
  line-height:1.6;
  color:#9a9a9a;
}

/* =========================================================
   SP（〜768px）
   フォントサイズは要素ごとに個別指定。本文系は最低14px、
   リード・説明文は16pxを下限としている。
   ========================================================= */

@media (max-width:768px){

  /* ---- 全体 ---- */
 .stage{width:100%}

  .hero,.days,.cmp,.feat,.ops,.plan,.ft{
    width:100%;
    height:auto;
    background-size:cover;
    background-position:center top;
  }

  /* =============== HERO =============== */
  .hero{padding:48px 12px 56px}

  .hero__logo{width:180px;height:auto}

  .hero__title{
    margin-top:32px;
    font-size:24px;
    line-height:1.5;
  }
  .hero__kicker{font-size:14px;margin-bottom:16px;letter-spacing:.04em}
  /* 約物詰めはSPでは解除（折り返し位置が変わるため） */
  .tp,.tp-r{margin-right:0}

  .pains{
    width:100%;
    margin-top:40px;
    grid-template-columns:repeat(2,1fr);
    column-gap:10px;
    row-gap:38px;
  }

  .pain{height:auto;min-height:172px;padding-bottom:14px}
  .pain::before{display:none}
  .pain__fig{
    width:auto !important;
    height:52px !important;
    right:6px !important;
    top:-26px !important;
  }
  .pain__label{
    position:absolute;
    top:34px;
    left:8px;right:8px;
    padding:0 6px;
    background:#fff;
    border-radius:999px;
    font-size:13px;
    line-height:26px;
  }
  .pain__desc{
    position:static;
    padding:70px 10px 0;
    font-size:11px;
    line-height:17px;
  }

  /* =============== DAYS =============== */
  .days{padding:48px 16px 56px}

  .days__title{font-size:24px;line-height:1.5}

  .days__list{
  width:100%;
  margin:32px 0 0;
  grid-template-columns:repeat(2,1fr);
  column-gap:12px;
  row-gap:24px;
}
  .day__label{font-size:20px;line-height:1}
  .day__head{margin:6px 0 0 16px;font-size:15px}
   .day__body{margin:6px 0 0 16px;font-size:13px;line-height:1.65}
  .day__body br{display:none}   /* SPでは自然折り返しに任せる */

  /* ---- CTA（全セクション共通） ---- */
  .cta{
    width:100%;
    max-width:340px;
    height:64px;
    margin-top:40px;
    gap:12px;
  }
  .cta__text{font-size:16px}
  .cta__icon{width:28px;height:28px}
  .cta__icon::after{left:9px;top:10px;width:7px;height:7px;border-width:2px}
  .trial .cta{margin-top:32px}

  /* =============== COMPARE =============== */
  .cmp{padding:48px 16px 56px}

  .cmp__title{font-size:24px;line-height:1.5}
  .cmp__lead{margin-top:20px;font-size:16px;line-height:1.7}

  .cmp__inner,.ops__inner{width:100%}

  .subhead{
    margin-top:40px;
    gap:8px;
    font-size:18px;
    line-height:1.5;
  }
  .subhead::before{width:16px;height:16px}
  .feat .subhead,.ops .subhead{margin-top:0}

  /* ---- 表：横スクロール ---- */
  /* HTML側で .cmp-table / .ops-table を <div class="tscroll"> で囲むこと */
  .tscroll{
    margin-top:20px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .tscroll::after{
    content:"← 横にスクロールできます";
    display:block;
    margin-top:8px;
    font-size:12px;
    color:#7b8794;
  }
  .cmp-table,.ops-table{margin-top:0}

   .cmp-table{
    grid-template-columns:104px repeat(4,96px);
    grid-template-rows:56px 52px 44px 52px 44px 44px 44px 44px 44px 44px 52px 44px;
    column-gap:2px;
    row-gap:2px;
  }
  .cmp-table__head{font-size:12px;line-height:16px}
  .cmp-table__label{font-size:12px;line-height:16px}
  .cmp-table__cell{font-size:18px}
 
  .ops-table{
    grid-template-columns:100px 116px 116px 100px;
    grid-template-rows:56px 62px 62px 62px 46px 62px;
    gap:2px;
  }
  .ops-table__head{font-size:12px;line-height:16px}
  .ops-table__label{font-size:13px;line-height:1.3}
  .ops-table__cell{gap:2px}
  .ops-table__main{font-size:20px}
  .ops-table__sub{font-size:10px;line-height:1.3}
  .ops-table__mark{font-size:14px}
 

  /* =============== FEATURES =============== */
  .feat{padding:48px 16px 56px}
  .feat__inner{width:100%} 

  .feat__list{margin-top:32px}
  .feat__item{
    display:block;
    padding-left:0;
  }
  .feat__item + .feat__item{margin-top:36px}
  .feat__icon{width:56px;height:56px;margin:0 0 14px}
  .feat__label{font-size:12px;line-height:1.5}
  .feat__text{margin-top:8px;font-size:17px;line-height:1.6}
  .feat__text br{display:none}
  .feat__note{margin-top:10px;font-size:14px;line-height:1.7}
  .feat__indent{margin-left:0}

  /* =============== OPS / UIカード =============== */
  .ops{padding:48px 16px 56px}

  .ops__title{margin-top:48px;font-size:24px;line-height:1.5}

  .uicards{
    width:100%;
    height:auto;
    margin-top:28px;
    display:flex;
    flex-direction:column;
  }
  .uicard{
    position:relative;
    width:100% !important;
    height:auto !important;
    left:auto !important;top:auto !important;
  }
  .uicard + .uicard{margin-top:32px}
  .uicard__frame{
    aspect-ratio:16 / 10;
    height:auto;
    border-radius:16px;
  }
  .uicard__frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:left top;
  }
  .uicard__label{
    position:absolute;
    left:4px !important;
    top:10px !important;
    font-size:15px;
    line-height:30px;
  }
  .uicard__label span{padding:4px 12px}
  .uicard__indent{margin-left:0}

  /* =============== PLAN =============== */
  .plan{padding:48px 16px 56px}

  .plan__title{font-size:24px;line-height:1.5}

  .plan__card{
    width:100%;
    height:auto;
    margin-top:24px;
    padding:20px 14px 28px;
    border-radius:12px;
  }

  .plan__toggle{gap:10px}
  .plan__toggle-label{font-size:14px}
  .plan__switch{width:46px;height:26px}
  .plan__slider::before{width:20px;height:20px}
  .plan__switch input:checked + .plan__slider::before{transform:translateX(20px)}

  .plan__grid{
    grid-template-columns:1fr;
    gap:34px;
    margin-top:34px;
  }
  .pcard{padding:32px 18px 24px;border-radius:14px}
  .pcard__badge{font-size:12px;padding:5px 16px;top:-13px}
  .pcard__name{font-size:20px}
  .pcard__meta{margin-top:16px;font-size:12px;padding:5px 12px}
  .pcard__price{margin-top:20px}
  .pcard__num{font-size:34px}
  .pcard__unit{font-size:13px}
  .pcard__desc{margin-top:18px;font-size:14px;line-height:1.7}
  .pcard__list{margin-top:20px}
  .pcard__list li{
    padding-left:24px;
    font-size:14px;
    line-height:1.6;
    margin-top:10px;
  }
  .pcard__list li::before{
    width:17px;height:17px;
    margin-top:3px;
    font-size:10px;
    line-height:17px;
  }

  .pserver{margin-top:28px;padding:24px 18px;border-radius:14px}
  .pserver__head{gap:16px}
  .pserver__name{font-size:20px}
  .pserver__price{font-size:20px}
  .pserver__desc{margin-top:12px;font-size:14px;line-height:1.7}
  .pserver__list{margin-top:14px}

  /* ---- FAQ ---- */
  .faq{width:100%;margin-top:44px}
  .faq__title{font-size:24px;line-height:1.5}
  .faq__list{margin-top:24px}
  .faq__item{padding:20px 0}
  .faq__q{font-size:16px;line-height:1.6;padding-left:30px}
  .faq__q::before{font-size:16px;line-height:1.6}
  .faq__a{margin-top:10px;font-size:14px;line-height:1.7;padding-left:30px}
  .faq__a::before{font-size:16px;line-height:1.7}

  /* ---- まずは ---- */
  .trial{margin-top:44px}
  .trial__title{font-size:24px;line-height:1.5}
  .trial__lead{margin-top:14px;font-size:14px;line-height:1.9}
  .trial__lead br{display:none}

  /* =============== FOOTER =============== */
  .ft{padding:40px 16px 24px}
  .ft__inner{width:100%}
  .ft__top{
    grid-template-columns:1fr;
    gap:28px;
  }
  .ft__logo{width:120px}
  .ft__desc{margin-top:14px;font-size:13px}
  .ft__bot{margin-top:32px;font-size:11px}
}