@charset "UTF-8";
/* ==========================================================================
   英語版（/en/）だけの上書き
   日本語版と同じ ../assets/css/*.css を読んだあとに読む。日本語版には効かない。
   ========================================================================== */

/* --- 組版：見出しは行の長さをそろえ、本文は最終行に 1 語だけ残さない ------------- */
html body h1, html body h2, html body h3, html body h4,
html body .ttl, html body .page-ttl, html body .card-name,
html body .link-label, html body .btn-label, html body .voice-ttl {
  text-wrap: balance;
}
html body p, html body li, html body dd, html body dt, html body td, html body th {
  text-wrap: pretty;
}

/* --- 字間：日本語向けに広めの字間が英文にも効いて間延びするので詰める ---------------- */
/* 大文字だけの見出し（COSMETICS・HISTORY など）は広い字間の方がきれいなので触らない */
/* 本文（ゴシック）0.05em → 0.02em */
html body main :is(p, li, dd, address),
html body main .card-text, html body main .topic-text,
html body main .card-name, html body main .card-cat,
html body footer.site-footer .footer-address {
  letter-spacing: .02em !important;
}
/* 明朝の大文字小文字まじりの見出し・キャッチ（0.08〜0.16em → 0.03〜0.06em） */
html body .top-mv .mv-copy .mv-ttl .mv-ttl-jp,
html body main p.catch,
html body main p.prose-catch,
html body main p.logo-40th-en {
  letter-spacing: .06em !important;
}
html body main .top-message .message-head p.lead,
html body main p.prose-sub,
html body main p.staff-name,
html body main p.sign-name,
html body main h2.place-area {
  letter-spacing: .03em !important;
}
html body footer.site-footer .footer-copy { letter-spacing: .05em; }

/* --- ページ下部のボタンが 4 つ並ぶ所（会社情報の下層）：横 1 列だと英語が折れるので 2 個 × 2 段に */
/* 2 個並びの所（事業ページなど）は今のまま。スマホは元から縦 1 列 */
@media screen and (min-width: 769px) {
  html body .btn-wrap.is-row:has(> .btn-more:nth-child(4)) {
    display: grid;
    grid-template-columns: repeat(2, 19.375rem);
    justify-content: center;
    gap: 1rem 1.2rem;
  }
  html body .btn-wrap.is-row:has(> .btn-more:nth-child(4)) .btn-more {
    max-width: none;
    width: 100%;
  }
}

/* --- トップの化粧品カードの商品名：「(40th Anniversary Bottle)」が端ぎりぎり・1 語落ちになるので少し小さく */
/* 全カード同じ大きさにそろえる。スマホは左右に余白も取る */
@media screen and (max-width: 768px) {
  html body main .top-cosmetics .cosmetics-lineup .card-item .card-name,
  html body main .top-cosmetics .cosmetics-lineup .card-item .card-cat {
    font-size: .78rem;
    padding-inline: .375rem;
  }
}
/* 1440px〜は 6 枚横並びでカードが細い。1600px まではさらに一段小さく */
@media screen and (min-width: 1440px) {
  html body main .top-cosmetics .cosmetics-lineup .card-item .card-name,
  html body main .top-cosmetics .cosmetics-lineup .card-item .card-cat {
    font-size: .875rem;
  }
}
@media screen and (min-width: 1440px) and (max-width: 1599px) {
  html body main .top-cosmetics .cosmetics-lineup .card-item .card-name,
  html body main .top-cosmetics .cosmetics-lineup .card-item .card-cat {
    font-size: .8125rem;
  }
}

/* --- 住所：カンマで区切ったまとまりの途中で折らない（「Chuo-/ku」や郵便番号だけの行を防ぐ） */
html body .en-nw { white-space: nowrap; }

/* --- 英日併記の見出しの、日本語の側を消す ----------------------------------- */
/* 元の CSS の指定が強いので !important で消す（span.lead は見出しの和文だけ。本文の p.lead は英文なので残す） */
html body .page-ttl-jp,
html body span.lead,
html body footer.site-footer .footer-links .footer-col-ttl .jp,
html body .drawer .jp,
html body header.gnav-wrap .jp {
  display: none !important;
}

