*,:after,:before{border-style:solid;border-width:0;box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}address,blockquote,dl,figure,form,iframe,p,pre,table{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ol,ul{list-style:none;margin:0;padding:0}dt{font-weight:700}dd{margin-left:0}hr{border-top-width:1px;box-sizing:content-box;clear:both;color:inherit;height:0;margin:0;overflow:visible}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;color:inherit;text-decoration:none}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}embed,iframe,img,object,svg{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border-radius:0;color:inherit;font:inherit;margin:0;padding:0;text-align:inherit;text-transform:inherit;vertical-align:middle}[type=button],[type=reset],[type=submit],button{cursor:pointer}[type=button]:disabled,[type=reset]:disabled,[type=submit]:disabled,button:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}fieldset,option{padding:0}fieldset{margin:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=number]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-collapse:collapse;border-color:inherit}caption{text-align:left}td,th{padding:0;vertical-align:top}th{font-weight:700;text-align:left}html{scroll-behavior:smooth}body{background-color:#fff;font-family:Noto Sans JP,sans-serif;overflow-x:hidden}a{cursor:pointer}a:hover{text-decoration:none}img{border:none;height:auto;max-width:100%}img,picture{display:block}.wrapper{margin-inline:auto;overflow:hidden}.btns,.wrapper,.wrapper img{width:100%}.btns{align-items:center;display:flex;gap:min(1.953125vw,20px);justify-content:center}.btn{display:block;transition:filter .3s;width:min(39.16015625vw,401px)}.btn02{position:relative}.btn02-part{left:calc(50% - min(.1953125vw, 2px));position:absolute;top:max(-5.2734375vw,-54px);translate:-50%;width:min(34.1796875vw,350px)}.sp-only{display:none!important}.fv{background:url(../img/bg-fv.jpg) no-repeat top/contain;margin-bottom:min(8.203125vw,84px);width:100%}.fv-content{margin-left:auto;width:100%}.fv-btns{margin-top:max(-.1953125vw,-2px)}.fv-note{font-feature-settings:"palt";font-size:min(1.5625vw,16px);font-weight:500;letter-spacing:.02em;margin-inline:auto;margin-top:min(.87890625vw,9px);padding-left:68px;width:-moz-fit-content;width:fit-content}.product,.product-content{position:relative}.product-content{margin-inline:auto;translate:min(2.83203125vw,29px);width:min(91.796875vw,940px)}.product-limit{color:#353535;font-feature-settings:"palt";font-size:min(2.34375vw,24px);font-weight:500;position:absolute;right:min(12.98828125vw,133px);top:min(20.99609375vw,215px)}.product-price{bottom:min(.68359375vw,7px);color:#ce282f;font-family:"Noto Serif JP",serif;font-feature-settings:"palt";font-size:min(7.8125vw,80px);font-weight:700;position:absolute;right:min(28.02734375vw,287px)}.product-btns{margin-top:min(1.7578125vw,18px)}.product-note{font-feature-settings:"palt";font-size:min(1.5625vw,16px);font-weight:500;margin-inline:auto;margin-top:min(1.07421875vw,11px);text-align:right;width:min(81.8359375vw,838px)}.bg-wrap{background:url(../img/bg-news.png) no-repeat bottom min(12.3046875vw,126px) center/min(83.10546875vw,851px) min(144.140625vw,1476px);width:100%}.target{margin-top:min(5.46875vw,56px);translate:min(1.66015625vw,17px);width:min(89.74609375vw,919px)}.news,.target{margin-inline:auto;position:relative}.news{margin-top:max(-16.6015625vw,-170px);translate:max(-1.66015625vw,-17px);width:min(95.41015625vw,977px)}.bg-gradation{background:linear-gradient(180deg,#def1f7,#f0f8fa);margin-bottom:min(5.95703125vw,61px);margin-top:max(-13.8671875vw,-142px);padding-top:min(6.640625vw,68px)}.mechanism-title{margin-inline:auto;width:min(44.873046875vw,459.5px)}.mechanism-inner{margin-inline:auto;margin-top:min(.9765625vw,10px);translate:min(1.171875vw,12px);width:min(80.17578125vw,821px)}.resech{margin-top:max(-.9765625vw,-10px)}.professor{margin-top:max(-.87890625vw,-9px)}.reason{background:url(../img/bg-reason.png) no-repeat 50%/cover;margin-inline:auto;margin-top:min(8.3984375vw,86px);padding-bottom:min(3.90625vw,40px);padding-top:min(5.859375vw,60px);width:min(83.0078125vw,850px)}.reason-title{margin-inline:auto;width:min(44.482421875vw,455.5px)}.reason-inner{margin-inline:auto;width:min(74.70703125vw,765px)}.reason01{margin-top:min(4.6875vw,48px)}.reason02,.reason03,.reason04{margin-top:min(3.90625vw,40px)}.kodawari{background:url(../img/bg-kodawari.png) no-repeat top/contain;margin-top:max(-.1953125vw,-2px);padding-top:min(8.59375vw,88px)}.kodawari-head{margin-inline:auto;position:relative;width:min(83.0078125vw,850px)}.kodawari-title{margin-inline:auto;width:min(32.666015625vw,334.5px)}.kodawari-img{position:absolute;right:min(1.953125vw,20px);top:calc(50% + min(.29296875vw, 3px));translate:0 -50%;width:min(21.58203125vw,221px)}.kodawari-inner{background:#e5e5e5;margin-inline:auto;margin-top:min(4.4921875vw,46px);padding-bottom:min(3.90625vw,40px);padding-top:min(3.61328125vw,37px);width:min(83.0078125vw,850px)}.kodawari01,.kodawari02,.kodawari03,.kodawari04{margin-inline:auto;width:min(74.70703125vw,765px)}.kodawari02,.kodawari03,.kodawari04{margin-top:min(3.61328125vw,37px)}.qa{background:#e1eef4;margin-bottom:min(5.6640625vw,58px);padding-bottom:min(3.90625vw,40px);padding-top:min(9.9609375vw,102px)}.qa-title{margin-inline:auto;width:min(33.447265625vw,342.5px)}.qa-inner{margin-inline:auto;margin-top:min(4.4921875vw,46px);width:min(68.359375vw,700px)}.qa02,.qa03,.qa04,.qa05{margin-top:min(2.734375vw,28px)}.footer{background:url(../img/bg-footer.jpg) no-repeat 50%/cover;color:#333;margin-top:min(3.90625vw,40px);padding-bottom:min(1.171875vw,12px);padding-top:min(2.1484375vw,22px)}.footer-inner{margin-inline:auto;width:min(74.8046875vw,766px)}.footer-flex{display:flex;justify-content:space-between}.footer-left{display:block;flex:0 0 min(23.4375vw,240px);margin-top:min(.1953125vw,2px)}.footer-logo{width:min(5.46875vw,56px)}.footer-company{font-feature-settings:"palt";font-size:min(1.953125vw,20px);letter-spacing:.06em;margin-top:min(1.171875vw,12px);white-space:nowrap}.footer-right{flex:0 0 min(37.3046875vw,382px);margin-top:min(.78125vw,8px);text-align:center}.footer-note{font-size:min(1.3671875vw,14px);margin-inline:auto;padding-inline:min(.5859375vw,6px);position:relative;width:-moz-fit-content;width:fit-content}.footer-note:after,.footer-note:before{background:#333;content:"";height:min(1.5625vw,16px);position:absolute;top:50%;translate:0 -50%;width:1px}.footer-note:before{left:0;rotate:-45deg}.footer-note:after{right:0;rotate:45deg}.footer-icons{align-items:center;display:flex;gap:min(3.90625vw,40px);margin-top:min(.9765625vw,10px)}.footer-icon{transition:opacity .3s}.footer-nav{display:flex;font-feature-settings:"palt";font-size:min(1.3671875vw,14px);gap:min(7.71484375vw,79px);letter-spacing:.05em;margin-top:min(2.1484375vw,22px);padding-left:min(.29296875vw,3px)}.footer-nav .ls-lg{letter-spacing:.08em}.footer-nav a{transition:opacity .3s}.copyright{font-feature-settings:"palt";font-size:min(1.171875vw,12px);letter-spacing:.035em;margin-top:min(2.1484375vw,22px);text-align:center}@media screen and (max-width:1023px){.fv-note{padding-left:0;text-align:center}}@media screen and (max-width:767px){.btns{align-items:flex-start;gap:1.6vw}.btn01{width:60.2vw}.btn02{width:33.4666666667vw}.btn02-part{display:none}.sp-only{display:block!important}.fv{background:url(../img/sp/bg-fv.jpg) no-repeat top/contain;margin-bottom:11.7333333333vw}.fv-content{width:99.2vw}.fv-btns{margin-top:1.7333333333vw}.fv-note{font-size:2.6666666667vw;line-height:1.6;margin-top:.4vw;padding-left:2.6666666667vw;text-align:left;width:100%}.product-content{translate:none;width:100%}.product-limit{font-size:3.7333333333vw;letter-spacing:.02em;right:calc(50% - .8vw);top:29.0666666667vw;translate:50%;white-space:nowrap}.product-price{bottom:5.2vw;font-size:10.6666666667vw;right:13.8666666667vw}.product-btns{margin-top:1.3333333333vw;translate:.2666666667vw}.product-note{display:none}.bg-wrap{background:url(../img/sp/bg-news.png) no-repeat bottom/contain}.target{margin-top:3.6vw}.news,.target{translate:none;width:100%}.news{margin-top:-17.8666666667vw}.bg-gradation{background:#eaf5f8;margin-bottom:8vw;margin-top:14.9333333333vw;padding-bottom:7.4666666667vw;padding-top:10.9333333333vw;position:relative}.mechanism-part{position:absolute;right:0;top:-5.7333333333vw;width:34.8vw;z-index:1}.mechanism-title{width:75.8666666667vw}.mechanism-inner{margin-top:4vw;translate:.6666666667vw;width:98.9333333333%}.resech{margin-top:4.5333333333vw}.professor{margin-top:4.4vw}.reason{background:url(../img/sp/bg-reason.jpg) no-repeat 50%/cover;margin-top:6.2666666667vw;padding-bottom:12.5333333333vw;padding-top:9.3333333333vw;width:100%}.reason-title{width:80.2vw}.reason-inner{width:95.7333333333vw}.reason01{margin-top:3.2vw}.reason02,.reason03,.reason04{margin-top:4.6666666667vw}.kodawari{background:url(../img/sp/bg-kodawari.png) no-repeat top -.6666666667vw center/contain;margin-top:0;padding-top:20vw}.kodawari-head{width:100%}.kodawari-title{width:71.4666666667vw}.kodawari-img{right:2.6666666667vw;top:-8.9333333333vw;translate:none;width:23.7333333333vw}.kodawari-inner{margin-top:4.6666666667vw;padding-bottom:5.0666666667vw;padding-top:5.0666666667vw;width:100%}.kodawari01,.kodawari02,.kodawari03,.kodawari04{width:100%}.kodawari02,.kodawari03,.kodawari04{margin-top:5.2vw}.qa{margin-bottom:13.3333333333vw;padding-bottom:12.8vw;padding-top:17.0666666667vw}.qa-title{width:73.6666666667vw}.qa-inner{margin-top:6vw;width:93.3333333333%}.qa02,.qa03,.qa04,.qa05{margin-top:4vw}.footer{background:url(../img/sp/bg-footer.jpg) no-repeat 50%/cover;margin-top:9.6vw;padding-bottom:5.0666666667vw;padding-top:6.9333333333vw}.footer-inner{width:100%}.footer-flex{display:block}.footer-left{align-items:flex-end;display:flex;justify-content:center;padding-left:.8vw}.footer-logo{width:11.4666666667vw}.footer-company{font-size:4.9333333333vw;font-weight:600;letter-spacing:.065em;line-height:1;margin-top:0}.footer-right{margin-top:10.2666666667vw}.footer-note{font-size:3.8666666667vw;padding-inline:1.6vw}.footer-note:after,.footer-note:before{height:5.0666666667vw}.footer-icons{flex-direction:column;gap:6.6666666667vw;margin-top:2.9333333333vw}.footer-icon:first-child{width:32.5333333333vw}.footer-icon:last-child{width:48.8vw}.footer-nav{font-size:4vw;justify-content:space-between;margin-inline:auto;margin-top:11.0666666667vw;padding-left:5.3333333333vw;width:86%}.copyright{font-size:3.0666666667vw;letter-spacing:.05em;margin-top:7.3333333333vw}}@media (hover:hover){.btn:hover{filter:brightness(1.15) saturate(.6)}.footer-icon:hover,.footer-nav a:hover{opacity:.6}}
/* ① 上部固定バー */
#custom-top-bar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #666; /* 画像のようなグレー */
    color: #fff;
    text-align: center;
    padding: 10px 0;
    z-index: 2147483647 !important;
    font-size: 14px;
}
#custom-top-bar a {
    color: #fff;
    text-decoration: underline;
}

