@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Pinyon+Script&family=Klee+One:wght@600&display=swap");
/* 縦書き特大コピー型(見本 Chama 高知店 chama-salon.com)。読みやすい版。直したら style.css を作り直す(.hb → .hb.hb.hb と all:revert) */
.hb.hb.hb *{all:revert}

.hb.hb.hb{--tl:#1fb3ae;--tl2:#13908f;--tl3:#7fd6d2;--aq:#e4f5f5;--aq2:#f1fafa;--or:#ef6c3d;--or2:#f59a6c;--yl:#f7f08e;--yl2:#ece062;--yl3:#fdfbe4;--gd:#b89b5e;--gd2:#8d7238;--mr:#9a4a66;--gn:#1fae4f;--ink:#3f4a4b;--gy:#6d7576;--line:#dde3e3;
  max-width:480px;margin:0 auto;background:#fff;color:var(--ink);font-family:"Noto Sans JP",sans-serif;font-size:15px;line-height:1.8;overflow:hidden;position:relative;padding-bottom:62px}
.hb.hb.hb *{box-sizing:border-box}
.hb.hb.hb img{display:block;max-width:100%}
.hb.hb.hb p,.hb.hb.hb ul,.hb.hb.hb ol,.hb.hb.hb h1,.hb.hb.hb h2,.hb.hb.hb h3{margin:0;padding:0;font-weight:inherit}
.hb.hb.hb ul{list-style:none}
.hb.hb.hb a{text-decoration:none;color:inherit}
.hb.hb.hb b{font-weight:700}
.hb.hb.hb .serif{font-family:"Noto Serif JP",serif}
.hb.hb.hb .en{font-family:"Cormorant Garamond",serif;letter-spacing:.04em;font-variant-numeric:lining-nums}

/* ===== 最初の画面: 人物写真+縦書きの特大文字 ===== */
.hb.hb.hb .fv{position:relative;height:780px;background:var(--aq2)}
.hb.hb.hb .fv .ph{position:absolute;inset:0;background-size:cover;background-position:66% 0}
.hb.hb.hb .fv:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(246,251,251,.86) 0,rgba(246,251,251,.62) 36%,rgba(246,251,251,0) 56%),linear-gradient(180deg,rgba(228,245,245,0) 56%,rgba(214,240,241,.8) 76%,#e3f4f5 100%)}
.hb.hb.hb .fv>*:not(.ph){position:absolute;z-index:2}
.hb.hb.hb .fv .band{right:10px;top:0;width:42px;padding:20px 0 34px;writing-mode:vertical-rl;background:linear-gradient(180deg,#0f6b72 0%,#17868a 72%,rgba(23,134,138,0) 100%);color:#fff;font-size:16px;letter-spacing:.14em;line-height:42px;font-weight:500;display:flex;align-items:center}
.hb.hb.hb .fv .lead{left:22px;top:84px;font-size:30px;letter-spacing:.08em;line-height:1.2;font-weight:500;color:#6f8b8c}
.hb.hb.hb .fv .cp{left:16px;top:134px;writing-mode:vertical-rl;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.hb.hb.hb .fv .cp .sub{display:block;font-size:33px;line-height:1.15;letter-spacing:.06em;font-weight:500;color:#3b4647;padding-top:22px;text-shadow:0 0 8px rgba(255,255,255,.9)}
.hb.hb.hb .fv .cp .big{display:block;font-size:104px;line-height:1.02;letter-spacing:-.02em;font-weight:500}
.hb.hb.hb .fv .cp em{font-style:normal;background:linear-gradient(180deg,#46c9c0 0%,#1aa4a3 55%,#10838a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb.hb.hb .fv .cp .gr{background:linear-gradient(180deg,#8a9696 0%,#5c6869 60%,#3f4a4b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb.hb.hb .fv .item{right:22px;top:420px;width:122px;height:122px;border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:0 8px 18px rgba(30,80,90,.22)}
.hb.hb.hb .fv .item img{width:100%;height:100%;object-fit:cover}
.hb.hb.hb .fv .rb{right:-8px;top:566px;transform:rotate(-6deg);padding:6px 22px 7px 40px;background:linear-gradient(90deg,rgba(234,219,170,0) 0,#eadbaa 16%,#f2e6c2 52%,#e3cf98 100%);color:#3d3524;font-size:17px;line-height:1.35;letter-spacing:.06em;font-weight:600;text-align:left}
.hb.hb.hb .fv .rb small{display:block;font-size:12px;font-weight:500;letter-spacing:.04em}
.hb.hb.hb .fv .bubbles{left:0;right:0;bottom:16px;display:flex;justify-content:space-evenly}
.hb.hb.hb .fv .bubbles li{width:108px;height:108px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle at 34% 28%,#fff 0,#f2fbfb 32%,#d7f0f1 70%,#bfe5e8 100%);border:1px solid rgba(255,255,255,.95);box-shadow:0 6px 14px rgba(40,120,130,.16),inset 0 -8px 14px rgba(255,255,255,.55)}
.hb.hb.hb .fv .bubbles span{font-size:15px;line-height:1.45;color:var(--tl2);font-weight:600;letter-spacing:.02em}

/* ===== 価格のカード(帯・打ち消し・丸い札・金色の大きな数字・黄色いボタン) ===== */
.hb.hb.hb .offers{padding:20px 14px 8px;background:linear-gradient(180deg,#e3f4f5 0,#f3fbfb 40%,#eaf6f7 100%)}
.hb.hb.hb .card{position:relative;margin:0 0 22px;padding:0 16px 22px;background:#fffdf6;border:1px solid #d8c79c;box-shadow:inset 0 0 0 5px #fffdf6,inset 0 0 0 6px #e8dcb9,0 10px 20px rgba(30,90,100,.14);text-align:center}
.hb.hb.hb .tag{position:relative;margin:14px -26px 0;padding:5px 30px;background:linear-gradient(90deg,#17a8a6,#3dc6bf 50%,#17a8a6);color:#fff;font-size:16px;font-weight:600;letter-spacing:.12em;line-height:1.5;clip-path:polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%)}
.hb.hb.hb .card .cph{width:100%;aspect-ratio:16/7;object-fit:cover;margin-top:0}
.hb.hb.hb .card .nm{margin-top:12px;line-height:1.2}
.hb.hb.hb .card .na{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--or)}
.hb.hb.hb .card .na small{font-size:12px;line-height:1.35;text-align:right;font-weight:600}
.hb.hb.hb .card .na span{font-size:31px;font-weight:600;letter-spacing:.02em}
.hb.hb.hb .card .x{font-size:26px;color:#9aa3a3;font-weight:300;line-height:1.1}
.hb.hb.hb .card .nb{font-size:33px;color:var(--tl);font-weight:600;letter-spacing:.02em;margin-top:2px}
.hb.hb.hb .was{margin:12px -4px 0;padding:3px 0;background:linear-gradient(90deg,rgba(234,244,244,0),#eaf4f4 14%,#eaf4f4 86%,rgba(234,244,244,0));font-size:13px;color:#5d6667;letter-spacing:.02em}
.hb.hb.hb .was:before,.hb.hb.hb .was:after{content:"▼▼";font-size:9px;color:var(--tl);letter-spacing:.1em;vertical-align:2px;margin:0 6px}
.hb.hb.hb .was b{font-weight:600;text-decoration:line-through;text-decoration-color:rgba(239,108,61,.8)}
.hb.hb.hb .pr{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px}
.hb.hb.hb .pr .bd{flex:none;width:72px;height:72px;border-radius:50%;border:1px solid #cdb781;background:#fff;color:#7b6334;line-height:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:600;font-size:14px;letter-spacing:-.02em}
.hb.hb.hb .pr .bd small{font-size:10px;font-weight:500;letter-spacing:-.02em}
.hb.hb.hb .pr .num{font-size:76px;line-height:1;font-weight:600;letter-spacing:-.01em;background:linear-gradient(180deg,#d6bd80 0%,#b39250 55%,#8f7036 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb.hb.hb .pr .unit{display:flex;flex-direction:column;align-items:center;font-size:36px;line-height:1;color:#a1823f;font-weight:600}
.hb.hb.hb .pr .unit small{font-size:12px;margin-bottom:6px;font-weight:500}
.hb.hb.hb .card .nt{margin-top:6px;font-size:11.5px;line-height:1.6;color:#6a7172;text-align:left}
.hb.hb.hb .ybtn{position:relative;display:flex;align-items:center;justify-content:center;margin:16px 4px 0;min-height:58px;padding:8px 18px;border-radius:40px;background:linear-gradient(180deg,#fbf7ab 0,var(--yl) 45%,var(--yl2) 100%);color:var(--tl2);font-size:19px;font-weight:700;letter-spacing:.1em;box-shadow:0 4px 0 #d6c84a,0 9px 16px rgba(0,0,0,.12)}

/* ===== お悩み(斜めの写真と大きな言葉・チェックリスト) ===== */
.hb.hb.hb .worry{padding:46px 0 34px;background:linear-gradient(180deg,#f4f5f5,#fafafa 60%,#f1f2f2)}
.hb.hb.hb .worry .wt{position:relative;margin:0 22px 26px;padding-bottom:12px;border-bottom:1px solid #aab3b3;text-align:center;font-size:21px;letter-spacing:.08em;color:#5a6465}
.hb.hb.hb .worry .wt em{font-style:normal;color:var(--tl)}
.hb.hb.hb .worry .wt:after{content:"";position:absolute;left:34%;bottom:-9px;width:12px;height:12px;background:#f5f6f6;border-right:1px solid #aab3b3;transform:skewX(-40deg)}
.hb.hb.hb .panels .pn{position:relative;height:164px;background:#fff;overflow:hidden}
.hb.hb.hb .panels .pn img{position:absolute;left:0;top:0;width:68%;height:100%;object-fit:cover;clip-path:polygon(0 0,74% 0,100% 100%,0 100%)}
.hb.hb.hb .panels .pn p{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:40px;line-height:1.3;color:#6a7273;text-align:left;font-weight:400;letter-spacing:.04em}
.hb.hb.hb .panels .pn:nth-child(2) img{left:auto;right:0;clip-path:polygon(26% 0,100% 0,100% 100%,0 100%)}
.hb.hb.hb .panels .pn:nth-child(2) p{right:auto;left:20px}
.hb.hb.hb .worry .ck{margin:22px 20px 0}
.hb.hb.hb .ck li,.hb.hb.hb .rec li{display:flex;gap:10px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6;color:#4f5859;font-weight:500}
.hb.hb.hb .ck li i,.hb.hb.hb .rec li i{flex:none;position:relative;width:18px;height:18px;margin-top:3px;border:1.5px solid var(--tl);background:#fff}
.hb.hb.hb .ck li i:after,.hb.hb.hb .rec li i:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;border:solid var(--tl);border-width:0 2px 2px 0;transform:rotate(45deg)}
.hb.hb.hb .ck b,.hb.hb.hb .rec b{color:var(--tl);font-weight:700}
.hb.hb.hb .wish{display:flex;align-items:center;gap:8px;margin:26px 16px 0}
.hb.hb.hb .wish .hand{flex:1;font-family:"Klee One",serif;font-weight:600;font-size:18px;line-height:1.7;color:var(--tl);transform:rotate(-7deg);transform-origin:left center}
.hb.hb.hb .wish img{flex:none;width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.1)}

/* ===== 本質(灰色の帯・下向きの印・黄色いマーカー・そこで!) ===== */
.hb.hb.hb .core{padding:38px 18px 44px;text-align:center;background:linear-gradient(180deg,#f1f2f2,#fff 30%,#fff 70%,#fbeee8)}
.hb.hb.hb .core .s1{font-size:14px;color:#5a6465;letter-spacing:.08em}
.hb.hb.hb .core .band2{display:inline-block;margin-top:6px;padding:2px 14px;background:#8d9697;color:#fff;font-size:22px;letter-spacing:.08em;font-weight:500}
.hb.hb.hb .core .chev{display:flex;justify-content:center;gap:10px;margin:10px 0 12px}
.hb.hb.hb .core .chev i{width:12px;height:12px;border:solid #8d9697;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.hb.hb.hb .core .s2{font-size:14px;color:#5a6465;letter-spacing:.06em}
.hb.hb.hb .core .key{margin:6px 0 4px;font-size:25px;letter-spacing:.04em;color:#3f4a4b;font-weight:600}
.hb.hb.hb .core .key span{background:linear-gradient(transparent 62%,#f6ec74 62%,#f6ec74 92%,transparent 92%);padding:0 4px}
.hb.hb.hb .core .so{margin-top:26px;font-size:46px;line-height:1.1;letter-spacing:.06em;font-weight:500;background:linear-gradient(90deg,#f08e7c,#f4b08e);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;transform:rotate(-4deg)}

/* ===== 施術の紹介(斜めの青い札・〈〉の一言・縦の帯・グラデの大きな言葉) ===== */
.hb.hb.hb .intro{position:relative;padding:40px 18px 56px;text-align:center;background:linear-gradient(180deg,#f7fbfb 0,#fff 30%,#eaf7f7 72%,#c9ecec 100%)}
.hb.hb.hb .intro .tilt{display:inline-block;padding:4px 22px;transform:rotate(-8deg);background:linear-gradient(90deg,#1c7fc7,#3aa3e0);color:#fff;font-size:22px;font-weight:600;letter-spacing:.06em;box-shadow:0 4px 8px rgba(28,127,199,.2)}
.hb.hb.hb .intro .ia{margin-top:14px;font-size:32px;color:var(--or);font-weight:600;letter-spacing:.06em;line-height:1.3}
.hb.hb.hb .intro .ia,.hb.hb.hb .intro .ib{display:inline-block;padding:0 6px;background:linear-gradient(transparent 55%,rgba(253,244,198,.9) 55%)}
.hb.hb.hb .intro .ix{font-size:26px;color:#9aa3a3;line-height:1.1;font-weight:300}
.hb.hb.hb .intro .ib{font-size:34px;color:var(--tl);font-weight:600;letter-spacing:.04em;line-height:1.3}
.hb.hb.hb .intro .isub{position:relative;margin:16px 0 0;font-size:16px;color:#5a6465;letter-spacing:.06em}
.hb.hb.hb .intro .isub span{position:relative;padding:0 26px}
.hb.hb.hb .intro .isub span:before,.hb.hb.hb .intro .isub span:after{content:"";position:absolute;top:50%;width:13px;height:13px;border:solid #b8c1c1;border-width:0 0 1px 1px;transform:translateY(-50%) rotate(45deg)}
.hb.hb.hb .intro .isub span:before{left:0}
.hb.hb.hb .intro .isub span:after{right:0;transform:translateY(-50%) rotate(-135deg)}
.hb.hb.hb .intro .iph{position:relative;margin:22px 8px 0}
.hb.hb.hb .intro .iph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
.hb.hb.hb .intro .vb{position:absolute;right:-6px;top:-12px;writing-mode:vertical-rl;padding:12px 6px;background:var(--tl);color:#fff;font-size:18px;letter-spacing:.12em;line-height:1.4;font-weight:600;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.hb.hb.hb .intro .ism{margin-top:26px;font-size:22px;line-height:1.6;color:#4f5a5b;letter-spacing:.06em}
.hb.hb.hb .intro .ibig{margin-top:2px;font-size:62px;line-height:1.2;font-weight:600;letter-spacing:.02em;background:linear-gradient(180deg,#5fd2c8 0%,#21aaa6 60%,#14908f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hb.hb.hb .intro .swash{display:block;width:250px;height:14px;margin:0 auto;border-bottom:2px solid var(--tl);border-radius:0 0 50% 50%}

/* ===== 3つの特徴(主色の地・白いカード・POINT 01・黄色い丸い札) ===== */
.hb.hb.hb .feat{--fc:var(--tl);--fb:#22b6b0;position:relative;padding:0 0 30px;background:linear-gradient(160deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 30%),var(--fb)}
.hb.hb.hb .feat.or{--fc:var(--or);--fb:#f06a3a}
.hb.hb.hb .feat .fh{position:relative;min-height:200px;padding:30px 18px 26px}
.hb.hb.hb .feat .fhp{position:absolute;right:0;top:0;width:44%;height:100%;object-fit:cover;border-radius:0 0 0 26px;box-shadow:-4px 6px 14px rgba(0,0,0,.12)}
.hb.hb.hb .feat .tg{position:relative;z-index:1}
.hb.hb.hb .feat .tg span{display:table;margin-bottom:6px;padding:2px 12px;background:#fff;color:#4f5a5b;font-size:15px;letter-spacing:.04em;font-weight:500}
.hb.hb.hb .feat .tg span+span{color:var(--fc)}
.hb.hb.hb .feat .ft{position:relative;z-index:1;margin-top:10px;color:#fff;font-size:50px;line-height:1;font-weight:500;letter-spacing:.02em;display:flex;align-items:flex-end}
.hb.hb.hb .feat .ft b{font-size:96px;font-weight:400;line-height:.8;margin-right:2px}
.hb.hb.hb .feat .ft small{font-size:20px;line-height:1.05;width:1.1em;margin-right:4px}
.hb.hb.hb .feat .ft .fs{position:absolute;left:66px;top:-6px;font-family:"Pinyon Script",cursive;font-size:42px;color:rgba(250,240,170,.9);font-weight:400;transform:rotate(-8deg);letter-spacing:0;white-space:nowrap}
.hb.hb.hb .fc{position:relative;margin:16px 46px 0 0;padding:22px 22px 26px;background:#fff;border-radius:0 30px 30px 0;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.hb.hb.hb .fc.r{margin:16px 0 0 46px;border-radius:30px 0 0 30px}
.hb.hb.hb .fc .ptop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hb.hb.hb .fc .pt{display:flex;align-items:flex-end;gap:2px;color:#c3c9c9}
.hb.hb.hb .fc .pt small{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.2em;line-height:1;margin-bottom:6px}
.hb.hb.hb .fc .pt b{font-size:56px;line-height:.9;font-weight:400}
.hb.hb.hb .fc .yb{display:flex;gap:6px}
.hb.hb.hb .fc .yb span{width:68px;height:68px;border-radius:50%;background:var(--yl);color:var(--fc);font-size:12px;line-height:1.35;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center}
.hb.hb.hb .fc .fcat{margin-top:12px;font-size:17px;color:var(--fc);font-weight:600;letter-spacing:.04em}
.hb.hb.hb .fc .fti{margin-top:2px;font-size:26px;line-height:1.45;color:#555f60;font-weight:500;letter-spacing:.04em}
.hb.hb.hb .fc img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:14px;box-shadow:0 8px 12px rgba(0,0,0,.14)}
.hb.hb.hb .fc .ftx{margin-top:16px;font-size:14px;line-height:2.05;color:#4f5859;letter-spacing:.02em}
.hb.hb.hb .fc .ftx b{color:var(--fc)}

/* ===== こんな方にオススメ(額縁・チェックの箱・ぜひお試しください) ===== */
.hb.hb.hb .rec{padding:30px 14px 36px;background:linear-gradient(180deg,#fbf8f2,#fff)}
.hb.hb.hb .rec .fr{padding:28px 18px 30px;background:#fff;border:1px solid #e3d7b8;box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 6px #efe6cf;text-align:center}
.hb.hb.hb .rec .ren{font-size:13px;letter-spacing:.24em;color:#a7a07f}
.hb.hb.hb .rec .rsm{margin-top:8px;font-size:15px;color:var(--or);font-weight:600;letter-spacing:.04em}
.hb.hb.hb .rec .rti{font-size:30px;letter-spacing:.06em;color:#4f5859;line-height:1.4}
.hb.hb.hb .rec ul{margin-top:18px;text-align:left}
.hb.hb.hb .rec li{margin-top:8px;padding:9px 10px;border:1px solid #cdd6d6;background:#fff;font-weight:700}
.hb.hb.hb .rec .pill{position:relative;display:inline-block;margin-top:46px;padding:3px 24px;border-radius:30px;background:var(--tl);color:#fff;font-size:15px;font-weight:700;letter-spacing:.06em}
.hb.hb.hb .rec .pill:before{content:"";position:absolute;left:50%;top:-36px;height:30px;border-left:1.5px dotted #b8c1c1}
.hb.hb.hb .rec .rlast{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:30px;letter-spacing:.06em;color:#3f4a4b}
.hb.hb.hb .rec .maru{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--tl);color:var(--tl);font-size:13px;display:flex;align-items:center;justify-content:center;transform:rotate(-12deg)}

/* ===== 施術前・後(あるときだけ) ===== */
.hb.hb.hb .ba{padding:36px 0 20px;text-align:center;background:linear-gradient(180deg,#e9f7f7,#fff)}
.hb.hb.hb .ba .ben{font-size:12px;letter-spacing:.24em;color:#9aa3a3}
.hb.hb.hb .ba .bsm{margin-top:6px;font-size:16px;color:#4f5859}
.hb.hb.hb .ba .bti{font-size:40px;color:var(--tl);line-height:1.3;font-weight:500}
.hb.hb.hb .sl{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 40px 8px;scrollbar-width:none}
.hb.hb.hb .sl::-webkit-scrollbar{display:none}
.hb.hb.hb .ba .sl img{flex:none;width:80%;aspect-ratio:1/1;object-fit:cover;scroll-snap-align:center}
.hb.hb.hb .ba .bnt{font-size:10.5px;color:#7a8283;padding:0 16px}

/* ===== 途中の予約ボタン ===== */
.hb.hb.hb .cta{padding:30px 18px 36px;text-align:center;background:linear-gradient(180deg,#fff,#eaf6f6)}
.hb.hb.hb .cta .cl{position:relative;margin:0 6px 22px;padding:0 26px;font-size:20px;line-height:1.6;color:#4f5859;letter-spacing:.06em}
.hb.hb.hb .cta .cl:before,.hb.hb.hb .cta .cl:after{content:"";position:absolute;bottom:0;height:60px;border-left:1px solid #b8c1c1}
.hb.hb.hb .cta .cl:before{left:6px;transform:rotate(-24deg)}
.hb.hb.hb .cta .cl:after{right:6px;transform:rotate(24deg)}
.hb.hb.hb .cta .cl .c2{font-size:28px;color:var(--tl);font-weight:600}
.hb.hb.hb .ybtn.big{min-height:70px;font-size:20px;letter-spacing:.06em;padding:8px 32px;margin-top:22px}
.hb.hb.hb .ybtn.big i{position:absolute;right:22px;top:50%;width:10px;height:10px;border:solid var(--tl2);border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg)}
.hb.hb.hb .ybtn .ctag{position:absolute;left:50%;top:-16px;transform:translateX(-50%);white-space:nowrap;padding:2px 26px;background:linear-gradient(90deg,#17a8a6,#3dc6bf 50%,#17a8a6);color:#fff;font-size:14px;letter-spacing:.08em;clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%,5% 50%)}

/* ===== 選ばれる理由(写真・大きな店名・大きな薄い番号・丸い札・薄黄の面) ===== */
.hb.hb.hb .why{padding:0 0 30px;background:#fff}
.hb.hb.hb .why .wph img{width:100%;aspect-ratio:3/2;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.hb.hb.hb .why .whd{position:relative;margin-top:-34px;text-align:center}
.hb.hb.hb .why .leaf{display:block;width:22px;height:22px;margin:0 auto 6px;background:var(--tl);border-radius:0 100% 0 100%;transform:rotate(45deg)}
.hb.hb.hb .why .wsm{font-size:19px;color:#4f5859;letter-spacing:.06em}
.hb.hb.hb .why .wnm{font-size:36px;font-style:italic;font-weight:500;color:#555f60;line-height:1.2;letter-spacing:.08em}
.hb.hb.hb .why .wti{font-size:46px;color:#3f4a4b;letter-spacing:.06em;line-height:1.35;font-weight:500}
.hb.hb.hb .why .lau{display:flex;justify-content:center;gap:12px;margin:18px 12px 0}
.hb.hb.hb .why .lau p{display:flex;flex-direction:column;align-items:center;padding:4px 18px;border-left:2px solid #d9c98c;border-right:2px solid #d9c98c;border-radius:50%/40%;color:#4f5859}
.hb.hb.hb .why .lau b{font-size:20px;font-weight:500}
.hb.hb.hb .why .lau small{font-size:11px}
.hb.hb.hb .wi{position:relative;margin-top:30px}
.hb.hb.hb .wi .wt2{position:relative;height:184px}
.hb.hb.hb .wi .wt2 img{position:absolute;left:0;top:0;width:66%;height:100%;object-fit:cover;border-radius:0 20px 20px 0}
.hb.hb.hb .wi .wno{position:absolute;right:16px;top:-14px;font-size:110px;line-height:1;color:#efe9b6;font-weight:400}
.hb.hb.hb .wi .wbd{position:absolute;right:22px;bottom:-22px;z-index:2;width:78px;height:78px;border-radius:50%;background:var(--tl);color:#fff;font-size:14px;line-height:1.3;font-weight:600;display:flex;align-items:center;justify-content:center;text-align:center;border:3px solid #fff}
.hb.hb.hb .wi .wpn{margin:0 0 0 34px;padding:34px 24px 24px;background:var(--yl3)}
.hb.hb.hb .wi h3{font-size:22px;color:var(--tl);line-height:1.5;font-weight:600;letter-spacing:.04em}
.hb.hb.hb .wi .wpn p{margin-top:10px;font-size:14px;line-height:2;color:#4f5859}
.hb.hb.hb .wi.r .wt2 img{left:auto;right:0;border-radius:20px 0 0 20px}
.hb.hb.hb .wi.r .wno{right:auto;left:16px}
.hb.hb.hb .wi.r .wbd{right:auto;left:22px}
.hb.hb.hb .wi.r .wpn{margin:0 34px 0 0}

/* ===== 施術の流れ(大きな薄いFLOW・横にめくるカード) ===== */
.hb.hb.hb .flow{padding:40px 0 30px;background:linear-gradient(180deg,#fff,#fdf1e2 50%,#fff)}
.hb.hb.hb .flow .flh{position:relative;text-align:center;height:92px}
.hb.hb.hb .flow .fen{position:absolute;left:0;right:0;top:-8px;font-size:100px;line-height:1;color:#e0f3f2;font-weight:400;letter-spacing:.1em}
.hb.hb.hb .flow h2{position:relative;padding-top:34px;font-size:30px;letter-spacing:.1em;color:#4f5859}
.hb.hb.hb .flow .sl{padding:6px 11% 10px}
.hb.hb.hb .flow .sc{flex:none;width:100%;scroll-snap-align:center;padding:0 16px 22px;background:#fff;border:1px solid #e3d7b8;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px #efe6cf,0 6px 14px rgba(0,0,0,.06)}
.hb.hb.hb .flow .sc .tag{margin:14px -8px 12px;font-size:15px}
.hb.hb.hb .flow .sc img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hb.hb.hb .flow .stp{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:20px;color:var(--tl);letter-spacing:.06em}
.hb.hb.hb .flow .stp i{display:block;width:54px;border-top:1px solid var(--tl)}
.hb.hb.hb .flow .sc h3{font-size:23px;line-height:1.5;color:#3f4a4b;font-weight:500;letter-spacing:.04em}
.hb.hb.hb .flow .stx{margin-top:8px;font-size:13.5px;line-height:1.9;color:#4f5859}
.hb.hb.hb .flow .hint{text-align:center;font-size:11px;color:#9aa3a3;letter-spacing:.1em}
.hb.hb.hb .flow .fnt{margin:12px 20px 0;padding:10px 14px;background:#fff;border:1px solid var(--line);font-size:12.5px;line-height:1.8;color:#5a6465}

/* ===== お客様の声(あるときだけ) ===== */
.hb.hb.hb .voice{padding:0 0 30px;background:#f3fafa}
.hb.hb.hb .voice .vh{position:relative;height:220px;overflow:hidden;background:var(--aq)}
.hb.hb.hb .voice .vh img{width:100%;height:100%;object-fit:cover}
.hb.hb.hb .voice .ven{position:absolute;left:0;right:0;bottom:-10px;text-align:center;font-size:96px;line-height:1;color:rgba(255,255,255,.9)}
.hb.hb.hb .voice .vcap{margin:16px 20px 6px;text-align:center;font-size:15px;color:#5a6465}
.hb.hb.hb .vc{position:relative;margin:18px 40px 0 14px;padding:22px 20px 22px 44px;background:#fff;border-radius:0 26px 26px 0}
.hb.hb.hb .vc.r{margin:18px 14px 0 40px;padding:22px 44px 22px 20px;border-radius:26px 0 0 26px}
.hb.hb.hb .vc .vno{position:absolute;left:8px;top:20px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:24px;color:var(--tl);letter-spacing:.06em}
.hb.hb.hb .vc.r .vno{left:auto;right:8px}
.hb.hb.hb .vc h3{font-size:19px;color:var(--tl);line-height:1.55}
.hb.hb.hb .vc p{margin-top:10px;font-size:13.5px;line-height:2;color:#4f5859}
.hb.hb.hb .vc p b{background:linear-gradient(transparent 60%,#e3f4f5 60%)}

/* ===== 最後のひと押し(写真+縦の帯2本・大きな見出し・価格) ===== */
.hb.hb.hb .last{padding:0 0 34px;text-align:center;background:linear-gradient(180deg,#eaf7f7,#fdfbf5 40%,#fff)}
.hb.hb.hb .last .lph{position:relative}
.hb.hb.hb .last .lph img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:64% 0;-webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);mask-image:linear-gradient(180deg,#000 76%,transparent)}
.hb.hb.hb .last .lv{position:absolute;left:18px;top:40px;writing-mode:vertical-rl;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hb.hb.hb .last .lv span{display:block;padding:10px 4px;background:rgba(31,179,174,.92);color:#fff;font-size:17px;letter-spacing:.12em;line-height:1.5;font-weight:500}
.hb.hb.hb .last .lv span:last-child{margin-top:34px}
.hb.hb.hb .last .lsm{margin-top:-8px;font-size:22px;color:#4f5859;letter-spacing:.08em}
.hb.hb.hb .last .lti{font-size:27px;line-height:1.5;color:#3f4a4b;letter-spacing:.06em;font-weight:500}
.hb.hb.hb .last .lti em{font-style:normal;color:var(--tl);font-size:1.12em}
.hb.hb.hb .last .ltx{margin:18px 18px 0;font-size:15px;line-height:2.1;color:#5a6465;letter-spacing:.04em}
.hb.hb.hb .last .card{margin:26px 14px 0}
.hb.hb.hb .last .card .tag{margin-bottom:6px}

/* ===== サロン情報 ===== */
.hb.hb.hb .salon{padding:40px 18px 30px;text-align:center;background:#fff}
.hb.hb.hb .salon .sen{font-size:56px;line-height:1;color:var(--tl);letter-spacing:.12em;font-weight:400}
.hb.hb.hb .salon .ssm{margin-top:4px;font-size:15px;color:#5a6465;letter-spacing:.1em}
.hb.hb.hb .salon .sph{width:100%;aspect-ratio:16/10;object-fit:cover;margin-top:18px}
.hb.hb.hb .salon .snm{margin:18px 0 10px;padding:6px 10px;background:var(--aq);font-size:17px;line-height:1.5;color:#3f4a4b;font-weight:600;letter-spacing:.04em}
.hb.hb.hb .salon .sad{font-size:13.5px;line-height:1.8;color:#4f5859}
.hb.hb.hb .salon .sbt{margin-top:16px}
.hb.hb.hb .salon .sbt a{position:relative;display:block;margin-top:10px;padding:11px 30px;border-radius:30px;color:#fff;font-size:15px;font-weight:700;letter-spacing:.04em;background:var(--mr)}
.hb.hb.hb .salon .sbt a:after{content:"";position:absolute;right:20px;top:50%;width:7px;height:7px;border:solid #fff;border-width:1.5px 1.5px 0 0;transform:translateY(-50%) rotate(45deg)}
.hb.hb.hb .salon .sbt a.c1{background:var(--gn)}
.hb.hb.hb .salon .sbt a.c2{background:#d97bb7}
.hb.hb.hb .salon .map{display:block;width:100%;height:220px;border:0;margin-top:18px}
.hb.hb.hb .salon .mbt{display:flex;gap:8px;margin-top:10px}
.hb.hb.hb .salon .mbt a{flex:1;padding:7px 4px;border:1px solid var(--tl);border-radius:30px;color:var(--tl);font-size:13px;font-weight:600;letter-spacing:.08em}

/* ===== 注意書き・下の固定ボタン(3色) ===== */
.hb.hb.hb .notes{padding:16px 18px;background:#f6f7f7}
.hb.hb.hb .notes p{font-size:11px;line-height:1.7;color:#6d7576}
.hb.hb.hb .foot{padding:14px 10px;background:#fff;text-align:center;font-size:11.5px;color:#4f5859;letter-spacing:.06em}
.hb.hb.hb .bar{position:fixed;left:50%;bottom:0;z-index:50;transform:translateX(-50%);width:100%;max-width:480px;display:grid;grid-template-columns:1fr 1.25fr 1fr;height:60px;box-shadow:0 -2px 8px rgba(0,0,0,.12)}
.hb.hb.hb .bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 4px;color:#fff;font-family:"Noto Serif JP",serif;font-size:13px;line-height:1.25;font-weight:600;text-align:center;letter-spacing:.02em}
.hb.hb.hb .bar .b1{background:var(--mr)}
.hb.hb.hb .bar .b2{background:var(--gn);font-size:12.5px}
.hb.hb.hb .bar .b3{background:var(--yl);color:var(--tl2)}
.hb.hb.hb .bar i{display:block;width:16px;height:16px;flex:none;background:center/contain no-repeat}
.hb.hb.hb .bar .i1{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round"%3E%3Crect x="4" y="3" width="16" height="18" rx="2"/%3E%3Cpath d="M8 8h8M8 12h8M8 16h5"/%3E%3C/svg%3E')}
.hb.hb.hb .bar .i2{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round"%3E%3Crect x="3" y="5" width="18" height="16" rx="2"/%3E%3Cpath d="M3 10h18M8 3v4M16 3v4"/%3E%3C/svg%3E')}
.hb.hb.hb .bar .i3{background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2313908f" stroke-width="2" stroke-linecap="round"%3E%3Cpath d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"/%3E%3Ccircle cx="12" cy="10" r="2.5"/%3E%3C/svg%3E')}