@charset 'utf-8';

body {
    font-size: 1.8rem;
}
.globalHeader {
    font-size: 18px;
}
.top_serum__head2 {
    font-size: 32px;
}
.button,
.inquiry .form_button {
    max-width: 280px;
    font-size: 1.8rem;
}
footer {
    font-size: 16px;
}

@media screen and (max-width: 768px) {
    .top_serum__head2 {
        font-size: 24px;
    }
}

/* ===================================================================
   下層ページ 文字サイズ拡大（TOPページと同基準：本文 18px）
=================================================================== */

/* パンくず
------------------------------------------------- */
.bread {
    font-size: 1.4rem;
}

/* ボタン（矢印付き／下層ページのアンカーリンク等）
------------------------------------------------- */
.button.arrow,
.inquiry .arrow.form_button {
    font-size: 1.8rem;
}

/* 見出し
------------------------------------------------- */
h4 {
    font-size: 2rem;
}
h5 {
    font-size: clamp(18px, 17.4px + 0.16vw, 20px);
}
h1:not(.header_logo) span {
    font-size: 1.8rem;
}
h2 span {
    font-size: 1.6rem;
}

/* テキストユーティリティ
------------------------------------------------- */
.lead {
    font-size: 2.2rem;
}
.text-xxlarge {
    font-size: 2.6rem;
}
.text-xlarge {
    font-size: 2.2rem;
}
.text-large {
    font-size: 2rem;
}
.text-small {
    font-size: 1.4rem;
}
.text-xsmall {
    font-size: 1.2rem;
}

/* お問い合わせフォーム
------------------------------------------------- */
.inquiry input[type="text"],
.inquiry input[type="url"],
.inquiry input[type="email"],
.inquiry input[type="tel"],
.inquiry input[type="date"],
.inquiry input[type="number"],
.inquiry select,
.inquiry textarea {
    font-size: 1.8rem;
}
.inquiry .table-default th .required {
    font-size: 1.4rem;
}

/* 新着情報（一覧・詳細・サイドバー・検索結果）
------------------------------------------------- */
.article_detail {
    font-size: 1.8rem;
}
.article_list .post_header .category_badge,
.article_detail .post_header .category_badge,
.news dl .badge_category {
    font-size: 1.6rem;
}
.widget_wrap .widget_header {
    font-size: 1.8rem;
}

/* サイトマップ
------------------------------------------------- */
.p-sitemap ul.children li a {
    font-size: 1.8rem;
}

/* PRODUCTSページ 商品紹介ブロック
   ブロックエディター内のインライン rem 指定を上書き。
   ルートが font-size:62.5%（1rem = 10px）のため、
   16px 基準で書かれた rem 指定が小さく表示されるのを補正する。
------------------------------------------------- */
.column_main [style*="font-size: 1.125rem"] {
    font-size: 1.6rem !important;
}
.column_main [style*="font-size: 1.5rem"] {
    font-size: 1.8rem !important;
}
.column_main [style*="font-size: 1.9rem"] {
    font-size: 2.2rem !important;
}
.column_main [style*="clamp(1.125rem, 2.5vw, 1.25rem)"] {
    font-size: clamp(15px, 1.8vw, 16px) !important;
}
.column_main [style*="clamp(1.1875rem, 2.5vw, 1.375rem)"] {
    font-size: clamp(16px, 1.9vw, 17px) !important;
}
.column_main [style*="clamp(1.25rem, 2.8vw, 1.5rem)"] {
    font-size: clamp(17px, 2vw, 18px) !important;
}
.column_main [style*="clamp(1.25rem, 2.8vw, 1.7rem)"] {
    font-size: clamp(18px, 2.2vw, 20px) !important;
}
.column_main [style*="clamp(1.375rem, 3vw, 1.6rem)"] {
    font-size: clamp(18px, 2.1vw, 19px) !important;
}
.column_main [style*="clamp(1.375rem, 3vw, 1.8rem)"] {
    font-size: clamp(18px, 2.2vw, 20px) !important;
}
.column_main [style*="clamp(1.375rem, 3.2vw, 1.65rem)"] {
    font-size: clamp(18px, 2.2vw, 20px) !important;
}
.column_main [style*="clamp(1.4rem, 3.5vw, 1.7rem)"] {
    font-size: clamp(19px, 2.4vw, 22px) !important;
}
.column_main [style*="clamp(1.5rem, 3.5vw, 1.8rem)"] {
    font-size: clamp(19px, 2.4vw, 22px) !important;
}
.column_main [style*="clamp(1.875rem, 4.5vw, 2.25rem)"] {
    font-size: clamp(24px, 3.1vw, 28px) !important;
}
.column_main [style*="clamp(2.25rem, 5.5vw, 3rem)"] {
    font-size: clamp(28px, 3.8vw, 34px) !important;
}