/* ② 下部フローティングエリア */
#custom-floating-footer {
    /* 1. 画面に対して強制固定 */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    
    /* 2. 重なり順を最大に（iPhone/Firefoxで負けない数値） */
    z-index: 2147483647 !important;

    /* 3. 【最重要】iPhone/Firefoxでfixedを有効にする魔法のコード */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* 4. デザイン（現在Chromeでうまくいっているものを維持） */
    background: rgba(0, 0, 0, 0.8) !important;
    padding: 10px 0 !important;
    text-align: center !important;
    display: block !important;

/* --- ↓ この2行を追加 --- */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* ----------------------- */
}

.footer-label {
    color: #fff;
    font-size: 14px;
    margin: 0 0 8px 0;
}

/* リンクボタンの横並びをFirefoxでも強制する */
.footer-buttons {
    display: flex !important;
    display: -webkit-flex !important; /* iPhone Safari用 */
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 15px !important;
}

.footer-buttons a {
    flex: 1;
    max-width: 180px;
}

.footer-buttons img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
}

/* 閉じるボタン */
#close-floating {
    position: absolute;
    top: -30px;
    right: 10px;
    background: #333;
    color: #fff;
    border: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
}

/* コンテンツが被らないようにbodyに余白 */
body {
    padding-top: 40px;
    padding-bottom: 100px;
}
#custom-floating-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.85) !important;
    padding: 12px 0 !important;
    z-index: 2147483647 !important;
    
    /* 初期状態を非表示に（JSでコントロール） */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    transform: translateY(20px);
    
    /* iPhone/Firefox対策：描画レイヤーを強制分離 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#custom-top-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 40px !important;
    background: #666 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 閉じるボタンのデザイン */
