/* NextHill エラスチン配合量の比較（最初の画面のカプセル＋比較ブロック）2026-10
   既存のCSSは変更せず、このファイルを最後に読み込む。
   外すときは、商品ページの nh-compare.css と nh-compare.js を読み込む行、
   カプセル（nh-cap-wrap）と比較ブロック（nh-cmp）のHTMLを削除。 */

/* ── 最初の画面のカプセル（「なぜエラスチンなのか」と同じ見た目。押すと比較ブロックへ移動） ── */
.nh-cap-wrap{margin-top:12px}
/* PCでは、ボタンのすぐ下・「なぜエラスチンなのか」のすぐ上に並べる（並べ替えは nh-compare.js） */
@media (min-width:901px){ .lp-hero .lp-hero-content > .nh-cap-wrap{order:1} }
/* トップページ：PCでは「なぜエラスチンなのか」と横に並べる（幅が足りないときは自動で縦に並ぶ） */
@media (min-width:961px){ .hero-v2 .nh-cap-wrap,.hero-v2 .nh-labcap-wrap{display:inline-block;vertical-align:top;margin:14px 12px 0 0} }
/* トップページ：幅の広いPCでは、3つ目（商品を詳しく見る）も同じ段に並べる */
@media (min-width:1400px){ .hero-v2 .nh-cap-wrap--prod{margin-right:-290px} }
@media (min-width:1200px) and (max-width:1399px){ .hero-v2 .nh-labcap-wrap{margin-right:-210px} }
.nh-cap{position:relative;display:inline-flex;align-items:center;gap:12px;box-sizing:border-box;max-width:100%;padding:9px 10px;border-radius:999px;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,255,255,.92) 0%,rgba(255,244,247,.72) 45%,rgba(244,238,248,.78) 100%);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(196,142,127,.28),0 10px 28px rgba(140,100,120,.16),inset 0 1px 0 #fff,inset 0 -8px 16px rgba(233,200,214,.25);
  -webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);transition:transform .25s,box-shadow .25s;text-decoration:none !important;color:#3C3530 !important}
