/* ========================================================
   保育園向けホームページサービス（CMS・AI）ページ
   共通の色（1箇所で管理する）
   ======================================================== */
:root {
  --ct-orange: #f08a3c;      /* ボタン・見出し番号 */
  --ct-orange-d: #e27427;    /* ボタンのホバー */
  --ct-coral: #f27070;       /* 「理由その1」などのラベル */
  --ct-green: #7ec99a;       /* アクセント（矢印・チェック） */
  --ct-green-d: #5fb383;
  --ct-peach: #fff3ea;       /* セクションの淡い背景 */
  --ct-peach-2: #ffe6d3;
  --ct-cream: #fff9f4;
  --ct-text: #333;
  --ct-gray: #666;
  --ct-line: #f3d9c6;
}

/* main は共通CSSで #F9F9F9 になるので白に戻す */
main.cms-lp {
  --bleed: clamp(20px, 3vh, 44px);
  background: #fff;
  color: var(--ct-text);
  overflow: hidden;
}

main.cms-lp *,
main.cms-lp *::before,
main.cms-lp *::after {
  box-sizing: border-box;
}

main.cms-lp ul,
main.cms-lp ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

main.cms-lp p {
  margin: 0;
}

main.cms-lp h1,
main.cms-lp h2,
main.cms-lp h3 {
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ct-text);
}

/* セクションの上下余白は LP（hoiku-lp.css）と同じく --pad-t / --pad-b で管理する */
:where(main.cms-lp section) {
  --pad-t: clamp(44px, 6.5vh, 72px);
  --pad-b: clamp(44px, 6.5vh, 72px);
}

main.cms-lp section {
  position: relative;
  padding-top: var(--pad-t);
  padding-bottom: var(--pad-b);
}

/* ---- コンテンツ幅：LP と同じ扱い ----
   20_grid.css の .container は PC 1170px / 980〜1199px 940px / タブレット 748px / スマホ 80vw。
   LP と同様、タブレットは左右に余白を持たせ、スマホは 88vw に広げる */
@media (min-width: 768px) and (max-width: 979px) {
  main.cms-lp section > .container {
    width: min(748px, 92vw);
  }
}

@media (max-width: 767px) {
  main.cms-lp section > .container {
    width: 88vw;
  }
}

/* FV以外のセクションは画面に入るまで描画をスキップする（長いページの軽量化） */
main.cms-lp section:not(.ct-fv):not(.ct-price):not(.ct-support) {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

main.cms-lp img {
  max-width: 100%;
  height: auto;
}

/* PCだけ改行 */
main.cms-lp br.pc {
  display: inline;
}

/* スマホだけ改行 */
main.cms-lp br.sp {
  display: none;
}

/* ---- 共通ボタン ---- */
.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 34px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.ct-btn--primary {
  background: var(--ct-orange);
  color: #fff;
  box-shadow: 0 6px 14px rgba(240, 138, 60, 0.35);
}

.ct-btn--primary:hover {
  background: var(--ct-orange-d);
  color: #fff;
  transform: translateY(-2px);
}

/* ---- 文字サイズの統一ルール（PC） ----
   セクション見出し 28px／小見出し 20px／本文・リスト 16px／補足・注釈 13px
   （例外：MV題名 36px、01〜03番号 40px、料金の数字 40px、流れの番号 44px） */

/* ---- 共通の見出し（両側に線） ---- */
.ct-sec_title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.ct-sec_line {
  flex: 0 0 60px;
  height: 2px;
  background: var(--ct-text);
  opacity: 0.6;
}

.ct-sec_dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ct-orange);
}

/* ========================================================
   デバイスのモックアップ（CSSだけで描く）
   写真素材に差し替える場合は .ct-laptop_screen の中身を <img> にする
   ======================================================== */
.ct-laptop {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
}

.ct-laptop_screen {
  position: relative;
  border: 10px solid #2b2f36;
  border-bottom-width: 14px;
  border-radius: 14px 14px 4px 4px;
  background: #2b2f36;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(60, 40, 20, 0.16);
}

.ct-laptop_screen::after {
  /* カメラ */
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #4a4f58;
}

.ct-laptop_base {
  height: 12px;
  margin: 0 -5%;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #d8dce3 0%, #b9bfc9 100%);
}

.ct-laptop_base::after {
  content: "";
  display: block;
  width: 18%;
  height: 4px;
  margin: 0 auto;
  border-radius: 0 0 6px 6px;
  background: #9aa1ad;
}

.ct-laptop--zoom {
  cursor: zoom-in;
  transition: transform 0.25s;
}

.ct-laptop--zoom:hover {
  transform: translateY(-4px);
}

.ct-laptop_img,
.ct-modal_screen .ct-laptop_img {
  display: block;
  width: 100%;
  height: auto;
}

/* タブレット */
.ct-tablet {
  position: relative;
}

.ct-tablet .ct-screen {
  aspect-ratio: 4 / 3;
}

.ct-tablet_screen {
  border: 10px solid #2b2f36;
  border-radius: 18px;
  background: #2b2f36;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(60, 40, 20, 0.18);
}

/* スマートフォン */
.ct-phone {
  position: relative;
  width: 150px;
}

.ct-phone_screen {
  position: relative;
  border: 8px solid #2b2f36;
  border-radius: 24px;
  background: #2b2f36;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(60, 40, 20, 0.2);
}

.ct-phone_screen::before {
  /* ノッチ */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 50%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 0 0 10px 10px;
  background: #2b2f36;
}

/* ---- 画面の中身（園のホームページ風） ---- */
.ct-screen {
  --sc-accent: #7ec99a;
  --sc-bg: #ffffff;
  --sc-sky-1: #dff3ff;
  --sc-sky-2: #f7fbff;
  --sc-hill-1: #a8dfb3;
  --sc-hill-2: #7ec99a;
  --sc-card: #eef5f0;
  --sc-house: #ffd3b8;
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--sc-bg);
  overflow: hidden;
  font-size: 10px;
}

.ct-screen[data-theme="yasashii"] {
  --sc-accent: #f4a38a;
  --sc-bg: #fff8f2;
  --sc-sky-1: #ffe9dc;
  --sc-sky-2: #fff6ee;
  --sc-hill-1: #ffd3b8;
  --sc-hill-2: #f7b58f;
  --sc-card: #ffefe4;
  --sc-house: #fff;
}

.ct-screen[data-theme="akarui"] {
  --sc-accent: #f6b93b;
  --sc-bg: #fffbe6;
  --sc-sky-1: #fff1b8;
  --sc-sky-2: #fffbe6;
  --sc-hill-1: #ffe08a;
  --sc-hill-2: #f6b93b;
  --sc-card: #fff4cc;
  --sc-house: #fff;
}

.ct-screen--sp {
  aspect-ratio: 9 / 19;
}

.ct-screen--mini {
  aspect-ratio: 4 / 3;
}

.ct-screen_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 12%;
  padding: 0 5%;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ct-screen--sp .ct-screen_nav {
  height: 8%;
}

.ct-screen_logo {
  width: 18%;
  height: 40%;
  border-radius: 999px;
  background: var(--sc-accent);
}

.ct-screen_menu {
  display: flex;
  gap: 6%;
  width: 46%;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
}

.ct-screen_menu i {
  display: block;
  width: 18%;
  height: 18%;
  border-radius: 999px;
  background: #d9dde3;
}

.ct-screen_burger {
  width: 10%;
  height: 30%;
  border-top: 2px solid var(--sc-accent);
  border-bottom: 2px solid var(--sc-accent);
  box-sizing: border-box;
}

.ct-screen_hero {
  position: relative;
  height: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sc-sky-1) 0%, var(--sc-sky-2) 100%);
}

.ct-screen--sp .ct-screen_hero {
  height: 34%;
}

.ct-screen_hero--short {
  height: 40%;
}

.ct-screen_sun {
  position: absolute;
  top: 12%;
  right: 12%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 0 6px rgba(255, 209, 102, 0.3);
}

.ct-screen_hill {
  position: absolute;
  bottom: -40%;
  width: 90%;
  height: 80%;
  border-radius: 50%;
}

.ct-screen_hill--1 {
  left: -30%;
  background: var(--sc-hill-1);
}

.ct-screen_hill--2 {
  right: -30%;
  bottom: -50%;
  background: var(--sc-hill-2);
}

.ct-screen_house {
  position: absolute;
  bottom: 18%;
  left: 40%;
  width: 16%;
  height: 24%;
  background: var(--sc-house);
  border-radius: 2px;
}

.ct-screen_house::before {
  /* 屋根 */
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: 100%;
  height: 60%;
  background: #e5806a;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.ct-screen_copy {
  position: absolute;
  left: 8%;
  top: 28%;
  width: 34%;
  height: 12%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}