#close-floating {
    position: absolute !important;
    top: -30px !important;
    right: 10px !important;
    background: #333 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    border-radius: 50% !important;
    width: 25px !important;
    height: 25px !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

/* 1. 商品コンテンツの親要素に基準（relative）を設定 */
.product-content {
  position: relative;
  width: 100%;
}

/* 2. 透過エフェクトの配置（スマホ用） */
.glitter-overlay {
  position: absolute;
  
  /* 画像全体に対する「商品パッケージ」の位置（実数値から算出） */
  top: 50%;       /* 上から半分あたり */
  left: 3.5%;     /* 左端からの余白 */
  width: 44.5%;   /* 商品パッケージの横幅 */
  height: 28%;    /* 商品パッケージの縦幅 */
  
  overflow: hidden;
  pointer-events: none; /* 下にある画像へのタッチ・クリックを阻害しない */
  z-index: 10;          /* 画像より前面に出す */
}

/* 3. キラッと走る光の白い帯（透過） */
.glitter-overlay::before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.6) 45%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.6) 55%,
    rgba(255, 255, 255, 0) 70%
  );
  
  /* 3.5秒周期でループ（光が走るのに約1秒、残りは静止） */
  animation: shine 3.5s infinite ease-in-out;
}

/* 光が左上から右下へ駆け抜ける動き */
@keyframes shine {
  0% {
    top: -100%;
    left: -100%;
  }
  25%, 100% { /* 25%の時点で通り過ぎ、残りの時間（約2.5秒）は消えることで自然な間隔を作る */
    top: 100%;
    left: 100%;
  }
}