/* SP
------------------------------------------------- */
@media screen and (max-width: 767px) {
    h4 {
        font-size: 1.8rem;
    }
    h1:not(.header_logo) span {
        font-size: 1.6rem;
    }
    .lead {
        font-size: 3rem;
    }
    .text-xxlarge {
        font-size: 3.8rem;
    }
    .text-xlarge {
        font-size: 3rem;
    }
    .text-large {
        font-size: 2.2rem;
    }
    .widget_wrap .widget_header {
        font-size: 1.6rem;
    }
    .article_list h2,
    .article_detail h2 {
        font-size: 2.2rem;
    }
}

/* ===================================================================
   PRODUCTS 商品紹介ブロック リキッドレイアウト対応
   カード型ボックスをコンテナ化し、文字サイズをビューポート幅ではなく
   「カード自身の幅」に追従させる（狭いカラムでの段落ち防止）
=================================================================== */

/* 3カラムカード（成分の特長） */
.column_main div[style*="display: flex; gap: 16px; flex-wrap: wrap"] {
    gap: 12px !important;
}
.column_main div[style*="min-width: 240px"][style*="border-radius: 10px"] {
    container-type: inline-size;
    padding: 16px !important;
}
.column_main div[style*="min-width: 240px"][style*="border-radius: 10px"] strong {
    font-size: clamp(17px, 8.3cqi, 20px) !important;
}
.column_main div[style*="min-width: 240px"][style*="border-radius: 10px"] p {
    font-size: clamp(16px, 7.9cqi, 17px) !important;
}

/* 2カラムカード（STEP 01 / STEP 02） */
.column_main div[style*="min-width: 260px"] {
    container-type: inline-size;
    padding: 18px !important;
}
.column_main div[style*="min-width: 260px"] strong {
    font-size: clamp(16px, 6.8cqi, 19px) !important;
}

/* 枠囲みブロック：余白を画面幅に追従させ、狭い幅でも本文幅を確保
   （padding が 1.5em 固定だと文字拡大に連動して内側が狭くなり、
     ボタンラベル等が折り返してしまうため） */
.box_border {
    padding: min(1.5em, 4vw);
}

/* 見出し・カード見出しの折り返しを均等化（1〜2文字の泣き別れ防止）
   ※下層ページのみ。TOPページには適用されない */
.column_main h1,
.column_main h2,
.column_main h3,
.column_main h4,
.column_main div[style*="min-width: 240px"] strong,
.column_main div[style*="min-width: 260px"] strong,
.column_main .button {
    text-wrap: balance;
}

/* 本文の最終行が極端に短くなるのを抑制 */
.column_main p,
.column_main li,
.column_main dd,
.column_main td {
    text-wrap: pretty;
}

/* PRODUCTS ブロック：画面が狭いほど左右余白を圧縮して本文幅を確保
   （PCの見え方は据え置き。SPでは1行あたりの文字数が増え、
     段落ち・泣き別れが起こりにくくなる） */
.column_main div[style*="max-width: 900px"] {
    padding-inline: min(20px, 2.7vw) !important;
}
.column_main [style*="padding: clamp(24px, 5vw, 45px)"] {
    padding-inline: min(clamp(24px, 5vw, 45px), 4vw) !important;
}

/* ===================================================================
   HOME BRAND STORY 見出し
   固定ページ「HOME」本文のインライン pt 指定（14pt / 12pt / 12pt）を
   承認時のサイズ（24pt / 18pt / 16pt）に上書きする。
   ※本文を編集するとインライン指定が失われるため、CSS 側で保持する
=================================================================== */
body.home .txt_box .contents h3:nth-of-type(1) span {
    font-size: 24pt !important;
}
body.home .txt_box .contents h3:nth-of-type(2) span:nth-of-type(1) {
    font-size: 18pt !important;
}
body.home .txt_box .contents h3:nth-of-type(2) span:nth-of-type(2) {
    font-size: 16pt !important;
}

/* ===================================================================
   SP：TOPページ セラム紹介文（.top_serum__txt）
   ・文字サイズを最大18pxに拡大（画面幅に追従、下限15px）
   ・1行目のみ「朝と夜、それぞれの肌に／寄り添う2つの美容液。」で改行させる
     → 幅を最大380pxに制限して1行目を必ず2行にし、text-wrap:balance で
       均等に割る。他の6行は全SP幅で1行のまま。
   ※ style02.css の 15px 固定指定を上書き（同じ 768px ブレークポイント）
=================================================================== */
@media screen and (max-width: 768px) {
    .top_serum__txt {
        width: min(calc(100% + 32px), 380px);
        margin-inline: calc((100% - min(100% + 32px, 380px)) / 2);
        font-size: clamp(15px, calc((100vw - 8px) / 20.1), 18px);
        text-wrap: balance;
    }
}

/* ===================================================================
   TOP：MV直下（セラムエリア）背景の上端にある黒い影を除去【PCのみ】
   PC用背景画像 index_serum_bg.webp の上端 約100px に、MVのボトルの
   映り込みが残っているため、背景画像を下端基準で 4% 拡大して
   上端を枠外に出す（.top_serum の overflow:hidden で切り落とされる）。
   ※SP用背景画像には影がないため対象外。MV画像（青いエリア）は変更しない
=================================================================== */
@media screen and (min-width: 769px) {
    .top_serum__bg img {
        transform: scale(1.04);
        transform-origin: center bottom;
    }
}