@charset "utf-8";
/* =============================================================
   style-sp.css
   読み込み条件: <link media="(max-width: 1024px)">
   構成: 共通（1024px以下）→ タブレット上書き（769px〜）→ モバイル上書き（〜768px）
   ============================================================= */

/* =============================================================
   1. 共通スタイル（1024px 以下すべて）
   ============================================================= */

/* --- 表示切替 --- */
.pc { display: none; }
.sp { display: block; }

/* --- レイアウト --- */
#main { width: 100%; }

/* --- ヒーローセクション --- */
.hero-section {
    width: 100%;
    background: url(images/hero_bg_sp@2x.webp?v=20260402) no-repeat center center;
    background-size: cover;
}
.hero-section__bg { display: none; }
.hero-section__overlay { display: none; }
.hero-section__package { display: none; }
.hero-section__content {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 8% 5% 5%;
}
.hero-section__product {
    display: block;
    text-align: center;
    padding: 0;
    margin: -8% 0;
}
.hero-section__buttons {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10% 0 8%;
    width: 100%;
    position: relative;
    z-index: 2;
}
.hero-btn {
    display: block;
    text-align: center;
}

/* --- VOICE (homebox001) --- */
section.homebox001 {
    display: flex;
    flex-wrap: wrap;
    background: url(images/mirage2_bg002.webp) no-repeat center -0%;
    background-size: 100% auto;
    justify-content: space-between;
    padding: 0 0 4%;
}
section.homebox001 > .section-heading {
    width: 55%;
}
section.homebox001 > p {
    width: 40%;
    padding: 0 5%;
}
section.homebox001 p.txt001 { text-align: left; }
section.homebox001 ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    padding: 2%;
    margin: 5%;
}
section.homebox001 ul li .voice-photo { width: 40%; }
section.homebox001 ul li .voice-meta {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2%;
}
section.homebox001 ul li .voice-body { width: 100%; }

/* --- WHY US (homebox002) --- */
section.homebox002 div.homebox002_col001 {
    /* v13.1: #fff を解除し body のクリーム色 (#fef8f1) を継承 */
    background: transparent url(images/mirage2_bg003.webp) no-repeat right 0;
    background-size: 200px auto;
    padding: 0 0 4%;
}
section.homebox002 div.homebox002_col001 p {
    width: 100%;
    padding: 0 10%;
}
.whyus-copy {
    padding: 14% 5% 5%;
    text-align: left;
}
.whyus-copy__quote { font-size: 1.5rem; }
.whyus-copy__body { font-size: 1rem; }

/* --- img012バナー --- */
.img012-banner__text {
    font-size: 3.2vw;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
}

/* --- img005バナー --- */
.img005-banner {
    flex-direction: row;
    max-height: none;
}
.img005-banner__bg {
    width: auto;
    max-height: 347px;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}
.img005-banner__text {
    text-align: center;
    padding: 3% 4%;
    flex: 1;
}
.img005-banner__moisture { font-size: 1.35rem; }
.img005-banner__main { font-size: 1.15rem; }
.img005-banner__sub { font-size: 0.95rem; }

/* --- セクション見出し --- */
.section-heading__en { font-size: 1.7rem; }
.section-heading__ja { font-size: 0.85rem; }

/* --- WHY NOW (homebox003) --- */
section.homebox003 p.pbox001 { width: 98%; margin: 0 auto; }
section.homebox003 p.pbox002 img { width: 100%; }
.pbox002-text { padding: 6% 4%; gap: 12px; }
.pbox002-text p { font-size: 0.85rem; white-space: normal; }
section.homebox003 div.homebox003_col001 p {
    width: 90%;
    margin: 0 auto;
    padding: 24% 0 15%;
}
.whynow-copy { width: 96%; padding: 4% 0 5%; }
.whynow-copy p { width: 100%; padding: 0; }  /* v8: parent width制限を上書き */
.whynow-copy__lead { font-size: 0.9rem; }
.whynow-copy__main { font-size: 1.5rem; text-align: left; }  /* v13.1: 中央寄せ解除 */
.whynow-copy__note { font-size: 0.8rem; }
section.homebox003 div.homebox003_col002 .box_l,
section.homebox011 div.homebox003_col002 .box_l { width: 50%; }
section.homebox003 div.homebox003_col002 .box_r,
section.homebox011 div.homebox003_col002 .box_r { width: 50%; padding: 0 3% 2%; }

