/*-------------------------------------*
 * PCデザイン可変部分
 *-------------------------------------*/
span.form_required_ec { background: #7E0F09; color: #ffffff; }
.landing_form_label_ec { background: #203594; color: #ffffff; font-size: 18px; }
table.landing_form_ec { border-top: 1px solid #d0dcec; border-right: 1px solid #d0dcec; background: #FFF; border-bottom: 1px solid #999; }
.landing_form_ec th { background-color: #e1edfd; border-bottom: 1px solid #d0dcec; border-left: 1px solid #d0dcec; }
.landing_form_ec td { border-bottom: 1px solid #d0dcec; border-left: 1px solid #d0dcec; background-color: #ffffff; }
.submit_bottom_ec { border: 0px; width: 400px; height: 150px; background-size: 394px auto; background-repeat: no-repeat; cursor: pointer; }

/*-------------------------------------*
 * スマートフォンデザイン可変部分
 *-------------------------------------*/
span.form_required_sp_ec { background: #7E0F09; color: #ffffff; }
.landing_form_label_sp_ec { background: #203594; color: #ffffff; font-size: 18px; }
.form_box_label_sp_ec { background: #cadefc; border-bottom: 1px solid #C3C3C3; border-top: 1px solid #C3C3C3; }
.submit_bottom_sp_ec { border: 0px; width: 100%; height: 150px; background-size: 100% auto; background-repeat: no-repeat; cursor: pointer; }

/* LPstyle */
*, ::before, ::after { box-sizing: border-box; }
:where(:root) { font-family: sans-serif; line-height: 1.5; text-spacing-trim: trim-start; text-autospace: normal; line-break: strict; overflow-wrap: anywhere; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; -webkit-tap-highlight-color: transparent; }
:where(body) { min-block-size: 100dvb; margin: unset; }
:where(h1, h2, h3, h4, h5, h6) { text-wrap: pretty; }
:where(h1) { margin-block: 0.67em; font-size: 2em; }
:where(h2, h3, h4, h5, h6) { margin-block: unset; }
:where(search) { display: block flow; }
:where(p, blockquote, figure, pre, address, ul, ol, dl, menu) { margin-block: unset; }
:where(blockquote, figure) { margin-inline: unset; }
:where(p:lang(en)) { text-wrap: pretty; }
:where(address:lang(ja)) { font-style: unset; }
:where(ul, ol, menu) { padding-inline-start: unset; list-style-type: ""; }
:where(dt) { font-weight: bolder; }
:where(dd) { margin-inline-start: unset; }
:where(pre) { text-spacing-trim: space-all; text-autospace: no-autospace; }
:where(em:lang(ja)) { font-weight: bolder; }
:where(:is(i, cite, em, dfn, var):lang(ja)) { font-style: unset; }
:where(code, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: initial; font-variation-settings: initial; font-size: unset; font-variant-ligatures: none; }
:where(abbr[title]) { text-decoration-line: underline; text-decoration-style: dotted; cursor: help; }
:where(time) { text-autospace: no-autospace; }

@media (forced-colors: active) { :where(mark) { background-color: Highlight; color: HighlightText; } }
@media print { :where(mark) { border-width: 1px; border-style: dotted; } }

:where(a:any-link) { color: unset; text-decoration-line: unset; text-decoration-thickness: from-font; }
:where(img, svg, picture, video, canvas, model, audio, iframe, embed, object) { block-size: auto; max-inline-size: 100%; vertical-align: bottom; }
:where(img) { height: auto; object-fit: cover; }
:where(iframe) { border: unset; }
:where(table) { border-collapse: collapse; }
:where(caption, th) { text-align: unset; }
:where(caption) { text-wrap: pretty; }
:where(button, input, select, textarea), ::file-selector-button { border-width: 1px; border-style: solid; border-color: unset; border-radius: unset; color: unset; font: unset; letter-spacing: unset; text-align: unset; }
:where(input:is([type="radio" i], [type="checkbox" i])) { margin: unset; }
:where(input[type="file" i]) { border: unset; }
:where(input[type="search" i]) { -webkit-appearance: textfield; }
@supports (-webkit-touch-callout: none) { :where(input[type="search" i]) { background-color: Canvas; } }
:where(input:is([type="tel" i], [type="url" i], [type="email" i], [type="number" i]):not(:placeholder-shown)) { direction: ltr; }
:where(textarea) { margin-block: unset; resize: block; }
:where(input:not([type="button" i], [type="submit" i], [type="reset" i]), textarea, [contenteditable]) { text-autospace: no-autospace; }
:where(button, input:is([type="button" i], [type="submit" i], [type="reset" i])), ::file-selector-button { background-color: unset; }
:where(button, input:is([type="button" i], [type="submit" i], [type="reset" i]), [role="tab" i], [role="button" i], [role="option" i]), ::file-selector-button { touch-action: manipulation; }
:where(button:enabled, label[for], select:enabled, input:is([type="button" i], [type="submit" i], [type="reset" i], [type="radio" i], [type="checkbox" i]):enabled, [role="tab" i], [role="button" i], [role="option" i]), :where(:enabled)::file-selector-button { cursor: pointer; }
:where(fieldset) { min-inline-size: 0; margin-inline: unset; padding: unset; border: unset; }
:where(legend) { padding-inline: unset; }
:where(progress) { vertical-align: unset; }
::placeholder { opacity: unset; }
:where(summary) { list-style-type: ""; cursor: pointer; }
:where(summary)::-webkit-details-marker { display: none; }
:where(dialog, [popover]) { overscroll-behavior-block: contain; padding: unset; border: unset; }
:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) { display: none !important; }
:where(dialog) { max-inline-size: unset; max-block-size: unset; }
:where(dialog)::backdrop { background-color: oklch(0% 0 0deg / 30%); }
:where([popover]) { margin: unset; }
:where(:focus-visible) { outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none !important; }
:where(:disabled, [aria-disabled="true" i]) { cursor: default; }
[hidden]:not([hidden="until-found" i]) { display: none !important; }

html, body { overflow-x: hidden; max-width: 100%; }

/* 画像保護 */
img { user-select: none; -webkit-user-drag: none; }

.wrapper {
  width: 100%; margin-inline: auto;
  .content { width: 100%; max-width: min(500px, 100vw); margin: 0 auto; position: relative; }
  .header { z-index: 3; }
  .fv { margin-block-start: -20px; }
  .fv_under { z-index: 3; }
  .fv-image { position: relative; z-index: 3; }

  .fv-video-wrap { position: absolute; top: 45%; left: 0; width: 100%; height: 52%; overflow: hidden; }
  .fv-video-wrap--2 { top: 0%; height: 118%; }
  .fv-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
  .fv-video-inner { position: absolute; left: 0; bottom: -24%; width: 100%; height: 0; padding-bottom: 177.78%; }
  .fv-video-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center top; z-index: 2; transition: opacity 0.8s ease; pointer-events: none; }
  .fv-video-poster.hidden { opacity: 0; }

  .item { position: absolute; z-index: 2; }
  .item01-1 { width: 93%; left: 50%; transform: translateX(-46%); bottom: 15%; }
  .item01-2 { width: 90%; left: 50%; transform: translateX(-48%); bottom: 1%; }
  .item260908-1 { width: 53%; left: 3%; top: 31%; }
  .item260908-2 { width: 51%; right: 4%; top: 65%; }
  .item260908-3 { width: 50%; left: 4%; top: 3%; }
  .item260908-4 { width: 50%; right: 3%; top: 30%; }
  .item260908-5 { width: 52%; left: 3%; top: 68%; }
  .item07-1 { width: 68%; left: 0; top: 29%; }
  .item07-2 { width: 69%; right: 0; top: 44%; }
  .item07-3 { width: 68%; left: 0; top: 66%; }
  .item07a-1 { width: 95%; top: 1%; left: 50%; transform: translateX(-50%); }
  .item08-1 { width: 60%; left: 0; top: 25%; }
  .item09-1 { width: 55%; right: 3%; top: 3%; }
  .item14-1 { width: 24%; right: 5%; bottom: -8%; z-index: 3; }
  .item17-1 { width: 96%; left: 2%; bottom: 4%; z-index: 3; }

  .img-003 { position: relative; }
  .img-003 a { position: absolute; bottom: 1%; left: 6%; font-size: 12px; color: #0000EE; }

  .slide {
    width: 100%; max-width: 100%; position: relative; overflow: hidden;
    .swiper { width: 100%; max-width: 100%; padding-inline: 5%; }
    .swiper-slide { min-width: 0; img { width: 100%; height: auto; } }
    .swiper-button-prev, .swiper-button-next { width: calc(33 / 500 * 100%); height: auto !important; aspect-ratio: 1 / 1; &::after { content: none; } img { width: 100%; height: auto; } }
    .swiper-button-prev { left: 1%; }
    .swiper-button-next { right: 1%; }
    .swiper-pagination { bottom: -20px; }
  }

  .slide-01 { position: absolute; top: 20%; }
  .slide-03 { padding: 20px 0 40px; .swiper-pagination { bottom: 10px; } }

  .cta-image { position: relative; z-index: 3; }
  .item22-1 { width: 38%; left: 2%; top: 5%; }
  .item36-1 { width: 84%; left: 8%; top: 60%; }
  .item38-1 { width: 90%; left: 2%; top: 2%; }

  .qa_items { background: #f4ce4b; padding-inline: 7%; padding-block-end: 5%; }
  .qa_item { &[open] { background: #fff; border-radius: 3%; } &:not(:first-child) { margin-block-start: 3%; } }
  .qa_item_question { display: block; &::-webkit-details-marker { display: none; } }
  .qa_item_answer { overflow: hidden; background: #fff; border-radius: 3%; }
  .qa_item_answerInner { padding-block: 3% 10%; padding-inline: 3% 11%; }

  .product-table-wrap { padding: 20px 10px 20px; background-color: #fff; }
  .product-table {
    width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.6;
    th, td { padding: 10px 12px; vertical-align: top; text-align: left; }
    th { border: 1px solid #fff; background-color: #4392d4; color: #fff; font-weight: normal; white-space: nowrap; width: 28%; text-align: center; vertical-align: middle; }
    td { border: 1px solid #4392d4; background-color: #fff; color: #333; }
  }

  .offer-btn { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 100%; border: 0; margin: 0; padding: 0; }
  .footer { padding: 20px 0 30px; background-color: #4392d4; }
  .footer__content { display: grid; gap: 10px; a { font-size: 14px; text-align: center; color: #fff; } }

  .slideIn { opacity: 0; transform: translateY(180px); }
  .slideIn.is-animated { animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
  .zoomIn { opacity: 0; transform: scale(0.8); }
  .zoomIn.is-animated { animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
  .zoomInOut { animation: zoomInOut 1.5s ease-in-out infinite; }

  .js-float-btn {
    position: fixed; top: initial; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 10; max-width: 450px; width: 100%; height: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    &.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
    img { width: 100%; height: auto; }
  }
}

@keyframes slideIn { 0% { transform: translateY(180px); opacity: 0; } 40%, 100% { opacity: 1; } 100% { transform: translateY(0); } }
@keyframes zoomIn { 0% { transform: scale(0.8); opacity: 0; } 100% { opacity: 1; transform: scale(1); } }
@keyframes zoomInOut { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } }

/* PCフォーム全体の中央寄せ補正 */
table.landing_form_ec, .landing_form_label_ec, .form_container_ec { width: 100%; max-width: 940px; margin-left: auto !important; margin-right: auto !important; }

/* LP画像の横幅安定 */
.wrapper .content { width: 100%; position: relative; }
.wrapper img { max-width: 100%; height: auto; display: block; }
.voice-toggle { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.voice-panel { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(16px); transition: max-height 700ms ease, opacity 500ms ease, transform 500ms ease; }
.voice-panel.is-open { opacity: 1; transform: translateY(0); }
.fv-video-wrap { position: absolute; top: 43%; left: 0; width: 100%; height: 54%; overflow: hidden; }
.movie-frame-content { position: relative; }
.movie-frame-img { position: relative; z-index: 2; pointer-events: none; }
.movie-frame-content .fv-video-wrap { z-index: 1; top: 43%; height: 57%; }

/* =========================================================
   FAQポップアップ：表LPのQ&Aをそのまま再現
========================================================= */
.faq-popup-content .js_faq {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.faq-popup-content .qa_items {
  background: #f4ce4b;
  padding-inline: 7%;
  padding-block-end: 5%;
}

.faq-popup-content .qa_item[open] {
  background: #fff;
  border-radius: 3%;
}

.faq-popup-content .qa_item:not(:first-child) {
  margin-block-start: 3%;
}

.faq-popup-content .qa_item_question {
  display: block;
}

.faq-popup-content .qa_item_question::-webkit-details-marker {
  display: none;
}

.faq-popup-content .qa_item_answer {
  overflow: hidden;
  background: #fff;
  border-radius: 3%;
}

.faq-popup-content .qa_item_answerInner {
  padding-block: 3% 10%;
  padding-inline: 3% 11%;
}

/* =========================================================
   CTAポップアップ：表LPのCTAと同じ配置・アニメーション
========================================================= */
.cta-popup-content .content {
  width: 100%;
  max-width: min(500px, 100vw);
  margin: 0 auto;
  position: relative;
}

.cta-popup-content .cta-area {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.cta-popup-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.cta-popup-content .offer-btn {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  z-index: 4;
  line-height: 0;
}

.cta-popup-content .zoomInOut {
  animation: zoomInOut 1.5s ease-in-out infinite;
}

/* =========================================================
   お母さんたちの声ポップアップ
========================================================= */
.wrapper .content.mama-voice-trigger {
  margin: 30px auto 0;
}

.mama-voice-trigger a {
  display: block;
  width: 100%;
}

.mama-voice-trigger img {
  display: block;
  width: 100%;
  height: auto;
}

.mama-voice-popup {
  background: #FFFFE7;
}

.mama-voice-popup-head,
.mama-voice-popup-head img {
  display: block;
  width: 100%;
  height: auto;
}

.mama-voice-popup-body {
  background: #FFFFE7;
  padding: 8px 0 14px;
}

.mama-voice-item {
  width: 100%;
  margin: 0;
}

.mama-voice-item:not(:first-child) {
  margin-top: 12px;
}

.mama-voice-question {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.mama-voice-question::-webkit-details-marker {
  display: none;
}

.mama-voice-question img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

.mama-voice-answer {
  width: 100%;
  overflow: hidden;
}

.mama-voice-answer-inner {
  width: 100%;
  padding: 10px 0 0;
  margin: 0;
}

.mama-voice-answer-inner img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

.mama-voice-answer-inner img + img {
  margin-top: 8px;
}

/* お母さんたちの声ポップアップだけ画面幅を最大限使用 */
#mamaVoicePopup {
  padding: 4px;
}

#mamaVoicePopup .mama-voice-popup {
  width: min(calc(100vw - 8px), 500px);
  max-width: none;
  max-height: 94dvh;
}

#mamaVoicePopup .mama-voice-popup-scroll,
#mamaVoicePopup .faq-popup-scroll {
  width: 100%;
  max-height: 94dvh;
}

#mamaVoicePopup .mama-voice-popup-head {
  width: 100%;
  margin: 0;
  padding: 0;
}

#mamaVoicePopup .mama-voice-popup-head img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

#mamaVoicePopup .mama-voice-popup-body {
  width: 100%;
  margin: 0;
  padding: 8px 0 14px;
}

#mamaVoicePopup .mama-voice-item,
#mamaVoicePopup .mama-voice-question,
#mamaVoicePopup .mama-voice-answer,
#mamaVoicePopup .mama-voice-answer-inner {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

#mamaVoicePopup .mama-voice-question {
  padding: 0;
}

#mamaVoicePopup .mama-voice-question img,
#mamaVoicePopup .mama-voice-answer-inner img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-left: 0;
  margin-right: 0;
}

#mamaVoicePopup .mama-voice-answer-inner {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 600px) {
  #mamaVoicePopup {
    padding-left: 2px;
    padding-right: 2px;
  }

  #mamaVoicePopup .mama-voice-popup {
    width: calc(100vw - 4px);
    max-height: 96dvh;
    border-radius: 12px;
  }

  #mamaVoicePopup .mama-voice-popup-scroll,
  #mamaVoicePopup .faq-popup-scroll {
    max-height: 96dvh;
  }
}

/* ----------------------
 各種ポップアップ
---------------------- */
.faq-popup-overlay, .cta-popup-overlay, .voice-popup-overlay, .ingredients-popup-overlay, .thoughts-popup-overlay {
  position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0, 0, 0, 0.58); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms ease, visibility 260ms ease;
}
.faq-popup-overlay.is-active, .cta-popup-overlay.is-active, .voice-popup-overlay.is-active, .ingredients-popup-overlay.is-active, .thoughts-popup-overlay.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.faq-popup, .cta-popup { position: relative; width: min(100%, 500px); max-height: 86dvh; background: #f4ce4b; border-radius: 18px; overflow: hidden; transform: translateY(18px) scale(0.98); transition: transform 260ms ease; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); }
.voice-popup, .ingredients-popup, .thoughts-popup { position: relative; width: min(100%, 500px); max-height: 86dvh; background: #fff; border-radius: 18px; overflow: hidden; transform: translateY(18px) scale(0.98); transition: transform 260ms ease; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); }

.faq-popup-overlay.is-active .faq-popup, .cta-popup-overlay.is-active .cta-popup, .voice-popup-overlay.is-active .voice-popup, .ingredients-popup-overlay.is-active .ingredients-popup, .thoughts-popup-overlay.is-active .thoughts-popup { transform: translateY(0) scale(1); }

.faq-popup-close { position: absolute; top: 8px; right: 10px; z-index: 3; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #333; font-size: 28px; line-height: 1; text-align: center; cursor: pointer; }
.faq-popup-scroll, .cta-popup-scroll, .voice-popup-scroll, .ingredients-popup-scroll, .thoughts-popup-scroll { max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.faq-popup-content, .cta-popup-content, .voice-popup-content, .ingredients-popup-content, .thoughts-popup-content { width: 100%; margin: 0 auto; }

body.faq-popup-lock { overflow: hidden; }

.faq-popup-parts, .cta-popup-parts { width: 100%; max-width: 500px; margin: 0 auto; }
.faq-popup-parts img, .cta-popup-parts img, .voice-popup-content img, .ingredients-popup-content img, .thoughts-popup-content img { display: block; width: 100%; height: auto; }

.float-btns { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; width: 98%; max-width: 500px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; &.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } }
.float-btns-list { display: grid; justify-content: center; align-items: center; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.float-btn-item { width: 100%; max-width: calc(500px / 3); height: auto; }
.float-btn-item img { width: 100%; height: auto; }

/* =====================================
   離脱防止ポップアップ
===================================== */
.exit-popup { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.48); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; }
.exit-popup.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.exit-popup__inner { position: relative; width: min(92vw, 620px); max-height: 90vh; transform: translateY(18px) scale(0.96); opacity: 0; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; }
.exit-popup.is-visible .exit-popup__inner { transform: translateY(0) scale(1); opacity: 1; }
.exit-popup__link { display: block; width: 100%; }
.exit-popup__image { display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.exit-popup__close { position: absolute; top: -18px; right: -18px; z-index: 2; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.96); color: #333; font-size: 38px; font-weight: 400; line-height: 1; cursor: pointer; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25); -webkit-tap-highlight-color: transparent; }
.exit-popup__close:hover { background: #fff; }
body.exit-popup-open { overflow: hidden; }

@media (max-width: 600px) {
  .exit-popup { padding: 18px; }
  .exit-popup__inner { width: min(94vw, 500px); }
  .exit-popup__close { top: -15px; right: -10px; width: 48px; height: 48px; font-size: 34px; }
}