@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,700;0,800;0,900;1,500;1,700;1,800&display=swap");
/* サロン丸投げ型(見本 salon-partner.jp 集客マニア「丸投げプラン」)。読みやすい版。直したら style.css を作り直す(.ms → .ms.ms.ms と all:revert) */
.ms.ms.ms *{all:revert}

.ms.ms.ms{--bl:#314fbb;--or:#ff6414;--mt:#c8fcda;--sk:#b0c9e1;--yl:#f8ed68;--ink:#25252e;--tx:#4e4e5a;--bg:#f5f5f5;--ln:#ebebeb;
  max-width:480px;margin:0 auto;background:var(--bg);color:var(--tx);font-family:"Noto Sans JP",sans-serif;font-size:16px;font-weight:500;line-height:1.5;overflow:hidden;position:relative}
.ms.ms.ms *{box-sizing:border-box}
.ms.ms.ms img{display:block;max-width:100%}
.ms.ms.ms p{margin:0}
.ms.ms.ms p,.ms.ms.ms li,.ms.ms.ms h3,.ms.ms.ms summary{text-wrap:pretty}
.ms.ms.ms h1,.ms.ms.ms h2,.ms.ms.ms h3{margin:0;font-weight:inherit;font-size:inherit}
.ms.ms.ms ul,.ms.ms.ms ol{margin:0;padding:0;list-style:none}
.ms.ms.ms a{color:inherit;text-decoration:none}
.ms.ms.ms em{font-style:normal}
.ms.ms.ms .en{font-family:"Montserrat",sans-serif}
/* 方眼の地(見本の背景) */
.ms.ms.ms .grid{background-color:var(--bg);background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:14px 14px}

