@charset "UTF-8";
/* ==========================================================================
   GREENROOM CO. ／ 下層ページ
   PCの寸法はデザイン（幅1366px）の値を calc(var(--u) * 値) で書く。文字サイズは common.css の --fz-* だけを使う
   見出し＞本文 の大小は必ず守る（見出し d4/h3/h4 ＞ 本文 m ＞ 補足 s）
   ========================================================================== */
:root {
  --c-red: #ea5242;     /* お問合せ・ENTRY・送信のボタン、選択中の職種 */
  --c-field: #f0efe9;   /* 入力欄の地 */
  --c-line: #e2dfd8;    /* 表の罫線 */
  --c-error: #d93025;
}

/* --------------------------------------------------------------------------
   ページの見出し（GREENROOM CO. ＋ 英字の大見出し）
   -------------------------------------------------------------------------- */
.c-page-head { padding: calc(var(--header-h) + 2.4rem) var(--gutter) 2rem; text-align: center; border-bottom: 1px solid var(--c-ink); }
.c-page-head__logo { display: block; width: 12rem; margin: 0 auto; }
.c-page-head__title { margin-top: 0.6rem; font-size: var(--fz-d2); }
@media (min-width: 1024px) {
  .c-page-head { padding: calc(var(--header-h) + var(--u) * 24) 0 calc(var(--u) * 20); }
  .c-page-head__logo { width: calc(var(--u) * 222); }
  .c-page-head__title { margin-top: calc(var(--u) * 6); }
}