.ct-screen_copy::after {
  content: "";
  position: absolute;
  left: 0;
  top: 140%;
  width: 60%;
  height: 60%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

.ct-screen_cards {
  display: flex;
  gap: 4%;
  padding: 5% 5% 0;
}

.ct-screen_cards span {
  flex: 1;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--sc-card);
  position: relative;
}

.ct-screen_cards span::after {
  content: "";
  position: absolute;
  left: 12%;
  bottom: 14%;
  width: 60%;
  height: 10%;
  border-radius: 999px;
  background: var(--sc-accent);
  opacity: 0.6;
}

.ct-screen_lines {
  padding: 6% 5%;
}

.ct-screen_lines i {
  display: block;
  height: 4px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: #e3e6ea;
}

.ct-screen_lines i:nth-child(2) {
  width: 70%;
}

.ct-screen_lines i:nth-child(3) {
  width: 85%;
}

/* アイコン中心のテンプレート */
.ct-screen_icons {
  display: flex;
  justify-content: center;
  gap: 6%;
  padding: 8% 6% 0;
}

.ct-screen_icons i {
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sc-accent);
  opacity: 0.8;
}

.ct-screen_icons i:nth-child(even) {
  background: var(--sc-hill-1);
  opacity: 1;
}

/* ---- 管理画面（CMS）風 ---- */
.ct-screen--admin {
  background: #f4f6f9;
}

.ct-admin_bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 10%;
  padding: 0 4%;
  background: #3d4552;
}

.ct-screen--sp .ct-admin_bar {
  height: 7%;
}

.ct-admin_bar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8b96a5;
}

.ct-admin_body {
  display: flex;
  height: 90%;
}

.ct-admin_side {
  width: 22%;
  padding: 6% 3%;
  background: #e6eaf0;
}

.ct-admin_side i {
  display: block;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #c4cbd6;
}

.ct-admin_side i:first-child {
  background: var(--ct-orange);
}

.ct-admin_main {
  flex: 1;
  padding: 5%;
}

.ct-screen--sp .ct-admin_main {
  padding: 8% 7%;
}

.ct-admin_title {
  width: 40%;
  height: 8px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #3d4552;
}

.ct-admin_field {
  height: 12px;
  margin-bottom: 6px;
  border: 1px solid #d5dbe4;
  border-radius: 3px;
  background: #fff;
}

.ct-admin_field--tall {
  height: 28px;
}

.ct-screen--sp .ct-admin_field--tall {
  height: 48px;
}

.ct-admin_img {
  height: 26px;
  margin-bottom: 6px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ffd3b8 0%, #ffe9dc 100%);
}

.ct-screen--sp .ct-admin_img {
  height: 60px;
}

.ct-admin_btn {
  width: 34%;
  height: 12px;
  border-radius: 999px;
  background: var(--ct-orange);
}

/* ========================================================
   FV（ファーストビュー）
   ※ おまかせ保育システムLP（.fv-hoiku）の構成に合わせている
   ======================================================== */
.ct-fv {
  z-index: 2;                 /* スマホのモックが下のセクションに少しはみ出すため */
  --pad-t: calc(var(--gnav-h, 0px) + 60px);
  margin-top: calc(var(--gnav-h, 0px) * -1);
  --pad-b: 48px;
  background: linear-gradient(180deg, #fff3e6 0%, rgba(255, 254, 245, 0) 100%);
}

/* 背景のブロブ：3つとも別の歪んだ輪郭にして、位置も間隔を空けて散らす。
   線幅15px・F9C9B2→FFF8C2のグラデーションは共通 */
.ct-fv_blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ct-fv_blob--1 {
  width: 200px;
  height: 200px;
  top: -30px;
  left: -90px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 130 130'%3E%3Cdefs%3E%3ClinearGradient id='bg1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%' stop-color='%23F9C9B2'/%3E%3Cstop offset='100%' stop-color='%23FFF8C2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40,2 C66,-8 98,10 100,38 C102,64 86,74 80,96 C74,118 34,112 16,90 C-4,66 2,32 20,16 C26,10 32,4 40,2 Z' fill='none' stroke='url(%23bg1)' stroke-width='15' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  transform: rotate(-8deg);
}

.ct-fv_blob--2 {
  width: 130px;
  height: 130px;
  top: 280px;
  left: 340px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 130 130'%3E%3Cdefs%3E%3ClinearGradient id='bg1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%' stop-color='%23F9C9B2'/%3E%3Cstop offset='100%' stop-color='%23FFF8C2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M56,4 C80,10 96,32 88,56 C82,74 96,90 74,98 C50,106 20,96 8,74 C-4,52 4,24 26,10 C36,4 46,1 56,4 Z' fill='none' stroke='url(%23bg1)' stroke-width='15' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  transform: rotate(14deg);
}

.ct-fv_blob--3 {
  width: 240px;
  height: 240px;
  top: 90px;
  right: -50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 130 130'%3E%3Cdefs%3E%3ClinearGradient id='bg1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%' stop-color='%23F9C9B2'/%3E%3Cstop offset='100%' stop-color='%23FFF8C2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M34,10 C56,-10 92,-2 98,26 C104,52 90,60 92,84 C94,108 56,110 34,96 C10,80 -8,54 2,32 C10,16 22,18 34,10 Z' fill='none' stroke='url(%23bg1)' stroke-width='15' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  transform: rotate(20deg);
}

.ct-fv .container {
  position: relative;
  z-index: 1;
}

/* LPの .fv-hoiku .row と同じ（20_grid.css の grid_7 / grid_5 を flex で横並び） */
.ct-fv .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.ct-fv_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ct-fv_right {
  position: relative;
}

/* 対象を示すラベル（見出しの上） */
main.cms-lp .ct-fv_label {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  background: #7ec899;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.ct-fv_title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  /* 単語の途中（「伝わ」「りやすく」等）で折り返さない */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.ct-fv_title em {
  font-style: normal;
}

.ct-fv_title span {
  display: block;
}

main.cms-lp .ct-fv_lead {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;   /* 見出し（700）との差を残すため太字にはしない */
  line-height: 1.9;
  color: #444;
}

main.cms-lp .ct-fv_tags {
  display: flex;
  flex-wrap: nowrap;   /* 3つを1行に収める（PC・タブレット） */
  gap: 10px;
  margin-top: 34px;
}

.ct-fv_tags li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 12px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(80, 50, 20, 0.12);
  font-size: 14px;
  font-weight: 700;
}

/* タグの頭のアイコン（「3つの理由」と同じ図柄） */
.ct-fv_tag-icon {
  flex: none;
  color: #5aab7c;
}

/* LPの .fv-hoiku_btn と同じ作り（色だけ緑） */
.ct-fv_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;   /* 左カラムが縦flexなので、幅いっぱいに伸びないようにする */
  min-width: 230px;
  margin-top: 44px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: linear-gradient(180deg, #5aab7c 0%, #96e0ae 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25),
    inset 0 2px 3px rgba(255, 255, 255, 0.5),
    inset 0 -3px 5px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s, transform 0.2s;
}

.ct-fv_btn:hover {
  color: #fff;
  opacity: 0.9;
  transform: translateY(-2px);
}
/* ---- 右カラム：PC画面＋スマホ ----
   列（grid_5=470px）の左側へ広げ、右端のスマホはコンテンツ幅内に収める */
.ct-fv_visual {
  position: relative;
  /* 列幅＋左へ110px・右へ50px広げる。ノートPCだけ右の余白へ少しはみ出し、
     スマホ画像（right: 50px）はコンテンツ幅の内側に収める */
  width: calc(100% + 160px);
  max-width: 630px;
  margin-left: -110px;
  margin-right: -50px;
  padding-right: 15px;
  padding-bottom: 40px;
}

.ct-fv_laptop {
  position: relative;
  margin: 0 auto;
  max-width: 760px;
}

/* 画像素材（images/cms/fv-laptop.png）に差し替える場合はこのクラスを使う */
.ct-fv_laptop-img {
  display: block;
  width: 100%;
  height: auto;
}

.ct-fv_phone-img {
  position: absolute;
  right: 50px;
  bottom: 0;
  width: 120px;
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(60, 40, 20, 0.25));
}

/* ========================================================
   お悩み
   ======================================================== */
.ct-nayami {
  --pad-t: 0px;
  --pad-b: clamp(28px, 4vh, 40px);
  text-align: center;
}

.ct-nayami_stage {
  position: relative;
  max-width: 900px;
  height: 500px;   /* タイトル・吹き出し・人物のすべてがブロブに収まる高さ */
  margin: 20px auto 0;
}

/* 背景のブロブ：同じ形を二重に重ねる（LPの --cream / --cream-50 と同じ考え方）
   複数の緩やかな波を重ねて半径を変化させ、尖りのない滑らかな輪郭にしている
   （右側＝吹き出し2・3の側へ大きく膨らむ） */