.nh-cap::before{content:"";position:absolute;inset:1px 1px 50%;border-radius:999px 999px 40% 40% / 999px 999px 100% 100%;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none;z-index:-1}
.nh-cap::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;transform:skewX(-20deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));pointer-events:none;animation:nh-cap-shine 7s ease-in-out 3.2s infinite}
@keyframes nh-cap-shine{0%{left:-40%}18%{left:120%}100%{left:120%}}
.nh-cap:hover,.nh-cap:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(194,87,127,.4),0 14px 34px rgba(140,100,120,.22),inset 0 1px 0 #fff,inset 0 -8px 16px rgba(233,200,214,.3)}
.nh-cap .c-ico{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,#FBEEF2 60%,#F3DBE4 100%);box-shadow:inset 0 0 0 1px rgba(196,142,127,.3)}
.nh-cap .c-ico svg{width:26px;height:26px;display:block}
.nh-cap .c-txt{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;line-height:1.35;text-align:left}
.nh-cap .c-lab{font:600 10.5px/1.3 Georgia,"Times New Roman",serif;letter-spacing:.2em;color:#B07F6E}
.nh-cap .c-ttl{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:600;font-size:16px;letter-spacing:.06em;color:#3C3530;white-space:nowrap}
.nh-cap .c-ttl b{font-weight:700;font-size:18px;line-height:1;letter-spacing:.08em;color:#B34A72;margin-left:.4em}
.nh-cap .c-ttl b small{font-size:13px;font-weight:700;margin-left:1px}
.nh-cap .c-sub{font-size:11.5px;letter-spacing:.04em;color:#6B5F5A}
.nh-cap .c-sub span{display:inline-block;white-space:nowrap}
.nh-cap .c-sub .c-more{margin-left:.7em;color:#B34A72;font-weight:700}
.nh-cap .c-go{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:4px;border-radius:50%;background:linear-gradient(135deg,#C9678C,#A9476F);color:#fff;font-size:15px;box-shadow:0 4px 10px rgba(169,71,111,.3)}

/* ── 比較ブロック ── */
.nh-cmp{position:relative;overflow:hidden;padding:80px 0 72px;color:#3C3530;text-align:left;scroll-margin-top:20px;
  background:
    radial-gradient(760px 460px at 88% -6%, rgba(246,196,180,.60), rgba(246,196,180,0) 62%),
    radial-gradient(620px 420px at -6% 34%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    radial-gradient(700px 380px at 60% 108%, rgba(247,214,222,.55), rgba(247,214,222,0) 60%),
    linear-gradient(180deg,#FFFDFC 0%,#FCF4F0 100%)}
.nh-cmp .nh-cmp-in{position:relative;width:min(920px,calc(100% - 40px));margin:0 auto}
.nh-cmp p.c-eyebrow{margin:0 0 16px;color:#B08A5B !important;font:600 12px/1.4 Georgia,"Times New Roman",serif !important;letter-spacing:.32em}
.nh-cmp p.c-hook{margin:0 0 28px;padding:2px 0 2px 18px;border-left:3px solid #E58AA6;color:#3C3530;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif !important;font-size:clamp(18px,2.2vw,22px) !important;line-height:1.8 !important}
.nh-cmp h2.c-title{margin:0 0 22px;padding:0;border:0;color:#3C3530;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-weight:600;font-size:clamp(26px,3.6vw,38px);line-height:1.55;letter-spacing:.03em;text-align:left}
.nh-cmp h2.c-title b{display:inline-block;font-weight:600;color:#B34A72;background:linear-gradient(transparent 68%,rgba(246,196,180,.65) 68%);padding:0 .08em}
.nh-cmp p.c-lead{margin:0 0 14px}
.nh-cmp figure.c-fig{position:relative;margin:34px 0 0;padding:28px 24px 18px;border-radius:14px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF9F6 100%);border:1px solid rgba(229,170,160,.38);
  box-shadow:0 26px 60px rgba(201,103,140,.13),0 2px 0 rgba(255,255,255,.9) inset}
.nh-cmp figure.c-fig figcaption{margin:0 0 8px;padding:0;color:#3C3530;font-size:14.5px;font-weight:700;letter-spacing:.06em;line-height:1.7;text-align:left}
.nh-cmp figure.c-fig figcaption small{font-weight:500;color:#8A807A;font-size:12.5px;letter-spacing:.02em;margin-left:.4em;white-space:nowrap}
.nh-cmp svg{display:block;width:100%;height:auto;overflow:visible}
.nh-cmp .chart-sp{display:none}
.nh-cmp svg text{font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;fill:#3C3530}
.nh-cmp .v{font-weight:600;text-anchor:middle;fill:#6A605A}
.nh-cmp .n{fill:#6A605A;text-anchor:middle}
.nh-cmp .me-name{fill:#3C3530;font-weight:700}
.nh-cmp .hero{font-weight:700;fill:#B34A72;text-anchor:middle}
.nh-cmp .badge-t{fill:#fff;font-weight:700;text-anchor:middle;letter-spacing:.06em}
.nh-cmp .base{stroke:rgba(120,95,88,.28);stroke-width:1}
.nh-cmp p.c-foot{margin:18px 0 0;font-size:12.5px !important;line-height:1.85 !important;color:#8A807A !important}
/* 数字の表（グラフの元データ）。グラフが描けたら画面からは隠し、読み上げ用に残す */
.nh-cmp .c-data{width:100%;border-collapse:collapse;font-size:15px}
.nh-cmp .c-data caption{display:none}
.nh-cmp .c-data th,.nh-cmp .c-data td{padding:10px 8px;border-bottom:1px solid rgba(120,95,88,.18);text-align:left;font-weight:500}
.nh-cmp .c-data td{text-align:right;font-weight:700}
.nh-cmp .nh-ready .c-data-wrap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 伸び縮みする線維のような矢印 */
.nh-cmp .el-body{fill:none;stroke-linecap:round;stroke-linejoin:round}
.nh-cmp .el-hi{fill:none;stroke:#FFF1F5;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.nh-cmp .el-shine{fill:none;stroke:#fff;stroke-linecap:round;opacity:.85;stroke-dasharray:.07 1;stroke-dashoffset:1.07;animation:nh-shine 3.8s ease-in-out infinite}
.nh-cmp .el-head{fill:#C9678C}
/* きらめき */
.nh-cmp .spark{transform-box:fill-box;transform-origin:center;animation:nh-twinkle 2.8s ease-in-out infinite}
.nh-cmp .spark.s1{fill:#E9BE7A} .nh-cmp .spark.s2{fill:#F3A9BC} .nh-cmp .spark.s3{fill:#F6D7A8}
@keyframes nh-twinkle{0%,100%{transform:scale(.35) rotate(0deg);opacity:.25}50%{transform:scale(1) rotate(18deg);opacity:1}}
@keyframes nh-shine{0%,20%{stroke-dashoffset:1.07}80%,100%{stroke-dashoffset:0}}

/* 画面に入ったときに1回だけ：棒が伸び、線維が伸び、数字が現れる */
.nh-cmp .nh-anim .grow{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.nh-cmp .nh-anim.is-in .grow{animation:nh-grow .9s cubic-bezier(.2,.8,.2,1) both}
.nh-cmp .nh-anim.is-in .grow.me{animation:nh-grow 1.15s cubic-bezier(.3,1.5,.5,1) both}
.nh-cmp .nh-anim .v,.nh-cmp .nh-anim .hero,.nh-cmp .nh-anim .badge,.nh-cmp .nh-anim .spark,.nh-cmp .nh-anim .halo{opacity:0}
.nh-cmp .nh-anim.is-in .v{animation:nh-fade .5s ease .75s both}
.nh-cmp .nh-anim.is-in .hero,.nh-cmp .nh-anim.is-in .badge,.nh-cmp .nh-anim.is-in .halo{animation:nh-fade .7s ease 1.45s both}
.nh-cmp .nh-anim:not(.is-in) .spark{animation:none}
.nh-cmp .nh-anim.is-in .spark{opacity:1;animation:nh-twinkle 2.8s ease-in-out 1.8s infinite backwards}
.nh-cmp .nh-anim .el-reveal{clip-path:inset(-30% 100% -30% 0)}
.nh-cmp .nh-anim.is-in .el-reveal{animation:nh-stretch 1.3s cubic-bezier(.2,.9,.25,1) .55s forwards}
.nh-cmp .nh-anim .el-head{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.nh-cmp .nh-anim.is-in .el-head{animation:nh-pop .55s cubic-bezier(.34,1.7,.5,1) 1.55s forwards}
@keyframes nh-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes nh-fade{from{opacity:0}to{opacity:1}}
@keyframes nh-stretch{to{clip-path:inset(-30% -3% -30% 0)}}
@keyframes nh-pop{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .nh-cmp .el-shine{display:none} .nh-cmp .spark{animation:none} }

@media (max-width:640px){
  .nh-cmp{padding:56px 0 50px}
  .nh-cmp figure.c-fig{padding:22px 10px 14px;border-radius:12px}
  .nh-cmp figure.c-fig figcaption{padding:0 6px}
  .nh-cmp figure.c-fig figcaption small{display:block;margin-left:0}
  .nh-cmp .chart-pc{display:none}
  .nh-cmp .chart-sp{display:block}
}

@media (max-width:560px){
  .nh-cap-wrap{margin-top:14px}
  .nh-cap-wrap .nh-cap{display:flex;width:100%}
}
@media (max-width:480px){
  .nh-cap{gap:10px}
  .nh-cap .c-sub .c-more{display:none}
}
@media (max-width:350px){
  .nh-cap .c-ttl{font-size:14.5px;letter-spacing:.02em}
  .nh-cap .c-ttl b{font-size:16px}
  .nh-cmp h2.c-title{font-size:22px}
}
/* 問いかけの一文（比較ブロックの冒頭）（2026-10-05） */
.nh-cmp p.c-ask{margin:0 0 24px !important;color:#8A4A35 !important;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif !important;font-size:clamp(15px,5vw,30px) !important;font-weight:600 !important;line-height:1.65 !important;letter-spacing:.03em !important;font-feature-settings:"palt" 1}
.nh-cmp p.c-ask span{display:block}
.nh-cmp p.c-ask b{font-weight:700;color:#B34A72}