@charset "UTF-8";

/* =========================================================
   ドクターズナチュラルレシピ 美容サラダ（青汁）LP
   設計幅: 750px
========================================================= */

.g-header {
  display: none;
}
.g-footer{
  display: none;
}

/* ===== 全体 ===== */
#wrapper {
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

/* アニメ（scale系）による横はみ出し対策 */
@media (max-width: 750px) {
  body { overflow-x: hidden; }
}

/* 画像のみセクションの余白解消（前提：全imgはblockで配置） */
#wrapper p { font-size: 0; }

img { max-width: 100%; height: auto; display: block; }

/* ===== 共通ユーティリティ（textualize-lp 連携） ===== */
.lp_txt { position: absolute; }
.p-box  { position: relative; }

.min  { font-family: "Noto Serif", "Noto Serif JP", serif; }
.zen  { font-family: "Zen Kurenaido", sans-serif; }
.goth { font-family: "Noto Sans JP", sans-serif; }

.em          { color: #dc545d; font-weight: 700; }
.yellow      { color: #fff99d; }
.marker      { background: linear-gradient(transparent 60%, #fff99d 60%); }
.full-marker { background: #fff99d; }
.highlight   { background: linear-gradient(transparent 60%, #FFF44F 60%); }

i   { font-style: normal; }
sup { font-size: 0.6em; vertical-align: super; }

/* ===== PCエリア（fixed背景レイヤー＋左右カラム／shibuyaサンプル踏襲） ===== */
#wrapper #pc-area {
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  height: 100vh;
  background-image: url(../../../product/salad_ad2608/resources/images/bg_pc.png);
  background-size: cover;
  background-position: center center;
}
#wrapper #pc-area .left-column {
  width: calc(50% - 250px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#wrapper #pc-area .left-column .left-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 100px;
}
#wrapper #pc-area .left-column .head-logo_pc img { width: 198px; }
#wrapper #pc-area .right-column {
  width: calc(50% - 250px);
  display: flex;
  align-items: center;
  justify-content: center;
}
#wrapper #pc-area .right-column .right-inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}

/* ===== .lp-container（PC=500px／タブレット以下=最大750px） ===== */
#wrapper .lp-container {
  margin: 0 auto;
  width: 500px;
  position: relative;
  z-index: 2;
  background-color: #fff;
}

@media (max-width: 1000px) {
  #wrapper #pc-area .left-column,
  #wrapper #pc-area .right-column {
    display: none;
  }
  #wrapper .lp-container {
    width: 100%;
    max-width: 750px;
  }
}

/* ===== CVボタン共通 ===== */
#wrapper .btn-offer a { display: block; }
#wrapper .btn-offer img { width: 100%; }

/* CVボタン 大小アニメーション（指示①） */
.pulsate-fwd {
  -webkit-animation: pulsate-fwd 2s ease-in-out infinite both;
          animation: pulsate-fwd 2s ease-in-out infinite both;
}
@-webkit-keyframes pulsate-fwd {
  0%   { -webkit-transform: scale(0.95); transform: scale(0.95); }
  50%  { -webkit-transform: scale(1.05); transform: scale(1.05); }
  100% { -webkit-transform: scale(0.95); transform: scale(0.95); }
}
@keyframes pulsate-fwd {
  0%   { -webkit-transform: scale(0.95); transform: scale(0.95); }
  50%  { -webkit-transform: scale(1.05); transform: scale(1.05); }
  100% { -webkit-transform: scale(0.95); transform: scale(0.95); }
}

/* ===== オファーブロック（.offer 共通） ===== */
#wrapper .offer .p-box .btn-offer {
  position: absolute;
  top: calc(178 / 708 * 100%);
  left: calc(63 / 750 * 100%);
  width: calc(642 / 750 * 100%);
}

/* ===== #salad（美容サラダカード 大小アニメ／指示③） ===== */
#wrapper #salad .salad-anime {
  position: absolute;
  top: calc(12 / 922 * 100%);
  left: calc(365 / 750 * 100%);
  width: calc(381 / 750 * 100%);
  z-index: 2;
}
#wrapper #salad .salad-anime img {
  -webkit-animation: scale-updown 2s ease infinite;
          animation: scale-updown 2s ease infinite;
}
#wrapper #salad .salad-anime-front {
  position: absolute;
  top: calc(170 / 922 * 100%);
  left: calc(346 / 750 * 100%);
  width: calc(53 / 750 * 100%);
  z-index: 3;
}
@-webkit-keyframes scale-updown {
  0%   { -webkit-transform: scale(1); transform: scale(1); }
  50%  { -webkit-transform: scale(1.05); transform: scale(1.05); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scale-updown {
  0%   { -webkit-transform: scale(1); transform: scale(1); }
  50%  { -webkit-transform: scale(1.05); transform: scale(1.05); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}

/* ===== #why（円形写真 順次フェードイン／指示④） ===== */
#wrapper #why .why-anime { position: absolute; }
#wrapper #why .why-anime01 {
  top: calc(0 / 828 * 100%);
  left: calc(55 / 750 * 100%);
  width: calc(573 / 750 * 100%);
}
#wrapper #why .why-anime02 {
  top: calc(226 / 828 * 100%);
  left: calc(113 / 750 * 100%);
  width: calc(594 / 750 * 100%);
}
#wrapper #why .why-anime03 {
  top: calc(463 / 828 * 100%);
  left: calc(55 / 750 * 100%);
  width: calc(573 / 750 * 100%);
}
#wrapper #why .why-anime img {
  opacity: 0;
  transition: opacity .8s ease;
}
#wrapper #why .why-anime.is_active img { opacity: 1; }
#wrapper #why .why-anime02 img { transition-delay: .4s; }
#wrapper #why .why-anime03 img { transition-delay: .8s; }