/* --- WHY THIS (homebox004) --- */
section.homebox004 div.homebox004_col001 {
    display: flex;
    flex-wrap: wrap;
    background: #fef5f1;
}
section.homebox004 div.homebox004_col001 p { width: 100%; padding: 0 10%; }
section.homebox004 div.homebox004_col001 .section-heading { width: 100%; padding: 10% 4% 0; }
section.homebox004 p { width: 100%; }
.whythis-copy { width: 100%; padding: 1% 4%; margin: 0 auto; text-align: left; }  /* v13.1: 中央寄せ解除 */

/* 比較テーブル */
.compare-table { min-width: auto; }
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; position: relative; }
.compare-table-wrap::after { display: none; }
.compare-table th,
.compare-table td { font-size: 0.9rem; padding: 8px 6px; }
.compare-table__tag { font-size: 0.85rem; padding: 3px 10px; }
.compare-table__img-row img { max-width: 100%; }

/* ソリューションブロック */
.solution-block > .pc { display: none; }
.solution-block__sp-bg { display: block; position: relative; }
.solution-block__bg-img { width: 100%; height: auto; display: block; }
.solution-block__sp-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
}
.solution-block__sp-product {
    display: block;
    text-align: center;
    margin-top: -45%;
    position: relative;
    z-index: 1;
    margin-right: -15%;
}
.solution-block__product-img { width: 60%; max-width: 100%; height: auto; }
    .solution-block__sp-product { max-width: 100%; overflow: hidden; }
.solution-block__text { display: none; }
.solution-block__sp-text .solution-block__title { font-size: 1.7rem; }
.solution-block__sp-text .solution-block__desc { font-size: 1rem; }

/* テーブル角丸リセット */
section.homebox004 table { width: 100%; font-size: 85%; border-radius: 0; }
.radius-table { border-radius: 0; }
.radius-table tr > * { border-radius: 0; }
.radius-table tr:first-child > *:first-child { border-radius: 0; }
.radius-table tr:first-child > *:last-child { border-radius: 0; }
.radius-table tr:last-child > *:first-child { border-radius: 0; }
.radius-table tr:last-child > *:last-child { border-radius: 0; }
section.homebox004 table tr th { padding: 5px; }
section.homebox004 table tr td { padding: 5px; text-align: center; }

