/* サロントップ(ヘッダー)用CSS
   ・このファイルの規則は、すべて .st-hero(ヘッダー)の内側にだけ効く。他の部分のデザインには影響しない
   ・デザイン画像の幅を基準に、画面幅に合わせて拡大縮小する
     スマホ(〜991px): 1u = ヘッダー幅の1/850 / PC(992px〜): 1k = ヘッダー幅の1/1866 */
.st-hero{
  --brown:#5a3f33;--brown-soft:#6e4e40;--gold:#c9a96c;--cream:#fffbf4;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","游明朝","Yu Mincho",serif;
  color:var(--brown);font-size:16px;line-height:1.4;letter-spacing:normal;text-align:left}
.st-hero,.st-hero *,.st-hero *::before,.st-hero *::after{box-sizing:border-box}
.st-hero img{max-width:none}
.st-hero a{text-decoration:none}
/* ファーストビュー全体(背景は人物と背景のみの画像) */
.st-hero{
  --u:calc(100cqw / 850);
  container-type:inline-size;
  position:relative;width:100%;max-width:none;margin:0 auto;
  aspect-ratio:850 / 1154;overflow:hidden;
  background:var(--cream) url("../images/sp/bg-sp-only.jpg") center top / cover no-repeat;
}
.st-hero *{margin:0;padding:0}
.st-hero p,.st-hero ul,.st-hero li,.st-hero span,.st-hero img{position:absolute}
.st-hero ul{list-style:none}
.st-hero small{font-size:.78em;font-weight:inherit}

/* 冒頭の2行 */
.st-intro{left:calc(var(--u)*52);top:calc(var(--u)*96);font-size:calc(var(--u)*31);line-height:1.18;letter-spacing:.09em;font-weight:500;white-space:nowrap}
.st-intro span{position:static;display:block;margin-bottom:calc(var(--u)*10)}
/* 飾りの線 */
.st-orn{left:calc(var(--u)*52);top:calc(var(--u)*203);width:calc(var(--u)*98);height:1px;background:linear-gradient(90deg,var(--gold),rgba(201,169,108,.25))}
.st-orn i{position:absolute;left:calc(var(--u)*43);top:calc(var(--u)*-9);font-style:normal;font-size:calc(var(--u)*13);color:var(--gold);line-height:1}

/* 見出し「美容整形後の」 */
.st-lead{left:calc(var(--u)*50);top:calc(var(--u)*250);font-size:calc(var(--u)*52);letter-spacing:.07em;font-weight:600;white-space:nowrap;line-height:1.2}
/* 症状の3つの枠 */
.st-symptoms{left:calc(var(--u)*50);top:calc(var(--u)*330);width:calc(var(--u)*400);height:calc(var(--u)*60);display:flex;gap:calc(var(--u)*7)}
.st-symptoms li{position:static;flex:1;display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*27);letter-spacing:.12em;font-weight:500;color:#4d352c;border:calc(var(--u)*1.4) solid rgba(201,169,108,.9);background:radial-gradient(ellipse at 50% 42%,rgba(255,255,253,.94) 0%,rgba(252,247,238,.82) 55%,rgba(236,219,188,.62) 100%)}


/* 「ダウンタイムを」(筆記体は透明PNG、「を」は文字) */
.st-down{left:0;top:0;width:100%;height:100%;pointer-events:none}
.st-script{left:calc(var(--u)*22);top:calc(var(--u)*426);width:calc(var(--u)*398);height:auto}
.st-en{left:calc(var(--u)*64);top:calc(var(--u)*493);width:calc(var(--u)*255);height:auto}
.st-wo{left:calc(var(--u)*438);top:calc(var(--u)*444);font-size:calc(var(--u)*62);line-height:1.1;font-weight:600}