/* 下層の本文の共通 */
.p-sub { padding-bottom: 8rem; }
.p-sub__lead { padding: 4rem var(--gutter) 0; font-size: var(--fz-l); font-weight: var(--fw-light); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); }
.c-h2 { font-size: var(--fz-d4); }
.c-h2--center { text-align: center; }
.c-text { font-size: var(--fz-m); font-weight: var(--fw-light); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.c-text p + p { margin-top: 1.4em; }
@media (min-width: 1024px) {
  .p-sub { padding-bottom: calc(var(--u) * 120); }
  .p-sub__lead { padding: calc(var(--u) * 56) calc(var(--u) * 100) 0; }
}

/* 赤い丸ボタン（お問合せ・ENTRY・送信） */
.c-btn-red {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18rem; height: 3.6rem; padding: 0 2rem; border-radius: 99px;
  background: var(--c-red); color: var(--c-white); border: 1.5px solid var(--c-red);
  font-size: var(--fz-s); font-weight: 500; letter-spacing: 0.1em;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.c-btn-red:active { background: var(--c-white); color: var(--c-red); }
.c-btn-red--lg { min-width: 23rem; height: 4.8rem; font-size: var(--fz-h4); }
.c-btn-red[disabled] { background: #c9c6c0; border-color: #c9c6c0; color: var(--c-white); cursor: not-allowed; }
@media (min-width: 1024px) {
  .c-btn-red { min-width: calc(var(--u) * 200); height: max(3.6rem, calc(var(--u) * 40)); }
  .c-btn-red--lg { min-width: calc(var(--u) * 240); height: max(4.8rem, calc(var(--u) * 52)); }
}
@media (hover: hover) and (min-width: 1024px) {
  .c-btn-red:not([disabled]):hover { background: var(--c-white); color: var(--c-red); }
}

/* --------------------------------------------------------------------------
   NEWS（一覧のみ。記事ごとのページは作らない）
   -------------------------------------------------------------------------- */
.p-news-list { padding: 4rem var(--gutter) 0; }
.p-news-list__item { display: grid; gap: 2rem; scroll-margin-top: calc(var(--header-h) + 2rem); }
.p-news-list__item + .p-news-list__item { margin-top: 6.4rem; padding-top: 6.4rem; border-top: 1px solid var(--c-line); }
.p-news-list__thumb { overflow: hidden; }
.p-news-list__thumb img { width: 100%; height: auto; }
.p-news-list__date { font-family: var(--ff-en); font-size: var(--fz-s); letter-spacing: 0.06em; }
.p-news-list__title { margin-top: 0.6rem; font-size: var(--fz-h3); font-weight: 500; letter-spacing: 0.04em; line-height: var(--lh-head); }
.p-news-list__body { margin-top: 1.6rem; }
.p-news-list__body a { color: var(--c-teal); text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 1024px) {
  .p-news-list { padding: calc(var(--u) * 82) calc(var(--u) * 180) 0; }
  .p-news-list__item { grid-template-columns: calc(var(--u) * 360) 1fr; gap: calc(var(--u) * 48); align-items: start; }
  .p-news-list__item + .p-news-list__item { margin-top: calc(var(--u) * 100); padding-top: calc(var(--u) * 100); }
  .p-news-list__title { margin-top: calc(var(--u) * 12); }
  .p-news-list__body { margin-top: calc(var(--u) * 24); }
}

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */
.p-about__sec { border-bottom: 1px solid var(--c-ink); }
.p-about__sec:last-child { border-bottom: 0; }
.p-about__inner { padding: 4.8rem var(--gutter); }
.p-about__sec .c-text { margin-top: 2rem; }
.p-about__outline { display: grid; }
.p-about__table { margin-top: 2.4rem; display: grid; grid-template-columns: 7.2em 1fr; gap: 1.4rem 1.2rem; font-size: var(--fz-m); letter-spacing: var(--ls-body); line-height: 1.7; }
.p-about__table dt { color: #77716f; }
.p-about__map { min-height: 32rem; border-top: 1px solid var(--c-ink); }
.p-about__map iframe { display: block; width: 100%; height: 100%; min-height: 32rem; border: 0; }
.p-about__founder { display: grid; gap: 3.2rem; }
.p-about__founder-name { margin-top: 1.2rem; font-size: var(--fz-h4); font-weight: 500; letter-spacing: 0.06em; }
.p-about__founder-photo { width: 20rem; margin: 0 auto; border-radius: 50%; overflow: hidden; aspect-ratio: 1; }
.p-about__founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.p-about__office { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.4rem; }
.p-about__office img { width: 100%; aspect-ratio: 564 / 374; object-fit: cover; }
@media (min-width: 1024px) {
  .p-about__inner { padding: calc(var(--u) * 50) calc(var(--u) * 112) calc(var(--u) * 80); }
  .p-about__sec .c-text { margin-top: calc(var(--u) * 26); }
  .p-about__outline { grid-template-columns: 1fr 1fr; }   /* 会社概要と地図は半分ずつ */
  .p-about__outline .p-about__inner { padding-bottom: calc(var(--u) * 50); border-right: 1px solid var(--c-ink); }
  .p-about__table { margin-top: calc(var(--u) * 26); gap: calc(var(--u) * 16); }
  .p-about__map, .p-about__map iframe { min-height: 0; border-top: 0; }
  .p-about__founder { grid-template-columns: 1fr calc(var(--u) * 261); gap: calc(var(--u) * 80); align-items: center; }
  .p-about__founder-photo { width: 100%; }
  .p-about__founder .c-text { max-width: calc(var(--u) * 680); }
  .p-about__office { gap: calc(var(--u) * 35); margin-top: calc(var(--u) * 32); }
}

/* --------------------------------------------------------------------------
   SERVICE
   -------------------------------------------------------------------------- */
.p-service__sec { border-bottom: 1px solid var(--c-ink); padding: 4.8rem var(--gutter); }
.p-service__sec:last-child { border-bottom: 0; }
.p-service__row { display: grid; gap: 2.4rem; }
.p-service__media { display: grid; gap: 1.6rem; }
.p-service__media img { width: 100%; height: auto; }
.p-service__tents { display: grid; grid-template-columns: 1.3fr 0.9fr 1.1fr; gap: 1rem; align-items: end; }
.p-service__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 3.2rem; }
.p-service__btns-gap { height: 1.2rem; }
.p-service__list { margin-top: 2.4rem; font-family: var(--ff-en); font-weight: var(--fw-title); font-size: var(--fz-d5); line-height: 1.25; letter-spacing: 0.04em; }

/* 数字で見せる（開催回数・来場者数 …）。画面に入ると数字がスロットのように回って止まる */
.p-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.6rem;
  margin-top: 3.2rem; padding: 2.4rem 2rem; border: 1px solid var(--c-ink); border-radius: 2rem;
}
.p-stats__num { display: flex; align-items: baseline; font-size: calc(var(--fz-d4) * 1.1); white-space: nowrap; }
.p-stats__num small { margin-left: 0.15em; font-family: var(--ff-ja); font-size: var(--fz-s); font-weight: 500; font-size-adjust: none; }
.p-stats__label { display: block; margin-top: 0.4rem; font-size: var(--fz-s); letter-spacing: 0.06em; }
.c-count__digit { display: inline-block; height: 1em; overflow: hidden; line-height: 1; vertical-align: bottom; }
.c-count__strip { display: block; }
.c-count__strip > span { display: block; height: 1em; }
@media (min-width: 1024px) {
  .p-service__sec { padding: calc(var(--u) * 56) calc(var(--u) * 72) calc(var(--u) * 64) calc(var(--u) * 112); }
  .p-service__row { grid-template-columns: 1fr calc(var(--u) * 573); gap: calc(var(--u) * 50); }
  .p-service__media { gap: calc(var(--u) * 32); }
  .p-service__tents { gap: calc(var(--u) * 16); }
  .p-service__btns { gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 56); }
  .p-service__btns-gap { height: calc(var(--u) * 20); }
  .p-service__list { margin-top: calc(var(--u) * 40); }
  .p-stats { grid-template-columns: repeat(6, auto); justify-content: space-between; gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 48); padding: calc(var(--u) * 30) calc(var(--u) * 40); border-radius: calc(var(--u) * 30); }
  .p-stats__num { font-size: calc(var(--u) * 52); }
}

