@layer reset, base, layout, components, pages, utilities;
/* 全ページ共通CSS。@layer の宣言と @import のみを書く */
/* 自動生成ファイル。手編集禁止。tokens.json を編集して `npm run tokens` を実行する */
:root {
  /* color */
  --wp--preset--color--primary: #22bd61;
  --wp--preset--color--accent: #83ce1a;
  --wp--preset--color--pink: #ff8385;
  --wp--preset--color--text: #252525;
  --wp--preset--color--text-muted: #666666;
  --wp--preset--color--background: #ffffff;
  --wp--preset--color--background-soft: #f1f9ef;
  --wp--preset--color--background-green-pale: #eefdf4;
  --wp--preset--color--background-pink-pale: #fff5f4;
  --wp--preset--color--background-beige: #f0eeeb;
  --wp--preset--color--border: #e0e0e0;
  --wp--preset--color--border-light: #dbdbdb;
  --wp--preset--color--border-dark: #acacac;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--overlay: rgba(0, 0, 0, 0.1);
  --wp--preset--color--dark: #14181a;
  --wp--preset--color--placeholder: #c5c5c5;
  --wp--preset--color--table-head: #e7f6ed;
  --wp--preset--color--chart-light: #c6ed19;
  --wp--preset--color--black: #060606;
  /* gradient */
  --wp--preset--gradient--primary: linear-gradient(90deg, #85ce18 0%, #22bd61 100%);
  --wp--preset--gradient--vertical: linear-gradient(0deg, #22bd61 0%, #93e815 100%);
  --wp--preset--gradient--fv: linear-gradient(180deg, #ffffff 0%, #f1f9ef 100%);
  /* shadow */
  --wp--preset--shadow--card: 0 4px 4px rgba(78, 166, 52, 0.25);
  --wp--preset--shadow--text: 0 4px 4px rgba(0, 0, 0, 0.25);
  --wp--preset--shadow--heading: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
  /* font-family */
  --wp--preset--font-family--base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --wp--preset--font-family--heading: Outfit, "Noto Sans JP", sans-serif;
  /* font-size */
  --wp--preset--font-size--xs: 0.6875rem;
  --wp--preset--font-size--small: 0.8125rem;
  --wp--preset--font-size--body: clamp(0.9375rem, 0.9125rem + 0.1vw, 1rem);
  --wp--preset--font-size--medium: clamp(0.9375rem, 0.8625rem + 0.3vw, 1.125rem);
  --wp--preset--font-size--large: clamp(1.25rem, 1.125rem + 0.5vw, 1.5625rem);
  --wp--preset--font-size--x-large: clamp(1.5625rem, 1.1875rem + 1.5vw, 2.5rem);
  --wp--preset--font-size--hero: clamp(1.875rem, 1.5rem + 1.5vw, 2.8125rem);
  --wp--preset--font-size--h2: clamp(2.1875rem, 1.3125rem + 3.5vw, 4.375rem);
  --wp--preset--font-size--h2-small: clamp(2.1875rem, 1.5625rem + 2.5vw, 3.75rem);
  --wp--preset--font-size--h2-sub: clamp(0.9375rem, 0.8625rem + 0.3vw, 1.125rem);
  --wp--preset--font-size--h1: clamp(1.5625rem, 0.6875rem + 3.5vw, 3.75rem);
  --wp--preset--font-size--h1-sub: clamp(1.25rem, 1.125rem + 0.5vw, 1.5625rem);
  --wp--preset--font-size--nav: 0.9375rem;
  --wp--preset--font-size--menu: 1.25rem;
  --wp--preset--font-size--label: 1rem;
  --wp--preset--font-size--button: clamp(0.9375rem, 0.9125rem + 0.1vw, 1rem);
  --wp--preset--font-size--button-large: clamp(0.9375rem, 0.8125rem + 0.5vw, 1.25rem);
  --wp--preset--font-size--card-sub: 1.25rem;
  --wp--preset--font-size--card-title: 1.5625rem;
  --wp--preset--font-size--cta-title: clamp(1.25rem, 1.2rem + 0.2vw, 1.375rem);
  --wp--preset--font-size--cta-text: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --wp--preset--font-size--store-lead: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  --wp--preset--font-size--pagination: 1.125rem;
  --wp--preset--font-size--h1-ghost: clamp(1.875rem, 0.375rem + 6vw, 5.625rem);
  --wp--preset--font-size--lead: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  --wp--preset--font-size--lead-small: clamp(1.125rem, 0.95rem + 0.7vw, 1.5625rem);
  --wp--preset--font-size--title: clamp(1.125rem, 1.025rem + 0.4vw, 1.375rem);
  --wp--preset--font-size--stat: clamp(1.875rem, 1.5rem + 1.5vw, 2.8125rem);
  --wp--preset--font-size--x-small: 0.75rem;
  --wp--preset--font-size--form: 0.9375rem;
  --wp--preset--font-size--article-title: clamp(1.25rem, 1.2rem + 0.2vw, 1.375rem);
  --wp--preset--font-size--message-lead: clamp(1.375rem, 1.225rem + 0.6vw, 1.75rem);
  --wp--preset--font-size--feature-title: clamp(1.25rem, 1.125rem + 0.5vw, 1.5625rem);
  --wp--preset--font-size--section-lead: clamp(1.5625rem, 1.4375rem + 0.5vw, 1.875rem);
  --wp--preset--font-size--page-404: clamp(1.5625rem, 1.3125rem + 1vw, 2.1875rem);
  --wp--preset--font-size--entry: 0.9375rem;
  --wp--preset--font-size--entry-small: 0.875rem;
  /* line-height */
  --wp--preset--line-height--tight: 1.3;
  --wp--preset--line-height--normal: 1.5;
  --wp--preset--line-height--heading: 1.7;
  --wp--preset--line-height--body: 1.9;
  --wp--preset--line-height--loose: 2.2;
  --wp--preset--line-height--x-loose: 2.5;
  --wp--preset--line-height--lead: 1.6;
  --wp--preset--line-height--lead-pc: 1.625;
  --wp--preset--line-height--entry: 1.87;
  /* letter-spacing */
  --wp--preset--letter-spacing--normal: 0;
  --wp--preset--letter-spacing--narrow: 0.03em;
  --wp--preset--letter-spacing--wide: 0.05em;
  --wp--preset--letter-spacing--x-wide: 0.1em;
  /* spacing */
  --wp--preset--spacing--5: 0.3125rem;
  --wp--preset--spacing--10: 0.625rem;
  --wp--preset--spacing--15: 0.9375rem;
  --wp--preset--spacing--20: 1.25rem;
  --wp--preset--spacing--25: 1.5625rem;
  --wp--preset--spacing--30: 1.875rem;
  --wp--preset--spacing--35: 2.1875rem;
  --wp--preset--spacing--40: 2.5rem;
  --wp--preset--spacing--45: 2.8125rem;
  --wp--preset--spacing--50: 3.125rem;
  --wp--preset--spacing--55: 3.4375rem;
  --wp--preset--spacing--60: 3.75rem;
  --wp--preset--spacing--70: 4.375rem;
  --wp--preset--spacing--75: 4.6875rem;
  --wp--preset--spacing--80: 5rem;
  --wp--preset--spacing--90: 5.625rem;
  --wp--preset--spacing--100: 6.25rem;
  --wp--preset--spacing--120: 7.5rem;
  --wp--preset--spacing--140: 8.75rem;
  --wp--preset--spacing--150: 9.375rem;
  --wp--preset--spacing--160: 10rem;
  --wp--preset--spacing--200: 12.5rem;
  --wp--preset--spacing--section: clamp(5rem, 4rem + 4vw, 7.5rem);
  --wp--preset--spacing--heading: clamp(0.9375rem, 0.5625rem + 1.5vw, 1.875rem);
  /* layout */
  --wp--preset--layout--container-max: 77.5rem;
  --wp--preset--layout--container-gutter: clamp(0.9375rem, -0.6875rem + 6.5vw, 5rem);
  --wp--preset--layout--content-max: 62.5rem;
  --wp--preset--layout--header-height: clamp(3.75rem, 3.25rem + 2vw, 5rem);
  --wp--preset--layout--header-gutter: 1.25rem;
  --wp--preset--layout--card-max: 68.75rem;
  --wp--preset--layout--hero-image-max: 82.5rem;
  --wp--preset--layout--canvas-max: 87.5rem;
  --wp--preset--layout--card-narrow: 58.875rem;
  /* radius */
  --wp--preset--radius--small: 0.3125rem;
  --wp--preset--radius--medium: 0.625rem;
  --wp--preset--radius--large: 1.25rem;
  --wp--preset--radius--x-large: 1.875rem;
  --wp--preset--radius--blob: clamp(6.25rem, 5rem + 5vw, 9.375rem);
  --wp--preset--radius--blob-small: clamp(3.125rem, 2.375rem + 3vw, 5rem);
  --wp--preset--radius--blob-icon: clamp(0.9375rem, 0.8125rem + 0.5vw, 1.25rem);
  --wp--preset--radius--pill: 9999px;
  --wp--preset--radius--card: 2.5rem;
}
/*
 * 幅 359px 以下（iPhone SE 1 世代・5s などの 320px）向け。Figma は SP 400px 基準なので、
 * 折り返せない大きい文字（FV のコピー、H2 の英語、インタビューの名前）だけ縮めてはみ出しを防ぐ（2026-10-30）。
 * tokens.css と同じく層の外（@layer なし）に置き、トークンの値を上書きする。
 */
@media (max-width: 359px) {
  :root {
    --wp--preset--font-size--hero: 1.625rem; /* 30 → 26px */
    --wp--preset--font-size--h2: 1.875rem; /* 35 → 30px */
    --wp--preset--font-size--h2-small: 1.875rem;
    --wp--preset--font-size--card-title: 1.375rem; /* 25 → 22px（STAFF INTERVIEW 01） */
    --wp--preset--font-size--h1-ghost: 1.5rem;
    --wp--preset--spacing--15: 0.625rem; /* ヘッダーのボタンの間隔 15 → 10px */
  }
}
/* 359px 以下でトークンを上書き（層の外） */
@layer reset{

/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model and set borders */
/* ============================================ */

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

/* Document */
/* ============================================ */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */

/**
 * Prevent vertical alignment issues.
 */

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */

/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Correct cursors for clickable elements.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */

option {
  padding: 0;
}

/**
 * Reset to invisible
 */

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */

[type="search"] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type="number"] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */

label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */

[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */

/**
1. Correct table border color inheritance in all Chrome and Safari.
*/

table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}
}
@layer base{
/* 日本語組版の基本。html には継承されて困らないものだけを書く */
html {
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-family: var(--wp--preset--font-family--base);
  font-size: 100%; /* 1rem = 16px。10px や vw にしない */
  font-feature-settings: "kern";
  font-kerning: normal;
  line-height: 1.9;
  line-height: var(--wp--preset--line-height--body);
  color: #252525;
  color: var(--wp--preset--color--text);
  word-break: normal;
  word-wrap: anywhere;
  line-break: strict;
  text-spacing-trim: space-first;
  /* stylelint-disable-next-line property-no-vendor-prefix -- iOS Safari は接頭辞付きのみ対応 */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

body {
  font-size: clamp(0.9375rem, 0.9125rem + 0.1vw, 1rem);
  font-size: var(--wp--preset--font-size--body);
  background-color: #ffffff;
  background-color: var(--wp--preset--color--background);
}

h1,
h2,
h3,
h4 {
  line-height: 1.7;
  line-height: var(--wp--preset--line-height--heading);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
  word-break: auto-phrase;
}
}
@layer base{

html {
  scroll-behavior: smooth;
  scroll-padding-top: clamp(3.75rem, 3.25rem + 2vw, 5rem);
  scroll-padding-top: var(--wp--preset--layout--header-height);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

body {
  overflow-x: clip; /* hidden は sticky を壊すため使わない */
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid #22bd61;
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* SP メニューを開いている間は背面をスクロールさせない（nav.js が付ける） */
html.is-menu-open {
  overflow: hidden; /* clip が無い iOS 15 以前の予備（メニューを開いている間だけなので sticky は関係ない） */
  overflow: clip;
}
}
@layer layout{

.l-container {
  width: min(
    100% - clamp(0.9375rem, -0.6875rem + 6.5vw, 5rem) * 2,
    77.5rem
  );
  width: min(
    100% - var(--wp--preset--layout--container-gutter) * 2,
    var(--wp--preset--layout--container-max)
  );
  margin-left: auto;
  margin-right: auto;
  container-type: inline-size; /* 部品の @container はこの幅を基準にする */
}

/* 本文幅（Figma の 1000px カラム） */
.l-container--narrow {
  max-width: 62.5rem;
  max-width: var(--wp--preset--layout--content-max);
}

.l-section {
  padding-top: clamp(5rem, 4rem + 4vw, 7.5rem);
  padding-bottom: clamp(5rem, 4rem + 4vw, 7.5rem);
  padding-top: var(--wp--preset--spacing--section);
  padding-bottom: var(--wp--preset--spacing--section);
}

.l-section--soft {
  background-color: #f1f9ef;
  background-color: var(--wp--preset--color--background-soft);
}
}
@layer layout{
/*
 * Figma: Header（PC 1400×80 / SP 400×60）。body 直下に置く（sticky を効かせるため）。
 * 横並びナビは 1320px 以上（--header-pc。ヘッダー専用。収まらなくなる幅で切り替える）。それ未満はハンバーガー + メニュー（Figma: MENU）
 */
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: clamp(3.75rem, 3.25rem + 2vw, 5rem);
  height: var(--wp--preset--layout--header-height);
  background-color: #ffffff;
  background-color: var(--wp--preset--color--background);
}

.l-header__inner {
  display: flex;
  gap: 0.9375rem;
  gap: var(--wp--preset--spacing--15);
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-left: var(--wp--preset--layout--header-gutter);
  padding-right: var(--wp--preset--layout--header-gutter);
}

/* ロゴ。h1 でも p でも同じ見た目になるようタグではなくクラスに当てる。SP 188×40 / PC 235×50 */
.l-header__logo {
  flex: 0 1 188px; /* 狭い画面（375px など）ではロゴのほうを縮め、丸ボタンは潰さない */
  min-width: 0;
  width: 188px;
  margin: 0;
  font-size: inherit;
  line-height: 0;
}

  .l-header__logo a {
    display: block;
  }

  .l-header__logo img {
    width: 100%;
    height: auto;
  }

/* SP: 丸いアイコンボタン 2 つ + 開閉ボタン */
.l-header__sp-buttons {
  display: flex;
  flex-shrink: 0; /* 縮むのはロゴだけ。これが無いと 320px でボタン側が縮めず右にはみ出す（2026-10-30） */
  gap: 0.9375rem;
  gap: var(--wp--preset--spacing--15);
  align-items: center;
}

.l-header__icon-button {
  display: grid;
  flex-shrink: 0;
  align-items: center;
  justify-items: center;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #ffffff;
  color: var(--wp--preset--color--white);
  background-color: #22bd61;
  background-color: var(--wp--preset--color--primary);
  border-radius: 9999px;
  border-radius: var(--wp--preset--radius--pill);
}

  .l-header__icon-button svg {
    display: block;
  }

.l-header__icon-button--contact {
  background-color: #ff8385;
  background-color: var(--wp--preset--color--pink);
}

.l-header__toggle {
  display: grid;
  flex-shrink: 0;
  align-items: center;
  justify-items: center;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #252525;
  color: var(--wp--preset--color--text);
}

  .l-header__toggle svg {
    display: block;
    width: 30px;
    height: auto;
  }

  .l-header__toggle[aria-expanded="true"] .l-header__toggle-open,.l-header__toggle[aria-expanded="false"] .l-header__toggle-close {
    display: none;
  }

/* SP のメニュー（Figma: MENU）。ヘッダー直下に白いパネルで出る */
.l-header__nav {
  position: absolute;
  top: 100%;
  right: 0;
  bottom: auto;
  left: 0;
  display: none;
  height: calc(100vh - clamp(3.75rem, 3.25rem + 2vw, 5rem));
  height: calc(100vh - var(--wp--preset--layout--header-height)); /* dvh が無い iOS 15.3 以前の予備 */
  height: calc(100dvh - clamp(3.75rem, 3.25rem + 2vw, 5rem));
  height: calc(100dvh - var(--wp--preset--layout--header-height));
  padding: 2.8125rem 0.9375rem
    3.75rem;
  padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--15)
    var(--wp--preset--spacing--60);
  overflow-y: auto;
  background-color: #ffffff;
  background-color: var(--wp--preset--color--background);
}

  .l-header__nav.is-open {
    display: block;
  }

/* メニューが開くときは上から下りてくる（0.3s）。閉じるときはすぐ消す */
@keyframes l-header-nav-open {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .l-header__nav.is-open {
    animation: l-header-nav-open 0.3s ease-out;
  }
}

.l-header__menu {
  display: flex;
  flex-direction: column;
}

  .l-header__menu li {
    border-bottom: 1px solid #e0e0e0;
    border-bottom: 1px solid var(--wp--preset--color--border);
  }

  .l-header__menu a {
    display: flex;
    gap: 0.625rem;
    gap: var(--wp--preset--spacing--10);
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5625rem;
    padding-bottom: 1.5625rem;
    padding-top: var(--wp--preset--spacing--25);
    padding-bottom: var(--wp--preset--spacing--25);
    font-size: 1.25rem;
    font-size: var(--wp--preset--font-size--menu);
    font-weight: 500;
    line-height: 1.5;
    line-height: var(--wp--preset--line-height--normal);
    letter-spacing: 0.05em;
    letter-spacing: var(--wp--preset--letter-spacing--wide);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

  /* 丸矢印（Figma: Frame 1342 25×25） */
  .l-header__menu a::after {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    content: "";
    background: #22bd61 url("../images/common/circle-arrow-white.svg")
      center / 100% no-repeat;
    background: var(--wp--preset--color--primary) url("../images/common/circle-arrow-white.svg")
      center / 100% no-repeat;
    border-radius: 9999px;
    border-radius: var(--wp--preset--radius--pill);
  }

  .l-header__menu li:first-child a {
    padding-top: 0;
  }

.l-header__menu-extra {
  display: block;
}

.l-header__store-label {
  padding-top: 1.5625rem;
  padding-top: var(--wp--preset--spacing--25);
  margin: 0;
  font-size: 1.25rem;
  font-size: var(--wp--preset--font-size--menu);
  font-weight: 500;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
}

.l-header__store {
  display: flex;
  gap: 2.5rem;
  gap: var(--wp--preset--spacing--40);
  justify-content: flex-end;
  padding-top: 1.875rem;
  padding-bottom: 1.5625rem;
  padding-top: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--25);
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

  .l-header__store a {
    display: inline-flex;
    gap: 0.625rem;
    gap: var(--wp--preset--spacing--10);
    align-items: center;
    font-size: 1.25rem;
    font-size: var(--wp--preset--font-size--menu);
    font-weight: 500;
    line-height: 1.5;
    line-height: var(--wp--preset--line-height--normal);
    color: #22bd61;
    color: var(--wp--preset--color--primary);
    letter-spacing: 0.05em;
    letter-spacing: var(--wp--preset--letter-spacing--wide);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

.l-header__menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  gap: var(--wp--preset--spacing--20);
  padding: 1.875rem 0.625rem 0;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10) 0;
}

.l-header__privacy {
  margin: 2.5rem 0 0;
  margin: var(--wp--preset--spacing--40) 0 0;
  font-size: 0.8125rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  text-align: right;
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
}

  .l-header__privacy a {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

/* PC だけのボタン（農場視察・お問い合わせ） */
.l-header__buttons {
  display: none;
}

@media (hover: hover) {
  .l-header__menu a:hover,
  .l-header__privacy a:hover {
    color: #22bd61;
    color: var(--wp--preset--color--primary);
  }

  .l-header__icon-button:hover {
    opacity: 0.8;
  }
}

@media (min-width: 1320px) {
  .l-header__logo {
    width: 235px;
  }

  .l-header__sp-buttons {
    display: none;
  }

  .l-header__nav {
    position: static;
    display: flex;
    gap: 1.875rem;
    gap: var(--wp--preset--spacing--30);
    align-items: center;
    height: auto;
    padding: 0;
    overflow: visible;
  }

  .l-header__menu {
    flex-direction: row;
    gap: 1.875rem;
    gap: var(--wp--preset--spacing--30);
  }

    .l-header__menu li {
      border: 0;
    }

    .l-header__menu a {
      padding: 0;
      font-size: 0.9375rem;
      font-size: var(--wp--preset--font-size--nav);
      line-height: 2.2;
      line-height: var(--wp--preset--line-height--loose);
      letter-spacing: 0.03em;
      letter-spacing: var(--wp--preset--letter-spacing--narrow);
      white-space: nowrap; /* 収まらない幅で文字が折れないように（切り替え幅の根拠が崩れない） */
    }

    .l-header__menu a::after {
      display: none;
    }

    .l-header__menu a[aria-current="page"] {
      color: #22bd61;
      color: var(--wp--preset--color--primary);
    }

  .l-header__menu-extra {
    display: none;
  }

  .l-header__buttons {
    display: flex;
    gap: 1.25rem;
    gap: var(--wp--preset--spacing--20);
    align-items: center;
  }
}
}
@layer layout{
/* Figma: Footer（PC 1400×323 / SP 400×230） */
.l-footer {
  padding-top: 1.875rem;
  padding-bottom: 0.9375rem;
  padding-top: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--15);
  background-color: #ffffff;
  background-color: var(--wp--preset--color--background);
}

.l-footer__top {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  gap: var(--wp--preset--spacing--30);
}

.l-footer__info {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  gap: var(--wp--preset--spacing--30);
}

/* ロゴ。SP 188×40 / PC 235×50 */
.l-footer__logo {
  width: 188px;
  margin: 0;
  line-height: 0;
}

  .l-footer__logo a {
    display: block;
  }

.l-footer__address {
  margin: 0;
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--nav);
  line-height: 1.9;
  line-height: var(--wp--preset--line-height--body);
}

  .l-footer__address a {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

/* 右側（PC だけ）: ナビ・ボタン・オンラインストア */
.l-footer__sub {
  display: none;
}

.l-footer__menu {
  display: flex;
  gap: 2.8125rem;
  gap: var(--wp--preset--spacing--45);
  justify-content: flex-end;
}

  .l-footer__menu a {
    display: inline-flex;
    gap: 0.625rem;
    gap: var(--wp--preset--spacing--10);
    align-items: center;
    font-size: 0.8125rem;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    line-height: 2.2;
    line-height: var(--wp--preset--line-height--loose);
    letter-spacing: 0.05em;
    letter-spacing: var(--wp--preset--letter-spacing--wide);
    -webkit-text-decoration: none;
    text-decoration: none;
  }

  .l-footer__menu a::after {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    content: "";
    background: #22bd61 url("../images/common/circle-arrow-white.svg")
      center / 100% no-repeat;
    background: var(--wp--preset--color--primary) url("../images/common/circle-arrow-white.svg")
      center / 100% no-repeat;
    border-radius: 9999px;
    border-radius: var(--wp--preset--radius--pill);
  }

.l-footer__buttons {
  display: flex;
  gap: 1.25rem;
  gap: var(--wp--preset--spacing--20);
  justify-content: flex-end;
}

.l-footer__store {
  display: flex;
  gap: 1.875rem;
  gap: var(--wp--preset--spacing--30);
  align-items: center;
  justify-content: flex-end;
  font-size: 0.8125rem;
  font-size: var(--wp--preset--font-size--small);
  line-height: 2.2;
  line-height: var(--wp--preset--line-height--loose);
}

  .l-footer__store ul {
    display: flex;
    gap: 1.25rem;
    gap: var(--wp--preset--spacing--20);
  }

  .l-footer__store a {
    display: inline-flex;
    gap: 0.3125rem;
    gap: var(--wp--preset--spacing--5);
    align-items: center;
    color: #22bd61;
    color: var(--wp--preset--color--primary);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .l-footer__store svg {
    width: 10px;
    height: 10px;
  }

.l-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.9375rem;
  padding-top: var(--wp--preset--spacing--15);
  margin-top: 0.9375rem;
  margin-top: var(--wp--preset--spacing--15);
  font-size: 0.6875rem;
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  border-top: 1px solid #dbdbdb;
  border-top: 1px solid var(--wp--preset--color--border-light);
}

.l-footer__copyright {
  margin: 0;

  /* destyle が small を 80% にするので、Figma の 11px に戻す */
}
  .l-footer__copyright small {
    font-size: 0.6875rem;
    font-size: var(--wp--preset--font-size--xs);
  }

.l-footer__privacy {
  margin: 0;
}

  .l-footer__privacy a {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

@media (hover: hover) {
  .l-footer__menu a:hover,
  .l-footer__privacy a:hover {
    color: #22bd61;
    color: var(--wp--preset--color--primary);
  }
}

@media (min-width: 1200px) {
  .l-footer {
    padding-top: 3.75rem;
    padding-bottom: 0.9375rem;
    padding-top: var(--wp--preset--spacing--60);
    padding-bottom: var(--wp--preset--spacing--15);
  }

  .l-footer__top {
    flex-direction: row;
    gap: 2.5rem;
    gap: var(--wp--preset--spacing--40);
    justify-content: space-between;
  }

  .l-footer__info {
    gap: 2.5rem;
    gap: var(--wp--preset--spacing--40);
  }

  .l-footer__logo {
    width: 235px;
  }

  .l-footer__sub {
    display: flex;
    flex-direction: column;
    gap: 1.5625rem;
    gap: var(--wp--preset--spacing--25);
    align-items: flex-end;
  }

  .l-footer__bottom {
    padding-top: 1.25rem;
    padding-top: var(--wp--preset--spacing--20);
    margin-top: 1.875rem;
    margin-top: var(--wp--preset--spacing--30);
  }
}
}
@layer components{
/*
 * 現れる動き（Figma の注記）。reveal.js が付ける is-inview で動く。
 * 2026-10-28 本人指示: 一文字ずつの動きは H1・H2 だけ。文章・写真・ボタンはまとまってフェードイン（ずらさない・動かさない）
 * - 既定（data-js="reveal"）: 透明度だけ 0.6s。同時に見えた要素は同時に出る。要素に --reveal-delay を書けば、そのぶん遅らせられる
 * - data-reveal="chars"（H1・H2）: 親は動かさず、中の data-chars の文字が 1 文字ずつ下から上がる
 *   （0.8s・1 文字 0.05s。--chars-start で開始を遅らせられる）
 * 初期状態を隠すのは html.is-js（JS が動いたとき）かつ動きを減らす設定でないときだけ。JS 無しでも全部読める
 */
@media (prefers-reduced-motion: no-preference) {
  .is-js [data-js~="reveal"] {
    opacity: 0;
    transition: opacity 0.6s ease-out 0s;
    transition: opacity 0.6s ease-out var(--reveal-delay, 0s);
  }

    .is-js .is-inview[data-js~="reveal"] {
      opacity: 1;
    }

  /* 一文字ずつ: 親は隠さない（文字の箱で隠す） */
  .is-js [data-js~="reveal"][data-reveal="chars"] {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }

  .is-js [data-reveal="chars"] .c-chars__inner {
    translate: 0 140%;
    transition: translate 0.8s cubic-bezier(0.77, 0, 0.175, 1)
      calc(0s + 0 * 0.05s);
    transition: translate 0.8s cubic-bezier(0.77, 0, 0.175, 1)
      calc(var(--chars-start, 0s) + var(--i, 0) * 0.05s);
  }

  .is-js [data-reveal="chars"].is-inview .c-chars__inner {
    translate: 0 0;
  }
}

/* 文字の箱。上下に余白を持たせて（負のマージンで相殺）、はみ出す部分だけ切る。アセンダー・ディセンダーは切れない */
.c-chars__char {
  display: inline-block;
  padding-top: 0.15em;
  padding-bottom: 0.3em;
  margin-top: -0.15em;
  margin-bottom: -0.3em;
  overflow: hidden; /* clip が無い iOS 15 以前の予備 */
  overflow: clip;
  vertical-align: bottom;
}

.c-chars__inner {
  display: inline-block;
}
}
@layer components{
/*
 * Figma: H2（PC / SP）。英語見出し + 日本語の添え字。
 * 既定はグラデーション文字 + 黄緑のアイコン。緑地の上では --white、Company は --green。
 * 英語の行ボックスは Figma では 40px。グラデーション文字は箱の外が塗られないため、
 * 箱は文字サイズのままにして上下の余白（負のマージン）で 40px 相当にそろえる。
 */
.c-h2 {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9375rem, 0.5625rem + 1.5vw, 1.875rem);
  gap: var(--wp--preset--spacing--heading);
  align-items: center;
  margin: 0;
  text-align: center;
}

.c-h2__en {
  display: flex;
  gap: 0.9375rem;
  gap: var(--wp--preset--spacing--15);
  align-items: center;
  margin-top: calc((40px - 1em) / 2);
  margin-bottom: calc((40px - 1em) / 2); /* 行ボックスを 40px 相当に */
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(2.1875rem, 1.3125rem + 3.5vw, 4.375rem);
  font-size: var(--wp--preset--font-size--h2);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
  white-space: nowrap;
  background: linear-gradient(90deg, #85ce18 0%, #22bd61 100%);
  background: var(--wp--preset--gradient--primary);
  -webkit-background-clip: text;
          background-clip: text;

  /* 葉のかたちのアイコン（Figma: 角丸 5/20 の正方形） */
}
  .c-h2__en::before {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    content: "";
    background-color: #83ce1a;
    background-color: var(--wp--preset--color--accent);
    border-radius: 0.3125rem clamp(0.9375rem, 0.8125rem + 0.5vw, 1.25rem);
    border-radius: var(--wp--preset--radius--small) var(--wp--preset--radius--blob-icon);
  }

/*
 * 葉のアイコンも文字と同じ動き（下から上がる。reveal.css の .c-chars__inner と同じ 0.8s・同じイージング。2026-10-28 本人指示。以前はフェード）。
 * 擬似要素は文字の箱（overflow: clip）に入れられないので、translate と同じ量だけ clip-path で下を切り、
 * 行の下にはみ出した部分が見えないようにする（translate 140% のとき inset 下 140% = 全部隠れる）
 */
@media (prefers-reduced-motion: no-preference) {
  .is-js [data-reveal="chars"] .c-h2__en::before {
    clip-path: inset(0 0 140% 0);
    translate: 0 140%;
    transition:
      translate 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0s, clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0s;
    transition:
      translate 0.8s cubic-bezier(0.77, 0, 0.175, 1) var(--chars-start, 0s), clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1) var(--chars-start, 0s);
  }

  .is-js [data-reveal="chars"].is-inview .c-h2__en::before {
    clip-path: inset(0 0 0 0);
    translate: 0 0;
  }
}

.c-h2__ja {
  --chars-start: 0.3s; /* 日本語は英語より少し遅れて出す（reveal.js） */

  font-size: clamp(0.9375rem, 0.8625rem + 0.3vw, 1.125rem);

  font-size: var(--wp--preset--font-size--h2-sub);
  font-weight: 700;
  line-height: 1;
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
}

/* 文字を分けたあと（reveal.js）。グラデーションは文字ごとに切れるので、測った幅と位置で 1 本につなげる（--chars-w / --chars-x） */
.c-h2__en.is-split {
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  background: none;
}

  .c-h2__en.is-split .c-chars__inner {
    /* 文字の箱（.c-chars__char）と同じだけ上下に広げ、g や y のはみ出す部分まで背景を塗る（塗られない所は透明で消える）。グラデーションは横方向なので縦に広げても色は変わらない */
    padding-top: 0.15em;
    padding-bottom: 0.3em;
    margin-top: -0.15em;
    margin-bottom: -0.3em;
    color: transparent;
    background: linear-gradient(90deg, #85ce18 0%, #22bd61 100%) calc(0px * -1) 0 /
      100% 100% no-repeat;
    background: var(--wp--preset--gradient--primary) calc(var(--chars-x, 0px) * -1) 0 /
      var(--chars-w, 100%) 100% no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
  }

/* 緑地の上 */
  .c-h2--white .c-h2__en,.c-h2--white .c-h2__en .c-chars__inner {
    color: #ffffff;
    color: var(--wp--preset--color--white);
    background: none;
  }

  .c-h2--white .c-h2__en::before {
    background-color: #ffffff;
    background-color: var(--wp--preset--color--white);
  }

  .c-h2--white .c-h2__ja {
    color: #ffffff;
    color: var(--wp--preset--color--white);
  }

/* 緑ベタ（Company） */
  .c-h2--green .c-h2__en,.c-h2--green .c-h2__en .c-chars__inner {
    color: #22bd61;
    color: var(--wp--preset--color--primary);
    background: none;
  }

  .c-h2--green .c-h2__en::before {
    background-color: #22bd61;
    background-color: var(--wp--preset--color--primary);
  }

/* 左寄せ（CTA） */
.c-h2--left {
  align-items: flex-start;
  text-align: left;
}

/* 写真の上（Online Store）。影を落とす */
.c-h2--shadow {
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
  filter: var(--wp--preset--shadow--heading);
}

/* 小さめ（Recruit バナー）。PC だけ 60px */
.c-h2--small {
  gap: 0.9375rem;
  gap: var(--wp--preset--spacing--15);
}

  .c-h2--small .c-h2__en {
    font-size: clamp(2.1875rem, 1.5625rem + 2.5vw, 3.75rem);
    font-size: var(--wp--preset--font-size--h2-small);
  }

  .c-h2--small .c-h2__ja {
    font-size: 0.9375rem;
    font-size: var(--wp--preset--font-size--nav); /* 15px（Figma: Recruit バナーの「採用情報」。通常の H2 の 18px にしない） */
  }

@media (min-width: 768px) {
  .c-h2__en {
    gap: 1.25rem;
    gap: var(--wp--preset--spacing--20);
  }

    .c-h2__en::before {
      width: 45px;
      height: 45px;
    }

  .c-h2--small {
    gap: 1.25rem;
    gap: var(--wp--preset--spacing--20);
  }

    .c-h2--small .c-h2__en::before {
      width: 40px; /* Figma: Recruit バナーのマークは 40px（通常の H2 は 45px） */
      height: 40px;
    }
}
}
@layer components{
/*
 * Figma: Button_大。
 * サイズは SP 250×60（角丸 5）/ PC 300×75（角丸 10）。文字は中央、矢印は右端に絶対配置。
 * 色: 既定は緑ベタ。--gradient / --white / --pink。
 * 形: --link（外部リンク。SP 300×60 / PC 350×80）、--large（SP 350×70 / PC 500×100）、--full（親いっぱい）
 * 矢印: 既定は右端。green_back は左端（c-button__arrow--back）、green_plus は「+」（c-button__arrow--plus）
 * 幅は width + max-width: 100% で書く（min(100%, 300px) だと、内容幅に縮む親（text-align や flex の中）で 100% が効かず文字幅まで縮む）
 * ホバー: 矢印が端に 5px 動く（Figma「設定」の指示）
 */
.c-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  max-width: 100%;
  height: 60px;
  padding-left: 1.875rem;
  padding-right: 1.875rem;
  padding-left: var(--wp--preset--spacing--30);
  padding-right: var(--wp--preset--spacing--30);
  font-size: clamp(0.9375rem, 0.9125rem + 0.1vw, 1rem);
  font-size: var(--wp--preset--font-size--button);
  font-weight: 700;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  color: #ffffff;
  color: var(--wp--preset--color--white);
  text-align: center;
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
  background: #22bd61;
  background: var(--wp--preset--color--primary);
  border-radius: 0.3125rem;
  border-radius: var(--wp--preset--radius--small);
}

.c-button__label {
  display: block;
}

/* 右端の矢印（chevron 6×12 / PC 7×15、外部リンクは 15×15） */
.c-button__arrow {
  position: absolute;
  top: 50%;
  right: 0.9375rem;
  right: var(--wp--preset--spacing--15);
  display: block;
  line-height: 0;
  transform: translateY(-50%);
  transition: transform 0.2s;
}

  .c-button__arrow svg {
    width: 6px;
    height: 12px;
  }

.c-button--link .c-button__arrow svg {
  width: 15px;
  height: 15px;
}

/* 戻るボタン（green_back）: 矢印を左端に反転して置く */
.c-button__arrow--back {
  right: auto;
  left: 0.9375rem;
  left: var(--wp--preset--spacing--15);
  transform: translateY(-50%) scaleX(-1);
}

/* 「+」（green_plus。SP 11×11 / PC 13×13） */
.c-button__arrow--plus svg {
  width: 11px;
  height: 11px;
}

/* 左端のアイコン（申込フォーム 22×23 / PC 28.5×30、メール 27×22） */
.c-button__icon {
  position: absolute;
  top: 50%;
  left: 1.25rem;
  left: var(--wp--preset--spacing--20);
  display: block;
  line-height: 0;
  transform: translateY(-50%);
}

  .c-button__icon svg {
    width: 22px;
    height: auto;
  }

.c-button__icon--mail svg {
  width: 25px;
}

.c-button--gradient {
  background: linear-gradient(90deg, #85ce18 0%, #22bd61 100%);
  background: var(--wp--preset--gradient--primary);
}

.c-button--white {
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  background: #ffffff;
  background: var(--wp--preset--color--white);
}

.c-button--pink {
  background: #ff8385;
  background: var(--wp--preset--color--pink);
}

.c-button--link {
  width: 300px;
}

.c-button--large {
  width: 350px;
  height: 70px;
}

.c-button--full {
  width: 100%;
}

/* CTA の中のボタン（SP でも角丸 10・16px） */
.c-button--cta {
  width: 100%;
  font-size: 1rem;
  font-size: var(--wp--preset--font-size--label);
  border-radius: 0.625rem;
  border-radius: var(--wp--preset--radius--medium);
}

@media (hover: hover) {
  .c-button:hover .c-button__arrow {
    transform: translate(5px, -50%);
  }

  .c-button:hover .c-button__arrow--back {
    transform: translate(-5px, -50%) scaleX(-1);
  }

  /* 「+」のボタンはホバーで動かさない（Figma 注記） */
  .c-button:hover .c-button__arrow--plus {
    transform: translateY(-50%);
  }
}

@media (min-width: 768px) {
  .c-button {
    width: 300px;
    height: 75px;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-left: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--40);
    border-radius: 0.625rem;
    border-radius: var(--wp--preset--radius--medium);
  }

  .c-button__arrow {
    right: 1.5625rem;
    right: var(--wp--preset--spacing--25);
  }

    .c-button__arrow svg {
      width: 7px;
      height: 15px;
    }

  .c-button__arrow--back {
    right: auto;
    left: 1.5625rem;
    left: var(--wp--preset--spacing--25);
  }

  .c-button__arrow--plus svg {
    width: 13px;
    height: 13px;
  }

  .c-button__icon {
    left: 1.875rem;
    left: var(--wp--preset--spacing--30);
  }

    .c-button__icon svg {
      width: 28.5px;
    }

  .c-button--link {
    width: 350px;
    height: 80px;
  }

  .c-button--large {
    width: 500px;
    height: 100px;
    font-size: clamp(0.9375rem, 0.8125rem + 0.5vw, 1.25rem);
    font-size: var(--wp--preset--font-size--button-large);
  }

  /* トップ Offer の申し込みボタン（Figma 2026-10-26: PC 550×100。SP は --large と同じ 350×70） */
  .c-button--wide {
    width: 550px;
  }

  .c-button--full,
  .c-button--cta {
    width: 100%;
  }
}
}
@layer components{
/* Figma: Button_小（文字 + 丸矢印 20×20）。一覧を見る / 古い記事へ は矢印が右、新しい記事へ は左（--back）。--white は緑地の上（Recruit） */
.c-button-small {
  display: inline-flex;
  gap: 0.625rem;
  gap: var(--wp--preset--spacing--10);
  align-items: center;
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--nav);
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  color: #252525;
  color: var(--wp--preset--color--text);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c-button-small__icon {
  display: block;
  line-height: 0;
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  transition: transform 0.2s;
}

  .c-button-small__icon path {
    fill: #ffffff;
    fill: var(--wp--preset--color--white);
  }

/* 新しい記事へ: 丸矢印を左に反転 */
.c-button-small__icon--back {
  transform: scaleX(-1);
}

.c-button-small--white {
  font-weight: 700;
  color: #ffffff;
  color: var(--wp--preset--color--white);
}

  .c-button-small--white .c-button-small__icon {
    color: #ffffff;
    color: var(--wp--preset--color--white);
  }

  .c-button-small--white .c-button-small__icon path {
    fill: #22bd61;
    fill: var(--wp--preset--color--primary);
  }

@media (hover: hover) {
  .c-button-small:hover .c-button-small__icon {
    transform: translateX(5px);
  }

  .c-button-small:hover .c-button-small__icon--back {
    transform: translateX(-5px) scaleX(-1);
  }
}
}
@layer components{
/* Figma: Header / Footer の「ボタン」（高さ 50・角丸 5・アイコン付き）。PC だけに出る */
.c-nav-button {
  display: inline-flex;
  gap: 0.625rem;
  gap: var(--wp--preset--spacing--10);
  align-items: center;
  height: 50px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-left: var(--wp--preset--spacing--20);
  padding-right: var(--wp--preset--spacing--20);
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 500;
  line-height: 2.2;
  line-height: var(--wp--preset--line-height--loose);
  color: #ffffff;
  color: var(--wp--preset--color--white);
  letter-spacing: 0.03em;
  letter-spacing: var(--wp--preset--letter-spacing--narrow);
  white-space: nowrap;
  background-color: #22bd61;
  background-color: var(--wp--preset--color--primary);
  border-radius: 0.3125rem;
  border-radius: var(--wp--preset--radius--small);
  transition: opacity 0.2s;
}

  .c-nav-button svg {
    display: block;
    flex-shrink: 0;
  }

.c-nav-button--contact {
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  font-size: var(--wp--preset--font-size--cta-text);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
  background-color: #ff8385;
  background-color: var(--wp--preset--color--pink);
}

@media (hover: hover) {
  .c-nav-button:hover {
    opacity: 0.8;
  }
}
}
@layer components{
/*
 * Figma: Frame 1060〜1062（丸写真 + 見出し + 説明）。Mitsuba Farming と Sustainability で使う。
 * 既定は白地（見出し緑・本文黒）。緑地の上は --white。
 * 3 つ並べるときは .c-feature-list（SP 縦積み / 768〜 2 列 / 1200〜 3 列）
 */
.c-feature-list {
  display: grid;
  grid-gap: 3.75rem;
  grid-gap: var(--wp--preset--spacing--60);
  gap: 3.75rem;
  gap: var(--wp--preset--spacing--60);
  justify-items: center;
}

.c-feature {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  gap: var(--wp--preset--spacing--30);
  align-items: center;
  width: 100%;
  max-width: 373px;
}

.c-feature__image {
  width: 300px;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 9999px;
  border-radius: var(--wp--preset--radius--pill);
}

.c-feature__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  gap: var(--wp--preset--spacing--20);
  width: 100%;
}

.c-feature__title {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.25rem;
  padding-bottom: var(--wp--preset--spacing--20);
  margin: 0;
  font-size: 1.5625rem;
  font-size: var(--wp--preset--font-size--card-title);
  font-weight: 700;
  line-height: 1.4;
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  text-align: center;
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
  border-bottom: 2px solid #e0e0e0;
  border-bottom: 2px solid var(--wp--preset--color--border);
}

.c-feature__sub {
  font-size: 1.25rem;
  font-size: var(--wp--preset--font-size--card-sub);
  line-height: 1.75;
}

.c-feature__text {
  margin: 0;
  font-size: 1rem;
  font-size: var(--wp--preset--font-size--label);
  line-height: 1.9;
  line-height: var(--wp--preset--line-height--body);
}
  .c-feature--white .c-feature__title,.c-feature--white .c-feature__text {
    color: #ffffff;
    color: var(--wp--preset--color--white);
  }

@media (min-width: 768px) {
  .c-feature-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}
}
@layer components{
/*
 * Figma: news_1〜4（お知らせ一覧の 1 件）。wp: WP_Query のループ内。
 * 日付 + カテゴリ、タイトル、右端の長い矢印。全体がリンク。
 */
.c-news-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  gap: var(--wp--preset--spacing--20);
  padding-bottom: 1.875rem;
  padding-bottom: var(--wp--preset--spacing--30);
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.c-news-item__meta {
  display: flex;
  gap: 1.25rem;
  gap: var(--wp--preset--spacing--20);
  align-items: center;
  font-size: 0.8125rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
}

/* カテゴリ（Figma: 角丸 50 のラベル）。色はカテゴリごと。wp: カテゴリスラッグをモディファイアにする */
.c-news-item__category {
  padding: 0 1.25rem;
  padding: 0 var(--wp--preset--spacing--20);
  color: #ffffff;
  color: var(--wp--preset--color--white);
  background-color: #22bd61;
  background-color: var(--wp--preset--color--primary);
  border-radius: 9999px;
  border-radius: var(--wp--preset--radius--pill);
}

.c-news-item__category--press {
  background-color: #83ce1a;
  background-color: var(--wp--preset--color--accent);
}

.c-news-item__category--cultivation {
  background-color: #666666;
  background-color: var(--wp--preset--color--text-muted); /* コラム: グレー（2026-10-31 本人指示でメディア掲載と入れ替え） */
}

.c-news-item__category--media {
  background-color: #252525;
  background-color: var(--wp--preset--color--text); /* メディア掲載: 黒 */
}

/* wp: 直近 SM_NEWS_NEW_DAYS 日の記事に付く「新着」（絞り込みの「新着」と同じピンク） */
.c-news-item__category--new {
  background-color: #ff8385;
  background-color: var(--wp--preset--color--pink);
}

.c-news-item__body {
  display: flex;
  gap: 0.9375rem;
  gap: var(--wp--preset--spacing--15);
  align-items: center;
}

.c-news-item__title {
  flex: 1;
  margin: 0;
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 400;
  line-height: 1.9;
  line-height: var(--wp--preset--line-height--body);
  letter-spacing: 0;
  letter-spacing: var(--wp--preset--letter-spacing--normal);
  word-break: normal; /* 見出しの auto-phrase だと文ごとに改行されてしまう */
}

.c-news-item__link {
  -webkit-text-decoration: none;
  text-decoration: none;
}

  .c-news-item__link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
  }

.c-news-item__arrow {
  flex-shrink: 0;
  line-height: 0;
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  transition: transform 0.2s;
}

  .c-news-item__arrow svg {
    width: 21px;
    height: auto;
  }

@media (hover: hover) {
  .c-news-item:hover .c-news-item__arrow {
    transform: translateX(5px);
  }
}

@media (min-width: 768px) {
  .c-news-item__title {
    line-height: 2;
  }
}
}
@layer components{
/*
 * Figma: CTA（PC 1400×543 / SP 400×888）。全ページ共通のお問い合わせ導線。
 * 左に見出しと説明、右（SP は下）に白いパネル。パネルは 2 項目を点線で区切る。
 */
.c-cta {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
  color: #ffffff;
  color: var(--wp--preset--color--white);
  background: linear-gradient(90deg, #85ce18 0%, #22bd61 100%);
  background: var(--wp--preset--gradient--primary);
}

.c-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 3.125rem;
  gap: var(--wp--preset--spacing--50);
  width: min(100% - 1.25rem * 2, 77.5rem);
  width: min(100% - var(--wp--preset--spacing--20) * 2, var(--wp--preset--layout--container-max));
  margin-left: auto;
  margin-right: auto;
}

.c-cta__intro {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  gap: var(--wp--preset--spacing--40);
}

.c-cta__text {
  margin: 0;
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  font-size: var(--wp--preset--font-size--cta-text);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
}

.c-cta__panel {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  gap: var(--wp--preset--spacing--30);
  align-items: center;
  padding: 2.5rem 1.25rem;
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
  color: #252525;
  color: var(--wp--preset--color--text);
  background-color: #ffffff;
  background-color: var(--wp--preset--color--white);
  border-radius: 1.25rem;
  border-radius: var(--wp--preset--radius--large);
}

.c-cta__item {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  gap: var(--wp--preset--spacing--20);
  align-items: center;
  width: min(100%, 300px);
}

/* 2 つめの項目の前に点線（Figma: Line 236、2-5 の破線） */
.c-cta__item + .c-cta__item {
  position: relative;
  padding-top: 1.875rem;
  padding-top: var(--wp--preset--spacing--30);
}

  .c-cta__item + .c-cta__item::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    background-image: repeating-linear-gradient(
      90deg,
      #22bd61 0,#22bd61 2px,
      transparent 2px, transparent 7px
    );
    background-image: repeating-linear-gradient(
      90deg,
      var(--wp--preset--color--primary) 0,var(--wp--preset--color--primary) 2px,
      transparent 2px, transparent 7px
    );
    background-image: repeating-linear-gradient(
      90deg,
      #22bd61 0 2px,
      transparent 2px 7px
    );
  }

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)){
.c-cta__item + .c-cta__item::before {
    background-image: repeating-linear-gradient(
      90deg,
      var(--wp--preset--color--primary) 0 2px,
      transparent 2px 7px
    );
  }
}