/* ===== #support（テキスト1行ずつ左から表示／指示⑤） ===== */
#wrapper #support .support-head { margin: 0; font-size: 0; }
#wrapper #support .support-line { position: absolute; }
#wrapper #support .support-line01 {
  top: calc(122 / 596 * 100%);
  left: calc(30 / 750 * 100%);
  width: calc(422 / 750 * 100%);
}
#wrapper #support .support-line02 {
  top: calc(225 / 596 * 100%);
  left: calc(30 / 750 * 100%);
  width: calc(422 / 750 * 100%);
}
#wrapper #support .support-line03 {
  top: calc(328 / 596 * 100%);
  left: calc(30 / 750 * 100%);
  width: calc(305 / 750 * 100%);
}
#wrapper #support .support-line img {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
#wrapper #support .support-line.is_active img {
  -webkit-animation: slideShow-hor .6s ease-out forwards;
          animation: slideShow-hor .6s ease-out forwards;
}
#wrapper #support .support-line02.is_active img { -webkit-animation-delay: .35s; animation-delay: .35s; }
#wrapper #support .support-line03.is_active img { -webkit-animation-delay: .7s; animation-delay: .7s; }

@-webkit-keyframes slideShow-hor {
  0%   { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  100% { -webkit-clip-path: inset(0); clip-path: inset(0); }
}
@keyframes slideShow-hor {
  0%   { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  100% { -webkit-clip-path: inset(0); clip-path: inset(0); }
}

/* ===== #faq（アコーディオン／指示⑥） ===== */
#wrapper #faq {
  background: #c8e3aa;
  padding-bottom: calc(37 / 750 * 100%);
}
#wrapper #faq .faq-list {
  width: calc(690 / 750 * 100%);
  margin: 0 auto calc(26 / 750 * 100%);
}
#wrapper #faq .faq-list dt {
  position: relative;
  cursor: pointer;
}
#wrapper #faq .faq-list dt img,
#wrapper #faq .faq-list dd img { width: 100%; }
#wrapper #faq .faq-list dd {
  display: none;
}
#wrapper #faq .faq-icon {
  position: absolute;
  right: calc(30 / 690 * 100%);
  top: 50%;
  width: calc(34 / 690 * 100%);
  aspect-ratio: 34 / 22;
  background: url(../../../product/salad_ad2608/resources/images/acc-icon.png) no-repeat center / contain;
  transform: translateY(-50%) rotate(180deg);
  transition: transform .3s ease;
}
#wrapper #faq .js-faq-q.is-open .faq-icon {
  transform: translateY(-50%) rotate(0deg);
}

/* ===== 追従バナー（指示②・⑦） ===== */
/* 非表示トリガー（FAQ末尾） */
.float-stop { height: 1px; margin-top: -1px; }

.bl_floatArea {
  position: fixed;
  left: auto;
  right: auto;
  bottom: 0;
  width: 500px;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .4s;
  box-sizing: border-box;
}
.bl_floatArea.is_show {
  visibility: visible;
  opacity: 1;
}
@media (max-width: 1000px) {
  .bl_floatArea {
    max-width: 750px;
    width: 100%;
  }
}
.bl_floatArea_inner {
  max-width: 750px;
  margin: auto;
  box-sizing: border-box;
  padding-bottom: calc(12 / 750 * 100%);
  padding-left: 2%;
}
.bl_floatArea .btn-offer {
  width: calc(642 / 750 * 100%);
  margin: 0 auto;
}
.bl_floatArea .btn-offer img {
  width: 100%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3));
}

/*-- 追加スタイル --*/
/* textualize-lp が追記する領域。空のまま残しておく */