/* --------------------------------------------------------------------------
   ART GALLERY
   -------------------------------------------------------------------------- */
.p-gallery__block { padding: 0 var(--gutter); margin-top: 4.8rem; }
.p-gallery__block .c-h2 { margin-bottom: 2.4rem; }
.p-gallery__shop + .p-gallery__shop { margin-top: 5.6rem; }
.p-gallery__main img { width: 100%; aspect-ratio: 929 / 507; object-fit: cover; }
.p-gallery__info { display: grid; gap: 1.6rem; margin-top: 1.6rem; }
.p-gallery__map iframe { display: block; width: 100%; aspect-ratio: 498 / 302; border: 0; }
.p-gallery__name { font-size: var(--fz-d5); }
.p-gallery__address { margin-top: 1rem; font-size: var(--fz-s); line-height: 1.8; letter-spacing: var(--ls-body); }
.p-gallery__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 1.6rem; }
.p-gallery__photos img { width: 100%; aspect-ratio: 297 / 198; object-fit: cover; }
.p-artists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.2rem 1.6rem; }
.p-artists__photo { overflow: hidden; }
.p-artists__photo img { width: 100%; aspect-ratio: 263 / 176; object-fit: cover; }
.p-artists__name { margin-top: 0.8rem; text-align: center; font-family: var(--ff-en); font-size: var(--fz-h4); font-weight: var(--fw-title); letter-spacing: 0.06em; }
.p-artists__links { display: flex; justify-content: center; align-items: center; gap: 0.8rem; margin-top: 0.6rem; }
.p-artists__links .c-btn-icon { width: 2.2rem; color: var(--c-ink); }
.p-artists__links .c-btn-web { min-width: 4.8rem; height: 2.2rem; font-size: var(--fz-xs); border-color: var(--c-ink); color: var(--c-ink); }
@media (min-width: 1024px) {
  .p-gallery__block { padding: 0 calc(var(--u) * 216); margin-top: calc(var(--u) * 100); }
  .p-gallery__block .c-h2 { margin-bottom: calc(var(--u) * 64); }
  .p-gallery__shop + .p-gallery__shop { margin-top: calc(var(--u) * 140); }
  .p-gallery__info { grid-template-columns: calc(var(--u) * 498) 1fr; gap: calc(var(--u) * 24); margin-top: calc(var(--u) * 24); }
  .p-gallery__address { margin-top: calc(var(--u) * 14); }
  .p-gallery__photos { gap: calc(var(--u) * 19); margin-top: calc(var(--u) * 26); }
  .p-gallery__block--artist { padding: 0 calc(var(--u) * 100); }
  .p-artists { grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 48) calc(var(--u) * 36); }
  .p-artists__name { margin-top: calc(var(--u) * 12); }
  .p-artists__links { gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 8); }
  .p-artists__links .c-btn-icon { width: calc(var(--u) * 24); }
  .p-artists__links .c-btn-web { min-width: calc(var(--u) * 50); height: calc(var(--u) * 24); }
}