/* 見出しは 1 行でも 2 行でも 2 行ぶんの高さを取り、下のアイコンとボタンの位置をそろえる（Figma: 46px の箱に上下中央） */
.c-cta__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2lh;
  margin: 0;
  font-size: clamp(1.25rem, 1.2rem + 0.2vw, 1.375rem);
  font-size: var(--wp--preset--font-size--cta-title);
  font-weight: 500;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  text-align: center;
  letter-spacing: 0.03em;
  letter-spacing: var(--wp--preset--letter-spacing--narrow);
}

/* 丸いアイコン（SP 80 / PC 120） */
.c-cta__icon {
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  width: 80px;
  height: 80px;
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  background-color: #eefdf4;
  background-color: var(--wp--preset--color--background-green-pale);
  border-radius: 9999px;
  border-radius: var(--wp--preset--radius--pill);
}

  .c-cta__icon svg {
    display: block;
    width: 38px;
    height: auto;
  }

.c-cta__icon--contact {
  color: #ff8385;
  color: var(--wp--preset--color--pink);
  background-color: #fff5f4;
  background-color: var(--wp--preset--color--background-pink-pale);
}

  .c-cta__icon--contact svg {
    width: 36.667px;
  }

@media (min-width: 1200px) {
  .c-cta {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
    padding-top: var(--wp--preset--spacing--100);
    padding-bottom: var(--wp--preset--spacing--100);
  }

  /* 説明 380 + 間 80 + パネル 780 = 1240px が収まらない幅（1200〜1399）では、パネルを説明の下に回す */
  .c-cta__inner {
    flex-flow: row wrap;
    gap: 3.125rem 5rem;
    gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80);
    align-items: flex-start;
    width: min(
      100% - clamp(0.9375rem, -0.6875rem + 6.5vw, 5rem) * 2,
      77.5rem
    );
    width: min(
      100% - var(--wp--preset--layout--container-gutter) * 2,
      var(--wp--preset--layout--container-max)
    );
  }

  .c-cta__intro {
    flex-shrink: 0;
    gap: 3.125rem;
    gap: var(--wp--preset--spacing--50);
    width: 380px;
  }

  .c-cta__panel {
    flex-shrink: 0; /* 縮めずに折り返す（ボタンの文字が崩れないように） */
    flex-direction: row;
    gap: 2.5rem;
    gap: var(--wp--preset--spacing--40);
    align-items: stretch;
    padding: 2.5rem 3.125rem;
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  }

  .c-cta__item {
    gap: 1.5625rem;
    gap: var(--wp--preset--spacing--25);
    width: 300px;
  }

  /* 点線ぶんの padding-left を幅に足す（border-box のため。中身は 1 つめと同じ 300px） */
  .c-cta__item + .c-cta__item {
    width: calc(300px + 2.5rem);
    width: calc(300px + var(--wp--preset--spacing--40));
    padding-top: 0;
    padding-left: 2.5rem;
    padding-left: var(--wp--preset--spacing--40);
  }

    .c-cta__item + .c-cta__item::before {
      width: 1px;
      height: 100%;
      background-image: repeating-linear-gradient(
        180deg,
        #22bd61 0,#22bd61 2px,
        transparent 2px, transparent 7px
      );
      background-image: repeating-linear-gradient(
        180deg,
        var(--wp--preset--color--primary) 0,var(--wp--preset--color--primary) 2px,
        transparent 2px, transparent 7px
      );
      background-image: repeating-linear-gradient(
        180deg,
        #22bd61 0 2px,
        transparent 2px 7px
      );
    }

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)){
.c-cta__item + .c-cta__item::before {
      background-image: repeating-linear-gradient(
        180deg,
        var(--wp--preset--color--primary) 0 2px,
        transparent 2px 7px
      );
    }
}

  .c-cta__icon {
    width: 120px;
    height: 120px;
  }

    .c-cta__icon svg {
      width: 52.25px;
    }

  .c-cta__icon--contact svg {
    width: 55px;
  }
}
}
@layer components{
/*
 * Figma: お問い合わせ・取材/視察/講演の申込フォーム（/contact/ と /farmvisit/ で共通）。
 * WordPress では Contact Form 7 の出力になる（.wpcf7-form-control-wrap > .wpcf7-form-control）ので、
 * フォーム部品に付けるクラスは input / select / textarea に直接当てる最小限にしてある。
 * - 行: PC は 見出し 150px + 間 30px + 入力欄。SP は縦積み（間 15px）
 * - 入力欄: 高さ 40px・白地・枠 #e0e0e0・角丸 5px。文字 15px。textarea は PC 180px / SP 120px
 * - ラジオ・チェックは本物の input を appearance: none で描く（JS 無しでも動く）
 */
.c-form {
  --c-form-row-gap: var(--wp--preset--spacing--30);

  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  gap: var(--c-form-row-gap);
  width: 100%;
}

/* 「*必須項目」（右寄せ） */
.c-form__note {
  margin: 0 0 1.25rem;
  margin: 0 0 var(--wp--preset--spacing--20);
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--form);
  font-weight: 500;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  text-align: right;
  letter-spacing: 0.03em;
  letter-spacing: var(--wp--preset--letter-spacing--narrow);
}