/* 共通: オレンジの英字(下に細線と小さな山)・大きい見出し(前半大・後半小) */
.ms.ms.ms .ey{display:block;width:max-content;margin:0 auto;padding:0 6px 4px;border-bottom:1px solid var(--or);color:var(--or);font-size:15px;font-weight:700;font-style:italic;line-height:1.4;position:relative;text-align:center}
.ms.ms.ms .ey:after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;margin-left:-4px;border-right:1px solid var(--or);border-bottom:1px solid var(--or);transform:rotate(45deg);background:var(--bg)}
.ms.ms.ms .ey.s{border-color:#fff;color:#fff;font-size:11px}
.ms.ms.ms .ey.s:after{border-color:#fff;background:var(--sk)}
.ms.ms.ms .h2{margin-top:14px;color:var(--ink);font-weight:800;text-align:center;line-height:1.3}
.ms.ms.ms .h2 em{font-size:36px}
.ms.ms.ms .h2 span{font-size:25px}
.ms.ms.ms .h2.b{color:var(--bl)}
.ms.ms.ms .ld{margin-top:14px;color:var(--bl);font-size:16px;line-height:2;text-align:center}
.ms.ms.ms .ld.g{color:var(--tx)}

/* オレンジの丸いボタン(左に小さな言葉・点線・右に丸い矢印) */
.ms.ms.ms .obtn{display:flex;align-items:center;gap:8px;width:100%;max-width:340px;min-height:58px;margin:0 auto;padding:7px 8px 7px 16px;border-radius:999px;background:var(--or);color:#fff;font-weight:700;line-height:1.25;box-shadow:0 3px 0 rgba(160,50,0,.25)}
.ms.ms.ms .obtn .sd{flex:none;padding-right:8px;border-right:2px dotted rgba(255,255,255,.8);font-size:11px;text-align:center;line-height:1.3}
.ms.ms.ms .obtn .mn{flex:1;display:flex;flex-direction:column;font-size:min(17px,4.3vw);letter-spacing:.02em}
.ms.ms.ms .obtn .mn small{font-size:11px;font-weight:500;letter-spacing:.02em;margin-bottom:2px}
.ms.ms.ms .obtn i{flex:none;width:32px;height:32px;border:1.5px solid #fff;border-radius:50%;position:relative}
.ms.ms.ms .obtn i:before{content:"";position:absolute;left:10px;top:10px;width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff}
.ms.ms.ms .obtn i:after{content:"";position:absolute;left:9px;top:14px;width:13px;height:2px;background:#fff;transform:rotate(-45deg)}

/* いちばん上(ロゴ・白い丸ボタン)。写真の上に重ねる */
.ms.ms.ms .hd{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:flex-start;justify-content:space-between;padding:22px 20px 0 25px}
.ms.ms.ms .hd .logo{display:flex;flex-direction:column;padding:6px 12px 7px;border-radius:12px;background:rgba(255,255,255,.92);color:var(--bl);line-height:1.1}
.ms.ms.ms .hd .logo b{font-size:21px;font-weight:900;font-style:italic;letter-spacing:.02em}
.ms.ms.ms .hd .logo small{margin-top:2px;font-size:10px;font-weight:700;color:var(--ink);letter-spacing:.08em}
.ms.ms.ms .hd .hb{display:flex;align-items:center;justify-content:center;min-width:60px;height:40px;padding:0 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.08)}

/* 最初の画面: 写真いっぱい・右上に縦書き・左下に白い箱を積んだキャッチ・下は弧+ミントの帯 */
.ms.ms.ms .fv{position:relative;height:712px;background:var(--mt);border-radius:0 0 50% 50%/0 0 46px 46px}
.ms.ms.ms .fv .ph{position:absolute;inset:0 0 30px;overflow:hidden;border-radius:0 0 50% 50%/0 0 40px 40px}
.ms.ms.ms .fv .ph img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.ms.ms.ms .fv .sc{position:absolute;inset:0;background:linear-gradient(250deg,rgba(18,28,60,.42) 0%,rgba(18,28,60,.12) 34%,rgba(18,28,60,0) 52%)}
.ms.ms.ms .fv .vt{position:absolute;top:118px;right:18px;writing-mode:vertical-rl;color:#fff;font-size:17px;font-weight:700;letter-spacing:.16em;line-height:1.75;text-shadow:0 1px 4px rgba(0,0,0,.35);max-height:380px}
.ms.ms.ms .fv .vt span{display:block}
.ms.ms.ms .fv .vt .en{margin-right:8px;font-size:14px;font-weight:700;letter-spacing:.2em}
.ms.ms.ms .fv .cp{position:absolute;left:25px;bottom:112px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ms.ms.ms .fv .cp span{display:block;padding:3px 10px 4px;background:#fff;color:var(--bl);font-size:min(34px,8.2vw);font-weight:700;line-height:1.2;letter-spacing:.01em}
.ms.ms.ms .fv .cp em{color:var(--or)}

/* 大きな薄い英字+オレンジのボタン */
.ms.ms.ms .gh{position:relative;padding:20px 25px 26px}
.ms.ms.ms .ghost{margin:0 -40px;color:#e6e6e6;font-size:64px;font-weight:900;line-height:1;letter-spacing:.02em;white-space:nowrap;text-align:center}
.ms.ms.ms .gh .obtn{margin-top:-30px;position:relative}

/* 取引のある店(数字のバッジ・ロゴ) */
.ms.ms.ms .tr{padding:24px 0 40px}
.ms.ms.ms .tr .tt{padding:0 25px;color:var(--ink);font-size:18px;font-weight:700;letter-spacing:.05em}
.ms.ms.ms .tr .cnt{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:18px 25px 0;padding:18px 10px;border-radius:20px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);color:var(--bl);font-weight:700}
.ms.ms.ms .tr .cnt b{font-size:60px;font-weight:800;line-height:1}
.ms.ms.ms .tr .cnt span{font-size:20px}
.ms.ms.ms .tr .lg{display:flex;gap:15px;margin-top:20px;overflow-x:auto;padding:0 25px 10px;scrollbar-width:none}
.ms.ms.ms .tr .lg figure{flex:none;width:120px;height:120px;margin:0;border-radius:20px;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;padding:14px}
.ms.ms.ms .tr .lg img{max-height:100%;object-fit:contain}

/* 悩み: ミントの丸い吹き出し(縦書き)+青い枠のチェック+青い下線の言い切り */
.ms.ms.ms .wr{position:relative;padding:20px 25px 70px}
.ms.ms.ms .bl{position:relative;z-index:2;width:185px;height:185px;margin:0 3px -40px auto;border-radius:50%;background:var(--mt);display:flex;align-items:center;justify-content:center}
.ms.ms.ms .bl:after{content:"";position:absolute;left:10px;bottom:14px;width:34px;height:30px;background:var(--mt);clip-path:polygon(60% 0,100% 40%,0 100%)}
.ms.ms.ms .bl p{writing-mode:vertical-rl;color:var(--bl);font-size:15px;font-weight:700;letter-spacing:.12em;line-height:1.75;max-height:150px}
.ms.ms.ms .ck{position:relative;padding:22px 24px 18px;border:2px solid var(--bl);border-radius:20px}
.ms.ms.ms .ck li{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:2px dotted var(--bl);color:var(--bl);font-size:14px;line-height:1.55}
.ms.ms.ms .ck li i{flex:none;width:19px;height:19px;margin-top:1px;border:2px solid var(--bl);background:#fff}
.ms.ms.ms .key{margin-top:56px;text-align:center;color:var(--bl);font-size:24px;font-weight:700;line-height:1.7}
.ms.ms.ms .key span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}

/* 想い: 長い文+太い一言+写真+青い名前の行 */
.ms.ms.ms .th{padding:40px 25px 90px}
.ms.ms.ms .th .tx{margin-top:30px;font-size:16px;line-height:2}
.ms.ms.ms .th .tx p+p{margin-top:20px}
.ms.ms.ms .th .tx .k{color:var(--ink);font-size:20px;font-weight:900;line-height:1.5}
.ms.ms.ms .th .tp{width:210px;height:217px;margin:46px auto 0;border-radius:10px;object-fit:cover}
.ms.ms.ms .th .cap{margin-top:22px;color:var(--bl);font-size:20px;letter-spacing:.16em;text-align:center}

/* 強み: ミントの段(上だけ大きな角丸)・白いカード・大きな番号に黄色の帯 */
.ms.ms.ms .gh2{position:relative;height:70px;margin-top:-70px}
.ms.ms.ms .gh2 .ghost{position:absolute;left:0;right:0;bottom:-10px}
.ms.ms.ms .st{position:relative;padding:60px 25px 70px;background:var(--mt);border-radius:60px 60px 0 0}
.ms.ms.ms .st .ey:after{background:var(--mt)}
.ms.ms.ms .st ol{margin-top:30px;display:grid;gap:20px}
.ms.ms.ms .st li{padding:34px 20px 30px;border-radius:25px;background:#fefefe;text-align:center}
.ms.ms.ms .st .no{display:block;color:var(--bl);font-size:58px;font-weight:800;line-height:1}
.ms.ms.ms .st h3{display:inline-block;margin-top:-30px;position:relative;padding:4px 14px;background:var(--yl);color:var(--bl);font-size:20px;font-weight:700;line-height:1.5}
.ms.ms.ms .st li img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 25%;margin-top:22px;border-radius:12px}
.ms.ms.ms .st li p{margin-top:18px;font-size:14px;line-height:1.75;text-align:left}

/* 〇〇とは?: 薄い青の段・青い影の白いカード・ミントの帯の言葉 */
.ms.ms.ms .ab{position:relative;margin-top:-50px;padding:60px 25px 90px;background:var(--sk);border-radius:60px 60px 0 0}
.ms.ms.ms .ab .card{margin:30px 8px 0 0;padding:26px 22px 28px;border-radius:20px;background:#fff;box-shadow:10px 10px 0 var(--bl)}
.ms.ms.ms .ab .card img{width:100%;border-radius:8px}
.ms.ms.ms .road{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:22px}
.ms.ms.ms .road li{position:relative;min-width:190px;padding:8px 18px;border:2px solid var(--bl);border-radius:999px;color:var(--bl);font-size:17px;font-weight:700;text-align:center;background:#fff}
.ms.ms.ms .road li+li:before{content:"";position:absolute;left:50%;top:-22px;height:20px;border-left:2px solid var(--bl)}
.ms.ms.ms .road li+li:after{content:"";position:absolute;left:50%;top:-9px;margin-left:-5px;border:6px solid transparent;border-top:8px solid var(--bl);border-bottom:0}
.ms.ms.ms .ab .hl{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:26px}
.ms.ms.ms .ab .hl span{padding:3px 12px;background:var(--mt);color:var(--bl);font-size:16px;font-weight:700;line-height:1.6;text-align:center}

/* 実績・お客様の声: 白い段・横にめくるカード */
.ms.ms.ms .vc{padding:60px 0 60px;background:#fafafa}
.ms.ms.ms .vc .ey:after{background:#fafafa}
.ms.ms.ms .rw{display:flex;gap:20px;margin-top:30px;padding:6px 25px 16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ms.ms.ms .rw>div:only-child{margin:0 auto}
.ms.ms.ms .vb{flex:none;width:290px;scroll-snap-align:center;padding:24px 20px 26px;border-radius:15px;background:#fefefe;box-shadow:0 3px 10px rgba(0,0,0,.08)}
.ms.ms.ms .vb .no{display:block;color:var(--bl);font-size:27px;font-weight:700;line-height:1}
.ms.ms.ms .vb img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-top:14px;border-radius:8px}
.ms.ms.ms .vb h3{margin-top:16px;color:var(--bl);font-size:20px;font-weight:700;line-height:1.5}
.ms.ms.ms .vb p{margin-top:10px;font-size:14px;line-height:1.7}
.ms.ms.ms .vb small{display:block;margin-top:12px;color:var(--bl);font-size:13px;font-weight:700}
.ms.ms.ms .vc .nt{margin:10px 25px 0;font-size:12px;line-height:1.7}

/* サービス概要: 方眼の段・横にめくる白い四角のカード・下に細い線 */
.ms.ms.ms .sv{padding:60px 0 50px}
.ms.ms.ms .sv .ld{padding:0 25px}
.ms.ms.ms .sv .rw{gap:16px;margin-top:34px}
.ms.ms.ms .sb{flex:none;width:280px;scroll-snap-align:center;padding:0 0 28px;background:#fff;text-align:center}
.ms.ms.ms .sb img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ms.ms.ms .sb h3{margin-top:20px;color:var(--bl);font-size:18px;font-weight:700}
.ms.ms.ms .sb p{margin-top:10px;padding:0 16px;color:var(--tx);font-size:13px;line-height:1.75}
.ms.ms.ms .bar{position:relative;height:1px;margin:14px 55px 0;background:#707070}
.ms.ms.ms .bar i{position:absolute;left:0;top:-1px;width:47px;height:3px;background:#707070}

/* 料金(あるときだけ)+ミントの帯の見出しと説明 */
.ms.ms.ms .pr{padding:60px 25px 60px;background:#fafafa}
.ms.ms.ms .pr .ey:after{background:#fafafa}
.ms.ms.ms .pl{margin-top:30px;padding:30px 20px 24px;border-radius:20px;background:#f2f2f2}
.ms.ms.ms .pl .pt{padding:12px 0;border-top:1px solid var(--bl);border-bottom:1px solid var(--bl);color:var(--bl);font-weight:700;text-align:center}
.ms.ms.ms .pi{display:flex;align-items:center;gap:12px;margin-top:20px}
.ms.ms.ms .pi>div{flex:1}
.ms.ms.ms .pi h3{padding-bottom:4px;border-bottom:2px dotted var(--ink);color:var(--bl);font-weight:700}
.ms.ms.ms .pi div p{margin-top:6px;font-size:12px;line-height:1.5}
.ms.ms.ms .pb{flex:none;min-width:105px;padding:10px 8px;border-radius:10px;background:var(--bl);color:#fff;text-align:center;line-height:1.1}
.ms.ms.ms .pb b{display:block;font-size:22px}
.ms.ms.ms .pb small{display:block;margin-top:5px;font-size:12px;font-weight:700}
.ms.ms.ms .bl.b2{margin:-20px auto 0 78px}
.ms.ms.ms .bl.b2:after{left:auto;right:auto;left:70px;bottom:auto;top:-18px;clip-path:polygon(0 100%,40% 0,100% 100%)}
.ms.ms.ms .mk{margin-top:44px;color:var(--ink);font-size:20px;font-weight:700;line-height:1.7}
.ms.ms.ms .mk:first-child{margin-top:0}
.ms.ms.ms .mk span{padding:2px 10px;background:var(--mt);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ms.ms.ms .nx{margin-top:16px;font-size:14px;line-height:1.8}
.ms.ms.ms .dl{margin-top:16px}
.ms.ms.ms .dl li{position:relative;padding-left:1em;font-size:14px;line-height:1.7}
.ms.ms.ms .dl li:before{content:"・";position:absolute;left:0}

/* 流れ: 01白→ミント→青の札・間に黄色のつなぎ */
.ms.ms.ms .fl{padding:60px 25px 60px}
.ms.ms.ms .fl ol{margin-top:30px;display:grid;gap:14px}
.ms.ms.ms .fl li{position:relative;padding:14px 20px 16px;border-radius:10px;background:#fff}
.ms.ms.ms .fl li:nth-child(n+2){background:var(--mt)}
.ms.ms.ms .fl li:nth-child(n+4){background:var(--bl);color:#fff}
.ms.ms.ms .fl li+li:before{content:"";position:absolute;left:50%;top:-14px;width:30px;height:14px;margin-left:-15px;background:var(--yl)}
.ms.ms.ms .fl h3{display:flex;align-items:baseline;gap:14px;color:var(--bl);font-weight:700}
.ms.ms.ms .fl li:nth-child(n+4) h3{color:#fff}
.ms.ms.ms .fl h3 em{font-size:32px;font-weight:500;font-style:italic;line-height:1}
.ms.ms.ms .fl h3 span{font-size:16px;line-height:1.3}
.ms.ms.ms .fl li p{margin-top:6px;font-size:13px;line-height:1.7}
.ms.ms.ms .fl .obtn{margin-top:36px}

/* よくある質問: ミントの角丸の行・白い丸のQ・＋ */
.ms.ms.ms .fq{padding:60px 25px 60px;background:#fff}
.ms.ms.ms .fq .ey:after{background:#fff}
.ms.ms.ms .fq .h2{margin-bottom:28px}
.ms.ms.ms .fq{counter-reset:q}
.ms.ms.ms .fq details{margin-top:12px;border-radius:10px;background:var(--mt);counter-increment:q}
.ms.ms.ms .fq summary{display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 16px 10px 20px;list-style:none;cursor:pointer;color:var(--tx);font-size:14px;font-weight:700;line-height:1.5}
.ms.ms.ms .fq summary::-webkit-details-marker{display:none}
.ms.ms.ms .fq summary b:before{content:"Q" counter(q)}
.ms.ms.ms .fq summary b{flex:none;width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
.ms.ms.ms .fq summary span{flex:1}
.ms.ms.ms .fq summary i{flex:none;width:22px;height:22px;position:relative}
.ms.ms.ms .fq summary i:before,.ms.ms.ms .fq summary i:after{content:"";position:absolute;left:0;top:10px;width:22px;height:2px;background:var(--tx)}
.ms.ms.ms .fq summary i:after{transform:rotate(90deg)}
.ms.ms.ms .fq details[open] summary i:after{display:none}
.ms.ms.ms .fq details p{padding:0 20px 18px 82px;font-size:13px;line-height:1.75}

/* いちばん下: 青い大きな言葉・ボタン・会社・リンク・大きな英字 */
.ms.ms.ms .ft{padding:56px 25px 0;background:#f4f4f4}
.ms.ms.ms .ft .lt{color:var(--bl);font-size:28px;font-weight:700;line-height:1.45}
.ms.ms.ms .ft .obtn{margin-top:30px}
.ms.ms.ms .co{margin:30px 0 0;font-size:13px;line-height:1.6}
.ms.ms.ms .co div{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid #ddd}
.ms.ms.ms .co dt{flex:none;width:6em;color:var(--ink);font-weight:700}
.ms.ms.ms .co dd{margin:0}
.ms.ms.ms .nv{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:26px;color:var(--ink);font-size:12px;font-weight:700}
.ms.ms.ms .cr{margin-top:16px;font-size:10px}
.ms.ms.ms .wm{margin:8px -4px 0;color:var(--bl);font-size:min(56px,13.8vw);font-weight:900;line-height:1;letter-spacing:-.01em;white-space:nowrap;text-align:center}