/* --------------------------------------------------------------------------
   ACTION
   -------------------------------------------------------------------------- */
.p-action__hero { display: grid; gap: 2.4rem; align-items: center; padding: 4rem var(--gutter) 0; }
.p-action__logo { width: 72%; margin: 0 auto; }
.p-action__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.2rem 1.6rem; padding: 5.6rem var(--gutter) 0; }
.p-action__item img { width: 100%; aspect-ratio: 264 / 176; object-fit: cover; }
.p-action__title { margin-top: 1.2rem; font-size: var(--fz-h4); font-weight: 600; letter-spacing: 0.04em; line-height: var(--lh-head); }
.p-action__text { margin-top: 0.4rem; font-size: var(--fz-s); line-height: 1.7; letter-spacing: var(--ls-body); }
.p-action__nums { display: grid; gap: 1.2rem; margin: 6.4rem var(--gutter) 0; }
.p-action__num { padding: 2rem 1.6rem; border: 1px solid var(--c-line); border-radius: 0.8rem; text-align: center; background: var(--c-white); }
.p-action__num strong { display: block; font-size: var(--fz-d4); color: var(--c-teal); }
.p-action__num span { display: block; margin-top: 0.6rem; font-size: var(--fz-s); font-weight: 500; letter-spacing: var(--ls-body); }
@media (min-width: 1024px) {
  .p-action__hero { grid-template-columns: 1fr calc(var(--u) * 532); gap: calc(var(--u) * 40); padding: calc(var(--u) * 60) calc(var(--u) * 110) 0 calc(var(--u) * 100); }
  .p-action__logo { width: calc(var(--u) * 460); }
  .p-action__grid { grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 60) calc(var(--u) * 36); padding: calc(var(--u) * 120) calc(var(--u) * 100) 0; }
  .p-action__title { margin-top: calc(var(--u) * 14); }
  .p-action__nums { grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 24); margin: calc(var(--u) * 120) calc(var(--u) * 100) 0; }
  .p-action__num { padding: calc(var(--u) * 28); border-radius: calc(var(--u) * 10); }
}

/* --------------------------------------------------------------------------
   RECRUIT（上の職種で下の募集要項が切り替わる。募集していない職種は灰色で押せない）
   -------------------------------------------------------------------------- */