.c-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  gap: var(--wp--preset--spacing--15);

  /* farmvisit.js が hidden を付けた行（display: flex が hidden に勝つため明示する） */
}
  .c-form__row[hidden] {
    display: none;
  }

.c-form__label {
  flex-shrink: 0;
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--form);
  font-weight: 500;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  letter-spacing: 0.03em;
  letter-spacing: var(--wp--preset--letter-spacing--narrow);
}

/* 必須の「*」（見出しと「*必須項目」の中） */
.c-form__required {
  color: #22bd61;
  color: var(--wp--preset--color--primary);
}

.c-form__field {
  min-width: 0;
}

/* 入力欄。CF7 では .wpcf7-form-control にも同じ見た目を当てる */
.c-form__input,
.c-form__select,
.c-form__textarea {
  display: block;
  width: 100%;
  height: 40px;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  padding-left: var(--wp--preset--spacing--15);
  padding-right: var(--wp--preset--spacing--15);
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--form);
  font-weight: 500;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  color: #252525;
  color: var(--wp--preset--color--text);
  background-color: #ffffff;
  background-color: var(--wp--preset--color--white);
  border: 1px solid #e0e0e0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.3125rem;
  border-radius: var(--wp--preset--radius--small);
}

  .c-form__input::-moz-placeholder {
    color: #c5c5c5;
    color: var(--wp--preset--color--placeholder);
    opacity: 1;
  }

  .c-form__input::placeholder {
    color: #c5c5c5;
    color: var(--wp--preset--color--placeholder);
    opacity: 1;
  }

  .c-form__select::-moz-placeholder {
    color: #c5c5c5;
    color: var(--wp--preset--color--placeholder);
    opacity: 1;
  }

  .c-form__select::placeholder {
    color: #c5c5c5;
    color: var(--wp--preset--color--placeholder);
    opacity: 1;
  }

  .c-form__textarea::-moz-placeholder {
    color: #c5c5c5;
    color: var(--wp--preset--color--placeholder);
    opacity: 1;
  }

  .c-form__textarea::placeholder {
    color: #c5c5c5;
    color: var(--wp--preset--color--placeholder);
    opacity: 1;
  }