/* 「最短で」 */
.st-shortest{left:calc(var(--u)*46);top:calc(var(--u)*536);white-space:nowrap;line-height:1}
.st-shortest .grad{position:static;font-size:calc(var(--u)*170);font-weight:600;letter-spacing:.015em;
  background:radial-gradient(ellipse 15% 20% at 31% 27%,rgba(255,244,236,.62),rgba(255,244,236,0) 100%),radial-gradient(ellipse 14% 20% at 36% 62%,rgba(255,240,230,.5),rgba(255,240,230,0) 100%),radial-gradient(ellipse 12% 22% at 51% 22%,rgba(255,243,222,.62),rgba(255,243,222,0) 100%),radial-gradient(ellipse 13% 20% at 82% 28%,rgba(255,244,226,.58),rgba(255,244,226,0) 100%),radial-gradient(ellipse 14% 22% at 66% 60%,rgba(255,238,214,.38),rgba(255,238,214,0) 100%),linear-gradient(to bottom,rgba(196,104,112,0) 42%,rgba(190,100,108,.30) 100%),linear-gradient(90deg,#ca8590 0%,#d4979c 40%,#dcae99 52%,#e3bb9d 72%,#e8c4a4 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 calc(var(--u)*2) calc(var(--u)*3) rgba(160,70,90,.18))}
.st-shortest .de{position:absolute;left:calc(var(--u)*336);top:calc(var(--u)*92);font-size:calc(var(--u)*76);font-weight:600;color:var(--brown-soft)}
.st-wish{left:calc(var(--u)*50);top:calc(var(--u)*722);font-size:calc(var(--u)*48);letter-spacing:.045em;font-weight:600;white-space:nowrap;line-height:1.2}

/* 下部の丸いバッジ3つ
   ・塗りは白に近い色(背景が少し透ける)
   ・金の輪は細く、光沢のあるグラデーション(輪の部分だけに表示)
   ・内側に、さらに細い輪を重ねる */
.st-badges{left:0;top:calc(var(--u)*874);width:100%}
.st-badges li{position:absolute;top:0;width:calc(var(--u)*224);height:calc(var(--u)*224);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:rgba(254,252,249,.93);
  box-shadow:inset 0 0 0 calc(var(--u)*8) rgba(255,253,250,.95),inset 0 0 0 calc(var(--u)*9) rgba(214,186,126,.6),0 calc(var(--u)*3) calc(var(--u)*12) rgba(120,90,50,.10)}
.st-badges li::before{content:"";position:absolute;inset:0;border-radius:50%;padding:calc(var(--u)*2.8);pointer-events:none;
  background:conic-gradient(from 210deg,#b8914f,#f3e2b0 14%,#c9a45e 28%,#f8eed0 42%,#b88f4c 58%,#f0dca4 72%,#c4a05a 86%,#b8914f);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.st-badges li:nth-child(1){left:calc(var(--u)*66)}
.st-badges li:nth-child(2){left:calc(var(--u)*313)}
.st-badges li:nth-child(3){left:calc(var(--u)*561)}
.st-badges img{position:static;width:calc(var(--u)*44);height:calc(var(--u)*44);margin-bottom:calc(var(--u)*16);opacity:.9}
.st-badges span{position:static;font-size:calc(var(--u)*19);line-height:1.65;letter-spacing:.01em;font-weight:700;color:var(--brown);white-space:nowrap}

/* 文字部分のまとまり(スマホでは全面、PCでは左側にずらす) */
.st-copy{position:absolute;inset:0}
.st-row{display:contents}

/* 文字の視認性アップ: 文字の下に、淡くぼんやりした明るい光彩をつける(光彩だと分からない程度に広くぼかす) */
.st-intro,.st-lead,.st-wish,.st-wo,.st-shortest .de{
  text-shadow:0 0 calc(var(--u)*10) rgba(255,251,244,.95),0 0 calc(var(--u)*24) rgba(255,251,244,.8),0 0 calc(var(--u)*44) rgba(255,251,244,.55)}
.st-script{filter:drop-shadow(0 0 calc(var(--u)*8) rgba(255,251,244,.9)) drop-shadow(0 0 calc(var(--u)*20) rgba(255,251,244,.7))}
.st-shortest .grad{filter:drop-shadow(0 0 calc(var(--u)*10) rgba(255,251,244,.85)) drop-shadow(0 0 calc(var(--u)*26) rgba(255,251,244,.6)) drop-shadow(0 calc(var(--u)*2) calc(var(--u)*3) rgba(160,70,90,.18))}

/* スマホでは表示しない要素(PC用) */
.st-name,.st-btn{display:none}
.st-copy{z-index:1}
.st-person{display:block;position:absolute;z-index:0;top:calc(var(--u)*20);left:calc(var(--u)*204);height:calc(var(--u)*1130);width:auto;max-width:none;pointer-events:none}

/* ===== PC用(幅992px以上) =====
   左:キャッチコピー・バッジ・予約ボタン / 右:人物写真とネームプレート
   左側はグリッドで並べ(重なりを避ける)、人物とネームプレートだけ位置を指定する。
   1k = 幅の1/1866(PCデザイン画像の幅を基準にした単位) */
@media (min-width:992px){
  /* 縦横比は 1900:710 (約2.7:1)。以前のヘッダー画像(1900:600=約3.17:1)と、最初の案(約2.2:1)の中間にする。
     左側の文字・バッジ・ボタンは、--k(0.78倍に縮小した単位)で配置し、人物とネームプレートは --kk(縮小しない単位)で配置する */
  .st-hero{--kk:calc(100cqw / 1866);--k:calc(100cqw / 1866 * .9);--u:var(--k);max-width:none;aspect-ratio:1900 / 710;
    background:var(--cream) url("../images/pc/bg-pc.jpg") center 30% / cover no-repeat}
  .st-hero .st-person{display:block;position:absolute;top:calc(var(--kk)*-16);left:auto;right:calc(var(--kk)*120);height:calc(var(--kk)*1030);width:auto;pointer-events:none}
  .st-name{display:flex;flex-direction:column;align-items:center;position:absolute;left:calc(var(--kk)*1195);top:auto;bottom:calc(var(--kk)*34);width:calc(var(--kk)*350);padding:calc(var(--kk)*12) calc(var(--kk)*8) calc(var(--kk)*14);
    background:rgba(250,245,232,.94);border:calc(var(--kk)*1.5) solid rgba(201,169,108,.9);box-shadow:0 calc(var(--kk)*3) calc(var(--kk)*10) rgba(110,80,50,.14);color:var(--brown)}
  .st-name span{position:static;line-height:1.35}
  .st-name .role{font-size:calc(var(--kk)*19);letter-spacing:.04em;font-weight:500;white-space:nowrap}
  .st-name .nm{margin-top:calc(var(--kk)*5);font-size:calc(var(--kk)*36);letter-spacing:.2em;font-weight:600;padding-left:.2em}
  /* 左側のコンテンツ(グリッド) */
  .st-copy{position:absolute;top:0;left:0;bottom:0;width:calc(var(--kk)*1190);padding:calc(var(--k)*34) 0 0 calc(var(--kk)*200);
    display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"intro intro intro" "orn orn orn" "row row ." "down short ." "wish wish ." "badges badges ." "btn btn .";align-content:start;justify-items:start}
  .st-hero .st-copy > *{position:static}
  .st-intro{grid-area:intro;font-size:calc(var(--k)*44);letter-spacing:.06em;line-height:1.2;margin:0}
  .st-intro span{display:inline;margin:0}
  .st-intro .l2{margin-left:.35em}
  .st-orn{grid-area:orn;width:calc(var(--k)*940);margin:calc(var(--k)*8) 0 calc(var(--k)*12);height:1px}
  .st-orn i{left:calc(var(--k)*464);top:calc(var(--k)*-10);font-size:calc(var(--k)*16)}
  .st-row{grid-area:row;display:flex;align-items:center;gap:calc(var(--k)*26)}
  .st-hero .st-row .st-lead{position:static;font-size:calc(var(--k)*66);letter-spacing:.06em;line-height:1.1;align-self:center}
  .st-hero .st-symptoms{position:static;width:calc(var(--k)*430);height:calc(var(--k)*58);margin:0;align-self:center}
  .st-symptoms li{font-size:calc(var(--k)*28)}
  .st-hero .st-down{grid-area:down;position:relative;display:flex;align-items:flex-end;width:auto;height:calc(var(--k)*150);pointer-events:none;margin:0}
  .st-hero .st-script{position:static;display:block;width:calc(var(--k)*500);height:auto;margin:0 0 calc(var(--k)*10) calc(var(--k)*-14)}
  .st-hero .st-wo{position:static;font-size:calc(var(--k)*68);margin:0 calc(var(--k)*14) calc(var(--k)*24) calc(var(--k)*6);line-height:1}
  .st-hero .st-en{position:absolute;top:auto;left:calc(var(--k)*14);bottom:calc(var(--k)*-34);width:calc(var(--k)*310);height:auto;opacity:1}
  .st-shortest{grid-area:short;display:flex;align-items:flex-end;height:calc(var(--k)*150);margin:0}
  .st-shortest .grad{font-size:calc(var(--k)*150);line-height:1}
  .st-shortest .de{position:static;font-size:calc(var(--k)*68);margin:0 0 calc(var(--k)*22) calc(var(--k)*8)}
  .st-wish{grid-area:wish;font-size:calc(var(--k)*52);margin:0;line-height:1.2}
  .st-badges{grid-area:badges;position:static;display:flex;gap:calc(var(--k)*34);width:auto;height:auto;margin:calc(var(--k)*10) 0 0 0}
  .st-badges li{position:relative;left:auto !important;top:auto;width:calc(var(--k)*224);height:calc(var(--k)*224)}
  .st-badges img{width:calc(var(--k)*44);height:calc(var(--k)*44);margin-bottom:calc(var(--k)*12)}
  .st-badges span{font-size:calc(var(--k)*21)}
  .st-btn{grid-area:btn;justify-self:start;display:flex;align-items:center;justify-content:center;gap:calc(var(--k)*34);position:relative;width:calc(var(--k)*730);height:calc(var(--k)*84);margin:calc(var(--k)*10) 0 0 0;
    border-radius:calc(var(--k)*42);background:#ec6381;color:#fff;text-decoration:none;font-size:calc(var(--k)*38);letter-spacing:.14em;font-weight:500;box-shadow:0 calc(var(--k)*4) calc(var(--k)*10) rgba(210,70,100,.28)}
  .st-btn span{position:static}
  .st-btn i{position:relative;display:block;width:calc(var(--k)*50);height:calc(var(--k)*50);border-radius:50%;background:#fff}
  .st-btn i::after{content:"";position:absolute;left:calc(var(--k)*19);top:calc(var(--k)*15);width:calc(var(--k)*12);height:calc(var(--k)*12);border-top:calc(var(--k)*3) solid #ec6381;border-right:calc(var(--k)*3) solid #ec6381;transform:rotate(45deg)}
}
/* 以前のスマホ用ヘッダー(固定ページ本文内のブロック)は、新しいヘッダーに置き換わったため表示しない(本文は削除せず残す) */
.wp-block-group.vk_hidden-lg:has(.sp-header){display:none !important}

/* スマホ・タブレット: ヘッダーの下の余白を詰め、最初の画面にCTA(初回限定価格のバナー)が少し見えるようにする
   (本文の上の余白 31px + ブロック間の余白 + バナー周りの余白 = 約85px → 約16px) */
@media (max-width:991.98px){
  .home .site-body{padding-top:0}
  .lp-contents > .wp-block-group + .wp-block-vk-blocks-spacer .vk_block-margin-md--margin-top{margin-top:0 !important}
  .lp-contents > .p-3:has(> .offer-banner-wrap){padding-top:0 !important}
  .st-hero{margin-bottom:1rem}  /* Bootstrapのmb-3相当 */
}