.ct-nayami_blob {
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 570'%3E%3Cpath d='M972,290 C974,326 963,368 938,400 C912,433 865,465 817,486 C769,507 705,519 649,527 C592,534 535,533 480,531 C425,529 371,525 320,515 C269,504 212,491 172,469 C131,448 94,416 79,387 C65,357 71,319 85,290 C98,261 133,236 160,213 C187,190 217,174 247,154 C277,135 303,113 341,95 C380,78 428,56 480,47 C532,38 600,35 656,43 C713,50 773,70 818,94 C863,117 901,150 927,182 C952,215 970,254 972,290 Z' fill='%23FFF3E6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 内側：地の色 FFF3E6 */
.ct-nayami_blob--inner {
  width: 900px;
  height: 480px;
  transform: translate(-50%, -50%);
}

/* 外側：さらに一回り大きく、FFF3E6の50%透明度を下に重ねる */
.ct-nayami_blob--outer {
  width: 1010px;
  height: 540px;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

.ct-nayami_title {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
}

.ct-nayami_title span {
  display: block;
}

.ct-nayami_figure {
  position: absolute;
  left: 50%;
  bottom: 50px;
  width: 150px;   /* イラストを一回り小さく */
  transform: translateX(-50%);
}

.ct-nayami_figure img {
  display: block;
  width: 100%;
}

/* 吹き出し：角丸の四角ではなく、有機的なブロブ型の円にする */
.ct-nayami_bubble {
  position: absolute;
  padding: 22px 26px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(80, 50, 20, 0.12);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}

/* しっぽ：吹き出しから丸2つが連なる形（コミックの思考吹き出し風） */
.ct-nayami_bubble::before,
.ct-nayami_bubble::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(80, 50, 20, 0.1);
}

.ct-nayami_bubble::before {
  width: 16px;
  height: 16px;
}

.ct-nayami_bubble::after {
  width: 9px;
  height: 9px;
}

.ct-nayami_bubble--1 {
  left: 0;
  top: 175px;
  max-width: 240px;
  border-radius: 42% 58% 53% 47% / 48% 42% 58% 52%;
}

.ct-nayami_bubble--1::before {
  right: -26px;
  bottom: 26%;
}

.ct-nayami_bubble--1::after {
  right: -46px;
  bottom: calc(26% - 2px);
}

.ct-nayami_bubble--2 {
  right: 18%;
  top: 150px;
  max-width: none;
  padding: 22px 40px;
  border-radius: 58% 42% 47% 53% / 55% 60% 40% 45%;
}

.ct-nayami_bubble--2::before {
  left: -8px;
  bottom: 6px;
}

.ct-nayami_bubble--2::after {
  left: -24px;
  bottom: -8px;
}

.ct-nayami_bubble--3 {
  right: -2%;
  bottom: 80px;
  max-width: 220px;
  border-radius: 50% 50% 38% 62% / 60% 45% 55% 40%;
}

.ct-nayami_bubble--3::before {
  left: -26px;
  top: 40%;
}

.ct-nayami_bubble--3::after {
  left: -46px;
  top: calc(40% + 4px);
}

.ct-nayami_arrow {
  width: 0;
  height: 0;
  margin: 32px auto 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid var(--ct-green);
}

/* 結論の一文：セクション見出しと同じ 28px。矢印との間を空け、マーカーは文字の下半分に */
main.cms-lp .ct-nayami_answer {
  margin-top: 20px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
}

.ct-nayami_answer span {
  padding: 0 6px;
  background: linear-gradient(transparent 62%, rgba(126, 201, 154, 0.5) 62%);
}

/* ========================================================
   3つの理由
   ======================================================== */
.ct-reason {
  --pad-t: clamp(36px, 5.2vh, 56px);
  --pad-b: calc(clamp(44px, 6.5vh, 72px) + var(--bleed));
  background: #fff;
}

.ct-reason_list {
  display: flex;
  justify-content: center;
  gap: 56px;
}

.ct-reason_item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 330px;
  aspect-ratio: 1;
  padding: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(80, 50, 20, 0.18);
  text-align: center;
}

.ct-reason_label {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 56px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.ct-reason_label::before,
.ct-reason_label::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.ct-reason_label::before {
  z-index: -2;
  background: #ffdfdf;
  transform: translateY(6px);
}

.ct-reason_label::after {
  z-index: -1;
  background: #ff9494;
}

.ct-reason_icon svg {
  width: 108px;
  height: 108px;
}

.ct-reason_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: 24px 0 14px;
  color: #7ec899;
}

main.cms-lp .ct-reason_title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
}

/* ========================================================
   01〜03 の特長セクション
   ======================================================== */
/* 特長ごとに1つの塊に見えるよう、特長同士の間は広め（中の見出し〜ポイントは詰める） */
main.cms-lp .ct-feature {
  --pad-t: clamp(60px, 9vh, 100px);
  --pad-b: clamp(60px, 9vh, 100px);
}

main.cms-lp .ct-feature:first-of-type {
  --pad-t: clamp(50px, 7vh, 80px);
}

.ct-feature-group {
  position: relative;
  z-index: 1;
  overflow-x: clip;
}

.ct-feature-group::before,
.ct-feature-group::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #fff8c2 0%, #f9c9b2 100%);
  pointer-events: none;
}

.ct-feature-group::before {
  top: calc(-1 * var(--bleed));
  bottom: calc(-1 * var(--bleed));
  z-index: -2;
  opacity: 0.3;
}

.ct-feature-group::after {
  top: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.3;
}

/* MVと同じ輪郭のブロブを白・透明度30%で散らす */
.ct-feature_blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.3;
}

.ct-feature_blob--1 {
  width: 220px;
  height: 220px;
  top: 3%;
  left: -80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 130 130'%3E%3Cpath d='M40,2 C66,-8 98,10 100,38 C102,64 86,74 80,96 C74,118 34,112 16,90 C-4,66 2,32 20,16 C26,10 32,4 40,2 Z' fill='none' stroke='%23fff' stroke-width='15' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  transform: rotate(-8deg);
}

.ct-feature_blob--2 {
  width: 160px;
  height: 160px;
  top: 14%;
  right: 4%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 130 130'%3E%3Cpath d='M34,10 C56,-10 92,-2 98,26 C104,52 90,60 92,84 C94,108 56,110 34,96 C10,80 -8,54 2,32 C10,16 22,18 34,10 Z' fill='none' stroke='%23fff' stroke-width='15' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  transform: rotate(20deg);
}

.ct-feature_blob--3 {
  width: 130px;
  height: 130px;
  top: 34%;
  left: 6%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 130 130'%3E%3Cpath d='M56,4 C80,10 96,32 88,56 C82,74 96,90 74,98 C50,106 20,96 8,74 C-4,52 4,24 26,10 C36,4 46,1 56,4 Z' fill='none' stroke='%23fff' stroke-width='15' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  transform: rotate(14deg);
}

.ct-feature_blob--4 {
  width: 260px;
  height: 260px;
  top: 50%;
  right: -90px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 130 130'%3E%3Cpath d='M34,10 C56,-10 92,-2 98,26 C104,52 90,60 92,84 C94,108 56,110 34,96 C10,80 -8,54 2,32 C10,16 22,18 34,10 Z' fill='none' stroke='%23fff' stroke-width='15' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  transform: rotate(-12deg);
}

.ct-feature_blob--5 {
  width: 150px;
  height: 150px;
  top: 70%;
  left: -40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 130 130'%3E%3Cpath d='M40,2 C66,-8 98,10 100,38 C102,64 86,74 80,96 C74,118 34,112 16,90 C-4,66 2,32 20,16 C26,10 32,4 40,2 Z' fill='none' stroke='%23fff' stroke-width='15' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  transform: rotate(24deg);
}

.ct-feature_blob--6 {
  width: 180px;
  height: 180px;
  top: 86%;
  right: 10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 130 130'%3E%3Cpath d='M56,4 C80,10 96,32 88,56 C82,74 96,90 74,98 C50,106 20,96 8,74 C-4,52 4,24 26,10 C36,4 46,1 56,4 Z' fill='none' stroke='%23fff' stroke-width='15' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  transform: rotate(-6deg);
}

/* 特長どうしの区切り：横に並んだ白い丸3つ。
   高さ0で流れに置き、丸は上下のセクションの境目の中央に重ねる
   （セクションは content-visibility で外側が切れるため、セクションの外に置く） */
.ct-feature_sep {
  position: relative;
  z-index: 1;
  height: 0;
}

.ct-feature_sep i {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #fff;
}

.ct-feature_sep i:nth-child(1) { transform: translateX(-22px); }
.ct-feature_sep i:nth-child(3) { transform: translateX(22px); }

.ct-feature_row {
  display: flex;
  align-items: center;
  gap: 50px;
}

.ct-feature_row--reverse {
  flex-direction: row;
}

