/* common.css: Base + design tokens (theme-independent) */

/* ===== Theme-Independent Base (for WP/Elementor) =====
   Keep our blocks self-contained so the theme doesn't get overwritten and the
   theme can't easily bleed in. */

body{
  margin: 0;
  overflow-x: hidden; /* fallback */
  overflow-x: clip;
}

:root{
  --bs-content-width: 1040px;
  --bs-content-pad: 20px;
}

/* Utility: show on SP only */
.sp{
  display: none !important;
}

@media (max-width: 768px){
  .sp{
    display: inline !important;
  }
}

.bs-header,
.top-main,
.extract-main,
.site-footer,
.pe-page,
.pe-main,
.pe-footer{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400; /* default regular */
}

.bs-header :where(*, *::before, *::after),
.top-main :where(*, *::before, *::after),
.extract-main :where(*, *::before, *::after),
.site-footer :where(*, *::before, *::after),
.pe-page :where(*, *::before, *::after){
  box-sizing: border-box;
}

.bs-header :where(a),
.top-main :where(a),
.extract-main :where(a),
.site-footer :where(a),
.pe-page :where(a){
  color: inherit;
}

.bs-header :where(img),
.top-main :where(img),
.extract-main :where(img),
.site-footer :where(img),
.pe-page :where(img){
  max-width: 100%;
  display: block;
}

/* Elementorなどのコンテンツ幅に閉じ込められても、フル幅に戻す */
.bs-header,
.top-hero,
.top-dealer,
.extract-hero,
.ingredient-hero,
.ingredient-anchor,
.extract-support,
.site-footer,
.pe-main,
.pe-support,
.pe-footer{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.top-main{ overflow-x: clip; }

/* WP-Members width override */
#wpmem_login,
#wpmem_msg,
#wpmem_reg,
.wpmem_msg{
  width: 100% !important;
}

.pe-container{
  max-width: 1040px;
  margin: 0 auto;
}

/* Subtle link affordance: text links fade slightly on hover/focus.
   Keep CTA/button-style links fully opaque for readability. */
:where(
  .bs-header,
  .mheader,
  .top-main,
  .extract-main,
  .pe-main,
  .site-footer,
  .mfooter
) a[href]{
  transition: opacity 0.22s ease;
}

:where(
  .bs-header,
  .mheader,
  .top-main,
  .extract-main,
  .pe-main,
  .site-footer,
  .mfooter
) a[href]:where(:hover, :focus-visible){
  opacity: 0.82;
}

:where(
  .bs-btn,
  .bs-orange,
  .bs-sp-row.is-contact,
  .mheader__pill,
  .mfooter__btn,
  .footer-action,
  .extract-support__btn,
  .extract-link,
  .extract-doc,
  .pe-support__btn,
  .pe-file
):where(:hover, :focus-visible, :active){
  opacity: 1;
}

/* Default fixed-page content width (default template + Elementor pages) */
body.page main.site-main{
  width: min(100%, calc(var(--bs-content-width) + var(--bs-content-pad) + var(--bs-content-pad)));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bs-content-pad);
  padding-right: var(--bs-content-pad);
}

body.page main.site-main > .page-content,
body.page main.site-main > article .entry-content{
  max-width: var(--bs-content-width);
  margin-left: auto;
  margin-right: auto;
}

body.page main.site-main .elementor-section.elementor-section-boxed > .elementor-container{
  max-width: var(--bs-content-width) !important;
}

/* ===== Shared layout for ingredient-type pages ===== */
.ingredient-hero{
  width: 100%;
  max-width: none;
  margin: 0;
  background: #fff;
}
.ingredient-hero img{
  width: 100%;
  display: block;
}

.ingredient-anchor{
  background: #fff;
  padding: 50px 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
/* ensure no extra gap before next section */
.ingredient-anchor + section{
  margin-top: 0;
}
.ingredient-anchor > *{
  margin: 0;
}

/* ensure tab buttons are regular weight */
.ingredient-anchor a,
.ingredient-anchor button{
  font-weight: 400;
}

/* ===== Design Tokens (Top + Footer) ===== */
.top-main,
.site-footer{
  --page-w: 1040px;
  --page-pad: 16px;

  --navy: #232aa8;
  --pill-border: #a7a9ea;
  --pill-text: #8e92dc;

  --brown: #8b5c49;
  --line: #cfe0ee;
  --soft-card: #f3f8fe;
  --beige: #f7f4f2;

  --cta-blue: #3fa6f2;
  --cta-orange: #e8ac51;

  --info-all: #666;
  --info-news: #a7d4f6;
  --info-event: #f0c18c;
  --info-research: #a8d7c5;
}

/* iOS Safari zoom prevention on focus (font-size must be >= 16px) */
@media (max-width: 980px){
  main :where(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="month"],
    input[type="week"],
    input[type="time"],
    textarea,
    select
  ){
    font-size: 16px !important;
  }
}

/* CF7 response state colors (shared across request/order/contact/seminar) */
:where(.request-form, .order-form, .contact-form, .seminar-form)
  .wpcf7
  form.invalid
  .wpcf7-response-output,
:where(.request-form, .order-form, .contact-form, .seminar-form)
  .wpcf7
  form.unaccepted
  .wpcf7-response-output,
:where(.request-form, .order-form, .contact-form, .seminar-form)
  .wpcf7
  form.failed
  .wpcf7-response-output,
:where(.request-form, .order-form, .contact-form, .seminar-form)
  .wpcf7
  form.aborted
  .wpcf7-response-output,
:where(.request-form, .order-form, .contact-form, .seminar-form)
  .wpcf7
  form.spam
  .wpcf7-response-output{
  color: #d93025;
  border-color: #d93025;
  background: #fff5f5;
}

:where(.request-form, .order-form, .contact-form, .seminar-form)
  .wpcf7
  form.sent
  .wpcf7-response-output{
  color: #187a36;
  border-color: #7bcf93;
  background: #f1fbf4;
}