/* --- EXPERIENCE (homebox005) --- */
section.homebox005 p { width: 100%; }
.experience-lead{
    font-size: 0.95rem !important;
    line-height: 1.9;
    letter-spacing: 0.03em;
    width: 90% !important;
    padding: 0 !important;
    margin: 4% auto 6% !important;
}
.whyme-lead{
    font-size: 0.95rem;
    line-height: 1.9;
    letter-spacing: 0.03em;
    width: 90%;
    padding: 0 5%;
    margin: 4% auto 6%;
}
section.homebox005 ul { gap: 10px; }
section.homebox005 ul li {
    width: 100%;
    padding: 0 5% 8%;
    text-align: center;
}
section.homebox005 ul li p { width: 100%; margin: 0 auto; }
section.homebox005 ul li p img {
    max-width: 360px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- ACTIVE FORMULA (homebox006) --- */
.formula__hero-text { padding: 16px 4%; }
.formula__catch { font-size: 0.95rem; }
.formula__hero { margin-top: -40px; }
.formula__woman { width: 100%; }
.formula .section-heading { text-align: center; padding: 20px 5% 0; }
.formula__lead { padding: 16px 4% 4px; }  /* v13.7: 下余白圧縮 (10→4px) */
.formula__lead-main { font-size: 0.95rem; }
.formula__lead-body { font-size: 0.88rem; }
.formula__diagram-inner {
    position: relative;
    /* v13.7: 上下 padding 圧縮 (20px 10px 30px → 0 10px 4px) */
    padding: 0 10px 4px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.formula__product {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    max-width: none;
    /* v13.7: PNG の透明マージンと重ねてジャーを上下に近づける(視覚上 80px 削減) */
    margin: -20px auto -20px;
}
.formula__item {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 90% !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    margin-bottom: 0;
    gap: 10px;
}
.formula__item--1 {
    /* v13.7: ジャー直下のバブル位置を引き上げ */
    margin-top: -8px;
}
.formula__item--1,
.formula__item--3 { flex-direction: row; align-self: flex-start; }
.formula__item--2,
.formula__item--4 { flex-direction: row-reverse; text-align: right; align-self: flex-end; }
.formula__bubble-wrap { position: relative; flex-shrink: 0; }
.formula__bubble { width: 200px; height: 200px; }
.formula__item--4 .formula__bubble { width: 210px; height: 210px; }
.formula__item-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 160px;
}
.formula__item-desc {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    white-space: normal;
    font-size: 0.85rem;
    padding: 0;
    flex: 1;
    line-height: 1.8;
    text-align: left;  /* v13.1: バブル2/4 の text-align: right を上書き、SP は統一して左寄せ */
}
.formula__item-name { font-size: 1.05rem; }
.formula__note { font-size: 0.65rem; margin-top: 4px; }

/* --- WHY ME (homebox007) --- */
.allcards {
    flex-direction: column;
    width: 80%;
    gap: 16px;
    margin: 20px auto 30px;
}
.allcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
}
.allcard__img { width: 60%; }
.allcard__title { font-size: 1.2rem; }

/* --- STORY (homebox008) --- */
section.homebox008 { padding: 0; margin: 0; }
.story-block { margin: 0; max-width: none; }
.story-block__text {
    position: relative;
    width: 100%;
    padding: 30px 8%;
    background: #fef5f1;
}
.story-block__text p { font-size: 0.9rem; text-align: center; }
.story-block__img { width: 100%; line-height: 0; }
.story-block__img img { width: 100%; border-radius: 0; }

/* --- Q&A (homebox009) --- */
section.homebox009 dl dt {
    padding: 16px 10px 16px 54px;
    font-size: 100%;
}
section.homebox009 dl dt:before {
    left: 10px; top: 12px;
    width: 34px; height: 34px;
    font-size: 90%;
}
section.homebox009 dl dd { padding: 18px 18px 18px 54px; }
section.homebox009 dl dd:before { left: 16px; top: 14px; }

/* --- INGREDIENTS (homebox010) --- */
section.homebox010 div.box_l { width: 100%; padding: 5%; }
section.homebox010 div.box_r { width: 100%; padding: 5%; }

/* --- OFFER (homebox011) --- */
.offer-cards { flex-direction: row; gap: 20px; }
section.homebox011 .cta-info ul { flex-direction: row; gap: 12px; }

/* --- フッター --- */
#footer footer { width: 98%; }
#footer footer .footbox01 { float: none; width: 100%; }


/* =============================================================
   2. モバイル上書き（〜768px）
   ============================================================= */