.p-recruit__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.6rem; padding: 4rem var(--gutter) 0; }
/* button は中身を縦中央に置くので、上そろえの縦並びにする（ラベルが2行の職種で写真がずれないように） */
.p-recruit__tab { display: flex; flex-direction: column; justify-content: flex-start; align-self: start; width: 100%; text-align: center; }
.p-recruit__tab-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 1.2rem; }
.p-recruit__tab-img img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s, transform 0.8s var(--ease); }
.p-recruit__tab-label { display: block; margin-top: 1rem; font-size: var(--fz-m); font-weight: 500; letter-spacing: var(--ls-body); line-height: 1.5; transition: color 0.3s; }
.p-recruit__tab[aria-selected="true"] .p-recruit__tab-label { color: var(--c-red); }
.p-recruit__tab.is-closed { cursor: not-allowed; }
.p-recruit__tab.is-closed img { filter: grayscale(1) opacity(0.45); }
.p-recruit__tab.is-closed .p-recruit__tab-label { color: #a8a39f; }
.p-recruit__tab.is-closed .p-recruit__tab-label::after { content: "（募集終了）"; display: block; font-size: var(--fz-s); }
.p-recruit__panel { margin: 4rem var(--gutter) 0; animation: recruit-in 0.6s var(--ease); }
.p-recruit__panel[hidden] { display: none; }
@keyframes recruit-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.p-recruit__table { display: grid; grid-template-columns: 8em 1fr; border-top: 1px solid var(--c-line); font-size: var(--fz-m); letter-spacing: var(--ls-body); line-height: 1.8; }
.p-recruit__table dt, .p-recruit__table dd { padding: 1.4rem 1rem; border-bottom: 1px solid var(--c-line); }
.p-recruit__table dt { font-weight: 600; border-right: 1px solid var(--c-line); }
.p-recruit__office { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 4rem var(--gutter) 0; }
.p-recruit__office img { width: 100%; aspect-ratio: 306 / 205; object-fit: cover; }
.p-recruit__entry { margin-top: 4rem; text-align: center; }
.p-recruit__entry .c-btn-red { font-family: var(--ff-en); font-size: var(--fz-h3); font-weight: 600; letter-spacing: 0.08em; }
@media (min-width: 1024px) {
  .p-recruit__tabs { grid-template-columns: repeat(4, calc(var(--u) * 255)); justify-content: center; gap: calc(var(--u) * 30); padding: calc(var(--u) * 48) 0 0; }
  .p-recruit__tab-img { border-radius: calc(var(--u) * 14); }
  .p-recruit__tab-label { margin-top: calc(var(--u) * 16); }
  .p-recruit__panel { margin: calc(var(--u) * 84) calc(var(--u) * 224) 0; }
  .p-recruit__table { grid-template-columns: calc(var(--u) * 196) 1fr; }
  .p-recruit__table dt, .p-recruit__table dd { padding: calc(var(--u) * 20) calc(var(--u) * 24); }
  .p-recruit__office { gap: calc(var(--u) * 24); margin: calc(var(--u) * 64) calc(var(--u) * 224) 0; }
  .p-recruit__entry { margin-top: calc(var(--u) * 64); }
}
@media (hover: hover) and (min-width: 1024px) {
  .p-recruit__tab:not(.is-closed):hover img { transform: scale(1.05); }
  .p-recruit__tab:not(.is-closed):hover .p-recruit__tab-label { color: var(--c-red); }
}

/* --------------------------------------------------------------------------
   フォーム（ENTRY・CONTACT）
   - フォーカス中：枠が濃くなり、地が白、外側に薄い緑の光
   - エラー：赤枠＋薄い赤の地、欄の直下に赤字。必須が埋まるまで送信ボタンは押せない
   -------------------------------------------------------------------------- */
.p-form { padding: 4rem var(--gutter) 0; }
.p-form__note { font-size: var(--fz-s); line-height: 1.9; letter-spacing: var(--ls-body); }
.p-form__req { color: var(--c-red); margin-left: 0.2em; }
.p-form__grid { display: grid; gap: 2.4rem; margin-top: 3.2rem; }
.p-form__label { display: block; font-size: var(--fz-s); font-weight: 600; letter-spacing: var(--ls-body); }
.p-form__control {
  display: block; width: 100%; margin-top: 0.8rem; padding: 1.2rem 1.4rem;
  border: 1.5px solid transparent; border-radius: 0.6rem; background: var(--c-field);
  font-size: 1.6rem; line-height: 1.5; appearance: none; -webkit-appearance: none; outline: none;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.p-form__control::placeholder { color: #aaa49e; }
select.p-form__control {
  padding-right: 4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233f3a3a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.6rem center; background-size: 1.2rem;
}
textarea.p-form__control { min-height: 18rem; resize: vertical; }
.p-form__control:hover { border-color: #cfcbc3; }
.p-form__control:focus { border-color: var(--c-ink); background-color: var(--c-white); box-shadow: 0 0 0 4px rgb(75 187 180 / 0.22); }
.p-form__field.is-error .p-form__control { border-color: var(--c-error); background-color: #fdf3f2; }
.p-form__field.is-error .p-form__control:focus { box-shadow: 0 0 0 4px rgb(217 48 37 / 0.15); }
.p-form__error { display: none; margin-top: 0.6rem; font-size: var(--fz-s); color: var(--c-error); }
.p-form__field.is-error .p-form__error { display: block; }
.p-form__file { display: block; margin-top: 0.8rem; font-size: 1.6rem; }
.p-form__file::file-selector-button {
  margin-right: 1.2rem; padding: 0.8rem 1.6rem; border: 1.5px solid var(--c-ink); border-radius: 99px;
  background: var(--c-white); color: var(--c-ink); font: inherit; font-size: var(--fz-s); cursor: pointer; transition: background-color 0.3s, color 0.3s;
}
.p-form__file::file-selector-button:hover { background: var(--c-ink); color: var(--c-white); }
/* チェックボックス：四角と文字の上下の中心をそろえる */
.p-form__check { display: inline-flex; align-items: center; gap: 1rem; font-size: var(--fz-m); line-height: 1.5; cursor: pointer; }
.p-form__check input {
  flex: none; position: relative; width: 2rem; height: 2rem; margin: 0;
  border: 1.5px solid var(--c-ink); border-radius: 0.4rem; background: var(--c-white);
  appearance: none; -webkit-appearance: none; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s;
}
.p-form__check input::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 0.55rem; height: 1rem;
  border: solid var(--c-white); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform 0.2s var(--ease);
}
.p-form__check input:checked { background: var(--c-ink); }
.p-form__check input:checked::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.p-form__check input:focus-visible { outline: none; box-shadow: 0 0 0 4px rgb(75 187 180 / 0.3); }
.p-form__field.is-error .p-form__check input { border-color: var(--c-error); }
.p-form__check button { text-decoration: underline; text-underline-offset: 0.25em; transition: color 0.3s; }
.p-form__check button:hover { color: var(--c-teal); }
.p-form__submit { margin-top: 4rem; text-align: center; }
.p-form__caution { margin-top: 5.6rem; padding-top: 3.2rem; border-top: 1px solid var(--c-line); }
.p-form__caution-title { font-size: var(--fz-h4); font-weight: 600; letter-spacing: var(--ls-body); }
.p-form__caution p { margin-top: 1rem; font-size: var(--fz-s); line-height: 1.9; letter-spacing: var(--ls-body); }
/* Contact Form 7 のとき（WordPress）。入れ物（.wpcf7-…）の分だけで、見た目は上と同じにする */
.p-form .wpcf7-form-control-wrap { display: block; }
.p-form__check label { display: inline-flex; align-items: center; gap: 1rem; cursor: pointer; }
.p-form__check .wpcf7-list-item { margin: 0; }
.wpcf7-not-valid-tip { display: block; margin-top: 0.6rem; font-size: var(--fz-s); color: var(--c-error); }
.p-form__control.wpcf7-not-valid { border-color: var(--c-error); background-color: #fdf3f2; }
.wpcf7 form .wpcf7-response-output { margin: 2.4rem 0 0; padding: 1.2rem 1.6rem; border: 1.5px solid var(--c-error); border-radius: 0.6rem; font-size: var(--fz-s); line-height: 1.7; color: var(--c-error); text-align: center; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--c-teal); color: var(--c-ink); }
/* 迷惑な自動送信よけの欄（人には見えない。入力があると送信を断る） */
.p-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 1024px) {
  .p-form { padding: calc(var(--u) * 56) calc(var(--u) * 210) 0; }
  .p-form__grid { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 36) calc(var(--u) * 30); margin-top: calc(var(--u) * 56); }
  .p-form__field--full { grid-column: 1 / -1; }
  .p-form__submit { margin-top: calc(var(--u) * 56); }
  .p-form__caution { margin-top: calc(var(--u) * 80); padding-top: calc(var(--u) * 40); }
}

/* モーダル（プライバシーポリシー・My GREENROOM）。×か背景のクリックで閉じる */
.c-modal { width: min(90vw, 72rem); max-height: 80vh; padding: 0; border: 0; border-radius: 0.8rem; background: var(--c-bg); color: var(--c-ink); }
.c-modal::backdrop { background: rgb(0 0 0 / 0.55); }
.c-modal__inner { padding: 4.8rem 2.4rem 3.2rem; overflow-y: auto; max-height: 80vh; }
.c-modal__close { position: absolute; right: 1.2rem; top: 1.2rem; width: 4rem; height: 4rem; font-size: 2.8rem; line-height: 1; transition: color 0.3s; }
.c-modal__close:hover { color: var(--c-teal); }
.c-modal h2 { font-size: var(--fz-h3); font-weight: 600; margin-bottom: 2rem; }
.c-modal h3 { margin-top: 2rem; font-size: var(--fz-h4); font-weight: 600; }
.c-modal p { margin-top: 0.6rem; font-size: var(--fz-s); line-height: 1.9; }

/* --------------------------------------------------------------------------
   My GREENROOM（＋を押すと、その場で紹介文が開く）
   -------------------------------------------------------------------------- */
.p-mygr__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem 2rem; padding: 4.8rem var(--gutter) 0; }
.p-mygr__item { text-align: center; }
.p-mygr__photo { width: 80%; margin: 0 auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0.4rem 0.6rem 1.2rem rgb(0 0 0 / 0.15); }
.p-mygr__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-mygr__name { margin-top: 1.6rem; font-size: var(--fz-h4); font-weight: 500; letter-spacing: 0.06em; }
.p-mygr__role { margin-top: 0.2rem; font-size: var(--fz-xs); font-weight: 500; letter-spacing: 0.1em; line-height: 1.6; }
.p-mygr__open {
  display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-top: 1rem;
  border-radius: 50%; background: var(--c-ink); color: var(--c-white); font-size: 1.8rem; line-height: 1;
  transition: transform 0.4s var(--ease), background-color 0.3s;
}
.p-mygr__open:active { background: var(--c-teal); }
.p-mygr__dialog .c-modal__inner { display: grid; gap: 2.4rem; }
.p-mygr__dialog-photo { width: 16rem; margin: 0 auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.p-mygr__dialog-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .p-mygr__grid { grid-template-columns: repeat(4, calc(var(--u) * 214)); justify-content: center; gap: calc(var(--u) * 90) calc(var(--u) * 70); padding: calc(var(--u) * 100) 0 0; }
  .p-mygr__photo { width: 100%; }
  .p-mygr__name { margin-top: calc(var(--u) * 26); }
  .p-mygr__open { width: calc(var(--u) * 28); height: calc(var(--u) * 28); margin-top: calc(var(--u) * 14); }
  .p-mygr__dialog .c-modal__inner { grid-template-columns: 20rem 1fr; padding: 5.6rem 4.8rem 4.8rem; }
  .p-mygr__dialog-photo { width: 100%; }
}
@media (hover: hover) and (min-width: 1024px) {
  .p-mygr__open:hover { transform: rotate(90deg); background: var(--c-teal); }
}

/* --------------------------------------------------------------------------
   送信完了・プライバシーポリシー・404
   -------------------------------------------------------------------------- */
.p-simple { padding: 6.4rem var(--gutter) 0; text-align: center; }
.p-simple .c-text { margin-top: 2rem; }
.p-simple a:not(.c-btn-red) { text-decoration: underline; text-underline-offset: 0.2em; }
.p-simple__btn { margin-top: 4rem; }
.p-policy { padding: 4.8rem var(--gutter) 0; }
.p-policy h2 { margin-top: 3.2rem; font-size: var(--fz-h4); font-weight: 600; letter-spacing: var(--ls-body); }
.p-policy p, .p-policy li { margin-top: 0.8rem; }
@media (min-width: 1024px) {
  .p-simple { padding: calc(var(--u) * 120) calc(var(--u) * 200) 0; }
  .p-policy { padding: calc(var(--u) * 80) calc(var(--u) * 260) 0; }
}