/* v017「SHElikes の AI 時代版」: ラベルを積んだ見出し・＼ ／の小見出し・札つきの丸いボタン・淡いピンクの方眼(2026-10-06) */
:root{--rose:#D9506F;--rose-d:#B83A58;--blue:#5E8FAE;--blue-l:#D6E4EE;--pink-l:#FBEEF1;--cream:#FFF3C4;--paper:#FFF8F9;--paper2:#FBEEF1}
body{background:#F3E4E8}
.col{background:var(--paper)}
.p17 img{display:block;width:100%;height:auto}
.p17-sec{display:block;background:var(--pink-l)}
.p17-close{padding:0 0 30px;background:var(--pink-l)}
.p17-close .cta{padding-top:6px}
/* 冒頭の札(fv17b)が画面の45%まで来るので、作品の壁は下げて、1段目・2段目の札が切れないよう作品を1割ほど小さく */
.hero .wall{top:46.5%;gap:2%}
.hero .tile.phone img{width:calc(var(--fvw,390px)*.19)}
.hero .tile.phone video{width:calc(var(--fvw,390px)*.19);height:calc(var(--fvw,390px)*.338)}
.hero .tile.square img{width:calc(var(--fvw,390px)*.205)}
.hero .wall .lane{padding-bottom:9px}

/* 見出し: 行ごとにローズの帯と白い枠の箱を交互に積む */
.v17h{font-family:"Zen Maru Gothic",var(--sans)!important;font-weight:700!important;font-size:clamp(23px,6.8vw,30px)!important;line-height:1.3!important;letter-spacing:.05em!important;text-align:center;margin:0 16px 16px!important;word-break:keep-all}
.v17h .lb{display:block;width:fit-content;max-width:100%;margin:.18em auto;padding:.14em .55em .18em;border-radius:8px}
.v17h .lb1{background:var(--rose);color:#fff;transform:translateX(-.35em)}
.v17h .lb2{background:#fff;color:var(--rose);box-shadow:inset 0 0 0 2px var(--rose);transform:translateX(.35em)}
.v17h .lb:only-child{transform:none}
.v17h em{font-style:normal}
.make .v17h.mk-ttl,.make .v17h{margin-top:40px!important}

/* 小見出し: ＼ ／で挟む */
.kicker{display:block!important;text-align:center;color:var(--rose)!important;letter-spacing:.12em!important;font-size:13px!important;margin:0 16px 10px!important}
.kicker::before{content:"＼ "!important;display:inline!important;width:auto!important;height:auto!important;background:none!important}
.kicker::after{content:" ／"}
.say-sub{text-align:center}
.chat .kicker{margin:0 6px 8px!important}
.c-head.v17c{font-family:"Zen Maru Gothic",var(--sans);font-weight:700;color:var(--rose);text-align:center}
.sdeco,.gdeco{display:none}

/* ボタン: 立体の丸いボタン+上に白い札(SHElikes の「今がお得!」の位置に、無料・押し売りなし) */
.cta{display:flex;flex-direction:column;align-items:center}
.cta .btn{background:linear-gradient(180deg,#12B257,#049A45);box-shadow:0 5px 0 #037A37,0 12px 22px rgba(4,154,69,.22);font-weight:800;letter-spacing:.04em}
.cta .btn:active{transform:translateY(3px);box-shadow:0 2px 0 #037A37}
.cta .micro{order:-1;position:relative;z-index:1;margin:0 0 -11px;padding:3px 16px;border-radius:999px;background:#fff;color:#037A37;box-shadow:inset 0 0 0 2px #049A45;font-size:12.5px;font-weight:700;letter-spacing:.04em}

/* 面・カード */
.sec{background:var(--paper)}
.sec.alt{background:var(--pink-l);background-image:radial-gradient(rgba(217,80,111,.10) 1px,transparent 1px);background-size:14px 14px}
.lv16{background:var(--pink-l)}
.faq{margin:0 16px}
.faq details,.faq details:last-child{background:#fff;border:0;border-radius:14px;margin:0 0 10px;padding:0 16px;box-shadow:0 2px 10px rgba(217,80,111,.08),inset 0 0 0 1px rgba(217,80,111,.12)}
.faq summary::before{content:"Q";flex:none;width:24px;height:24px;border-radius:50%;background:var(--rose);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;margin-right:-4px}
.faq summary{justify-content:flex-start}
.faq summary::after{margin-left:auto;color:var(--rose)}

/* 冒頭の下: SHElikes の冒頭の箱(タブ・チェック・名札・札つきボタンを1つの枠に)(10/6) */
.hero{background:linear-gradient(180deg,#FBEEF1 0,#FBEEF1 70%,var(--paper) 100%)}
.fvbox{position:relative;margin:18px 16px 0;padding:22px 16px 4px;background:#fff;border-radius:18px;box-shadow:inset 0 0 0 2px rgba(217,80,111,.30),0 12px 26px rgba(217,80,111,.10);font-family:"Zen Maru Gothic",var(--sans)}
.fvbox-tab{position:absolute;top:-15px;left:50%;transform:translateX(-50%);margin:0;padding:4px 18px;border-radius:999px;background:var(--cream);box-shadow:inset 0 0 0 1.5px #E7C35C;color:#3F2A2E;font-size:14.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.fvbox-ck{list-style:none;margin:0;padding:0 4px;display:grid;gap:9px}
.fvbox-ck li{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;line-height:1.45;color:#3F2A2E}
.fvbox-ck li::before{content:"";flex:none;width:21px;height:21px;border-radius:50%;background:var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.3 2.3 4.9-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.fvbox-ck b{color:var(--rose);font-weight:700}
.fvbox .who{justify-content:center;margin:14px 0 0;padding-top:12px;border-top:1.5px dashed rgba(217,80,111,.28)}
.fvbox .cta{padding:22px 0 10px}
.hero .review-note{margin:10px 16px 0;padding:0;border:0;background:transparent;color:var(--sub);font-size:12px;text-align:center}
/* 見せ場の入口: 予告の絵の直後に舞台を上詰めで(画面が高い時に見出しと舞台の間が大きく空かないように) */
.sr16{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;margin:0!important;padding:0!important}
.p17-mk{margin:0}
/* 10/6 直し: チェックの行は flex の隙間が太字の前後にも入る→ 印だけ絶対配置にして文は1つの流れに/冒頭の下から予告の絵までの空きを詰める */
.fvbox-ck li{display:block;position:relative;padding-left:31px}
.fvbox-ck li::before{position:absolute;left:0;top:.18em}
.hero{padding-bottom:12px}
.make .say{padding-top:6px!important;padding-bottom:0!important}
.mk-prog.mk-under{visibility:hidden}
.fvbox-ck li{word-break:keep-all;overflow-wrap:anywhere}