@charset "utf-8";
/* ── アンカーリンクのスクロールオフセット ── */
[id] {
  scroll-margin-top: 20px;
}
/* =============================================
   styles.css
   コンテンツ・コンポーネントスタイル
   ============================================= */
/* =============================================
   3-COLUMN PC WRAPPER
   ============================================= */
.page-wrapper{
    display: flex;
    align-items: flex-start;
    width: 100%;
    background: linear-gradient(180deg,#fce8f2 0%,#dff4ff 50%,#fce8f2 100%);
}
/* =============================================
   LEFT NAV (PC >= 960px)
   ============================================= */
.pc-nav{
  display:none;
  flex:0 0 30%;flex-shrink:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:7vh 20px 40px 5%;
}
.pc-nav-logo{margin-bottom:48px;text-align:left;}
.pc-nav-logo img{width:110px;margin:0;}
.pc-nav-links{list-style:none;}
.pc-nav-links li{}
.pc-nav-links a{
  display:block;padding:18px 6px;
  font-size:20px;font-family:var(--sans);
  color:#dca4c6;line-height:1.65;letter-spacing:.04em;
  transition:color .2s;
}
.pc-nav-links a:hover{color:var(--pink);}
/* =============================================
   LP MAIN COLUMN
   ============================================= */
.lp-main{
  flex:0 0 40%;max-width:560px;min-width:0;margin:0 auto;
  background:#f8edf4;overflow:hidden;
  box-shadow:10px 0px 30px 10px rgba(199,227,244,1);
}
/* ─── Hero: バナー重ね合わせ ─── */
.hero-wrap{
  position:relative;
  width:100%;
  line-height:0;
}
.hero-bg{
  width:100%;height:auto;display:block;
}
.hero-banner{
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    max-width: 80%;
}
/* ─── Image sections ─── */
.lp-sec{
  width:100%;
  display:block;
  line-height:0;/* remove gap under img */
}
.lp-sec img{width:100%;height:auto;display:block;}
/* =============================================
   SCROLL FADE-IN ANIMATION
   ============================================= */
.fade-in{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s cubic-bezier(0.25,0.46,0.45,0.94), transform .8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}
/* stagger for child elements inside a section */
.fade-in:nth-child(2){transition-delay:.1s;}
.fade-in:nth-child(3){transition-delay:.15s;}
.fade-in:nth-child(4){transition-delay:.2s;}
/* =============================================
   INTERACTIVE: REVIEWS SLIDER
   ============================================= */
.sec-voice-html{background:#dca4c6;padding:0 0 36px;}
/* タイトルエリア */
.voice-header{padding:40px 24px 28px;text-align:center;}
.voice-ttl{
  font-family:var(--serif);
  font-size:clamp(22px,5vw,32px);
  color:#fff;
  line-height:1.5;
  letter-spacing:.06em;
  margin-bottom:14px;
}
.voice-ttl sub{
    font-size: 60%;
}
.voice-note{font-size:clamp(9px,2.8vw,14px);color:rgba(255,255,255,.85);line-height:1.7;text-align:center;}
/* スライダー */
/* Slider arrows */
.slider-wrap{position:relative;display:flex;align-items:center;gap:0;}
.slider-arrow{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:50%;
  border:2px solid rgba(220,164,198,.6);
  background:#fff;
  color:#dca4c6;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
  z-index:2;
  padding:0;
}
.slider-arrow:hover{background:#dca4c6;border-color:#dca4c6;color:#fff;}
.slider-arrow svg{width:20px;height:20px;display:block;}
.slider-wrap .slider-outer{flex:1;min-width:0;}
.slider-outer{overflow:hidden;padding:0;width:100%;}
.slider-track{display:flex;gap:0;transition:transform .4s cubic-bezier(0.25,0.46,0.45,0.94);will-change:transform;}
.rev-slide{
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    padding: 0 0.1vw;
    box-sizing: border-box;
}
.rev-card{
  background:#fff;border-radius:24px;
  padding:28px 20px 32px;
}
/* 写真（正方形） */
.rev-photo{
  width:55%;aspect-ratio:1/1;
  border-radius:8px;overflow:hidden;
  margin:0 auto 18px;
  background:linear-gradient(135deg,#f0dce4,#dce4f0);
}
.rev-photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* ユーザー名 */
.rev-user{
  text-align:center;font-weight:700;font-size:16px;
  color:var(--dark);margin-bottom:16px;
  font-family:var(--sans);
}
.rev-user span{font-weight:400;font-size:13px;}
/* レビューテキスト */
.rev-txt{font-size: clamp(10px,3vw,16px);line-height:2;text-align:center;color:var(--mid);}
/* ドット */
.s-dots{display:flex;justify-content:center;gap:10px;margin-top:24px;padding:0 20px;}
.dot{
  width:11px;height:11px;border-radius:50%;
  background:rgba(255,255,255,.4);
  cursor:pointer;border:none;padding:0;transition:background .2s;
}
.dot.active{background:#fff;}
/* =============================================
   INTERACTIVE: FAQ ACCORDION
   ============================================= */
.sec-faq-html{background:#ddedf8;padding:44px 20px;}
.faq-title{
    font: normal  40px var(--serif);
    text-align: center;
    margin-bottom: 28px;
    color: var(--dark);
    letter-spacing: .2em;
}
.faq-list{display:flex;flex-direction:column;}
.faq-item{border-bottom:1px solid rgba(100,140,180,.25);}
.faq-item:first-child{border-top:1px solid rgba(100,140,180,.25);}
.faq-q{
  width:100%;display:flex;align-items:flex-start;gap:12px;
  padding:18px 0;cursor:pointer;
  background:none;border:none;text-align:left;font-family:inherit;
}
.faq-q:hover .faq-q-txt{color:var(--pink);}
.q-lbl{font-family:var(--serif);font-size:20px;font-weight:700;color:#a8c4d8;flex-shrink:0;line-height:1;margin-top:2px;}
.faq-q-txt{
    font-size: clamp(18px, 3vw, 24px);
    color: var(--dark);
    flex: 1;
    line-height: 1.65;
    transition: color .2s
}
.faq-ico{
  width:26px;height:26px;min-width:26px;
  position:relative;flex-shrink:0;
  margin-top:2px;
}
.faq-ico::before,.faq-ico::after{
  content:"";position:absolute;top:50%;left:50%;
  background:#909aa0;transform:translate(-50%,-50%);
  transition:all .3s;
}
.faq-ico::before{width:11px;height:1.5px;}
.faq-ico::after {width:1.5px;height:11px;}
.faq-item.open .faq-ico::before{background:var(--pink);}
.faq-item.open .faq-ico::after {background:var(--pink);transform:translate(-50%,-50%) scaleY(0);}
.faq-a{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(0.25,0.46,0.45,0.94),
             opacity .35s ease;
    opacity: 0;
    overflow: hidden;
}
.faq-a-inner{
  overflow:hidden;
    padding: 0px 0px 0px 32px;
    margin: 0px;
    font-size: clamp(16px,2.5vw,20px);
  line-height:1.95;
  color:var(--mid);
}
.faq-a p{
    margin-bottom: 20px;
}
.faq-a p+p{
    margin-top: 10px;
}
.faq-item.open .faq-a{
  grid-template-rows:1fr;
  opacity:1;
}
/* =============================================
   04. Campaign ボタンエリア
   ============================================= */
.cp_btns{
    padding: 50px 20px 50px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
/* 公式通販ボタン（製品画像付き） */
.btn-cp-pink{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#d4698a,#e890b0);
  border-radius:40px;color:#fff;
  font-weight:700;letter-spacing:.05em;
  box-shadow:0 4px 14px rgba(212,105,138,.35);
  overflow:visible;
  position:relative;
  padding:20px 36px 20px 40px;
  min-height:64px;
  text-decoration:none;
  transition:opacity .2s;
}
.btn-cp-pink:hover{opacity:.87;}
.btn-cp-pink .btn-cp-img{
  position:absolute;
  left:5%;
  width:56px!important;height:auto;
  object-fit:contain;
  flex-shrink:0;
}
.btn-cp-txt{
  flex:1;text-align:center; 
font-size: clamp(12px, 1vw, 18px);
}
/* 注記テキスト */
.cp-note{
    text-align: center;
    font-size: clamp(10px,3.2vw,14px);
    color: var(--mid);
    line-height: 1.7;
    margin-bottom: 20px;
}
@media (max-width: 959px) {
  .cp-note { text-align: center; }
}
@media (max-width: 580px) {
  .cp-note { font-size: clamp(9px,2.6vw,12px); }
  .cp-note br { display: none; }
}
/* =============================================
   PURCHASE BUTTONS
   ============================================= */
.btn-area{padding:0 20px 20px;display:flex;flex-direction:column;gap:10px;}
.btn-pur{
    display: block;
    padding: 20px 30px 20px 10px;
    border-radius: 32px;
    text-align: center;
    font-weight: 700;
    letter-spacing: .05em;
    font-size: clamp(12px, 1vw, 18px);
    border: none;
    cursor: pointer;
    font-family: var(--sans);
    position: relative;
    transition: background .22s,color .22s,opacity .22s,transform .15s;
    min-height: clamp(40px, 8vw, 75px);
}
.btn-pur br{
    display: none;
}
.btn-pur:hover{opacity:.87;}
.btn-pur:active{transform:scale(.97);}
.btn-pink{background:linear-gradient(90deg,#d4698a,#e890b0);color:#fff;box-shadow:0 4px 14px rgba(212,105,138,.35);}
.btn-teal{background:#fff;border:2px solid var(--teal);color:var(--teal);min-height:64px;display:flex;align-items:center;justify-content:center;}
.btn-gold{background:#fff;border:2px solid var(--gold);color:var(--gold);min-height:64px;display:flex;align-items:center;justify-content:center;}
.btn-camp{background:#fff;border:2px solid var(--pink-md);color:var(--pink);min-height:64px;display:flex;align-items:center;justify-content:center;}
/* ── ホバー：各ボタン個別 ── */
.btn-pink:hover{opacity:1;background:linear-gradient(90deg,#e898b2,#f2bad0);box-shadow:0 4px 18px rgba(212,105,138,.22);}
.btn-teal:hover{background:var(--teal);color:#fff;}
.btn-teal:hover .btn-arrow{filter:brightness(0) invert(1);}
.btn-gold:hover{background:var(--gold);color:#fff;}
.btn-gold:hover .btn-arrow{filter:brightness(0) invert(1);}
.btn-camp:hover{background:var(--pink-md);color:#fff;}
.btn-camp:hover .btn-arrow{filter:brightness(0) invert(1);}
/* =============================================
   RIGHT PANEL (PC >= 960px)
   ============================================= */
.purchase-panel{
  display:none;
  flex:0 0 30%;flex-shrink:0;
  padding:0;
  position:sticky;top:0;height:100vh;
  flex-direction:column;align-items:flex-end;justify-content:flex-end;
}
/* ─── blob ラッパー（最大600px）：全要素をblob上に絶対配置 ─── */
.pur-blob-wrap{
  position:relative;
  width:100%;max-width:600px;
  padding-top:20%;
}
.pur-blob-bg{
  width:100%;height:auto;display:block;
}
/* 商品画像 */
.pur-prod-img{
  width:100%;
  ;max-width:100%;height:auto;
  margin:0 auto;
  flex-shrink:1;
}
/* テキスト */
.pur-prod-info{
  text-align:left;
  margin-bottom:clamp(4px,0.6vw,5px);
    padding-left: 10px;
}
.pur-prod-info .p-name{
    font-family: var(--serif);
    font-size: clamp(13px,2vw,22px);
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--pink);
    letter-spacing: .05em;
}
.pur-prod-info .p-camp{
  font-size:clamp(12px,1.4vw,18px);color:var(--pink)!important;line-height:1.9;
}
/* テキスト+ボタン 共通ラッパー：blob内の絶対配置 */
.pur-info-btns{
  position:absolute;
  left:25%;right:3%;bottom:4%;
  display:flex;flex-direction:column;gap:clamp(4px,0.6vw,10px);
  z-index:1;
}
/* ボタン */
.panel-btns{
  display:flex;flex-direction:column;gap:clamp(4px,0.7vw,10px);
}
.panel-btns .btn-pur{
    font-size: clamp(12px, 1vw, 18px);
}
/* SVG矢印（btn-pink / btn-teal / btn-gold / btn-cp-pink 共通） */
.btn-pink::after,
.btn-teal::after,
.btn-gold::after,
.btn-cp-pink::after,
.btn-camp::after {
  content:'';
  position:absolute;
  right:10px;top:50%;
  transform:translateY(-50%);
  width:27px;height:27px;
  -webkit-mask:url(../../images/hapr_cp17_1c/icons/arrow.svg) center/contain no-repeat;
  -webkit-mask-mode:alpha;
  mask:url(../../images/hapr_cp17_1c/icons/arrow.svg) center/contain no-repeat;
  mask-mode:alpha;
  background-color:currentColor;
  display:block;
}
/* TOP PAGE */
.top-lk{
  display:block;position:fixed;right:0;bottom:200px;transform:translateY(-50%);
  writing-mode:vertical-rl;font-size:14px;letter-spacing:.22em;
  color:var(--mid);padding:14px 5px;
  background:rgba(255,255,255,.85);border-radius:6px 0 0 6px;
  box-shadow:-2px 0 10px rgba(0,0,0,.08);z-index:1000;
  opacity:0;pointer-events:none;
  transition:opacity .4s ease, color .2s;
}
.top-lk.is-visible{
  opacity:1;pointer-events:auto;
}
.top-lk:hover{color:var(--pink);}
/* =============================================
  04. Movie（川床明日香さん）
   ============================================= */
.cp_photo{
  width:100%;
}
.cp_photo img{
  width:100%;
}
.cp_body{
    width: 100%;
    background-image: url(../../images/hapr_cp17_1c/campaign/cp_body.png);
    background-repeat: repeat-y;
    background-position: center 0%;
    background-size: contain;
}
.cp_movie{
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 30px;
}
/* 縦長動画（9:16）対応 */
.cp_movie iframe{
    width: 100%;
    aspect-ratio: 9/16;
    height: auto;
    display: block;
    border: none;
}
.cp_movie video{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* SVG矢印 img */
.btn-arrow{
  position:absolute!important;
  right:10px;top:50%;
  transform:translateY(-50%);
  width:27px!important;height:auto;
  display:block!important;
  pointer-events:none;
}
/* 白矢印（ピンクボタン） */
.btn-pink .btn-arrow,
.btn-cp-pink .btn-arrow{
  filter:brightness(0) invert(1);
}
/* ティール矢印 */
.btn-teal .btn-arrow{
  filter:brightness(0) saturate(100%) invert(62%) sepia(50%) saturate(500%) hue-rotate(155deg) brightness(95%) contrast(90%);
}
/* ゴールド矢印 */
.btn-gold .btn-arrow{
  filter:brightness(0) saturate(100%) invert(55%) sepia(80%) saturate(600%) hue-rotate(10deg) brightness(95%) contrast(90%);
}
/* ピンク矢印（キャンペーンボタン） */
.btn-camp .btn-arrow{
  filter:brightness(0) saturate(100%) invert(56%) sepia(38%) saturate(790%) hue-rotate(298deg) brightness(102%) contrast(88%);
}
/* =============================================
   10. コスメコンシェルジュ（美容のプロ）
   ============================================= */
.sec-concierge{
    background: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
}
.concierge-bg{
    width: 100%;
    background-image: url(../../images/hapr_cp17_1c/concierge/concierge_cosme_body.png);
    background-repeat: repeat-y;
    background-position: left top;
    background-size: 100% auto;
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.concierge-title{
    margin: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.concierge-title img{
  width:100%
}
/* カード */
.concierge-card{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
/* カード画像（フル幅） */
.concierge-card-img{
  width:100%;height:auto;
  display:block;
  margin-bottom:0px;
}
/* レビューテキスト */
.concierge-review{
    width: 75%;
    font-size: clamp(12px,1.8vw,18px);
    line-height: 1.95;
    color: var(--mid);
    font-family: var(--sans);
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    padding-top: 10px;
    padding-bottom: 10px;
}
.concierge-em{
  color:#dca4c6;font-weight:700;
}
/* フッター画像 */
.concierge-foot{width:100%;}
.concierge-foot img{width:100%;display:block;}
/* =============================================
   BUBBLE ANIMATION (movie section)
   ============================================= */
.bubble-canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.movie-bg{position:relative;}
.movie-bg > *:not(.bubble-canvas){position:relative;z-index:2;}
.bubble{
  position:absolute;
  bottom:-40px;
  opacity:0;
  animation:bubbleRise linear infinite;
  will-change:transform,opacity;
}
.bubble img{display:block;width:100%;height:100%;}
@keyframes bubbleRise{
  0%  {transform:translateY(0)   translateX(0);   opacity:0;}
  10% {opacity:.9;}
  80% {opacity:.6;}
  100%{transform:translateY(-110%) translateX(var(--drift)); opacity:0;}
}
/* =============================================
   09. Movie セクション (sec-movie-body)
   ============================================= */
.sec-movie-body{
}
/* 09_movie_body.png を背景に繰り返す */
.movie-bg{
  width:100%;
  background-image:url(../../images/hapr_cp17_1c/movie/09_movie_body.png);
  background-repeat:repeat-y;
  background-position:center top;
  background-size:contain;
  padding:40px 0 0;
  text-align:center;
}
/* Movie サブタイトル（イタリック） */
.movie-sub{
  font-size:clamp(18px,3vw,26px);
  font-family:var(--serif);
  font-style:italic;
  color:var(--mid);
  letter-spacing:.08em;
  margin-bottom:24px;
}
/* 「超」+ 名前 行 */
.movie-heading{
  display:flex;align-items:center;justify-content:center;
  gap:12px;margin-bottom:8px;
}
.movie-cho{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--pink);color:#fff;
  font-size:22px;font-family:var(--serif);font-weight:700;
  flex-shrink:0;
}
.movie-name{
  font-size:clamp(14px,2.5vw,18px);
  font-family:var(--serif);color:var(--pink);
  letter-spacing:.06em;
}
/* メインタイトル */
.movie-ttl{
  font-size:clamp(28px,5.5vw,40px);
  font-family:var(--serif);color:var(--pink);
  letter-spacing:.1em;line-height:1.4;
  margin-bottom:28px;
}
/* iframe ラッパー（cp_movieと同比率） */
.movie-iframe{
  padding-top:0;padding-bottom:20px;
}
/* フッター モデル写真（左寄せ・半幅） */
.movie-foot{
  width:100%;
  margin-left:0;
}
.movie-foot img{width:100%;height:auto;display:block;}
/* =============================================
   06b. つぶの秘密 (sec-tsubu)
   ============================================= */
.sec-tsubu{
  padding:36px 0px 48px;
  text-align:center;
}
/* タイトル */
.tsubu-title{margin-bottom:32px;}
.tsubu-sub{
  font-size:13px;color:var(--mid);
  font-family:var(--sans);letter-spacing:.08em;
  margin-bottom:8px;
}
.tsubu-mid{
  font-size:clamp(18px,3.5vw,24px);
  font-family:var(--serif);color:var(--pink);
  letter-spacing:.1em;margin-bottom:6px;
}
.tsubu-main{
  font-size:clamp(28px,6vw,40px);
  font-family:var(--serif);color:var(--dark);
  letter-spacing:.12em;line-height:1.2;
}
/* 「このつぶつぶ」見出し */
.tsubu-photo-wrap{margin-bottom:28px;}
.tsubu-lead{
  display:flex;align-items:center;justify-content:center;
  gap:10px;
  font-size:clamp(14px,2.5vw,18px);
  font-family:var(--serif);color:var(--dark);
  line-height:1.6;margin-bottom:20px;
}
/* 斜め線デコ */
.tsubu-deco{
  display:inline-block;
  width:30px;height:1px;
  background:var(--mid);
  transform:rotate(-35deg);
  flex-shrink:0;
}
.tsubu-pink-bold{
  color:var(--pink);font-weight:700;
}
/* 丸写真 */
.tsubu-circle{
  width:100%;
  margin:0 auto;
}
.tsubu-circle img{
  width:100%;height:auto;
}
/* 本文 */
.tsubu-body{
  font-size:clamp(12px,2vw,18px);
  font-family:var(--serif);
  line-height:2;color:var(--dark);
  text-align:center;
}
.tsubu-body sub{
 position: relative; bottom: 2px;
}
.tsubu-pink{color:var(--pink);}
.tsubu-body sub{font-size:60%;}
.tsubu-footnote{
  margin-top:20px;
  font-size:clamp(10px,1vw,14px);
    color:var(--mid);
  font-family:var(--sans);
}
/* ─── body.png 背景ラッパー（06/07共通パターン）─── */
.tsubu-body-bg{
  width:100%;
  background-image:url(../../images/hapr_cp17_1c/tsubu/06_micro_body.png);
  background-repeat:repeat-y;
  background-position:center top;
  background-size:contain;
  padding:10px 0 40px;
}
.avalyn-body-bg{
  width:100%;
  background-image:url(../../images/hapr_cp17_1c/avalyn/07_avalyn_body.png);
  background-repeat:repeat-y;
  background-position:center top;
  background-size:contain;
  padding:10px 0 40px;
}
/* =============================================
   07b. 選択吸着機能 イラスト
   ============================================= */
.avalyn-illust{
  width:80%;
　max-width:380px;
  margin:0 auto 32px;
}
.anim-viewer{
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.anim-viewer img{width:100%;display:block;height:auto;}
/* =============================================
   AWARD BADGE + BRAND MOVIE ACCORDION (05)
   ============================================= */
.sec-award{padding:0;background:#f8edf4;line-height:initial;}
.award-badge{
    width: 80%;
    margin: 80px auto 0px;
    padding: 30px 0 20px;
    max-width:680px;
}
.award-badge img{
    width:100%;
}
/* アコーディオン外枠 */
.brand-acc{
    border-top: 2px solid rgba(0,0,0,1);
    border-bottom: 2px solid rgba(0,0,0,1);
    margin-top: 20px;
    background-color: #FFFFFF;
}
/* トリガーボタン */
.brand-acc-trigger{
  display:flex;align-items:center;
  width:100%;
  padding:0 28px;
  background:none;border:none;cursor:pointer;text-align:left;
  gap:4px;
}
.brand-acc-trigger:hover .brand-acc-ttl{color:var(--pink);}
/* ＋ / − アイコン（左側大きめ） */
/* ＋アイコン：CSS線で細く描画 */
.brand-acc-icon{
  position:relative;
  width:36px;min-width:36px;height:36px;
  flex-shrink:0;
  transition:transform .4s cubic-bezier(0.25,0.46,0.45,0.94);
  font-size:0;/* テキスト非表示 */
}
.brand-acc-icon::before,
.brand-acc-icon::after{
  content:"";
  position:absolute;
  background:var(--dark);
  border-radius:1px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
/* 横線 */
.brand-acc-icon::before{width:28px;height:1px;}
/* 縦線 */
.brand-acc-icon::after {width:1px;height:28px;}
.brand-acc-trigger[aria-expanded="true"] .brand-acc-icon{
  transform:rotate(45deg);
  transform:rotate(45deg);
}
/* サブタイトル＋タイトル */
.brand-acc-head{
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    flex: 1;
    padding-top: 25px;
    padding-bottom: 25px;
}
.brand-acc-sub{
    display: block;
    font-size: clamp(14px,1vw,18px);
    letter-spacing: .22em;
    color: var(--mid);
    font-family: var(--serif);
}
.brand-acc-ttl{
    display:block;
    font-size: clamp(18px,2vw,28px);
    font-family: var(--serif);
    color: var(--dark);
    line-height: 1.2;
    letter-spacing: .06em;
    transition: color .2s;
}
/* 本体：グリッドトリックでふわっと開閉 */
.brand-acc-body{
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(0.25,0.46,0.45,0.94),
             opacity .35s ease;
    opacity: 0;
    overflow: hidden;
}
.brand-acc-body.is-open{
  grid-template-rows:1fr;
  opacity:1;
}
.brand-acc-body > .brand-acc-inner{
    overflow: hidden;
    padding: 0px 20px 0px;
}
/* 動画（cp_movieと同比率：90%幅・16:9） */
.brand-acc-movie{
    width: 90%;
    margin: 0 auto 28px;
    padding-top: 30px;
}
.brand-acc-movie iframe{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:none;
  display:block;
}
.brand-acc-movie video{
  width:100%;
  display:block;
}
/* 本文 */
.brand-acc-text{
    font-size: clamp(16px,2vw,20px);
    line-height: 2.1;
    color: var(--mid);
    font-family: var(--serif);
    text-align: center;
    padding-bottom: 30px;
}
.brand-acc-text p+p{margin-top:1.3em;}
.brand-photo{
    padding-top: 30px;    
}
.brand-photo img{
   width:100%; 
}
/* =============================================
   RESPONSIVE
   ============================================= */
/* 1600px超：30/40/30% 3カラム（ベーススタイルで定義済み） */
/* 1366〜1599px：均等3カラム */
@media(max-width:1599px){
  .pc-nav{flex:0 0 33.333%;}
  .lp-main{flex:0 0 33.333%;max-width:none;}
  .purchase-panel{flex:0 0 33.333%;}
}
/* 960〜1365px：左ナビ＋コンテンツ 均等2カラム、右パネル非表示 */
@media(max-width:1365px){
  .pc-nav{flex:0 0 50%;}
  .lp-main{flex:0 0 50%;max-width:none;}
  .purchase-panel{display:none!important;}
}
/* PC表示（960px以上）共通：ナビ・右パネル表示、スライダー幅 */
@media(min-width:960px){
  .pur-prod-img{width:80%!important;}
  .pc-nav{display:block;}
  .purchase-panel{display:flex;}
  .top-lk{display:block;}
}
/* 680〜959px：1カラム、コンテンツ90%センター */
@media(max-width:959px){
  .pc-nav{display:none!important;}
  .purchase-panel{display:none!important;}
  .lp-main{flex:none;width:90%;max-width:100%;margin:0 auto;
  box-shadow:0px 0px 30px 0px rgba(199,227,244,1);
    }
}
/* 〜679px：1カラム、コンテンツ100% */
@media(max-width:679px){
  .lp-main{width:100%;margin:0;}
.top-lk{
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    transform: translateY(-50%);
    z-index: 9001;
}
}
@media(max-width:420px){
.btn-cp-pink .btn-cp-img{
  position:absolute;
  left:3%;
  width:40px!important;height:auto;
  object-fit:contain;
  flex-shrink:0;
}
.btn-pur{
    max-height: auto;
}
.btn-pur br{
    display: block;
}/* TOP PAGE */
/* 本文 */
.brand-acc-text{
  font-size:14px;
}
}
/* ═══════════════════════════════════
   SNS 感想セクション
═══════════════════════════════════ */
#sec-sns { background:#fbe8f0; }
.sns-inner {
  position:relative;
  padding:52px 20px 60px;
  overflow:hidden;
}
/* 浮遊ドット */
.sns-dot {
  position:absolute;
  border-radius:50%;
  background:#fff;
  opacity:.7;
  pointer-events:none;
}
.sns_cream{
  width:100%;  
}
.sns_cream img{
  width:100%;  
}
/* ヘッダー */
.sns-header { text-align:center; margin-bottom:32px; }
.sns-ttl {
  font-family:var(--serif);
  font-size:clamp(18px,5vw,30px);
  color:var(--pink-md);
  line-height:1.55;
  letter-spacing:.04em;
  margin-bottom:10px;
}
.sns-sup { font-size:60%; }
.sns-cap {
  font-size:clamp(10px,2.8vw,14px);
  color:#888;
  line-height:1.6;
}
/* 2列バブル行 */
.sns-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:20px;
}
/* バブル */
.sns-user {
  display:block;
  margin-top:10px;
  font-size:14px;
  color:#b07090;
  font-weight:600;
}
/* 中央 円形 */
.sns-circle-wrap {
  display:flex;
  justify-content:center;
  margin:0 auto 20px;
}
.sns-circle {
  width:min(68vw,280px);
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
  border:4px solid #fff;
  box-shadow:0 4px 20px rgba(220,164,198,.3);
}
.sns-circle img { width:100%; height:100%; object-fit:cover; }
/* 吹き出し：外側コーナーから丸3個が円画像方向へ */
.sns-bubble::after {
  content:"";
  position:absolute;
  border-radius:50%;
  background:#fff;
  filter:blur(2px);
}
/* 上段左：外側コーナー＝左下 → 丸が右下（円の方向）へ */
.sns-tl::after {
  width:24px; height:24px;
  bottom:-32px; left:16px;
  box-shadow: 20px 24px 0 -3px #fff,
              44px 52px 0 -7px #fff;
}
/* 上段右：外側コーナー＝右下 → 丸が左下（円の方向）へ */
.sns-tr::after {
  width:24px; height:24px;
  bottom:-32px; right:16px;
  box-shadow: -20px 24px 0 -3px #fff,
              -44px 52px 0 -7px #fff;
}
/* 下段左：外側コーナー＝左上 → 丸が右上（円の方向）へ */
.sns-bl::after {
  width:24px; height:24px;
  top:-32px; left:16px;
  box-shadow: 20px -24px 0 -3px #fff,
              44px -52px 0 -7px #fff;
}
/* 下段右：外側コーナー＝右上 → 丸が左上（円の方向）へ */
.sns-br::after {
  width:24px; height:24px;
  top:-32px; right:16px;
  box-shadow: -20px -24px 0 -3px #fff,
              -44px -52px 0 -7px #fff;
}
/* 上段右を下げ、下段左を上げる */
/* sns-tr の背景だけ追加ブラー（テキストに影響しない）*/
/* ── SNS バブル（吹き出し） ──────────── */
.sns-bubble {
    position: relative;
    background: transparent;
    border-radius: 20px;
    padding: 16px 14px 14px;
    font-size: clamp(16px,3.2vw,18px);
    line-height: 1.65;
    color: #444;
    overflow: visible;
    isolation: isolate;
    text-align: justify;
}
/* 背景レイヤーだけぼかす（テキストに影響しない）*/
.sns-bubble::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.88);
  border-radius:20px;
  filter:blur(6px);
  z-index:-1;
}
/* sns-tr だけ背景ブラーを強める */
.sns-tr::before { filter:blur(10px); }
/* 上段右を下げ、下段左を上げる */
.sns-tr { transform:translateY(36px); }
.sns-bl { transform:translateY(-36px); }
/* 吹き出し尾：外側コーナーから丸3個が円画像方向へ */
.sns-bubble::after {
  content:"";
  position:absolute;
  border-radius:50%;
  background:#fff;
  filter:blur(5px);
}
.sns-tl::after {
  width:24px; height:24px;
  bottom:-32px; left:16px;
  box-shadow: 20px 24px 0 -3px #fff, 44px 52px 0 -7px #fff;
}
.sns-tr::after {
  width:24px; height:24px;
  bottom:-32px; right:16px;
  box-shadow: -20px 24px 0 -3px #fff, -44px 52px 0 -7px #fff;
}
.sns-bl::after {
  width:24px; height:24px;
  top:-32px; left:16px;
  box-shadow: 20px -24px 0 -3px #fff, 44px -52px 0 -7px #fff;
}
.sns-br::after {
  width:24px; height:24px;
  top:-32px; right:16px;
  box-shadow: -20px -24px 0 -3px #fff, -44px -52px 0 -7px #fff;
}
/* ═══════════════════════════════════
   CAMPAIGN SECTION
═══════════════════════════════════ */
#sec-campaign-header { background:#fce8f0; }
/* タイトル */
.camp-ttl-wrap { text-align:center; padding:48px 24px 24px; }
.camp-label-en {
  font-family:var(--serif);
  font-size:clamp(22px,5vw,28px);
  color:#aaa;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.camp-ambassador {
  font-size:clamp(16px,4vw,20px);
  color:var(--pink-md);
  font-weight:600;
  margin-bottom:4px;
  line-height:1.6;
}
.camp-ambassador span {
  display:block;
  font-size:.75em;
  font-weight:400;
  color:#aaa;
}
.camp-ttl-ja {
  font-family:var(--serif);
  font-size:clamp(24px,6vw,34px);
  color:var(--pink-md);
  letter-spacing:.06em;
  line-height:1.4;
}
/* モデル画像 */
.camp-hero {
    position: relative;
    background-color: #fff;
    padding-top: 55px;
}
.camp-head{
    position: relative;
}
.camp-head img,
.camp-hero img { width:100%; display:block; }
.camp-date-badge {
  position:absolute;
  top:16px; right:16px;
  width:min(22vw,96px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  padding:6px;
  box-sizing:border-box;
  text-align:center;
}
.camp-date-year { font-size:clamp(10px,2.5vw,13px); color:#666; line-height:1.2; }
.camp-date-main { font-size:clamp(20px,5vw,28px); font-weight:700; color:#333; line-height:1.1; letter-spacing:-.02em; }
.camp-date-sub  { font-size:clamp(10px,2.5vw,13px); color:#666; line-height:1.4; }
/* 商品カード */
.camp-card {
  width:100%;
  background-image:url(../../images/hapr_cp17_1c/avalyn/07_avalyn_body.png);
  background-repeat:repeat-y;
  background-position:center top;
  background-size:contain;
  border-radius:40px 40px 0 0;
  margin-top:0px;
  padding:36px 24px 10px;
  position:relative;
}
/* 対象商品ラベル */
.camp-product-label {
  text-align:center;
  font-size:clamp(14px,3.5vw,17px);
  color:#888;
  letter-spacing:.1em;
  margin-bottom:20px;
  position:relative;
}
.camp-product-label::before,
.camp-product-label::after {
  content:"";
  position:absolute;
  top:50%; width:22%;
  height:1px;
  background:#ddd;
}
.camp-product-label::before { left:0; }
.camp-product-label::after  { right:0; }
.camp-product-label span { font-size:1.2em; color:#b08090; margin-left:4px; }
/* 商品画像 + No.1バッジ */
.camp-product-img-wrap {
  position:relative;
  width:min(56vw,220px);
  margin:0 auto 24px;
}
.camp-product-img { width:100%; display:block; }
.camp-no1-badge {
  position:absolute;
  bottom:-10px; left:-20px;
  width:min(22vw,90px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:var(--pink-md);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  padding:6px;
  box-sizing:border-box;
}
.camp-no1-sub  { font-size:clamp(9px,2.2vw,11px); line-height:1.3; }
.camp-no1-num  { font-size:clamp(18px,4.5vw,24px); line-height:1.1; font-weight:700; }
.camp-no1-note { font-size:clamp(8px,1.8vw,10px); }
/* 商品情報 */
.camp-product-name {
    text-align: center;
    font-family: var(--serif);
    font-size: clamp(18px,4.5vw,24px);
    color: #dca4c6!important;
    line-height: 1.4;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.camp-price {
  text-align:center;
  font-size:clamp(16px,3.2vw,20px);
  color:var(--pink-md);
  margin-bottom:20px;
}
.camp-price strong { font-size:clamp(34px,5vw,56px); font-weight:500; 
  font-family:var(--serif);}
.camp-price span   { font-size:.85em; }
.camp-desc {
  text-align:center;
  font-size:clamp(14px,2vw,18px);
  line-height:1.9;
  color:#444;
  margin-bottom:14px;
}
.camp-cap {
  font-size:clamp(10px,2vw,14px);
  color:#999;
  line-height:1.7;
  text-align:center;
  margin-bottom:5px;
}
.camp-card .cp_btns{
    padding: 50px clamp(10px, 3vw, 20px) 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin-bottom:30px;
}
/* ギフト */
.camp-gift {
  padding:0px;
  margin-bottom:0px;
  position:relative;
  width:100%;
}
.camp-gift-tag {
  position:absolute;
  top:-14px; left:16px;
  background:var(--pink-md);
  color:#fff;
  font-size:13px;
  font-weight:600;
  padding:3px 14px;
  border-radius:20px;
}
.camp-gift-body {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:6px;
}
.camp-gift-txt {
  flex:1;
  font-size:clamp(14px,3.5vw,17px);
  font-weight:600;
  line-height:1.65;
  color:#333;
}
.camp-gift-txt em { font-style:normal; color:var(--pink-md); }
.camp-gift-img {
  width:min(28vw,110px);
  flex-shrink:0;
  aspect-ratio:1/1;
  border-radius:50%;
  overflow:hidden;
}
.camp-gift-img img { width:100%; height:100%; object-fit:cover; }
/* ═══════════════════════════════════
   MODEL PROFILE
═══════════════════════════════════ */
#sec-model { background:#fff; }
.model-inner {
  padding:52px 28px 56px;
  max-width:520px;
  margin:0 auto;
}
.model-label {
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(24px,6vw,32px);
  color:#aaa;
  text-align:center;
  letter-spacing:.08em;
  margin-bottom:28px;
}
.model-photo {
  width:min(68vw,260px);
  margin:0 auto 24px;
}
.model-photo img { width:100%; display:block; }
.model-name-en {
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(16px,3.8vw,24px);
  color:#888;
  text-align:center;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.model-name-ja {
  font-family:var(--serif);
  font-size:clamp(24px,5.5vw,30px);
  color:#333;
  text-align:center;
  letter-spacing:.2em;
  margin-bottom:28px;
  font-weight:500;
}
.model-name-ja span {
  font-size:.65em;
  letter-spacing:.05em;
  color:var(--dark);
}
.model-bio {
    font-size: clamp(14px,3.2vw,18px);
    line-height: 2;
  color:var(--dark);
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}
/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
#sec-footer {
  background:#f3e8f0;
  padding:52px 24px 40px;
}
.footer-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}
.footer-logo {
    width: min(40vw,70px);
    margin-bottom: 20px;
}
.footer-logo img { width:100%; display:block; }
.footer-nav {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.footer-nav a {
    font-size: clamp(14px,3.5vw,18px);
    color: var(--pink-md);
    text-decoration: none;
    letter-spacing: .04em;
    transition: opacity .2s;
    font-weight: bold;
    line-height: 20px;
}
.footer-nav a:hover { opacity:.7; }
.footer-copy {
  font-size:14px;
  letter-spacing:.03em;
  text-align:center;
  line-height:1.6;
  color:var(--pink-md);
}
/* ──────────────────────────────────────────
   泡クレンジング キャンバスアニメーション
────────────────────────────────────────── */
/* ──────────────────────────────────────────
   下固定追従ボタン（画像ベース）
────────────────────────────────────────── */
.sticky-buy {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.sticky-buy.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.sticky-buy-link {
  display: block;
  position: relative;
  line-height: 0;
}
.sticky-buy-link img {
  display: block;
  width: 100%;
  height: auto;
}
.sticky-hover {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity .2s ease;
}
.sticky-buy-link:hover .sticky-default {
  opacity: 0;
  transition: opacity .2s ease;
}
.sticky-buy-link:hover .sticky-hover {
  opacity: 1;
}
/* ══════════════════════════════════════════
   CAMPAIGN PAGE
══════════════════════════════════════════ */
/* ③ body背景（Y軸リピート） */
.cp-body-wrap {
  background-image: url('../../images/hapr_cp17_1c/campaign/campaign_body.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
}
/* 共通横幅（80%センター） */
.cp-intro,
.cp-caption,
.cp-caption-txt,
.cp-disclaimer-ttl,
.cp-disclaimer-body,
.cp-btn-wrap {
    width: 75%;
    margin-right: auto;
    margin-left: auto;
    text-align: justify;
}
/* ④ 本文 */
.cp-intro {
  padding: 28px 0 20px;
  font-size: clamp(16px, 3.2vw, 20px);
  line-height: 1.8;
  color: var(--dark);
}
.cp-intro p + p { margin-top: 12px; }
/* ⑤⑩⑭ セクション見出し */
.cp-section-ttl {
    background: #dca4c6;
    color: #fff;
    font-size: clamp(20px, 4.5vw, 26px);
    font-weight: 700;
    letter-spacing: .1em;
    text-align: center;
    padding: 14px 20px;
    margin: 35px 0 0;
}
/* ⑥⑦⑧ 商品カード */
.cp-product-item {
  text-align: center;
  padding: 28px 24px 20px;
}
.cp-product-img {
  display: block;
  margin: 0 auto 16px;
  max-width: 80%;
  height: auto;
}
.cp-product-name {
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(18px, 4.5vw, 24px);
  color: #dca4c6;
  line-height: 1.4;
  margin-bottom: 2px;
}
.cp-product-price {
  text-align: center;
  font-size: clamp(16px, 3.2vw, 20px);
  color: var(--pink-md);
  margin-bottom: 10px;
}
.cp-product-price strong {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 400;
  font-family: var(--serif);
}
.cp-tax {
  font-size: .85em;
}
/* ⑨⑬ キャプション */
.cp-caption {
  padding: 14px 0 18px;
  font-size: clamp(10px, 1vw, 16px);
  color: #646464;
  line-height: 1.5;
}
.cp-caption-txt {
    padding: 14px 0 18px;
    font-size: clamp(10px, 1vw, 16px);
    line-height: 1.5;
    color: var(--pink-md);
    text-align: center;
}
.cp-caption-txt p + p { margin-top: 4px; }
.cp-caption p + p { margin-top: 4px; }
/* ⑮ 免責事項タイトル */
.cp-disclaimer-ttl {
  font-size: clamp(14px, 1vw, 20px);
  font-weight: 700;
  color: #dca4c6;
  text-align: center;
  padding: 20px 0 16px;
  border-top: 1px solid #dca4c6;
  border-bottom: 1px solid #dca4c6;
  letter-spacing: .08em;
}
/* ⑯ 規約本文 */
.cp-disclaimer-body {
  padding: 20px 0 32px;
  font-size: clamp(12px, 3.2vw, 14px);
  color: #dca4c6;
  line-height: 2;
}
.cp-disclaimer-body p + p { margin-top: 12px; }
.cp-disclaimer-sub {
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 700;
  color: #dca4c6;
  margin: 20px 0 8px;
}
.cp-disclaimer-body ul {
  padding-left: 1.2em;
  margin: 8px 0 12px;
}
.cp-disclaimer-body li { margin-bottom: 6px; }
/* お問い合わせボタン */
.cp-btn-wrap {
  padding: 32px 0 40px;
  text-align: center;
}
.cp-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pink-md);
  color: #fff;
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 16px 36px;
  border-radius: 100px;
  text-decoration: none;
  transition: opacity .2s;
  box-shadow: 0 4px 14px rgba(220,164,198,.4);
}
.cp-contact-btn:hover { opacity: .8; }
/* @cosme ボタン：360px以下でフォントサイズ縮小して1行に収める */
@media (max-width: 360px) {
  .btn-teal { font-size: 12px; letter-spacing: 0; }
}