.ct-feature_row--center {
  justify-content: center;
}

.ct-feature_visual {
  flex: 0 0 48%;
}

.ct-feature_body {
  flex: 1;
}

.ct-feature_body--wide {
  max-width: 820px;
  text-align: center;
}

.ct-feature_title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
}

.ct-feature_body--wide .ct-feature_title {
  justify-content: center;
}

.ct-feature_num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: #ff9494;
  letter-spacing: 0.04em;
}

.ct-feature_ref {
  font-size: 22px;
  color: #6fbf8b;
  align-self: flex-start;
  margin: -2px -12px 0 -10px;
}

main.cms-lp .ct-feature_text {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.9;
}

.ct-feature_note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ct-gray);
  text-align: center;
}

/* デザイン切り替えボタン */
.ct-design_switch {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.ct-design_btn {
  flex: 1;
  padding: 12px 8px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25),
    inset 0 2px 3px rgba(255, 255, 255, 0.5),
    inset 0 -3px 5px rgba(0, 0, 0, 0.2);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.ct-design_btn:hover,
.ct-design_btn.is-active {
  opacity: 1;
}

/* 選択中：やさしい（淡い色）でも分かるよう、✓を付ける */
.ct-design_btn.is-active {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28),
    inset 0 2px 3px rgba(255, 255, 255, 0.5),
    inset 0 -3px 5px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.ct-design_btn.is-active::before {
  content: "✓";
  margin-right: 6px;
}

.ct-design_btn--simple {
  --btn-color: #abc453;
  background: var(--btn-color);
}

.ct-design_btn--yasashii {
  --btn-color: #f9c9b2;
  background: var(--btn-color);
}

.ct-design_btn--akarui {
  --btn-color: #f5af43;
  background: var(--btn-color);
}

/* ここがポイント */
.ct-point {
  position: relative;
  margin-top: 40px;
}

.ct-point_tag {
  position: absolute;
  top: -16px;
  left: 22px;
  z-index: 1;
  color: #ff9494;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff, 3px 4px 0 rgba(255, 148, 148, 0.3);
  transform: rotate(-8deg);
  transform-origin: left center;
}

.ct-point_box {
  display: flex;
  align-items: center;
  gap: 40px;
}

.ct-point_body {
  position: relative;
  flex: 1;
  padding: 38px 70px 34px 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M5 1.5 H90 L98.5 50 L90 98.5 H5 Q1.5 98.5 1.5 95 V5 Q1.5 1.5 5 1.5 Z' fill='%23fff' fill-opacity='.8' stroke='%236fbf8b' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.ct-point_title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

main.cms-lp .ct-point_text {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.85;
}

.ct-point_visual {
  flex: 0 0 auto;
}

/* テンプレートB・C */
.ct-point_visual--templates {
  display: flex;
  gap: 20px;
}

.ct-template {
  margin: 0;
  width: auto;
  text-align: center;
}

.ct-template_frame {
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 10px rgba(80, 50, 20, 0.12);
}

main.cms-lp .ct-template_frame img {
  display: block;
  width: auto;
  height: 220px;
}

.ct-template figcaption {
  display: inline-block;
  position: relative;
  margin-top: -16px;
  padding: 4px 18px;
  border-radius: 999px;
  background: #6fbf8b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* チェック付きの機能リスト */
main.cms-lp .ct-check_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-top: 28px;
}

.ct-check_list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
}

.ct-check_list li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #7ec899;
}


/* CMSの複数デバイス */
.ct-devices {
  position: relative;
  padding-right: 70px;
  padding-bottom: 30px;
}

.ct-tablet {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 150px;
}

/* スマホの吹き出しチップ */
.ct-point_visual--phone {
  position: relative;
  width: 400px;
  display: flex;
  justify-content: center;
}

.ct-point_visual--phone .ct-phone {
  width: 130px;
}

.ct-float {
  position: absolute;
  z-index: 2;
  padding: 14px 24px;
  border: 2px solid #6fbf8b;
  border-radius: 6px;
  background: #fff;
  color: #6fbf8b;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.ct-float::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border: solid #6fbf8b;
  background: #fff;
}

.ct-float--1,
.ct-float--3 {
  right: -10px;
}

.ct-float--1::before,
.ct-float--3::before {
  left: -7px;
  border-width: 0 0 2px 2px;
  transform: translateY(-50%) rotate(45deg);
}

.ct-float--1 {
  top: 10px;
}

.ct-float--3 {
  bottom: 30px;
}

.ct-float--2 {
  left: -10px;
  bottom: 60px;
}

.ct-float--2::before {
  right: -7px;
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
}

main.cms-lp .ct-sp {
  display: block;
  width: 150px;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(60, 40, 20, 0.2));
}

/* 02 のビジュアル：管理画面 → 更新されたホームページ */
.ct-devices--cms {
  aspect-ratio: 560 / 420;
  padding: 0;
}

/* 管理画面とノートPCを合わせた範囲（横0〜100%・縦10〜100%）の中心に置く */
.ct-devices_circle {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  opacity: 0.8;
}

.ct-devices_admin {
  position: absolute;
  top: 10%;
  left: 0;
  width: 62%;
  border: 8px solid #2b2f36;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(60, 40, 20, 0.15);
}

main.cms-lp .ct-devices_admin img,
main.cms-lp .ct-devices_site {
  display: block;
  width: 100%;
  height: auto;
}

/* 管理画面は枠の比率（1248:767）を保ち、画像の上から表示する */
main.cms-lp .ct-devices_admin img {
  aspect-ratio: 1248 / 767;
  object-fit: cover;
  object-position: top;
}

.ct-devices_arrow {
  position: absolute;
  left: 8%;
  bottom: 12%;
  width: 18%;
}

main.cms-lp .ct-devices_site {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 66%;
}

main.cms-lp .ct-about {
  display: flex;
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ct-gray);
}

.ct-about_title {
  flex: 0 0 auto;
  font-weight: 700;
  color: #6fbf8b;
}

/* AI の2つの機能 */
main.cms-lp .ct-ai_list {
  display: flex;
  gap: 16px;
  margin-top: 28px;
}

.ct-ai_item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  padding: 18px 20px;
  border-radius: 16px;
  background: #fff;
  text-align: left;
}

.ct-ai_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #7ec899;
}

.ct-ai_title {
  font-size: 20px;
  font-weight: 700;
}

.ct-ai_text {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ct-gray);
}

.ct-point_visual--ai {
  width: 400px;
}

.ct-chat {
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(60, 40, 90, 0.15);
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
}

.ct-chat_head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.ct-chat_logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #8a6fd1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.ct-chat_logo small {
  margin-top: 2px;
  font-size: 6px;
}

.ct-chat_name {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
}

.ct-chat_info {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8a6fd1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.ct-chat_close {
  color: #999;
  font-size: 20px;
  line-height: 1;
}

.ct-chat_chips {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
}

.ct-chat_chips span {
  padding: 2px 12px;
  border: 1.5px solid #8a6fd1;
  border-radius: 999px;
  color: #8a6fd1;
  font-size: 12px;
  font-weight: 700;
}

.ct-chat_log {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

main.cms-lp .ct-chat_msg {
  flex: 0 0 auto;
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  background: #f5f2fc;
}

.ct-chat_msg--user {
  align-self: flex-end;
  background: #efeafb;
}

.ct-chat_msg--ai {
  align-self: flex-start;
}

.ct-chat_reply {
  display: grid;
  align-self: flex-start;
  max-width: 85%;
}

main.cms-lp .ct-chat_reply .ct-chat_msg {
  max-width: none;
}

.ct-chat_reply > * {
  grid-area: 1 / 1;
  align-self: start;
}

.ct-chat_typing {
  display: flex;
  gap: 5px;
  width: fit-content;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f5f2fc;
}

.ct-chat_typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b5a4e6;
  animation: ct-dot 0.9s infinite ease-in-out;
}

.ct-chat_typing i:nth-child(2) { animation-delay: 0.15s; }
.ct-chat_typing i:nth-child(3) { animation-delay: 0.3s; }

.ct-chat_msg--user { animation: ct-chat-user 8s infinite; }
.ct-chat_typing { animation: ct-chat-typing 8s infinite; }
.ct-chat_reply .ct-chat_msg--ai { animation: ct-chat-ai 8s infinite; }

@keyframes ct-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes ct-chat-user {
  0%, 4% { opacity: 0; transform: translateY(10px); }
  10%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}

@keyframes ct-chat-typing {
  0%, 16% { opacity: 0; }
  20%, 38% { opacity: 1; }
  41%, 100% { opacity: 0; }
}

@keyframes ct-chat-ai {
  0%, 40% { opacity: 0; transform: translateY(10px); }
  46%, 86% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-chat_msg--user,
  .ct-chat_reply .ct-chat_msg--ai { animation: none; }
  .ct-chat_typing { display: none; }
}

.ct-chat_input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #eee;
}