/* --- トップ（スマホ）のクイックリンク：英語は長いので文字を少し小さくして 1 行に --------- */
@media screen and (max-width: 768px) {
  html body main .top-quicklink .quicklink-list a,
  html body main .top-quicklink .quicklink-list .quicklink-toggle {
    font-size: .9rem;
    letter-spacing: 0;
    padding-inline: .375rem;
  }
}

/* --- ヘッダー：英語のメニューは長いので、横並びを出す幅を広げる ------------------ */
/* 日本語版は 1421px から横並び。英語版は 1601px から（それ未満はメニューボタンの中に出す） */
html body header.gnav-wrap .site-logo { flex-shrink: 0; }
@media screen and (min-width: 769px) and (max-width: 1600px) {
  html body header.gnav-wrap .gnav { display: none; }
  html body header.gnav-wrap .menu-toggle { margin-left: 0; }
  html body .drawer-gnav { display: block; }
}
/* 「Hifu Day」だけ小文字まじりなので、ほかの項目にそろえて大文字に */
html body header.gnav-wrap .gnav .gnav-list > li > a,
html body .drawer-gnav ul > li > a { text-transform: uppercase; }
html body header.gnav-wrap .gnav .gnav-list .gnav-sub a,
html body .drawer-gnav .gnav-sub a { text-transform: none; }
/* 日本語版への切り替え「JP」は、区切り線で分けて言語の切り替えと分かるように */
/* 横並びのメニュー（1601px〜）と、PC のメニューボタンの中（769〜1600px）だけ。スマホのメニューの中は縦に中央寄せなので付けない */
@media screen and (min-width: 1601px) {
  html body header.gnav-wrap .gnav .gnav-list > li:last-child {
    padding-left: 1.875rem;
    border-left: 1px solid #d9d9d9;
  }
}
@media screen and (min-width: 769px) and (max-width: 1600px) {
  html body .drawer-gnav ul > li:last-child {
    padding-left: 1.875rem;
    border-left: 1px solid #d9d9d9;
  }
}

/* --- フッター下段：住所は 2 行、リンクは右寄せで折り返す ------------------------- */
@media screen and (min-width: 769px) {
  html body footer.site-footer .footer-brand { flex-shrink: 0; }
  html body footer.site-footer .footer-brand .footer-address { white-space: nowrap; }
  html body footer.site-footer .footer-tail { flex: 1; min-width: 0; }
  html body footer.site-footer .footer-policy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
  }
  html body footer.site-footer .footer-policy li,
  html body footer.site-footer .footer-policy li:nth-child(2) { text-align: right; }
  html body footer.site-footer .footer-copy { text-align: right; }
}
/* スマホ：SNS は 1 列に（「Instagram (EBM ONLINE STUDIO)」が途中で折れないように）。
   下段の長いリンク（Specified Commercial Transactions Act Notice (Japanese)）は画面の端まで届くので折り返す */
@media screen and (max-width: 768px) {
  html body footer.site-footer .footer-utility .footer-sns { grid-template-columns: 1fr; }
  html body footer.site-footer .footer-policy { padding-inline: 1.875rem; }
  html body footer.site-footer .footer-policy a { white-space: normal; text-align: center; text-wrap: balance; }
}

/* --- 2 行になった見出しを中央にそろえる（日本語版は 1 行で中央に見えていた） ---------- */
html body main .top-skincare .voice-ttl { text-align: center; }
@media screen and (max-width: 768px) {
  html body .top-mv .mv-copy .mv-ttl .mv-ttl-jp { text-align: center; }
}

/* --- 会社概要の表：項目名の欄を広げる（「Representative Director」が 2 行に折れないように） */
@media screen and (min-width: 769px) {
  html body .def-list .def-row { grid-template-columns: 13rem 1fr; }
}