/* 短い入力欄（人数など。PC 400px） */
.c-form__input--short,
.c-form__select {
  max-width: 100%;
}

/* プルダウン。右端に下向きの矢印（Figma: Vector 16.4×8） */
.c-form__select {
  padding-right: 2.5rem;
  padding-right: var(--wp--preset--spacing--40);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.4' height='8' viewBox='0 0 16.4 8'%3E%3Cpath d='M1 1l7.2 6 7.2-6' fill='none' stroke='%23252525' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9375rem center;
  background-position: right var(--wp--preset--spacing--15) center;
  background-size: 16.4px 8px;

  /* 「選択してください」を選んでいる間は薄い色 */
}
  .c-form__select:has(option[value=""]:checked) {
    color: #acacac;
    color: var(--wp--preset--color--border-dark);
  }

  /* 開いた選択肢は本文と同じ黒（select の薄い色を継承させない） */
  .c-form__select option {
    color: #252525;
    color: var(--wp--preset--color--text);
  }

/*
 * 日付（type="date"）。空のときはブラウザの「年/月/日」を隠し、ほかの欄と同じプレースホルダー（data-placeholder）を出す。
 * 入力欄のどこをクリックしてもカレンダーが開く（farmvisit.js の initDatePicker。スマホは OS のピッカーがそのまま開く）。
 * JS が無いときはブラウザの表示のまま
 */