.ct-chat_input span {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #bbb;
}

.ct-chat_input i {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: #8a6fd1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5L21 3l-6.5 18-3-7.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 18px;
}

/* 03 のビジュアル：AI文章生成パネルのイメージ */
.ct-aigen {
  position: relative;
  aspect-ratio: 560 / 400;
}

.ct-aigen_circle {
  position: absolute;
  top: -6%;
  left: 8%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
}

.ct-aigen_panel {
  position: absolute;
  top: 48.6%;
  left: 47%;
  width: 72%;
  transform: translate(-50%, -50%);
  padding: 14px 14px 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(80, 50, 20, 0.12);
  color: #444;
  font-size: 11px;
  line-height: 1.5;
}

main.cms-lp .ct-aigen_field {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}

.ct-aigen_field small {
  margin-left: 4px;
  color: #888;
  font-size: 10px;
  font-weight: 400;
}

.ct-aigen_box {
  position: relative;
  padding: 10px 12px 10px;
  border: 1px solid #ddd0f7;
  border-radius: 8px;
  background: #f8f5ff;
}

.ct-aigen_x {
  position: absolute;
  top: 6px;
  right: 10px;
  color: #999;
  font-size: 14px;
  line-height: 1;
}

main.cms-lp .ct-aigen_label {
  margin-top: 10px;
  color: #9b6ef0;
  font-weight: 700;
}

main.cms-lp .ct-aigen_label:nth-of-type(1) {
  margin-top: 0;
}

main.cms-lp .ct-aigen_opts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
  font-weight: 700;
}

.ct-aigen_opts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ct-aigen_opts i,
.ct-aigen_opts b {
  width: 11px;
  height: 11px;
  border: 1px solid #666;
  border-radius: 50%;
  background: #fff;
}

.ct-aigen_opts i.is-on {
  border: 3px solid #1a73e8;
}

.ct-aigen_opts b {
  border: none;
  border-radius: 2px;
  background: #1a73e8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100%;
}

.ct-aigen_memo {
  height: 56px;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M9 3L3 9M9 6L6 9' stroke='%23999' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 2px bottom 2px / 8px;
  color: #bbb;
}

.ct-aigen_btn {
  position: relative;
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 5px;
  background: #9b6ef0;
  color: #fff;
  font-weight: 700;
}

main.cms-lp .ct-aigen_note {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  color: #888;
  font-size: 10px;
}

.ct-aigen_note em {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #999;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
}

.ct-aigen_cursor {
  position: absolute;
  left: 60%;
  top: 45%;
  width: 34px;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2));
}

/* ========================================================
   Before / After
   ======================================================== */
.ct-change {
  --pad-t: calc(clamp(44px, 6.5vh, 72px) + var(--bleed));
  --pad-b: calc(clamp(44px, 6.5vh, 72px) + var(--bleed));
  background: #fff;
}

.ct-change .ct-sec_line {
  flex: 1 1 0;
  background: #7ec899;
  opacity: 1;
}

main.cms-lp .ct-change_list {
  max-width: none;
  margin: 40px auto 0;
}

.ct-change_row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 16px;
}

.ct-change_before,
.ct-change_after {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 10px 20px 10px 84px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(80, 50, 20, 0.12);
  color: var(--ct-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.ct-change_badge {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.ct-change_before .ct-change_badge {
  background: #7ec899;
}

.ct-change_after .ct-change_badge {
  background: #ff9494;
}

.ct-change_arrow {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #7ec899;
}

/* ========================================================
   料金
   ======================================================== */
.ct-price {
  --pad-t: clamp(40px, 5.8vh, 60px);
  --pad-b: clamp(40px, 5.8vh, 60px);
  position: relative;
  z-index: 1;
  background: #fff3e6;
}

.ct-price::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--bleed));
  bottom: calc(-1 * var(--bleed));
  z-index: -1;
  background: rgba(255, 243, 230, 0.5);
  pointer-events: none;
}

.ct-price_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.ct-price_body {
  flex: 1;
}

.ct-price_title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
}

.ct-price_title span {
  display: block;
}

main.cms-lp .ct-price_notes {
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ct-text);
}

.ct-price_card {
  position: relative;
  flex: 0 0 48%;
  padding: 26px 30px 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 0 5px rgba(90, 150, 115, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.07),
    0 10px 24px rgba(0, 0, 0, 0.11);
  text-align: center;
}

.ct-price_card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 7px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6fbf8b 0%, #c7ffda 38%, #6fbf8b 62%, #c7ffda 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

main.cms-lp .ct-price_head {
  padding: 8px;
  border-radius: 8px;
  background: #7ec899;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

main.cms-lp .ct-price_amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-weight: 700;
}

.ct-price_month {
  align-self: center;
  padding: 4px 10px;
  border-radius: 8px;
  background: #ff9494;
  color: #fff;
  font-size: 20px;
}

.ct-price_num {
  font-size: 40px;
  line-height: 1;
  color: var(--ct-text);
}

.ct-price_unit {
  margin-left: -8px;
  font-size: 26px;
}

.ct-price_unit small {
  font-size: 14px;
  font-weight: 400;
}

.ct-price_kara {
  font-size: 24px;
  font-weight: 400;
}

/* ========================================================
   導入までの流れ
   ======================================================== */
.ct-flow {
  --pad-t: calc(clamp(44px, 6.5vh, 72px) + var(--bleed));
  --pad-b: calc(clamp(44px, 6.5vh, 72px) + var(--bleed));
  background: #fff;
}

.ct-sec_title--dots {
  gap: 28px;
  font-weight: 700;
}

.ct-sec_title--dots .ct-sec_dot {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  background: #b9e2c7;
}

.ct-sec_title--dots .ct-sec_dot:first-child {
  box-shadow: -18px 0 0 -3px #b9e2c7;
}

.ct-sec_title--dots .ct-sec_dot:last-child {
  box-shadow: 18px 0 0 -3px #b9e2c7;
}

main.cms-lp .ct-flow_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 36px auto 0;
}

main.cms-lp .ct-flow_list {
  display: flex;
  align-items: center;
  gap: 26px;
}

.ct-flow_step {
  width: 170px;
  text-align: center;
}

.ct-flow_num {
  display: block;
  font-size: 44px;
  font-weight: 800;
  color: #ff9494;
  line-height: 1;
  letter-spacing: 0.04em;
}

.ct-flow_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 116px;
  margin: 14px auto 16px;
  background: #fff3e6;
  color: #7ec899;
}

main.cms-lp .ct-flow_label {
  font-size: 16px;
  font-weight: 700;
}

.ct-flow_arrow {
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 28px solid #7ec899;
}

.ct-flow_badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 96px;
  height: 96px;
  border-radius: 50%;
  background: #7ec899;
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
}

.ct-flow_badge-num {
  font-size: 18px;
}

.ct-flow_badge-text {
  font-size: 16px;
}

/* ========================================================
   安心のサポート
   ======================================================== */
.ct-support {
  z-index: 1;
  background: #fff3e6;
}

.ct-support::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--bleed));
  bottom: calc(-1 * var(--bleed));
  z-index: -1;
  background: rgba(255, 243, 230, 0.5);
  pointer-events: none;
}

.ct-sec_title--support {
  font-weight: 700;
}

.ct-sec_title--support .ct-sec_line {
  flex: 1 1 0;
  background: #7ec899;
  opacity: 1;
}

.ct-sec_pill {
  display: inline-block;
  margin-right: 4px;
  padding: 4px 22px;
  border-radius: 999px;
  background: #7ec899;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.ct-support_row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 70px;
  margin-top: 44px;
  padding-left: 60px;
}

.ct-support_visual {
  position: relative;
  width: 200px;
}

main.cms-lp .ct-support_visual img {
  display: block;
  width: 100%;
  height: auto;
}

.ct-support_bubble {
  position: absolute;
  top: 18px;
  left: -104px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transform: rotate(-12deg);
}

main.cms-lp .ct-support_list {
  position: relative;
  width: 300px;
  padding: 22px 34px;
  border-radius: 16px;
  background: #fff;
}

.ct-support_list::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 16px solid #fff;
}

.ct-support_list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 700;
}