@media (max-width: 768px) {

    /* ヒーロー */
    .hero-section__logo img { width: 180px; }
    .hero-section__sub { font-size: 11pt; padding: 5px 14px; margin-left: auto; margin-right: auto; align-self: center; }
    .hero-section__heading { font-size: 1.2rem; }
    .hero-section__note { font-size: 0.75rem; }
    .hero-section__product img { width: 130%; max-width: none; margin-left: -15%; }
    .hero-btn img { width: 80%; max-width: 236px; margin: 0 auto; }

    /* VOICE */
    section.homebox001 > .section-heading { width: 100%; }
    section.homebox001 > p { width: 100%; }
    section.homebox001 ul li { padding: 3%; }
    section.homebox001 ul li .voice-photo { width: 100%; }
    section.homebox001 ul li .voice-meta { width: 100%; text-align: center; }
    section.homebox001 ul li .voice-body { text-align: left; }

    /* WHY US */
    .whyus-copy { padding: 24% 5% 5%; }
    .whyus-copy__quote { font-size: 1.35rem; }
    .whyus-copy__body { font-size: 0.95rem; }

    /* img005バナー：縦積み */
    .img005-banner { flex-direction: column; max-height: none; }
    .img005-banner__bg { width: 100%; max-height: none; height: auto; }
    .img005-banner__text { text-align: center; padding: 6% 5%; }
    .img005-banner__moisture { font-size: 1.1rem; margin: 0 0 12px; }
    .img005-banner__main { font-size: 0.95rem; }
    .img005-banner__sub { font-size: 0.82rem; }

    /* セクション見出し */
    .section-heading__en { font-size: 1.4rem; }
    .section-heading__ja { font-size: 0.75rem; }

    /* WHY NOW */
    .pbox002-text p { font-size: 0.75rem; }
    .whynow-copy__lead { font-size: 0.8rem; }
    .whynow-copy__main { font-size: 1.3rem; }
    .whynow-copy__note { font-size: 0.75rem; }
    section.homebox003 div.homebox003_col002 .box_l,
    section.homebox011 div.homebox003_col002 .box_l { width: 90%; }
    section.homebox003 div.homebox003_col002 .box_r,
    section.homebox011 div.homebox003_col002 .box_r { width: 100%; padding: 0 4% 2%; }

    /* 比較テーブル：スクロール */
    .compare-table { min-width: 700px; }
    .compare-table-wrap::after {
        display: block;
        content: '← スクロール →';
        text-align: center;
        font-size: 0.7rem;
        color: #999;
        padding: 6px 0 0;
        letter-spacing: 0.1em;
    }
    .compare-table th,
    .compare-table td { font-size: 0.8rem; padding: 6px 4px; }
    .compare-table__tag { font-size: 0.8rem; }
    .compare-table__issue-row td { font-size: 0.7rem; }

    /* ソリューションブロック */
    .solution-block__sp-text .solution-block__title { font-size: 1.25rem; }
    .solution-block__sp-text .solution-block__desc { font-size: 0.85rem; }

    /* テーブル */
    section.homebox004 table { font-size: 75%; }

    /* EXPERIENCE */
    section.homebox005 ul li p img { max-width: 280px; }

    /* ACTIVE FORMULA */
    .formula__lead-main { font-size: 0.85rem; }
    .formula__lead-body { font-size: 0.8rem; }
    .formula__bubble { width: 160px; height: 160px; }
    .formula__item--4 .formula__bubble { width: 170px; height: 170px; }
    .formula__item-text { width: 130px; }
    .formula__item-desc { font-size: 0.75rem; }
    .formula__item-name { font-size: 0.95rem; }

    /* WHY ME — v13.6: SP でカードを広く + 画像を大きく */
    .allcards { width: 92%; }
    .allcard__img { width: 70%; }
    .allcard__title { font-size: 1.15rem; }

    /* STORY */
    .story-block__text { padding: 24px 5%; }
    .story-block__text p { font-size: 0.82rem; }

    /* Q&A */
    section.homebox009 dl dt { padding: 14px 8px 14px 50px; font-size: 95%; }
    section.homebox009 dl dt:before { width: 30px; height: 30px; font-size: 85%; }
    section.homebox009 dl dd { padding: 16px 16px 16px 50px; }

    /* OFFER：縦積み */
    .offer-cards { flex-direction: column; gap: 16px; }
    section.homebox011 .cta-info ul { flex-direction: column; gap: 6px; }
}

/* ============================================
   v8: SP最適化 — palt + letter-spacing 圧縮
   1行に入る文字数を増やして縦長を改善 + フォント統一
   ============================================ */