.c-form__field--date {
  position: relative;
}

  .c-form__field--date .c-form__input {
    min-height: 40px; /* iOS Safari は空の date が潰れるので高さを保証 */
    cursor: pointer;
  }

    .c-form__field--date .c-form__input::-webkit-date-and-time-value {
      text-align: left; /* iOS Safari は中央寄せになる */
    }

  .c-form__field--date::before {
    position: absolute;
    top: 50%;
    left: 0.9375rem;
    left: var(--wp--preset--spacing--15);
    z-index: 1; /* CF7 の .wpcf7-form-control-wrap（position: relative）より手前に */
    display: none;
    font-size: 0.9375rem;
    font-size: var(--wp--preset--font-size--form);
    font-weight: 500;
    line-height: 1;
    color: #c5c5c5;
    color: var(--wp--preset--color--placeholder);
    pointer-events: none;
    content: attr(data-placeholder);
    transform: translateY(-50%);
  }

/* フォーカス中はブラウザの「年/月/日」の入力欄を見せる（プレースホルダーと重ならないように。2026-10-30 本人指摘） */
  .is-js .c-form__field--date:not(:has(.is-filled)):not(:focus-within) .c-form__input {
    color: transparent;
  }

  .is-js .c-form__field--date:not(:has(.is-filled)):not(:focus-within)::before {
    display: block;
  }