/* PC表示（768px以上）の時のレイアウト修正と位置調整 */
@media screen and (min-width: 768px) {
  
  /* ① PC環境で要素が右下に広がりすぎないよう、コンテナの最大幅を制限して中央寄せにする */
  .product-content {
    max-width: 950px; /* LPのコンテンツ全体の横幅に合わせて、900px〜1000pxの間で微調整してください */
    margin: 0 auto;
  }

  /* ② 「一家族様3個まで」のテキスト位置を上に引き上げて、文字の重なりを解消 */
  .product-limit {
    top: 220px !important; /* スマホより少し上の位置（％）に調整して重なりを防ぐ */
    right: 15% !important; /* 右端からの位置を調整 */
  }

  /* ③ 価格エリア（特別価格・3,240円・半額アイコンなど）の位置を枠内に収める */
  .product-price {
    bottom: 1% !important; /* 下からの位置を引き上げて、青い枠内に収める */
    right: 32% !important;   /* 右にズレすぎないよう調整 */
  }

  /* ④ 【光らせる場合】PC用画像（product.png）の商品パッケージの位置にぴったり合わせる */
  .glitter-overlay {
    display: block; /* display: none; から変更して、PCでも光らせる */
    top: 50%;       /* PC画像内のパッケージの上端に合わせる（要微調整） */
    left: 2.2%;     /* PC画像内のパッケージの左端に合わせる（要微調整） */
    width: 44.5%;   /* PC画像内のパッケージの横幅に合わせる */
    height: 31%;    /* PC画像内のパッケージの縦幅に合わせる */
  }
}
/* スマホ・PC共通のボタン改善 */
.product-btns .btn01 img {
  /* 画像の色をゴールドから「鮮やかなグリーン」に変換 */
filter: hue-rotate(330deg) saturate(1.8) brightness(1.1);  
  /* ボタンらしく少しプルプル動かすアニメーション（※任意） */
  animation: pulse-animation 2.5s infinite;
  transition: transform 0.2s ease;
}

/* マウスを乗せたとき・タップしたときの反応 */
.product-btns .btn01:hover img {
  transform: scale(1.03); /* 少し大きく */
filter: hue-rotate(330deg) saturate(2.1) brightness(1.2);
}

/* ボタンを定期的に軽く脈動（アピール）させる動き */
@keyframes pulse-animation {
  0% { transform: scale(1); }
  5% { transform: scale(1.03); }
  10% { transform: scale(1); }
  15% { transform: scale(1.03); }
  20% { transform: scale(1); }
  100% { transform: scale(1); }
}