@media screen and (max-width: 1024px) {
    /* 本文系の文字間隔を業界標準の 0.02em に絞る */
    .whyme-lead,
    .whyus-copy__body,
    .whyus-copy__quote,
    .whyus-copy__promise,
    .whythis-copy p,
    .whynow-copy__lead,
    .whynow-copy__main,
    .whynow-copy__note,
    .story-block p,
    .story-block__closing,
    .partner-section__lead,
    .partner-section__note,
    .solution-block__desc,
    .solution-block__title,
    .experience-lead,
    .formula__lead-main,
    .formula__lead-body,
    .formula__catch,
    .allcard__desc,
    .voice-body,
    .voice-name,
    .compare-table th,
    .compare-table td {
        letter-spacing: 0.02em;
    }

    /* nowrap 解除して palt + 自然折返しに任せる */
    .formula__catch {
        white-space: normal;
    }

    /* SP padding 微調整: 5% → 4% で 30px ぶん幅を確保 */
    section.homebox002 div.homebox002_col001,
    section.homebox003 div.homebox003_col001,
    section.homebox004 div.homebox004_col001,
    section.homebox007,
    section.homebox008,
    .homebox012 .partner-section__inner {
        padding-left: 4%;
        padding-right: 4%;
    }
}

/* v8 footer link widow fix - apply nowrap only to short menu items (avoid long links overflowing SP width) */
@media screen and (max-width: 1024px) {
    .footbox02 ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
    }
    .footbox02 ul li {
        white-space: nowrap;
    }
    /* Long links should still wrap if needed */
    .footbox02 ul li a[href*="law.html"],
    .footbox02 ul li a[href*="privacy"] {
        white-space: normal;
    }
}

/* ==================== v8: 本文 letter-spacing 圧縮 (SP)
 * palt + letter-spacing 縮小で1行の文字数を増やす。
 * 見出しは元の値を維持。本文系のみ 0.02em に絞る。
 * ==================== */
@media (max-width: 1024px) {
  /* 本文系: 文字間隔を縮めて1行の文字数を増やす */
  .whyme-lead,
  .whyus-copy__body,
  .whyus-copy__quote,
  .whyus-copy__promise,
  .whythis-copy p,
  .whynow-copy__main,
  .whynow-copy__lead,
  .whynow-copy__note,
  .story-block p,
  .story-block__closing,
  .partner-section__lead,
  .partner-section__note,
  .partner-channel__desc,
  .solution-block__desc,
  .solution-block__title,
  .formula__lead-body,
  .formula__lead-main,
  .formula__item-desc,
  .formula__catch,
  .allcard__desc,
  .voice-body,
  .compare-table th,
  .compare-table td,
  .qa-section dt,
  .qa-section dd,
  .experience-lead,
  .hero-section__note {
    letter-spacing: 0.02em !important;
  }
  
  /* 一部の見出しは少し緩めに */
  .partner-channel__title,
  .solution-block__title {
    letter-spacing: 0.04em;
  }
}

/* ============================================
   v13.2 (SP): WHY NOW 「MIRAGE IIの特長」 リスト
   ============================================ */
@media (max-width: 1024px) {
  .whynow-features__title {
    font-size: 1.15rem;
    letter-spacing: 0.08em;
  }
  .whynow-features__title::after {
    width: 44px;
    margin: 12px auto 22px;
  }
  .whynow-features {
    max-width: 100%;
    padding: 0;
  }
  .whynow-features__item {
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 12px;
    align-items: center;
  }
  .whynow-features__num {
    font-size: 1.9rem;
    width: 42px;
    padding-right: 14px;
  }
  .whynow-features__text {
    font-size: 0.92rem;
    line-height: 1.8;
    letter-spacing: 0.02em !important;
  }
  .whynow-copy .whynow-copy__note {
    margin-top: 28px;
  }
}

/* ============================================
   v13.2 (SP): PARTNER channel カード枠を SP でも明示
   ============================================ */
@media (max-width: 1024px) {
  .partner-section--editorial .partner-channel {
    background: #FFFEFB;
    border: 1px solid rgba(176, 141, 87, 0.45);
    box-shadow: 0 4px 16px -8px rgba(26, 20, 25, 0.10);
    padding: 40px 22px 28px;
  }
}