.c-form__textarea {
  height: 120px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-top: var(--wp--preset--spacing--10);
  padding-bottom: var(--wp--preset--spacing--10);
  resize: vertical;
}

/* 入力欄の後ろに付く単位（「名様」） */
.c-form__unit {
  display: flex;
  gap: 0.625rem;
  gap: var(--wp--preset--spacing--10);
  align-items: center;
}

  .c-form__unit .c-form__input {
    flex: 1 1 auto;
  }

.c-form__unit-label {
  flex-shrink: 0;
  font-size: 1rem;
  font-size: var(--wp--preset--font-size--label);
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
}

/* ラジオ・チェックボックスの並び */
.c-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.875rem;
  gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
  align-items: center;
  min-height: 40px;
}

.c-form__choices--stack {
  flex-direction: column;
  align-items: flex-start;
}

/* 1 つの選択肢（label の中に input と文字） */
.c-form__radio,
.c-form__check {
  display: inline-flex;
  gap: 0.625rem;
  gap: var(--wp--preset--spacing--10);
  align-items: center;
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--form);
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  cursor: pointer;
}

  .c-form__radio input,.c-form__check input {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
    background-color: #ffffff;
    background-color: var(--wp--preset--color--white);
    border: 1px solid #e0e0e0;
    border: 1px solid var(--wp--preset--color--border);
  }

/* ラジオ: 丸。選択で中に 10px の緑丸（Figma: Group 108） */
.c-form__radio input {
  border-radius: 9999px;
  border-radius: var(--wp--preset--radius--pill);
}

  .c-form__radio input::before {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    content: "";
    background-color: #22bd61;
    background-color: var(--wp--preset--color--primary);
    border-radius: inherit;
    opacity: 0;
  }

  .c-form__radio input:checked::before {
    opacity: 1;
  }