.ct-support_check {
  flex: 0 0 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ec899' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12.5V20H4V5h11'/%3E%3Cpath d='M8 11l4 4L21 5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ========================================================
   無料ホームページサービス
   ======================================================== */
.ct-free {
  --pad-t: calc(clamp(44px, 6.5vh, 72px) + var(--bleed));
  --pad-b: 0px;   /* 下はお問い合わせセクションの上余白だけにして、上下の空きをそろえる */
  background: #fff;
}

.ct-free_row {
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 40px 6%;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.ct-free_visual {
  flex: 0 0 38%;
}

main.cms-lp .ct-free_visual img {
  display: block;
  width: 100%;
  height: auto;
}

.ct-free_body {
  flex: 1;
}

main.cms-lp .ct-free_sub {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

main.cms-lp .ct-free_title {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: #333;
}

main.cms-lp .ct-free_text {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.8;
}

main.cms-lp .ct-free_link {
  display: inline-block;
  margin-top: 22px;
  font-size: 16px;
  font-weight: 700;
  color: #FF9494;
}

main.cms-lp .ct-free_link:hover {
  opacity: .75;
}

/* ========================================================
   お問い合わせCTA
   ======================================================== */
.ct-cta {
  background: #fff;
  overflow-x: clip;
}

.ct-cta_inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 280px;
  margin: 0 calc(50% - 50vw);
  padding: 30px max(8%, calc(50vw - 50% + 60px)) 30px 30px;
  background: linear-gradient(to left, rgba(238,238,238,.95) 0%, rgba(238,238,238,.6) 30%, rgba(238,238,238,0) 55%), url("../images/cms/xf6890032801o.jpg") no-repeat center 40% / cover;
}

.ct-cta_body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

main.cms-lp .ct-cta_lead {
  font-size: 18px;
  font-weight: 700;
}

.ct-cta_btn {
  min-width: 260px;
  margin-top: 18px;
}

.ct-cta_btn span {
  margin-left: 12px;
}

/* ========================================================
   デザイン拡大モーダル
   ======================================================== */
.ct-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;   /* サイト共通ヘッダー（.gnav z-index:1300）より前に出す */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ct-modal[hidden] {
  display: none;
}

.ct-modal_back {
  position: absolute;
  inset: 0;
  background: rgba(30, 20, 10, 0.6);
}

.ct-modal_box {
  position: relative;
  width: min(1200px, 100%);
  padding: 30px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* 閉じるボタン：モーダル内の右上に、丸なしのグレーの× */
.ct-modal_close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: #999;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s;
}

.ct-modal_close:hover {
  color: #555;
}

/* 画面枠：フォルダの枠画像（PC＝images/cms/pc_frame.png、スマホ＝images/cms/phone.png）を重ね、
   画面部分（枠画像で透明になっている範囲）だけを縦にスクロールさせる。
   位置・大きさは枠画像内の画面の座標を % にしたもの */
.ct-modal_device {
  position: relative;
  /* 高さは、画面の高さから説明文・ボタン・余白の分（約260px）を引いた範囲に収める */
  width: min(100%, calc(min(100vh - 260px, 720px) * 1488 / 854));
  aspect-ratio: 1488 / 854;
  margin: 0 auto;
  --scr-l: 11.358%;
  --scr-t: 6.089%;
  --scr-w: 77.285%;
  --scr-h: 84.192%;
}

/* スマホ：phone.png（525×1039、画面 450×977） */
.ct-modal_device.is-sp {
  width: min(100%, calc(min(100vh - 260px, 760px) * 525 / 1039));
  aspect-ratio: 525 / 1039;
  --scr-l: 7.238%;
  --scr-t: 3.080%;
  --scr-w: 85.714%;
  --scr-h: 94.033%;
}

main.cms-lp .ct-modal_frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;   /* 枠の上からでもスクロールできるように */
}

main.cms-lp .ct-modal_screen {
  position: absolute;
  left: var(--scr-l);
  top: var(--scr-t);
  width: var(--scr-w);
  height: var(--scr-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* サイト共通の緑グラデーションのスクロールバー（::-webkit-scrollbar）を使わず、
     シンプルなグレーにする（scrollbar-color を指定すると ::-webkit-scrollbar は無視される） */
  scrollbar-width: thin;
  scrollbar-color: #b5b5b5 #f2f2f2;
  background: #fff;
}

/* スマホはスクロールバーを出さない */
main.cms-lp .ct-modal_device.is-sp .ct-modal_screen {
  scrollbar-width: none;
}

main.cms-lp .ct-modal_device.is-sp .ct-modal_screen::-webkit-scrollbar {
  display: none;
}

/* PC／スマホ切り替え（モーダル内のみ） */
.ct-device_switch {
  display: flex;
  width: fit-content;
  margin: 0 auto 14px;   /* 画面枠の上の中央 */
  padding: 4px;
  border-radius: 999px;
  background: #eeeeee;
}

.ct-device_btn {
  min-width: 96px;
  padding: 7px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #666;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.ct-device_btn.is-active {
  background: #7ec899;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* やさしいデザインの左固定メニュー：スクロールする画面の上に重ねて、左に留める
   （temB.png の左端 248px を切り出した画像。幅は画面幅の 249/1248） */
.ct-modal_nav {
  position: absolute;
  left: var(--scr-l);
  top: var(--scr-t);
  z-index: 1;
  width: calc(var(--scr-w) * 0.1995);
  height: var(--scr-h);
  border-right: 1px solid #f3eee7;
  background: #fff url("../images/cms/temB_nav.png") no-repeat center top / 100% auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.ct-modal_nav[hidden] {
  display: none;
}

main.cms-lp .ct-modal_full {
  display: block;
  margin: 0;
  width: 100%;
  height: auto;
}

main.cms-lp .ct-modal_hint {
  margin-top: 10px;
  font-size: 13px;
  color: #777;
  text-align: center;
}

/* デザイン切り替えとPC／スマホ切り替えを横に並べる */
.ct-modal_controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* 狭い画面では2段に折り返す */
  justify-content: center;
  gap: 14px 24px;
  margin-top: 20px;
}

.ct-design_switch--modal {
  flex: 0 1 480px;
  margin: 0;
}

body.ct-modal-open {
  overflow: hidden;
}

/* ========================================================
   タブレット（〜979px）
   ======================================================== */
/* iPad横向きなど（980〜1199px）：列が狭いので、MVの画像を左の文章側へ広げない */
@media (min-width: 980px) and (max-width: 1199px) {
  .ct-fv_visual {
    width: calc(100% + 20px);
    max-width: none;
    margin-left: -20px;
    margin-right: 0;
    padding-right: 0;   /* PC画像を右端まで使って大きく見せる */
  }

  .ct-fv_phone-img {
    right: 0;
    width: 92px;   /* スマホ画像は小さめにして、PC画像に重ねる */
  }

  /* 3つのタグ：アイコンの分だけ詰めて、右のPC画像に重ならないようにする */
  main.cms-lp .ct-fv_tags {
    gap: 8px;
  }

  .ct-fv_tags li {
    gap: 4px;
    padding: 12px 12px;
    font-size: 13px;
  }
}

/* タブレット（641〜1199px）：お悩みの吹き出しを人物側へ寄せる */
@media (min-width: 641px) and (max-width: 1199px) {
  .ct-nayami_bubble--1 {
    left: 8%;
  }

  .ct-nayami_bubble--2 {
    right: 15%;
  }

  .ct-nayami_bubble--3 {
    right: 8%;
  }

  /* 特長01〜03：iPadの縦長画面では vh で余白が広がりすぎるため固定値にする */
  main.cms-lp .ct-feature,
  main.cms-lp .ct-feature:first-of-type {
    --pad-t: 56px;
    --pad-b: 56px;
  }

  main.cms-lp .ct-point {
    margin-top: 28px;
  }

  /* 02のチェックリスト：4つとも1行に収めて高さをそろえる */
  main.cms-lp .ct-check_list {
    gap: 12px;
  }

  main.cms-lp .ct-check_list li {
    gap: 8px;
    padding: 12px 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* 03：見出しは「AIがホームページ運用を／サポート」で改行 */
  main.cms-lp .ct-feature_title br.sp {
    display: inline;
  }

  main.cms-lp .ct-feature_title > span:not(.ct-feature_num) {
    text-align: left;
  }

  /* 03のAIカード：アイコンを上にして、説明文が細切れに折り返さないようにする */
  .ct-ai_item {
    flex-direction: column;
    gap: 8px;
    padding: 18px 12px;
    text-align: center;
  }

  main.cms-lp .ct-ai_text {
    font-size: 13px;
  }

  /* 説明文は文節の区切りで改行する（「ホームペ／ージ」のような途中改行を防ぐ。対応ブラウザのみ） */
  main.cms-lp .ct-feature_text,
  main.cms-lp .ct-point_text,
  main.cms-lp .ct-chat_msg {
    word-break: auto-phrase;
  }

  /* お問い合わせの写真：PCと同じく口元あたりから下を見せる（画面が狭いと写真が縮み、顔まで入るため） */
  .ct-cta_inner {
    background-position: 0 0, center 53%;
  }
}

@media (max-width: 979px) {

  .ct-fv_blob--1 {
    width: 150px;
    height: 150px;
    top: -20px;
    left: -65px;
  }

  .ct-fv_blob--2 {
    width: 100px;
    height: 100px;
    top: 620px;
    left: 6%;
  }

  .ct-fv_blob--3 {
    width: 180px;
    height: 180px;
    top: 60px;
    right: -30px;
  }

  /* LPの .fv-hoiku_right と同様、タブレット以下は縦積み */
  .ct-fv .container .row .ct-fv_left,
  .ct-fv .container .row .ct-fv_right {
    width: calc(100% - 20px);
  }

  .ct-fv_left {
    text-align: center;
  }

  main.cms-lp .ct-fv_label {
    align-self: center;
  }

  .ct-fv_right {
    margin-top: 40px;
  }

  .ct-fv_title {
    font-size: 30px;
  }

  main.cms-lp .ct-fv_tags {
    justify-content: center;
  }

  .ct-fv_visual {
    width: 80%;
    max-width: 560px;
    margin: 0 auto;
    padding-right: 54px;
  }

  .ct-fv_phone-img {
    right: 0;
  }

  .ct-fv_btn {
    align-self: center;
    min-width: 260px;
  }

  .ct-reason_list {
    gap: 20px;
  }

  .ct-reason_item {
    width: 240px;
    padding: 18px;
  }

  main.cms-lp .ct-reason_title {
    font-size: 18px;
  }

  .ct-feature_row {
    flex-direction: column;
    gap: 30px;
  }

  /* 縦積みのときは、文章（見出し・説明）を先に、画像をその下に */
  .ct-feature_body {
    order: -1;
  }

  .ct-feature_visual {
    flex: none;
    width: 80%;
    max-width: 560px;
  }

  .ct-feature_body {
    width: 100%;
  }

  .ct-point_box {
    flex-direction: column;
    gap: 24px;
  }

  /* 縦積みのときは、枠の矢印を下（画像のある方）へ向ける */
  .ct-point_body {
    width: 100%;
    padding: 34px 36px 48px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M5 1.5 H95 Q98.5 1.5 98.5 5 V88 L50 98.5 L1.5 88 V5 Q1.5 1.5 5 1.5 Z' fill='%23fff' fill-opacity='.8' stroke='%236fbf8b' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  }

  .ct-point_visual--phone {
    width: 100%;
    max-width: 320px;
  }

  .ct-price_row {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }

  .ct-price_card {
    flex: none;
    width: 100%;
    max-width: 560px;
  }

  .ct-support_row {
    gap: 40px;
  }

  main.cms-lp .ct-flow_wrap {
    flex-direction: column;
  }

  .ct-cta_inner {
    min-height: 280px;
    padding-right: 5%;
  }


}

/* ========================================================
   スマートフォン（〜640px）※LPと同じ切り替え幅
   ======================================================== */
@media (max-width: 640px) {
  main.cms-lp section {
    --pad-t: 30px;
    --pad-b: 34px;
  }

  /* 理由の円と、下の特長エリアの背景（はみ出し分 --bleed を含む）の間を空ける */
  main.cms-lp .ct-reason {
    --pad-b: calc(48px + var(--bleed));
  }

  /* 背景色が付いた隣のセクションのはみ出し分（--bleed）を、スマホでも余白に足す */
  /* Before/After の見出し：スマホでは両側の緑の線を出さない */
  .ct-change .ct-sec_line,
  .ct-sec_title--support .ct-sec_line {
    display: none;
  }

  main.cms-lp .ct-change,
  main.cms-lp .ct-flow {
    --pad-t: calc(40px + var(--bleed));
    --pad-b: calc(40px + var(--bleed));
  }

  main.cms-lp .ct-free {
    --pad-t: calc(40px + var(--bleed));
    --pad-b: 0px;
  }

  main.cms-lp .ct-feature,
  main.cms-lp .ct-feature:first-of-type {
    --pad-t: 48px;
    --pad-b: 48px;
  }

  main.cms-lp .ct-fv {
    --pad-t: calc(var(--gnav-h, 0px) + 36px);
    --pad-b: 36px;
  }

  /* LPと同じく「見出し → PC画面 → タグ・ボタン」の順に並べ替える
     （左カラムを display:contents で解体し、row の直接の子として扱う） */
  .ct-fv .row {
    flex-direction: column;
  }

  .ct-fv .container .row .ct-fv_left,
  .ct-fv .row .ct-fv_left {
    display: contents;
  }

  .ct-fv_title { order: 1; }
  .ct-fv_lead  { order: 2; }
  .ct-fv_right { order: 3; }
  .ct-fv_tags  { order: 4; }
  .ct-fv_btn   { order: 5; }

  .ct-fv .container .row .ct-fv_right {
    width: 100%;
    margin: 24px 0 0;
  }

  /* スマホ：3つの特長を正円に入れて横に並べる */
  main.cms-lp .ct-fv_tags {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 22px;
  }

  main.cms-lp .ct-fv_tags li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    flex: 0 1 100px;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    white-space: normal;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
  }

  main.cms-lp br.pc {
    display: none;
  }

  main.cms-lp br.sp {
    display: inline;
  }

  .ct-btn {
    padding: 14px 24px;
    font-size: 16px;
  }

  .ct-sec_title {
    font-size: 21px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .ct-sec_line {
    flex-basis: 30px;
  }

  .ct-fv_title {
    font-size: 23px;
  }

  main.cms-lp .ct-fv_label {
    order: 0;
    align-self: center;
    margin-bottom: 10px;
    padding: 4px 14px;
    font-size: 13px;
  }

  main.cms-lp .ct-fv_lead {
    font-size: 15px;
  }

  .ct-fv_visual {
    width: 100%;
    padding-right: 36px;
    padding-bottom: 30px;
  }

  .ct-fv_phone-img {
    width: 78px;
  }

  .ct-fv_btn {
    width: 100%;
  }

  /* お悩み：吹き出しを縦に並べる */

  .ct-nayami_stage {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 0 0;
  }

  /* 背景のもやもや：画面の左右からはみ出す大きさの縦長の形にして、見出し〜人物の後ろに敷く */
  .ct-nayami {
    overflow-x: clip;
  }

  .ct-nayami_stage {
    isolation: isolate;
  }

  /* スマホ専用の縦長のもやもや（PCの横長の形を引き伸ばすと不自然なため、別の形にする）。
     preserveAspectRatio='none' で枠いっぱいに合わせる */
  .ct-nayami_blob {
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 600' preserveAspectRatio='none'%3E%3Cpath d='M390,300 C391,347 378,405 361,444 C344,484 315,512 288,537 C261,562 229,593 200,591 C171,590 140,554 116,527 C91,501 69,470 53,432 C36,394 22,347 18,300 C14,253 16,191 30,147 C44,104 75,56 103,39 C132,23 170,45 200,50 C230,56 259,53 285,71 C311,89 339,121 356,159 C374,198 389,253 390,300 Z' fill='%23FFF3E6'/%3E%3C/svg%3E");
  }

  .ct-nayami_blob--inner {
    top: 44%;   /* 上端はそのままに、下側だけ短くする */
    width: 135%;
    height: 100%;
  }

  .ct-nayami_blob--outer {
    top: 44%;
    width: 155%;
    height: 110%;
  }

  /* タイトルはブロブの中に入れたが、スマホは縦積みに戻すため通常の並びに戻す */
  .ct-nayami_title {
    position: static;
    font-size: 22px;
  }

  .ct-nayami_figure {
    position: static;
    order: 4;
    width: 160px;
    margin: 34px auto 0;   /* 最後の吹き出しのしっぽが入る分 */
    transform: none;
  }

  /* スマホもPCと同じ有機的な吹き出し形（角丸はPCの指定を引き継ぐ）。
     左右交互にずらして並べ、しっぽの丸は下の人物に向ける */
  .ct-nayami_bubble {
    position: relative;   /* しっぽ（::before/::after）の基準にする */
    inset: auto;          /* PC用の top/left/right/bottom を打ち消す */
    width: fit-content;
    max-width: 90%;
    padding: 18px 28px;
    font-size: 14px;
    text-align: center;
  }

  .ct-nayami_bubble--1,
  .ct-nayami_bubble--3 {
    align-self: flex-start;
  }

  .ct-nayami_bubble--2 {
    align-self: flex-end;
  }

  main.cms-lp .ct-nayami_bubble--1 {
    margin-top: 26px;
  }

  /* 左右交互の吹き出しを縦に少し重ねて詰める */
  main.cms-lp .ct-nayami_bubble--2 {
    margin-top: -36px;
  }

  main.cms-lp .ct-nayami_bubble--3 {
    margin-top: -16px;
  }

  /* しっぽ：どの吹き出しも下側から、下にいる人物（画面中央）へ向けて斜めに伸ばす */
  /* 吹き出しの中央から、ほぼ真下へ */
  .ct-nayami_bubble--1::before {
    top: auto;
    right: auto;
    left: calc(50% - 8px);
    bottom: -22px;
  }

  .ct-nayami_bubble--1::after {
    top: auto;
    right: auto;
    left: calc(50% - 3px);
    bottom: -38px;
  }

  /* 吹き出しの中央から、左下へ */
  .ct-nayami_bubble--2::before {
    top: auto;
    right: auto;
    left: calc(50% - 8px);
    bottom: -22px;
  }

  .ct-nayami_bubble--2::after {
    top: auto;
    right: auto;
    left: calc(50% - 12px);
    bottom: -38px;
  }

  /* 中央より少し左から、小さい丸を少し右へ傾ける */
  .ct-nayami_bubble--3::before {
    top: auto;
    right: auto;
    left: calc(50% - 20px);
    bottom: -22px;
  }

  .ct-nayami_bubble--3::after {
    top: auto;
    right: auto;
    left: calc(50% - 11px);
    bottom: -38px;
  }

  main.cms-lp .ct-nayami_answer {
    font-size: 20px;
  }


  .ct-reason_list {
    flex-direction: column;
    align-items: center;
    gap: 34px;
  }

  .ct-reason_item {
    width: 100%;
    max-width: 270px;
  }


  .ct-feature_visual {
    width: 100%;
  }

  main.cms-lp .ct-feature_title {
    font-size: 21px;
    line-height: 1.45;
    gap: 10px;
    align-items: baseline;
  }

  .ct-feature_num {
    font-size: 32px;
  }

  main.cms-lp .ct-feature_title > span:not(.ct-feature_num) {
    text-align: left;
  }

  main.cms-lp .ct-feature_text {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.85;
  }

  .ct-design_switch {
    gap: 8px;
  }

  .ct-design_btn {
    font-size: 14px;
    padding: 10px 4px;
  }

  main.cms-lp .ct-point {
    margin-top: 52px;   /* 上の「※クリック・タップで拡大できます」とタグが重ならないように */
  }

  .ct-point_tag {
    left: 14px;
    font-size: 18px;
  }

  .ct-point_body {
    padding: 30px 22px 44px;
  }

  main.cms-lp .ct-point_title {
    font-size: 17px;
    line-height: 1.5;
  }

  main.cms-lp .ct-point_text {
    font-size: 14px;
  }

  .ct-point_visual--templates {
    width: 100%;
    justify-content: center;
    gap: 14px;
  }

  .ct-template {
    width: auto;
  }

  main.cms-lp .ct-template_frame img {
    height: 130px;
  }

  /* スマホ：2列2行 */
  main.cms-lp .ct-check_list {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
  }

  main.cms-lp .ct-check_list li {
    gap: 8px;
    min-height: 56px;   /* 2行になる「お知らせ・ブログを更新」と高さをそろえる */
    padding: 10px 12px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.4;
  }

  main.cms-lp .ct-check_list li::before {
    width: 10px;
    height: 10px;
  }

  .ct-devices:not(.ct-devices--cms) {
    padding-right: 50px;
    padding-bottom: 20px;
  }

  /* 03のAI生成パネル：スマホでは横幅いっぱい近くまで広げ、円の上に重ねる */
  .ct-aigen {
    aspect-ratio: auto;
    padding: 0 0 8px;
  }

  /* 02・03：文章と画像の間を詰める（02は画像の上に管理画面分の空きがあるため少なめ） */
  .ct-feature--ai .ct-feature_row {
    gap: 14px;
  }

  .ct-feature--cms .ct-feature_row {
    gap: 0;
  }

  .ct-aigen_circle {
    top: 50%;
    left: 50%;
    width: 88%;
    transform: translate(-50%, -50%);
  }

  .ct-aigen_panel {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;   /* 上のAIカード2枚と横幅をそろえる */
    max-width: none;
    margin: 0;
    transform: none;
    font-size: 12px;
  }

  .ct-tablet {
    width: 110px;
  }


  /* スマホ：アイコンを上にしたカードを2つ横に並べる */
  main.cms-lp .ct-ai_list {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
  }

  .ct-ai_item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    padding: 16px 10px;
    text-align: center;
  }

  main.cms-lp .ct-ai_title {
    font-size: 16px;
  }

  main.cms-lp .ct-ai_text {
    font-size: 12px;
  }

  .ct-point_visual--ai {
    width: 100%;
    max-width: 400px;
  }

  /* Before / After */

  main.cms-lp .ct-change_list {
    margin-top: 26px;
  }

  /* スマホ：before → after の1組を1枚の白いカードにまとめる */
  .ct-change_row {
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
    padding: 8px 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(80, 50, 20, 0.12);
  }

  .ct-change_before,
  .ct-change_after {
    width: 100%;
    min-height: 56px;
    padding: 6px 16px 6px 70px;
    background: none;
    box-shadow: none;
    font-size: 14px;
  }

  .ct-change_badge {
    width: 42px;
    height: 42px;
    font-size: 11px;
  }

  .ct-change_arrow {
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 12px solid #7ec899;
    border-bottom: none;
  }

  /* 料金 */

  .ct-price_title {
    font-size: 23px;
  }

  .ct-price_card {
    width: 100%;
  }

  .ct-price_num {
    font-size: 34px;
  }

  /* 流れ */

  main.cms-lp .ct-flow_wrap {
    gap: 20px;
    margin-top: 30px;
  }

  /* スマホ：3ステップを横一列に並べて、縦の長さを抑える */
  main.cms-lp .ct-flow_list {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    width: 100%;
  }

  .ct-flow_step {
    flex: 1 1 0;
    min-width: 0;
  }

  .ct-flow_num {
    font-size: 30px;
  }

  .ct-flow_icon {
    width: 76px;
    height: 68px;
    margin: 8px auto 10px;
  }

  .ct-flow_icon svg {
    width: 36px;
    height: 36px;
  }

  main.cms-lp .ct-flow_label {
    font-size: 13px;
    line-height: 1.4;
  }

  .ct-flow_arrow {
    flex: none;
    align-self: center;
    margin-top: -10px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 11px solid #7ec899;
    border-right: none;
  }

  .ct-flow_badge {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
  }

  /* サポート */

  .ct-support_row {
    flex-direction: column;
    gap: 24px;
    margin-top: 30px;
    padding-left: 0;
  }

  .ct-support_visual {
    width: 170px;
    margin-top: 40px;
  }

  .ct-support_bubble {
    top: -14px;
    left: 50%;
    transform: translateX(-50%);   /* スマホは傾けず水平に */
  }

  .ct-support_list::before {
    left: 50%;
    top: -14px;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: none;
    border-bottom: 16px solid #fff;
  }

  /* 項目のかたまりをカードの中央に置く（チェックの頭はそろえたまま） */
  main.cms-lp .ct-support_list {
    display: grid;
    justify-content: center;
    width: 100%;
    padding: 16px 22px;
  }

  .ct-support_list li {
    font-size: 15px;
  }

  /* 無料HP */

  main.cms-lp .ct-free_row {
    flex-direction: column;
    gap: 26px;
    padding: 30px 0;
  }

  .ct-free_visual {
    flex: none;
    width: 85%;
  }

  /* 見出しまわりとリンクは中央、本文は左揃え */
  .ct-free_body {
    width: 100%;
    text-align: center;
  }

  main.cms-lp .ct-free_sub {
    font-size: 14px;
  }

  main.cms-lp .ct-free_title {
    margin-top: 2px;
    font-size: 24px;
  }

  main.cms-lp .ct-free_text {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
  }

  main.cms-lp .ct-free_link {
    margin-top: 18px;
    font-size: 15px;
  }

  /* CTA */
  /* PCと同じく写真を画面幅いっぱいに切り抜いて敷き、
     全体に薄いグレーを重ねて、その中央に文字とボタンを置く */
  .ct-cta_inner {
    flex-direction: column;
    justify-content: center;   /* 文字とボタンを上下中央に */
    align-items: center;
    min-height: 230px;
    padding: 16px 24px;
    background: linear-gradient(rgba(238,238,238,.6), rgba(238,238,238,.6)), url("../images/cms/xf6890032801o.jpg") no-repeat 50% 85% / auto 165%;   /* 拡大して下側（口元から下）だけを見せ、顔は切る */
  }

  .ct-cta_body {
    align-items: center;
  }

  main.cms-lp .ct-cta_lead {
    font-size: 16px;
  }

  .ct-cta_btn {
    min-width: 0;
    width: 100%;
    font-size: 16px;
  }

  .ct-modal_box {
    padding: 16px;
  }

  .ct-modal_close {
    top: 6px;
    right: 8px;
    width: 40px;
    height: 40px;
  }
}

/* ========================================================
   小さいスマートフォン（〜360px）
   ======================================================== */
@media (max-width: 360px) {
  .ct-fv_title {
    font-size: 20px;
  }

  .ct-design_btn {
    font-size: 13px;
  }

}