:root{
  --ink:#2e2a26;
}
@font-face{
  font-family:"Gen Jyuu Gothic X";
  src:url("../fonts/GenJyuuGothicX-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  font-family:"Gen Jyuu Gothic X",sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  max-width:100%;
}
img{max-width:100%;display:block;}

/* ================= HERO ================= */
.hero{
  background:#fff;
}

/* the whole hero is one image (1366x768) with the logo / copy / icons
   laid on top of it at fixed proportional positions, matching the design exactly */
.hero-frame{
  position:relative;
  width:100%;
  margin:0 auto;
}
.hero-bg{
  width:100%;
  height:auto;
  display:block;
}
.hero-content{
  position:absolute;
  inset:0;
}
.hero-content > *{
  position:absolute;
}

.brand-mark{
  left:4.76%;
  top:6.9%;
  width:17.9%;
}

.hero-tagline-block{
  left:3%;
  top:17%;
  width:38%;
}

.hero-copy{
  left:4.4%;
  top:55.7%;
  width:44%;
  margin:0;
  font-size:1.14vw;
  line-height:1.8;
}

.hero-icons{
  left:7.3%;
  top:78.4%;
  width:48.3%;
  display:flex;
  justify-content:space-between;
}
.hicon{text-align:center;}
.hicon .circle{
  width:6.4vw;
  height:6.4vw;
  border-radius:50%;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 0.7vw;
  padding:1.4vw;
}
.hicon .circle img{width:100%;height:100%;object-fit:contain;}
.hicon span{font-size:0.95vw;font-weight:700;white-space:nowrap;}

/* ================= RESPONSIVE ================= */
/* Below this width the overlay text becomes too small to read comfortably,
   so the layout switches to a simple stacked flow instead of scaling further. */
@media (max-width:700px){
  .hero-frame{max-width:none;position:static;}
  .hero-bg{width:100%;}
  .hero-content{position:static;}
  .hero-content > *{position:static;width:auto;}

  .hero-content{padding:28px 24px 40px;}
  .brand-mark{width:200px;margin-bottom:20px;}
  .hero-tagline-block{width:100%;max-width:420px;margin-bottom:20px;}
  .hero-copy{font-size:15px;margin-bottom:28px;}
  .hero-icons{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;}
  .hicon{flex:1 1 30%;}
  .hicon .circle{width:60px;height:60px;padding:14px;margin:0 auto 8px;}
  .hicon span{font-size:11.5px;}
}

/* ================= 01 SERVICE ================= */
.section01-service{
  background:#fff8db;
}
.s01-frame{
  position:relative;
  width:100%;
  margin:0 auto;
}
.s01-bg{
  width:100%;
  height:auto;
  display:block;
}
.s01-content{
  position:absolute;
  inset:0;
}
.s01-content > *{
  position:absolute;
}

.s01-heading{
  left:50%;
  top:3.5%;
  width:64%;
  transform:translateX(-50%);
  text-align:center;
}
.s01-heading h2{
  margin:0 0 0.8%;
  font-size:3.35vw;
  font-weight:800;
  color:#2e2a26;
}
.s01-heading p{
  margin:0;
  font-size:1.5vw;
  color:#2e2a26;
  line-height:1.65;
}

.s01-icon{
  width:16%;
  text-align:center;
}
.s01-icon-1{left:1.8%; top:27.5%;}
.s01-icon-2{left:18.0%; top:28.2%;}
.s01-icon-3{left:34.3%; top:28.2%;}
.s01-icon-4{left:50.5%; top:28.2%;}
.s01-icon-5{left:66.9%; top:27.7%;}
.s01-icon-6{left:83.1%; top:28.2%;}
.s01-icon-7{left:26.9%; top:61.0%;}
.s01-icon-8{left:57.1%; top:61.0%;}

.s01-circle{
  width:46.87%;
  aspect-ratio:1/1;
  margin:0 auto 0.9vw;
  border-radius:50%;
  overflow:hidden;
}
.s01-circle img{width:100%;height:100%;object-fit:cover;display:block;}

.s01-icon h3{
  margin:0 0 0.5vw;
  font-size:1.28vw;
  font-weight:800;
  color:#2e2a26;
}
.s01-icon p{
  margin:0;
  font-size:0.92vw;
  color:#5b5650;
  line-height:1.65;
}

/* ---- responsive ---- */
@media (max-width:900px){
  .s01-frame{max-width:none;position:static;}
  .s01-bg{display:none;}
  .s01-content{position:static;}
  .s01-content > *{position:static;width:auto;transform:none;}

  .section01-service{padding:50px 24px;}
  .s01-heading{text-align:center;margin-bottom:36px;}
  .s01-heading h2{font-size:24px;}
  .s01-heading p{font-size:14.5px;}

  .s01-content{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:36px 20px;
  }
  .s01-icon{width:150px;}
  .s01-circle{width:76px;}
  .s01-icon h3{font-size:14.5px;}
  .s01-icon p{font-size:12px;}
}

/* ================= 02 STRENGTH ================= */
.section02-strength{
  background:#fff8db;
}
.s02-frame{
  position:relative;
  width:100%;
  margin:0 auto;
}
.s02-bg{
  width:100%;
  height:auto;
  display:block;
}
.s02-content{
  position:absolute;
  inset:0;
}
.s02-content > *{
  position:absolute;
}

.s02-heading{
  position:static;
}
.s02-heading h2{
  position:absolute;
  top:24.6%;
  left:12%;
  width:34%;
  margin:0;
  font-size:2.55vw;
  font-weight:800;
  line-height:1.38;
  color:#2e2a26;
}
.s02-sub{
  position:absolute;
  top:49.3%;
  left:12%;
  width:34%;
  margin:0;
  font-size:1.22vw;
  font-weight:700;
  color:#3dbb8e;
}
.s02-para{
  position:absolute;
  top:59.5%;
  left:12%;
  width:34%;
  margin:0;
  font-size:1.06vw;
  color:#5b5650;
  line-height:1.7;
}

.s02-eq{width:11%; text-align:center;}
.s02-eq-1{left:42.8%; top:16.5%;}
.s02-eq-2{left:56.6%; top:16.5%;}
.s02-eq-3{left:70.4%; top:16.5%;}
.s02-eq-4{left:84.9%; top:16.5%;}

.s02-circle{
  width:75.7%;
  aspect-ratio:1/1;
  margin:0 auto 0.7vw;
  border-radius:50%;
  overflow:hidden;
}
.s02-circle img{width:100%;height:100%;object-fit:cover;display:block;}

.s02-label{
  margin:0 0 0.5vw;
  font-size:1.06vw;
  font-weight:800;
  white-space:nowrap;
}
.s02-eq p{
  margin:0;
  font-size:0.85vw;
  color:#5b5650;
  line-height:1.6;
}

.s02-sym{
  font-size:2vw;
  font-weight:800;
  color:#c9c2b2;
  top:22%;
}
.s02-sym-1{left:53.6%;}
.s02-sym-2{left:67.4%;}
.s02-sym-3{left:81.2%;}

.s02-note{
  left:34.9%;
  top:67.5%;
  width:66%;
  margin:0;
  text-align:center;
  font-size:1.05vw;
  font-weight:700;
  line-height:2;
  color:#2e2a26;
}

/* ---- responsive ---- */
@media (max-width:900px){
  .s02-frame{max-width:none;position:static;}
  .s02-bg{display:none;}
  .s02-content{position:static;}
  .s02-content > *{position:static;width:auto;}

  .section02-strength{padding:50px 24px;}
  .s02-heading{margin-bottom:32px;}
  .s02-heading h2{position:static;width:auto;font-size:24px;margin-bottom:10px;}
  .s02-sub{position:static;width:auto;font-size:15px;margin-bottom:14px;display:block;}
  .s02-para{position:static;width:auto;font-size:14.5px;}

  .s02-content{display:flex;flex-wrap:wrap;}
  .s02-heading{flex:1 1 100%;}
  .s02-eq{width:auto;flex:1 1 40%;margin-bottom:24px;}
  .s02-label{font-size:14.5px;}
  .s02-eq p{font-size:12px;}
  .s02-sym{display:none;}
  .s02-note{flex:1 1 100%;margin-top:20px;font-size:14.5px;line-height:1.9;}
}

/* ================= 03 CASE ================= */
.section03-case{
  background:#fff8db;
}
.s03-frame{
  position:relative;
  width:100%;
  margin:0 auto;
}
.s03-bg{
  width:100%;
  height:auto;
  display:block;
}
.s03-content{
  position:absolute;
  inset:0;
}
.s03-content > *{
  position:absolute;
}

.s03-heading{
  left:4.8%;
  top:35.9%;
  width:29%;
}
.s03-heading h2{
  margin:0 0 3%;
  font-size:2.15vw;
  font-weight:800;
  color:#2e2a26;
}
.s03-heading p{
  margin:0;
  font-size:0.95vw;
  color:#5b5650;
  line-height:1.9;
}

.s03-cards{
  left:34.04%;
  top:15.7%;
  width:61.2%;
  display:flex;
  justify-content:space-between;
}
.s03-card{
  width:30.7%;
  background:#fff;
  border-radius:5px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}
.s03-thumb{
  width:100%;
  aspect-ratio:257/114;
  overflow:hidden;
}
.s03-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

.s03-body{padding:5% 6% 5%;}
.s03-body h3{
  margin:0 0 5%;
  font-size:0.9vw;
  font-weight:800;
  line-height:1.55;
  color:#2e2a26;
}
.s03-row{display:flex;gap:3%;margin-bottom:4%;align-items:flex-start;}
.s03-tag{
  flex:0 0 auto;
  background:#ff4d5e;
  color:#fff;
  font-size:0.66vw;
  font-weight:700;
  padding:0.3vw 0.5vw;
  border-radius:3px;
  white-space:nowrap;
  margin-top:1px;
}
.s03-val{font-size:0.78vw;color:#2e2a26;padding-top:1px;}
.s03-val.small{font-size:0.72vw;color:#5b5650;line-height:1.65;}

/* ---- responsive ---- */
@media (max-width:900px){
  .s03-frame{max-width:none;position:static;}
  .s03-bg{display:none;}
  .s03-content{position:static;}
  .s03-content > *{position:static;width:auto;}

  .section03-case{padding:50px 24px;}
  .s03-heading{margin-bottom:36px;}
  .s03-heading h2{font-size:24px;}
  .s03-heading p{font-size:14.5px;}

  .s03-cards{display:flex;flex-direction:column;gap:24px;}
  .s03-card{width:100%;}
  .s03-body h3{font-size:15px;}
  .s03-tag{font-size:11px;padding:4px 8px;}
  .s03-val{font-size:13px;}
  .s03-val.small{font-size:12.5px;}
}

/* ================= 04 CONTACT ================= */
.section04-contact{
  background:#fff8db;
}
.s04-frame{
  position:relative;
  width:100%;
  margin:0 auto;
}
.s04-bg{
  width:100%;
  height:auto;
  display:block;
}
.s04-content{
  position:absolute;
  inset:0;
}
.s04-content > *{
  position:absolute;
}

.s04-heading{
  left:17.6%;
  top:14.5%;
  width:40%;
}
.s04-heading h2{
  margin:0;
  font-size:2.55vw;
  font-weight:800;
  line-height:1.5;
  color:#2e2a26;
}

.s04-checklist{
  left:6.3%;
  top:39.5%;
  width:44%;
  list-style:none;
  margin:0;
  padding:0;
}
.s04-checklist li{
  display:flex;
  align-items:center;
  gap:0.8%;
  font-size:0.98vw;
  font-weight:700;
  margin-bottom:2.1%;
  color:#2e2a26;
}
.s04-checklist svg{flex:0 0 auto; width:1.6vw; height:1.6vw;}

.s04-card{
  left:67.06%;
  top:11.2%;
  width:29.87%;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}
.s04-card-head{
  background:#ff5176;
  color:#fff;
  text-align:center;
  font-weight:800;
  font-size:1.05vw;
  padding:3.8% 6%;
}
.s04-card-body{padding:5.5% 6% 6%;}
.s04-entry{
  display:flex;
  gap:4%;
  align-items:center;
  background:#fff;
  border:1px solid #f3ecec;
  border-radius:8px;
  padding:4% 6%;
  margin-bottom:4%;
  box-shadow:0 4px 10px rgba(0,0,0,.04);
}
.s04-entry img{width:1.7vw;height:1.7vw;flex:0 0 auto;object-fit:contain;}
.s04-t{font-size:0.7vw;color:#ff5176;font-weight:700;margin-bottom:2px;}
.s04-v{font-size:0.88vw;font-weight:700;color:#2e2a26;}
.s04-v a{color:inherit;text-decoration:none;}
.s04-v a:hover{text-decoration:underline;}

.s04-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:2%;
  background:#ff5176;
  color:#fff;
  text-decoration:none;
  padding:3.8% 10px;
  border-radius:8px;
  font-weight:800;
  font-size:0.95vw;
  box-shadow:none;
  transition:box-shadow .25s ease;
}
/* ホバー時だけシャドウを表示（タッチ端末では表示しない） */
@media (hover:hover){
  .s04-cta:hover{box-shadow:0 8px 18px rgba(255,81,118,.4);}
}

/* ---- responsive ---- */
@media (max-width:900px){
  .s04-frame{max-width:none;position:static;}
  .s04-bg{display:none;}
  .s04-content{position:static;}
  .s04-content > *{position:static;width:auto;}

  .section04-contact{padding:50px 24px;}
  .s04-heading h2{font-size:24px;line-height:1.5;}
  .s04-checklist{margin:28px 0;}
  .s04-checklist li{font-size:15px;}
  .s04-checklist svg{width:22px;height:22px;}

  .s04-card{width:100%;}
  .s04-card-head{font-size:16px;}
  .s04-t{font-size:11.5px;}
  .s04-v{font-size:14.5px;}
  .s04-entry img{width:26px;height:26px;}
  .s04-cta{font-size:15px;}
}

/* ================= FOOTER ================= */
.footer{
  background:#fff8db;
}
.ft-frame{
  position:relative;
  width:100%;
  margin:0 auto;
  container-type:inline-size;   /* 子要素で cqw(=この枠の幅の1%)を使うため */
}
.ft-bg{
  width:100%;
  height:auto;
  display:block;
}
.ft-content{
  position:absolute;
  inset:0;
}
.ft-content > *{
  position:absolute;
}

.ft-logo{
  left:4.4%;
  top:14.2%;
  width:19.8%;
}

.ft-col{font-size:0.86vw;}
.ft-col p{margin:0 0 1.6vw;}
.ft-col .ft-head{font-weight:700;margin-bottom:1.6vw;}

.ft-col-1{left:4.4%; top:42.6%; width:32%;}
.ft-col-2{left:44.3%; top:53.5%; width:32%;}

.ft-divider{
  left:40.1%;
  top:42.6%;
  width:1px;
  height:35.5%;
  background:#c9c2b2;
}

/* 背景画像(footer-background.png 1366x286)内のピンクの吹き出しに文言を重ねる。
   吹き出し本体(しっぽを除く)を画像から測定：x 946〜1152 / y 64〜203 → 中心 (1049, 133.5)
   → 画像幅に対する割合に換算： 1049÷1366=76.79 ／ 133.5÷1366=9.77
   この点を文言の「中心」に合わせ(transform:translate(-50%,-50%))、位置・文字サイズをすべて
   フッター枠の幅(% / cqw)基準にしているので、背景画像と同じ比率で拡大縮小し、画面幅が変わってもずれない。
   微調整する場合は left / top の数値だけを変える（各2行：1行目=旧ブラウザ用、2行目=通常。両方変える） */
.ft-bubble{
  left:76.79%;
  left:76.79cqw;
  top:9.77vw;
  top:9.77cqw;
  transform:translate(-50%,-50%);
  width:max-content;
  text-align:center;
  white-space:nowrap;
  font-size:1.3vw;
  font-size:1.3cqw;
  font-weight:700;
  line-height:1.6;
  color:#ffffff;
}

/* ---- responsive ---- */
@media (max-width:900px){
  .ft-frame{max-width:none;position:static;}
  .ft-bg{display:none;}
  .ft-content{position:static;}
  .ft-content > *{position:static;width:auto;}

  .footer{padding:40px 24px;background:#fff8db;}
  .ft-logo{width:180px;margin-bottom:24px;}
  .ft-col{font-size:13.5px;}
  .ft-col p{margin:0 0 8px;}
  .ft-col-1{margin-bottom:20px;}
  .ft-divider{display:none;}
  /* 900px以下は背景画像(ピンクの吹き出し)を非表示にするため、CSSで吹き出しを作る */
  .ft-bubble{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:fit-content;
    margin-top:34px;
    padding:14px 28px;
    font-size:14px;
    line-height:1.7;
    text-align:center;
    white-space:normal;
    color:#fff;
    background:#ff7aa8;
    border:3px solid #ff4f86;
    border-radius:26px;
  }
  .ft-bubble::after{
    content:"";
    position:absolute;
    left:28px;
    top:-15px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:13px solid #ff4f86;
  }
}

/* ================= CONTACT FORM PAGE ================= */
.cf-page{
  background:#fff8db;
}
.cf-header{
  background:#fff8db;
  border-bottom:3px solid #ff4d8d;
  padding:16px 20px;
}
.cf-header a{display:inline-block; line-height:0;}
.cf-header img{height:34px; width:auto;}

.cf-wrap{
  max-width:640px;
  margin:0 auto;
  padding:56px 20px 80px;
}
.cf-title{
  margin:0 0 6px;
  text-align:center;
  font-size:26px;
  font-weight:800;
  color:#ff4d8d;
}
.cf-sub{
  margin:0 0 20px;
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:#2e2a26;
}
.cf-lead{
  margin:0 0 32px;
  text-align:center;
  font-size:13.5px;
  color:#5b5650;
  line-height:1.8;
}

.cf-card{
  background:#fff;
  border-radius:14px;
  padding:8px 24px;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
}

.cf-field{
  padding:18px 0;
  border-bottom:1px solid #ece7dd;
}
.cf-field:last-of-type{border-bottom:none;}
.cf-field label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:700;
  color:#2e2a26;
  margin-bottom:10px;
}
.cf-badge{
  font-size:10.5px;
  font-weight:700;
  color:#fff;
  padding:2px 8px;
  border-radius:3px;
  line-height:1.6;
}
.cf-required{background:#ff4d8d;}
.cf-optional{background:#a29c90;}

.cf-field input[type="text"],
.cf-field input[type="email"],
.cf-field input[type="tel"],
.cf-field select,
.cf-field textarea{
  width:100%;
  background:#f8f6f1;
  border:1px solid #ece7dd;
  border-radius:6px;
  padding:12px 14px;
  font-size:13.5px;
  font-family:inherit;
  color:#2e2a26;
  box-sizing:border-box;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder{color:#b3ab9d;}
.cf-field textarea{resize:vertical;min-height:110px;line-height:1.7;}

.cf-select-wrap{position:relative;}
.cf-select-wrap::after{
  content:"";
  position:absolute;
  right:16px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid #8a8477;
  border-bottom:2px solid #8a8477;
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.cf-field select{appearance:none;-webkit-appearance:none;cursor:pointer;}

.cf-agree{
  padding:22px 0;
  text-align:center;
}
.cf-agree label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:700;
  color:#2e2a26;
  cursor:pointer;
}
.cf-agree input[type="checkbox"]{
  width:17px;
  height:17px;
  accent-color:#ff4d8d;
  cursor:pointer;
}

.cf-submit{
  display:block;
  width:100%;
  max-width:280px;
  margin:6px auto 22px;
  background:#ec1560;
  color:#fff;
  border:none;
  border-radius:999px;
  padding:15px 10px;
  font-size:15px;
  font-weight: 800;
  font-synthesis:none;
  font-family:inherit;
  cursor:pointer;
  box-shadow:none;
  transition:box-shadow .25s ease, background-color .25s ease;
}
.cf-submit:hover{background:#d81155;}
/* ホバー時だけシャドウを表示（無効状態のボタンは除外／タッチ端末では表示しない） */
@media (hover:hover){
  .cf-submit:not(:disabled):hover{box-shadow:0 10px 22px rgba(236,21,96,.35);}
}

@media (max-width:480px){
  .cf-header{padding:12px 16px;}
  .cf-header img{height:26px;}
  .cf-wrap{padding:40px 16px 60px;}
  .cf-title{font-size:22px;}
  .cf-card{padding:4px 16px;}
}

/* ================= FOOTER ================= */
.footer{
  background:#fff8db;
}
.ft-frame{
  position:relative;
  width:100%;
  margin:0 auto;
  container-type:inline-size;   /* 子要素で cqw(=この枠の幅の1%)を使うため */
}
.ft-bg{
  width:100%;
  height:auto;
  display:block;
}
.ft-content{
  position:absolute;
  inset:0;
}
.ft-content > *{
  position:absolute;
}

.ft-logo{
  left:4.4%;
  top:14.2%;
  width:19.8%;
}

.ft-col{font-size:0.86vw;}
.ft-col p{margin:0 0 1.6vw;}
.ft-col .ft-head{font-weight:700;margin-bottom:1.6vw;}

.ft-col-1{left:4.4%; top:42.6%; width:32%;}
.ft-col-2{left:44.3%; top:53.5%; width:32%;}

.ft-divider{
  left:40.1%;
  top:42.6%;
  width:1px;
  height:35.5%;
  background:#c9c2b2;
}

/* 背景画像(footer-background.png 1366x286)内のピンクの吹き出しに文言を重ねる。
   吹き出し本体(しっぽを除く)を画像から測定：x 946〜1152 / y 64〜203 → 中心 (1049, 133.5)
   → 画像幅に対する割合に換算： 1049÷1366=76.79 ／ 133.5÷1366=9.77
   この点を文言の「中心」に合わせ(transform:translate(-50%,-50%))、位置・文字サイズをすべて
   フッター枠の幅(% / cqw)基準にしているので、背景画像と同じ比率で拡大縮小し、画面幅が変わってもずれない。
   微調整する場合は left / top の数値だけを変える（各2行：1行目=旧ブラウザ用、2行目=通常。両方変える） */
.ft-bubble{
  left:76.79%;
  left:76.79cqw;
  top:9.77vw;
  top:9.77cqw;
  transform:translate(-50%,-50%);
  width:max-content;
  text-align:center;
  white-space:nowrap;
  font-size:1.3vw;
  font-size:1.3cqw;
  font-weight:700;
  line-height:1.6;
  color:#ffffff;
}

/* ---- responsive ---- */
@media (max-width:900px){
  .ft-frame{max-width:none;position:static;}
  .ft-bg{display:none;}
  .ft-content{position:static;}
  .ft-content > *{position:static;width:auto;}

  .footer{padding:40px 24px;background:#fff8db;}
  .ft-logo{width:180px;margin-bottom:24px;}
  .ft-col{font-size:13.5px;}
  .ft-col p{margin:0 0 8px;}
  .ft-col-1{margin-bottom:20px;}
  .ft-divider{display:none;}
  /* 900px以下は背景画像(ピンクの吹き出し)を非表示にするため、CSSで吹き出しを作る */
  .ft-bubble{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width:fit-content;
    margin-top:34px;
    padding:14px 28px;
    font-size:14px;
    line-height:1.7;
    text-align:center;
    white-space:normal;
    color:#fff;
    background:#ff7aa8;
    border:3px solid #ff4f86;
    border-radius:26px;
  }
  .ft-bubble::after{
    content:"";
    position:absolute;
    left:28px;
    top:-15px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:13px solid #ff4f86;
  }
}
/* ================= MAILFORM PRO 連携 ================= */
/* エラーメッセージ（.mfp_err は公式仕様のクラス） */
.cf-field .mfp_err,
.cf-agree .mfp_err{
  color:#d81155;
  font-size:12px;
  font-weight:700;
  line-height:1.6;
  margin-top:6px;
}
/* エラー時の入力欄（OKNGクラス付与アドオン使用時の例。実際のクラス名は開発者ツールで確認） */
.cf-field input:invalid:focus,
.cf-field textarea:invalid:focus{outline:2px solid #ff4d8d;outline-offset:1px;}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus{outline:2px solid #ff4d8d;outline-offset:1px;background:#fff;}
.cf-submit:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;}

/* 送信完了ページ */
.cf-thanks{padding:40px 24px;text-align:center;}
.cf-thanks p{margin:0 0 16px;font-size:14.5px;}
.cf-thanks .cf-thanks-note{font-size:12.5px;color:#5b5650;}
.cf-back{text-decoration:none;}

/* 確認画面（メールフォームプロが生成する要素）
   ※ID/クラス名はバージョンで異なる場合があります。ブラウザの開発者ツール(F12)で
     確認画面を右クリック→検証し、実際の名前に合わせて調整してください。 */
#mfp_overlay{background:rgba(46,42,38,.55);}
#mfp_phase2,
#mfp_overlay_inner{font-family:inherit;color:var(--ink);}
#mfp_button_send,
#mfp_button_cancel{
  font-family:inherit;font-weight: 800;border:none;border-radius:999px; 
  padding:13px 28px;cursor:pointer;font-size:14.5px;font-synthesis:none;
}
#mfp_button_send{background:#ec1560;color:#fff;box-shadow:none;transition:box-shadow .25s ease, background-color .25s ease;}
#mfp_button_send:hover{background:#d81155;}
@media (hover:hover){
  #mfp_button_send:hover{box-shadow:0 8px 18px rgba(236,21,96,.35);}
}
#mfp_button_cancel{background:#a29c90;color:#fff;margin-left:10px;}