/* チェックボックス: 角丸 5px・枠 #d8d8d8。選択で緑のチェック */
.c-form__check input {
  border-color: #dbdbdb;
  border-color: var(--wp--preset--color--border-light);
  border-radius: 0.3125rem;
  border-radius: var(--wp--preset--radius--small);
}

  .c-form__check input::before {
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 10px;
    content: "";
    border: solid #22bd61;
    border: solid var(--wp--preset--color--primary);
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg);
  }

  .c-form__check input:checked::before {
    opacity: 1;
  }

/* 「プライバシーポリシー」のリンク。destyle.css が a の下線を消すので、リンクの部分だけ下線を付け直す */
.c-form__check a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* 同意のチェック（フォームの下に中央寄せ） */
.c-form__agree {
  display: flex;
  justify-content: center;
  margin: 5rem 0 0;
  margin: var(--wp--preset--spacing--80) 0 0;
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  font-size: var(--wp--preset--font-size--cta-text);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
}

/* CF7 の同意（acceptance）は span.wpcf7-form-control-wrap > span.wpcf7-acceptance で 2 重に包まれる。行送りの分だけ高くならないよう flex に */
.c-form__agree .wpcf7-form-control-wrap,
.c-form__agree .wpcf7-acceptance {
  display: flex;
}

/* 送信ボタン（Figma: Button_大 PC_green。CF7 では <button type="submit"> をそのまま置く） */
.c-form__submit {
  margin: calc(1.25rem - var(--c-form-row-gap)) 0 0;
  margin: calc(var(--wp--preset--spacing--20) - var(--c-form-row-gap)) 0 0; /* フォームの行間（30px）を打ち消して、同意のチェックとの間を 20px に（Figma） */
  text-align: center;
}

.c-form__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  max-width: 100%;
  height: 60px;
  padding-left: 1.875rem;
  padding-right: 1.875rem;
  padding-left: var(--wp--preset--spacing--30);
  padding-right: var(--wp--preset--spacing--30);
  font-size: clamp(0.9375rem, 0.9125rem + 0.1vw, 1rem);
  font-size: var(--wp--preset--font-size--button);
  font-weight: 700;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  color: #ffffff;
  color: var(--wp--preset--color--white);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
  cursor: pointer;
  background-color: #22bd61;
  background-color: var(--wp--preset--color--primary);
  border-radius: 0.3125rem;
  border-radius: var(--wp--preset--radius--small);
}

  .c-form__button svg {
    position: absolute;
    top: 50%;
    right: 0.9375rem;
    right: var(--wp--preset--spacing--15);
    width: 6px;
    height: 12px;
    transform: translateY(-50%);
    transition: transform 0.2s;
  }

/* 送信完了（/contact/thanks/ /farmvisit/thanks/）。Figma に無いので、フォームと同じ幅・文字で最小限に（wp: inc/contact-site-info.php） */
.c-form__complete {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  gap: var(--wp--preset--spacing--30);
  width: min(100%, 742px);
  margin: 3.75rem auto 0;
  margin: var(--wp--preset--spacing--60) auto 0;
  font-size: clamp(0.9375rem, 0.9125rem + 0.1vw, 1rem);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.9;
  line-height: var(--wp--preset--line-height--body);
  letter-spacing: 0.03em;
  letter-spacing: var(--wp--preset--letter-spacing--narrow);
}

.c-form__complete-lead {
  margin: 0;
  font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5625rem);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  text-align: center;
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
}

.c-form__complete-text {
  margin: 0;
}

.c-form__complete-list {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  gap: var(--wp--preset--spacing--15);
  padding-left: 1.5em;
  margin: 0;
  list-style: decimal;
}

@media (hover: hover) {
  .c-form__button:hover svg {
    transform: translate(5px, -50%);
  }
}

@media (min-width: 768px) {
  .c-form__note {
    margin-bottom: 1.25rem;
    margin-bottom: var(--wp--preset--spacing--20);
  }

  .c-form__row {
    flex-direction: row;
    gap: 1.875rem;
    gap: var(--wp--preset--spacing--30);
    align-items: center;
  }

  /* textarea の行は上揃え。見出しは 1 行目の入力欄と同じ高さに */
  .c-form__row--top {
    align-items: flex-start;
  }

    .c-form__row--top .c-form__label {
      padding-top: 0.625rem;
      padding-top: var(--wp--preset--spacing--10);
    }

  .c-form__label {
    width: 150px;
  }

  .c-form__field {
    flex: 1 1 0;
  }

  .c-form__input--short,
  .c-form__select {
    width: 400px;
  }

  .c-form__textarea {
    height: 180px;
  }

  .c-form__unit .c-form__input {
    flex: 0 1 400px;
  }

  .c-form__agree {
    font-size: 0.9375rem;
    font-size: var(--wp--preset--font-size--form);
  }

  .c-form__button {
    width: 300px;
    height: 75px;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-left: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--40);
    font-size: 1rem;
    font-size: var(--wp--preset--font-size--label);
    border-radius: 0.625rem;
    border-radius: var(--wp--preset--radius--medium);
  }

    .c-form__button svg {
      right: 1.5625rem;
      right: var(--wp--preset--spacing--25);
      width: 7px;
      height: 15px;
    }

  .c-form__complete {
    margin-top: 5rem;
    margin-top: var(--wp--preset--spacing--80);
  }
}
}
@layer components{
/*
 * Figma: Frame 1067 / 1107（Feature 01 / 02 のカード。PC 580×261 / SP 370）。
 * 角丸は 左上 10・右上 40・右下 10・左下 40。薄い緑の地の上は白、白地の上は --soft で薄い緑。
 * 番号は Figma では Inter Bold だが、読み込んでいる英字フォント（Outfit）で代用する
 */
.c-feature-card {
  display: flex;
  flex-direction: column;
  padding: 1.875rem;
  padding: var(--wp--preset--spacing--30);
  background-color: #ffffff;
  background-color: var(--wp--preset--color--white);
  border-radius: 0.625rem 2.5rem
    0.625rem 2.5rem;
  border-radius: var(--wp--preset--radius--medium) var(--wp--preset--spacing--40)
    var(--wp--preset--radius--medium) var(--wp--preset--spacing--40);
}

.c-feature-card__number {
  margin: 0;
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 700;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  letter-spacing: 0.1em;
  letter-spacing: var(--wp--preset--letter-spacing--x-wide);
}

.c-feature-card__title {
  margin: 0.625rem 0 0;
  margin: var(--wp--preset--spacing--10) 0 0;
  font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5625rem);
  font-size: var(--wp--preset--font-size--feature-title);
  font-weight: 700;
  line-height: 1.6;
  line-height: var(--wp--preset--line-height--lead);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
}

.c-feature-card__text {
  margin: 1.5625rem 0 0;
  margin: var(--wp--preset--spacing--25) 0 0;
  font-size: clamp(0.9375rem, 0.9125rem + 0.1vw, 1rem);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.9;
  line-height: var(--wp--preset--line-height--body);
}

.c-feature-card--soft {
  background-color: #f1f9ef;
  background-color: var(--wp--preset--color--background-soft);
}

@media (min-width: 768px) {
  .c-feature-card {
    padding: 3.125rem 2.5rem;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  }

  .c-feature-card__title {
    margin-top: 0.9375rem;
    margin-top: var(--wp--preset--spacing--15);
  }

  .c-feature-card__text {
    margin-top: 2.1875rem;
    margin-top: var(--wp--preset--spacing--35);
  }
}
}
@layer components{
/*
 * Figma: Frame 1067〜1074（設備のカード。PC 386 / SP 350）。写真（1.657）の下に白い本文。角丸 10。
 * 3 つ並べるときは .c-photo-card-list（SP 縦積み / 768〜 2 列 / 1200〜 3 列）。同じ行のカードは同じ高さ
 */
.c-photo-card-list {
  display: grid;
  grid-gap: 1.875rem;
  grid-gap: var(--wp--preset--spacing--30);
  gap: 1.875rem;
  gap: var(--wp--preset--spacing--30);
}

.c-photo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* clip が無い iOS 15 以前の予備 */
  overflow: clip;
  border-radius: 0.625rem;
  border-radius: var(--wp--preset--radius--medium);
}

.c-photo-card__image {
  width: 100%;
  aspect-ratio: 386 / 233;
  -o-object-fit: cover;
     object-fit: cover;
}

.c-photo-card__body {
  flex: 1;
  padding: 1.875rem 1.25rem;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
  background-color: #ffffff;
  background-color: var(--wp--preset--color--white);
}

.c-photo-card__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.2rem + 0.2vw, 1.375rem);
  font-size: var(--wp--preset--font-size--cta-title);
  font-weight: 700;
  line-height: 1.8;
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
}

.c-photo-card__text {
  margin: 1.5625rem 0 0;
  margin: var(--wp--preset--spacing--25) 0 0;
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--nav);
  line-height: 1.9;
  line-height: var(--wp--preset--line-height--body);
}

@media (min-width: 768px) {
  .c-photo-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.75rem 2.5rem;
    gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  }

  .c-photo-card__text {
    line-height: 2;
  }
}

@media (min-width: 1200px) {
  .c-photo-card-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
}
@layer components{
/*
 * 下層ページの h1（WordPress化では the_title()）。Figma: 各ページ先頭の "_" フレーム（PC 1400×659 / SP 400×283）。
 * 写真（PC 1320×300、左下だけ角丸 50、右に 41px ずれて右端が切れる / SP 385×120、右に 7.5px）の右下に薄い英語（Outfit 90px / 30px、不透明度 70%）。
 * その下に H1（Noto Sans Bold。SP 25px / PC 60px、字間 0.05em）と英語の添え字（Outfit Bold。SP 20px / PC 25px、字間 0.1em、行 40px）。文字色は緑
 */
.c-page-title {
  overflow: hidden; /* clip が無い iOS 15 以前の予備 */
  overflow: clip;
  background-color: #f1f9ef;
  background-color: var(--wp--preset--color--background-soft);
}

.c-page-title__visual {
  position: relative;
  width: min(
    100% - 0.9375rem + 7.5px,
    82.5rem
  );
  width: min(
    100% - var(--wp--preset--spacing--15) + 7.5px,
    var(--wp--preset--layout--hero-image-max)
  );
  margin-left: 0.9375rem;
  margin-left: var(--wp--preset--spacing--15);
}

.c-page-title__image {
  display: block;
  width: 100%;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
  border-bottom-left-radius: 3.125rem;
  border-bottom-left-radius: var(--wp--preset--spacing--50);
}

/* 写真の右下に重なる薄い英語。写真の右端からはみ出す */
.c-page-title__ghost {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.875rem, 0.375rem + 6vw, 5.625rem);
  font-size: var(--wp--preset--font-size--h1-ghost);
  font-weight: 700;
  line-height: 1;
  color: #f1f9ef;
  color: var(--wp--preset--color--background-soft);
  letter-spacing: 0.1em;
  letter-spacing: var(--wp--preset--letter-spacing--x-wide);
  white-space: nowrap;
  opacity: 0.7;
  translate: 0 20%;
}

.c-page-title__heading {
  margin: 3.75rem 0 0;
  margin: var(--wp--preset--spacing--60) 0 0;
  font-size: clamp(1.5625rem, 0.6875rem + 3.5vw, 3.75rem);
  font-size: var(--wp--preset--font-size--h1);
  font-weight: 700;
  line-height: 1.5;
  line-height: var(--wp--preset--line-height--normal);
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
}

.c-page-title__sub {
  margin: 0.3125rem 0 0;
  margin: var(--wp--preset--spacing--5) 0 0;
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-family: var(--wp--preset--font-family--heading);
  font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5625rem);
  font-size: var(--wp--preset--font-size--h1-sub);
  font-weight: 700;
  line-height: 40px;
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  letter-spacing: 0.1em;
  letter-spacing: var(--wp--preset--letter-spacing--x-wide);
}

@media (min-width: 768px) {
  .c-page-title__visual {
    width: min(
      100% - clamp(0.9375rem, -0.6875rem + 6.5vw, 5rem) + 41px,
      82.5rem
    );
    width: min(
      100% - var(--wp--preset--layout--container-gutter) + 41px,
      var(--wp--preset--layout--hero-image-max)
    );

    /* 1400px より広い画面では、中央に置いた本文の枠（container-max）の左端に写真の左端を合わせる */
    margin-left: max(
      clamp(0.9375rem, -0.6875rem + 6.5vw, 5rem),
      calc((100% - 77.5rem) / 2)
    );
    margin-left: max(
      var(--wp--preset--layout--container-gutter),
      calc((100% - var(--wp--preset--layout--container-max)) / 2)
    );
  }

  .c-page-title__image {
    height: 300px;
  }

  .c-page-title__heading {
    margin-top: 6.25rem;
    margin-top: var(--wp--preset--spacing--100);
  }

  .c-page-title__sub {
    margin-top: 1.25rem;
    margin-top: var(--wp--preset--spacing--20);
  }
}
}
@layer components{
/*
 * Figma: Page Navigation（設定 3_Button）。丸 40×40、間隔 10px。
 * 数字は Outfit Bold 18px。現在のページは緑丸 + 白、ほかは白丸 + 緑。前後は黒丸 + 白い矢印（7×15）
 */
.c-pagination {
  display: flex;
  gap: 0.625rem;
  gap: var(--wp--preset--spacing--10);
  align-items: center;
  justify-content: center;
}

.c-pagination__item,
.c-pagination__arrow {
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border-radius: var(--wp--preset--radius--pill);
  transition: opacity 0.2s;
}

.c-pagination__item {
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.125rem;
  font-size: var(--wp--preset--font-size--pagination);
  font-weight: 700;
  line-height: 1;
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  letter-spacing: 0.05em;
  letter-spacing: var(--wp--preset--letter-spacing--wide);
  -webkit-text-decoration: none;
  text-decoration: none;
  background-color: #ffffff;
  background-color: var(--wp--preset--color--white);
}

  .c-pagination__item[aria-current="page"] {
    color: #ffffff;
    color: var(--wp--preset--color--white);
    background-color: #22bd61;
    background-color: var(--wp--preset--color--primary);
  }

.c-pagination__arrow {
  color: #ffffff;
  color: var(--wp--preset--color--white);
  background-color: #252525;
  background-color: var(--wp--preset--color--text);
}

  .c-pagination__arrow svg {
    display: block;
    width: 7px;
    height: 15px;
  }

.c-pagination__arrow--prev svg {
  transform: scaleX(-1);
}

@media (hover: hover) {
  .c-pagination a:hover {
    opacity: 0.8;
  }
}
}
@layer components{
/* Figma: Accordion。状態は aria-expanded で持つ */
.c-accordion {
  border-top: 1px solid #e0e0e0;
  border-top: 1px solid var(--wp--preset--color--border);
}

.c-accordion__item {
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.c-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.875rem 0;
  padding: var(--wp--preset--spacing--30) 0;
  font-size: clamp(0.9375rem, 0.8625rem + 0.3vw, 1.125rem);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  text-align: left;
}

  .c-accordion__trigger::after {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    content: "";
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg);
    transition: transform 0.2s;
  }

  .c-accordion__trigger[aria-expanded="true"]::after {
    transform: rotate(-135deg);
  }

.c-accordion__panel {
  padding-bottom: 1.875rem;
  padding-bottom: var(--wp--preset--spacing--30);
}
}
@layer components{
/*
 * 記事本文（WordPress の the_content() 出力）。
 * 中の要素にクラスは付かないため要素セレクタで装飾する。
 * :where() で詳細度を 0 にし、後からブロック用スタイルを足しても衝突しないようにする。
 * h1 は本文の外（記事タイトル）にあるためここには書かない。
 */
.entry-content > * + * {
  margin-top: 1.875rem;
  margin-top: var(--wp--preset--spacing--30);
}

/* 見出し（Figma 07_PC_/news/id-{$id}/: h2 20px Medium / h3 18px Medium / h4 15px Medium。上 60px。下線なし） */
.entry-content :where(h2) {
  margin-top: 3.75rem;
  margin-top: var(--wp--preset--spacing--60);
  font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5625rem);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 500;
}

.entry-content :where(h3) {
  margin-top: 3.75rem;
  margin-top: var(--wp--preset--spacing--60);
  font-size: clamp(0.9375rem, 0.8625rem + 0.3vw, 1.125rem);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
}

.entry-content :where(h4) {
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--entry);
  font-weight: 500;
}

/* 本文 15px / 28px（Figma）。均等割付は本文段落だけ */
.entry-content :where(p) {
  font-size: 0.9375rem;
  font-size: var(--wp--preset--font-size--entry);
  line-height: 1.87;
  line-height: var(--wp--preset--line-height--entry);
  text-align: justify;
}

.entry-content :where(a) {
  font-weight: 500;
  color: #22bd61;
  color: var(--wp--preset--color--primary);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

/* CJK に斜体が無いため em は太さで区別（Figma: Medium） */
.entry-content :where(em) {
  font-style: normal;
  font-weight: 500;
}

.entry-content :where(strong) {
  font-weight: 700;
}

.entry-content :where(ul, ol) {
  padding-left: 1.5em;
}

.entry-content :where(ul) {
  list-style: square; /* Figma は ■ */
}

.entry-content :where(ol) {
  list-style: decimal;
}

.entry-content :where(li) {
  line-height: 2; /* Figma: 行ピッチ 30px */
}

.entry-content :where(blockquote) {
  margin-left: 0;
  margin-right: 0; /* Figma は装飾なし（“引用” のテキストのみ） */
}

.entry-content :where(table) {
  width: 100%;
  border-collapse: collapse;
}

.entry-content :where(th, td) {
  min-width: 120px;
  padding: 0.625rem;
  padding: var(--wp--preset--spacing--10);
  text-align: left;
  border: 1px solid #e0e0e0;
  border: 1px solid var(--wp--preset--color--border);
}

.entry-content :where(th) {
  font-weight: 500;
  background-color: #e7f6ed;
  background-color: var(--wp--preset--color--table-head);
}

/* 表が幅に入らないときは横スクロール（SP の 5 列など）。WordPress の table ブロックは figure.wp-block-table で包まれる */
.entry-content :where(.wp-block-table, .table-wrap) {
  overflow-x: auto;
}

/* 上の余白は「.entry-content > * + *」に任せる（margin: 0 にすると写真や表の上の間隔が消える） */
.entry-content :where(figure) {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

.entry-content :where(figcaption) {
  margin-top: 0.625rem;
  margin-top: var(--wp--preset--spacing--10);
  font-size: 0.8125rem;
  font-size: var(--wp--preset--font-size--small);
  color: #666666;
  color: var(--wp--preset--color--text-muted);
}

.entry-content :where(img) {
  max-width: 100%;
  height: auto;
}

.entry-content :where(hr) {
  border: 0;
  border-top: 1px solid #e0e0e0;
  border-top: 1px solid var(--wp--preset--color--border);
}

.entry-content :where(code) {
  padding: 0.1em 0.4em;
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  font-size: var(--wp--preset--font-size--small);
  background-color: #f1f9ef;
  background-color: var(--wp--preset--color--background-soft);
  border-radius: 0.3125rem;
  border-radius: var(--wp--preset--radius--small);
}

.entry-content :where(pre) {
  padding: 1.875rem;
  padding: var(--wp--preset--spacing--30);
  overflow-x: auto;
  background-color: #f1f9ef;
  background-color: var(--wp--preset--color--background-soft);
  border-radius: 0.3125rem;
  border-radius: var(--wp--preset--radius--small);
}
}
@layer utilities{
/* 視覚的に隠す（読み上げには残す） */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden; /* clip が無い iOS 15 以前の予備 */
  overflow: clip;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* Figma で文字詰め（palt）が入っているテキストにだけ当てる */
.u-palt {
  font-feature-settings: "palt";
}

/* 均等割付は本文段落にだけ。html には書かない */
.u-justify {
  text-align: justify;
}

/* 改行位置の切り替え。<br class="u-sp"> は SP だけ、<br class="u-pc"> は PC だけ改行する */
.u-pc {
  display: none;
}

@media (min-width: 768px) {
  .u-sp {
    display: none;
  }
}

/* PC 用の強制改行は 1400px カンバス前提なので、1200px 以上だけ効かせる */
@media (min-width: 1200px) {
  .u-pc {
    display: inline;
  }
}
}