@charset "UTF-8";
/* ==========================================================================
   下層ページ（よくある質問／お問合せ／お問合せ完了／軽井沢高原教会）
   - 文字サイズ・行の高さ・字間・余白・色は common.css の変数だけを使う
   - 画面幅の区切りはトップと同じ（768px／1000px／1280px）
   ========================================================================== */

/* --------------------------------------------------------------------------
   共通：星空の背景（ページ全体に敷く。画像はトップと同じ）
   -------------------------------------------------------------------------- */
.sub {
  position: relative;
  background: var(--c-sky);
}

.sub::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../image/top/sky_top_sp.jpg") center top / 100% auto repeat-y;
  pointer-events: none;
}

/* 下端は、デザインどおり「星空がフッター写真に向かって青く明るくなる」。
   トップの星空（下端に木のシルエットがある画像。木のてっぺんは下から約300u）を、シルエットが隠れる位置まで下げて敷く。
   フッター写真の上端は、デザインどおりまっすぐ（下層は、写真の上を紺色でぼかさない） */
.sub::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: calc(var(--u) * 420);
  max-height: 100%;
  background: url("../image/top/sky_sp.jpg") center bottom calc(var(--u) * -310) / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  pointer-events: none;
}

.sub + .l-footer::before,
.sub + .l-footer .footer-photos::before {
  content: none;
}

.sub > * {
  position: relative;
  z-index: 1;
}

/* ページの題と導入文 */
.sub-head {
  padding: 8.4rem var(--gutter) 2.8rem;
}

.sub-head .c-heading {
  padding-inline: 0;
  letter-spacing: var(--ls-m);
}

.sub-head__lead {
  margin-top: 1.6rem;
}

/* --------------------------------------------------------------------------
   よくある質問
   上の題・導入文・分類のボタンは、濃い紺の面にまとめる。
   分類のボタンは、画面を動かしても上に残る（消えない）
   -------------------------------------------------------------------------- */
.faq-head {
  background: var(--c-card);
}

/* 分類のボタンを上に残す（position: sticky）ために、このページだけ「はみ出しを切る」方法を変える。
   common.css の overflow: hidden のままだと、sticky が効かない */
.page-faq .l-page {
  overflow: clip;
}

/* 上に残るとき、画面上部のメニュー（スマホ：右上のボタン／PC：横並びのメニュー）と重ならないよう、
   そのぶん下げた位置で止める（--faq-top）。
   ボタンの大きさは、数が増減しても変わらない（文字＋左右の余白で決まる。文字がはみ出さない） */
.faq-tabs {
  --faq-top: 6.2rem;
  position: sticky;
  top: var(--faq-top);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 左から並べる（数が増えても同じルール。2026-10-09） */
  gap: 1rem;
  padding: 1.2rem var(--gutter) 3.2rem;
  border-radius: 0 0 1.2rem 1.2rem;
  background: var(--c-card);
}

/* 上に止まっている間は、その上（ヘッダーのある帯）にも同じ座布団を敷く。
   敷かないと、ヘッダーの後ろを質問の文字が流れて、メニューやロゴと重なって見える。
   .is-stuck は JS（sub-page.js）が、止まっている間だけ付ける */
.faq-tabs.is-stuck::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--faq-top);
  background: var(--c-card);
}

.faq-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  min-height: 3rem;
  padding: 0.2rem 1.6rem;
  border: 1px solid var(--c-gold);
  border-radius: 99rem;
  color: var(--c-gold);
  font-family: var(--ff-mincho);
  font-size: var(--fz-2);
  font-weight: 600; /* ボタンの上の明朝は太いほう */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-s);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), filter 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

/* 反応（PC：乗せたとき／スマホ：触れている間）はボタンと同じ */
.faq-tab:active {
  filter: var(--lit-bright);
  box-shadow: var(--lit-glow);
  transition-duration: var(--lit-in);
}

@media (hover: hover) and (pointer: fine) {
  .faq-tab:hover {
    filter: var(--lit-bright);
    box-shadow: var(--lit-glow);
  }
}

.faq-tab[aria-selected="true"] {
  border-color: transparent;
  background: var(--grad-gold);
  color: var(--c-ink);
}

.faq {
  padding: 3.2rem 0 8rem;
}

.faq-group__title {
  padding-inline: var(--gutter);
  font-family: var(--ff-mincho);
  font-size: var(--fz-4);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-l);
}

.faq-group + .faq-group {
  margin-top: 6rem;
}

/* 分類を切り替えたとき、中身はふわっと現れる */
.js .faq-group.is-current {
  animation: faq-in 0.9s var(--ease) both;
}

@keyframes faq-in {
  from {
    opacity: 0;
    translate: 0 1.6rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.faq-list {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.4rem;
  padding-inline: calc(var(--gutter) - 0.3rem);
}

.faq-item {
  border-radius: 0.8rem;
  background: var(--c-card);
}

.faq-item__q {
  position: relative;
  display: block;
  padding: 1.4rem 5rem 1.6rem 1.4rem;
  cursor: pointer;
  list-style: none;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__num {
  display: block;
  font-family: var(--ff-mincho);
  font-size: var(--fz-4);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-m);
}

.faq-item__a .faq-item__block + .faq-item__block {
  margin-top: 1.6rem;
}

.faq-item__title {
  display: block;
  margin-top: 1rem;
  color: var(--c-gold);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-m);
}

/* ＋／− の印（縦の線が回って横の線に重なり、− になる。薄くはしない） */
.faq-item__icon {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  width: 1.8rem;
  height: 1.8rem;
  color: var(--c-gold);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: rotate 0.5s var(--ease);
}

.faq-item__icon::after {
  rotate: 90deg;
}

.faq-item[open] .faq-item__icon::after {
  rotate: 0deg;
}

/* 答え：開閉のとき、高さをなめらかに変える。
   JSが動くときは、開いている印（.is-open）で高さを切り替える。
   JSが動かないときは、ブラウザ標準の開閉（動きなし）になる */
.faq-item__a {
  display: grid;
  grid-template-rows: 1fr;
}

.js .faq-item__a {
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

.js .faq-item.is-open .faq-item__a {
  grid-template-rows: 1fr;
}

.js .faq-item[open]:not(.is-open) .faq-item__icon::after {
  rotate: 90deg;
}

.faq-item__a-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 1.6rem 0 1.4rem;
  line-height: var(--lh-loose);
}

.faq-item__a-inner::after {
  content: "";
  display: block;
  height: 2rem;
}

.js .faq-item__a-inner {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.js .faq-item.is-open .faq-item__a-inner {
  opacity: 1;
}

.faq-item__a p + p,
.faq-item__a ul + p,
.faq-item__a p + ul {
  margin-top: 1.2rem;
}

.faq-item__a li {
  position: relative;
  padding-left: 1.2em;
}

.faq-item__a li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.faq-item__a a {
  color: var(--c-gold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   お問合せフォーム
   入力欄の文字は 16px 以上（iPhone で入力時に画面が拡大するのを防ぐ）
   -------------------------------------------------------------------------- */
.contact {
  padding: 0 var(--gutter) 9rem;
}

.form-field + .form-field {
  margin-top: 3.2rem;
}

.form-label {
  display: block;
  letter-spacing: var(--ls-m);
}

.form-req {
  margin-left: 0.8em;
  color: var(--c-gold);
  font-size: var(--fz-1);
}

.form-input,
.form-textarea {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0 1.2rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: inherit;
  font-size: 1.6rem;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-s);
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 0.5s var(--ease);
}

.form-input {
  height: 4.4rem;
}

.form-textarea {
  height: 22rem;
  padding-block: 1rem;
  resize: vertical;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--c-gold), var(--lit-glow);
}

.form-note {
  margin-top: 0.4rem;
  font-size: var(--fz-2);
  line-height: var(--lh-base);
}

.form-privacy {
  margin-top: 3.6rem;
  letter-spacing: var(--ls-m);
}

/* 同意のチェック（四角は自前で描く。実物のチェックボックスは重ねて隠してある） */
.form-agree {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.4rem;
  cursor: pointer;
}

.form-agree input {
  position: absolute;
  opacity: 0;
}

.form-agree__box {
  position: relative;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--c-white);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.form-agree__box::after {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0.6rem;
  width: 0.6rem;
  height: 1.2rem;
  border: solid var(--c-red);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

/* チェックした状態：四角の中は白、チェックマークは赤（入力の誤りの文字と同じ赤 --c-red） */
.form-agree input:checked + .form-agree__box {
  border-color: var(--c-white);
  background: var(--c-white);
}

.form-agree input:checked + .form-agree__box::after {
  opacity: 1;
}

.form-agree input:focus-visible + .form-agree__box {
  box-shadow: 0 0 0 2px var(--c-gold);
}

.form-agree__text {
  letter-spacing: var(--ls-m);
  transition: color 0.5s var(--ease);
}

/* 反応（PC：乗せたとき／スマホ：触れている間）：四角の線と文字が金色に */
.form-agree:active .form-agree__box {
  border-color: var(--c-gold);
  box-shadow: var(--lit-glow);
}

.form-agree:active .form-agree__text {
  color: var(--c-gold);
}

@media (hover: hover) and (pointer: fine) {
  .form-agree:hover .form-agree__box {
    border-color: var(--c-gold);
    box-shadow: var(--lit-glow);
  }

  .form-agree:hover .form-agree__text {
    color: var(--c-gold);
  }
}

.contact .c-btn {
  margin-top: 3.2rem;
}

/* 完了ページ */
.thanks {
  padding: 0 var(--gutter) 10rem;
}

.thanks .c-btn {
  margin-top: 4rem;
}

/* --------------------------------------------------------------------------
   軽井沢高原教会（白い地のページ）
   -------------------------------------------------------------------------- */
.page-church {
  background: var(--c-white);
  color: #221815;
}

.page-church .l-page {
  background: var(--c-white);
}

/* 白い地の上でもメニューボタンが見えるよう、紺色の下地を敷く */
.page-church .menu-btn {
  border-radius: 0 0 0 1.2rem;
  background: rgba(7, 8, 42, 0.55);
}

.page-church .menu-btn[aria-expanded="true"] {
  background: none;
}

.church-kv {
  position: relative;
  height: calc(var(--u) * 700);
  height: min(calc(var(--u) * 700), 100svh);
  min-height: 48rem;
  overflow: hidden;
  color: var(--c-white);
}

.church-kv__img {
  position: absolute;
  inset: 0;
}

.church-kv__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

/* 文字が読めるよう、写真にうっすら暗い幕をかける */
.church-kv__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 20, 0.22);
}

.church-kv::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 14%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--c-white));
}

.church-kv__title {
  position: absolute;
  top: 40%;
  left: 0;
  z-index: 1;
  width: 100%;
  text-align: center;
  text-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.35);
}

/* 題「軽井沢高原教会」と「SINCE 1921」の大きさは、松下さんの指定（2026-10-06）：
   題は --fz-7 の スマホ1.35倍・PC1.5倍、SINCE は --fz-2 の スマホ1.2倍・PC1.5倍。
   キャッチコピー「新たな時代に向けて」は --fz-3 の スマホ1.2倍・PC1.4倍。8段階に無い値なので、ここだけ倍率で指定している */
/* 題はロゴの画像。幅はデザインどおり（375pxの画面で 265px） */
.church-kv__title img {
  width: calc(var(--u) * 265);
  max-width: 80%;
  margin-inline: auto;
  filter: drop-shadow(0 0 1.2rem rgba(0, 0, 0, 0.35));
}

/* コピー「新たな時代に向けて」：横組み。置く場所は、縦組みだったときと同じあたり（題より下・右寄り）。
   2026-10-09 に横組みへ。10/9 は題の下の中央に置いたが、木村さんの印は右下だったので 10/10 に直した */
.church-kv__copy {
  position: absolute;
  top: 64%; /* 10/10 夜：もう少し下へ（58 → 64%） */
  right: 6%;
  z-index: 1;
  font-family: var(--ff-mincho);
  font-size: calc(var(--fz-3) * 1.2); /* 16.8px */
  font-weight: 600;
  letter-spacing: var(--ls-l);
  white-space: nowrap;
  text-shadow: 0 0 1.2rem rgba(0, 0, 0, 0.4);
}

.church-block {
  padding-top: 8rem;
}

.church-block__photo {
  width: calc(var(--u) * 313);
}

.church-block--reverse .church-block__photo {
  margin-left: auto;
  width: calc(var(--u) * 344);
}

.church-block__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.church-block__body {
  padding: 2.8rem var(--gutter) 0 calc(var(--gutter) + 0.3rem);
}

/* 見出しは本文の約1.5倍（デザインの比率 6pt：4pt）。本文は、ほかのページと同じ標準の大きさ */
.church-block__title {
  font-family: var(--ff-mincho);
  font-size: var(--fz-6);
  font-weight: 400;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-m);
}

.church-block__text {
  margin-top: 1.6rem;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-m);
}

.church-block__sub {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 4rem;
  font-family: var(--ff-mincho);
  font-size: var(--fz-4);
  font-weight: 400;
  letter-spacing: var(--ls-l);
}

.church-block__sub::after {
  content: "";
  width: 4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.church-block__info {
  margin-top: 1.6rem;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-m);
}

/* 白い地のボタン（金色の線で囲む） */
.church-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 268);
  max-width: 100%;
  min-height: 5.2rem;
  margin-top: 2.8rem;
  padding: 0.6rem 1.6rem;
  border: 2px solid var(--c-gold);
  border-radius: 99rem;
  background: var(--c-white);
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.12);
  font-family: var(--ff-mincho);
  font-size: var(--fz-2);
  font-weight: 600;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-l);
  text-align: center;
  text-decoration: none;
  transition: filter 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.church-btn:active {
  box-shadow: var(--lit-glow);
  transition-duration: var(--lit-in);
}

@media (hover: hover) and (pointer: fine) {
  .church-btn:hover {
    box-shadow: var(--lit-glow);
  }
}

/* 教会ページのフッター（内観の写真に名称とSNS、その下に写真3枚） */
.church-foot {
  margin-top: 8rem;
}

.church-foot__main {
  position: relative;
  aspect-ratio: 375 / 176;
  overflow: hidden;
}

.church-foot__main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* 「軽井沢高原教会 公式サイト」ボタンの下：SNSのアイコンだけ（黒）。上のボタンと中央を揃える（2026-10-09。名前の文字は削除） */
.church-links {
  width: calc(var(--u) * 268); /* 上のボタン（.church-btn）と同じ幅 */
  max-width: 100%;
  margin-top: 2.4rem;
  color: var(--c-ink);
}

.church-links__sns {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.church-links__sns a {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  color: inherit;
  transition: opacity 0.4s var(--ease);
}

.church-links__sns a:active {
  opacity: var(--lit-fade);
}

@media (hover: hover) and (pointer: fine) {
  .church-links__sns a:hover {
    opacity: var(--lit-fade);
  }
}

.church-links__sns svg {
  width: 100%;
  height: 100%;
}

.church-foot__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.church-foot__photos img {
  width: 100%;
  aspect-ratio: 125 / 75;
  object-fit: cover;
}

.page-church .l-footer__copy {
  background: var(--c-white);
}

.page-church .l-footer::before {
  content: none;
}

/* ==========================================================================
   PC（768px以上）
   ========================================================================== */
@media (min-width: 768px) {
  .sub::before {
    background: url("../image/top/sky_stars_pc.jpg") center top / 138rem auto repeat;
  }

  /* PCは、PC用の星空（幅いっぱい）を同じ考え方で敷く */
  .sub::after {
    height: 60rem;
    background: url("../image/top/sky_trees_pc.jpg") center bottom -60vw / 100% auto no-repeat; /* 木のシルエット（下から幅の約59%）が隠れる位置まで下げる */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
  }

  .sub-head {
    padding: 14rem var(--gutter) 4rem;
  }

  .sub-head__lead {
    margin-top: 2.4rem;
  }

  /* よくある質問：題・分類のボタン・質問の一覧は、お問合せと同じ幅（720px）で中央に置く */
  .page-faq .sub-head,
  .faq {
    width: min(100%, calc(72rem + var(--gutter) * 2));
    margin-inline: auto;
  }

  /* 分類のボタンは、本文と同じ幅（720px）の中に並べる。入りきらないぶんは次の行へ折り返す */
  .faq-tabs {
    gap: 1.2rem;
    padding: 1.6rem max(var(--gutter), calc((100% - 72rem) / 2)) 4rem;
  }

  /* PCも、いちばん長い名前に合わせた同じ幅にそろえる */
  .faq-tab {
    min-width: 16rem;
    min-height: 4.4rem;
    padding-inline: 2rem;
  }

  .faq {
    padding: 6rem 0 14rem;
  }

  .faq-list {
    gap: 1.6rem;
    margin-top: 2rem;
    padding-inline: var(--gutter);
  }

  .faq-item__q {
    padding: 2rem 7rem 2.2rem 2.8rem;
  }

  .faq-item__icon {
    top: 2.2rem;
    right: 2.8rem;
    width: 2.2rem;
    height: 2.2rem;
  }

  .faq-item__a-inner {
    padding: 0 7rem 0 2.8rem;
  }

  .faq-item__a-inner::after {
    height: 2.8rem;
  }

  /* お問合せ：入力欄は読みやすい幅に抑えて中央に置く */
  .contact,
  .thanks {
    width: min(100%, calc(72rem + var(--gutter) * 2));
    margin-inline: auto;
    padding-bottom: 14rem;
  }

  .page-contact .sub-head,
  .page-thanks .sub-head {
    width: min(100%, calc(72rem + var(--gutter) * 2));
    margin-inline: auto;
  }

  .form-input {
    height: 5.2rem;
  }

  .form-textarea {
    height: 28rem;
  }

  /* 軽井沢高原教会 */
  .church-kv {
    height: min(100vh, 62vw);
    height: min(100svh, 62vw);
    min-height: 56rem;
  }

  .church-kv__img img {
    object-position: 50% 50%;
  }

  .church-kv__copy {
    top: 61%; /* もう少し下へ（54 → 61%） */
    right: 19%;
    font-size: calc(var(--fz-3) * 1.4); /* 22.4px */
  }

  /* 題のロゴは、スマホの約1.5倍 */
  .church-kv__title img {
    width: 40rem;
  }

  .church-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start; /* 写真と文章は上揃え */
    column-gap: 6rem;
    padding: 14rem var(--gutter) 0;
  }

  .church-block__photo,
  .church-block--reverse .church-block__photo {
    width: auto;
    margin-left: 0;
  }

  .church-block--reverse .church-block__photo {
    order: 2;
  }

  .church-block__body {
    padding: 0;
  }

  .church-btn {
    width: 34rem;
    min-height: 6.4rem;
  }

  .church-links {
    width: 34rem;
  }

  /* 見出しは、文の途中で1文字だけ次の行に落ちないよう、欄の幅に合わせて文字を少し縮める */
  .church-block__body {
    container-type: inline-size;
  }

  .church-block__title {
    font-size: min(var(--fz-6), 4.1cqw);
    letter-spacing: 0.06em;
  }

  .church-foot {
    margin-top: 14rem;
  }

  .church-foot__main {
    aspect-ratio: auto;
    height: min(56vh, 36vw);
    min-height: 30rem;
  }
}

/* ==========================================================================
   おかえりなさいDay 入口（okaeri-entry.html）
   挙式日と教会を入力すると、特設ページ（okaeri.html）へ進む。入力内容の照合・保存はしない
   ========================================================================== */
.entry {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--c-navy);
}

.entry__bg {
  position: absolute;
  inset: 0;
}

.entry__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

@media (min-width: 768px) {
  .entry__bg img {
    object-position: var(--pos-pc, var(--pos, 50% 50%));
  }
}

/* 文字が読めるように、写真を暗くする */
.entry__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 23, 0.6);
}

.entry__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 46rem;
  padding: 6rem var(--gutter);
}

/* 文字の大きさは本文と同じ（2026-10-08「文字が大きく見える」→ 特別な大きさをやめて標準に）
   PC・スマホとも2行（2026-10-11）。1行目が幅に収まらない画面では、収まる大きさまで文字を小さくする */
.entry__lead {
  font-family: var(--ff-mincho);
  font-weight: 600; /* 写真の上に載るので太いほう */
  font-size: min(var(--fz-3), calc((100vw - var(--gutter) * 2) / 24.6));
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-s);
}

.entry-form {
  margin-top: 6rem;
}

.entry-form__ask {
  line-height: var(--lh-loose);
  text-align: center;
}

.entry-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.entry-form__date {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

/* 質問文と入力欄のあいだは1文字ぶん空ける（2026-10-11） */
.entry-form .entry-form__date {
  margin-top: 1em;
}

.entry-form__field span,
.entry-form__church legend {
  display: block;
  padding: 0 0 0.2rem 0.4rem;
  font-size: var(--fz-2);
  letter-spacing: var(--ls-m);
}

/* 入力欄の文字は 16px 以上（iPhone で入力時に画面が拡大するのを防ぐ） */
.entry-form__field input {
  display: block;
  width: 100%;
  height: 4rem;
  padding: 0 1rem;
  border: 1px solid var(--c-white);
  border-radius: 99rem;
  background: rgba(2, 4, 23, 0.25);
  color: var(--c-white);
  font-family: inherit;
  font-size: 1.6rem;
  letter-spacing: var(--ls-m);
  text-align: center;
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
  appearance: none;
}

.entry-form__field input:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 1px var(--c-gold);
}

.entry-form__radios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.entry-form__radio {
  position: relative;
  display: flex; /* 中の枠を、行の高さいっぱいに伸ばす（「石の教会／内村鑑三記念堂」が2行になっても、隣と同じ高さにそろう） */
  cursor: pointer;
}

.entry-form__radio span {
  flex: 1 1 auto;
}

.entry-form__radio input {
  position: absolute;
  opacity: 0;
}

.entry-form__radio span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 4rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--c-white);
  border-radius: 99rem;
  background: rgba(2, 4, 23, 0.25);
  font-size: var(--fz-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-m);
  transition: border-color 0.5s var(--ease), color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

/* 丸い印（選ぶと金色に塗られる） */
.entry-form__radio span::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.2rem transparent;
  transition: background-color 0.5s var(--ease);
}

.entry-form__radio input:checked + span {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 1px var(--c-gold);
  color: var(--c-gold);
}

.entry-form__radio input:checked + span::before {
  background: var(--c-gold);
}

.entry-form__radio input:focus-visible + span {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

/* 反応（スマホ：触れている間 ／ PC：マウスを乗せたとき。同じ内容にする） */
.entry-form__radio:active span {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

@media (hover: hover) and (pointer: fine) {
  .entry-form__radio:hover span {
    border-color: var(--c-gold);
    color: var(--c-gold);
  }
}

/* ボタンは、ほかのページのボタン（.c-btn）と同じ文字の大きさ・高さ。幅だけ文字に合わせる */
.entry-form__submit {
  width: auto;
  min-width: 20rem;
  max-width: 100%;
  margin-top: 5rem;
  padding-inline: 2.4rem;
  border: 0;
  white-space: nowrap;
  cursor: pointer;
}

@media (min-width: 768px) {
  /* PCの --gutter は「画面幅に合わせて広がる余白」なので、幅を決めた箱の中では使わない */
  .entry__inner {
    max-width: 53.6rem; /* 中身 440px ＋ 左右の余白 48px ずつ。文・入力欄・ボタンの幅と中心を揃える */
    padding: 8rem 4.8rem;
  }

  .entry-form__submit {
    min-width: 22rem;
  }
}

/* ==========================================================================
   Contact Form 7（WordPress）で出したときの差
   フォームの中身は静的HTMLと同じ class で組んである。ここは、Contact Form 7 が自動で足す
   入れ物（.wpcf7-…）の分だけ。見た目は上の「お問合せフォーム」と同じにする
   ========================================================================== */
.wpcf7-form-control-wrap {
  display: block;
}

/* 同意のチェック（四角は自前で描く。実物のチェックボックスは重ねて隠す） */
.wpcf7-acceptance {
  display: block;
  margin-top: 2.4rem;
  text-align: center;
}

/* 入れ物（Contact Form 7 が足す span）は行を作らせず、静的HTMLの .form-agree と同じ高さにする */
.wpcf7-acceptance .wpcf7-list-item {
  display: flex;
  justify-content: center;
  margin: 0;
}

.wpcf7-acceptance label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.wpcf7-acceptance input {
  position: absolute;
  opacity: 0;
}

.wpcf7-acceptance .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  letter-spacing: var(--ls-m);
  transition: color 0.5s var(--ease);
}

.wpcf7-acceptance .wpcf7-list-item-label::before {
  content: "";
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--c-white);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.wpcf7-acceptance .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.6rem;
  width: 0.6rem;
  height: 1.2rem;
  margin-top: -0.9rem;
  border: solid var(--c-red);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.wpcf7-acceptance input:checked + .wpcf7-list-item-label::before {
  border-color: var(--c-white);
  background: var(--c-white);
}

.wpcf7-acceptance input:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}

.wpcf7-acceptance input:focus-visible + .wpcf7-list-item-label::before {
  box-shadow: 0 0 0 2px var(--c-gold);
}

.wpcf7-acceptance label:active .wpcf7-list-item-label {
  color: var(--c-gold);
}

.wpcf7-acceptance label:active .wpcf7-list-item-label::before {
  border-color: var(--c-gold);
  box-shadow: var(--lit-glow);
}

@media (hover: hover) and (pointer: fine) {
  .wpcf7-acceptance label:hover .wpcf7-list-item-label {
    color: var(--c-gold);
  }

  .wpcf7-acceptance label:hover .wpcf7-list-item-label::before {
    border-color: var(--c-gold);
    box-shadow: var(--lit-glow);
  }
}

/* 送信ボタン：同意にチェックが入るまでは押せない（見た目も変える） */
.contact .c-btn {
  border: 0;
  cursor: pointer;
}

.contact .c-btn[disabled] {
  opacity: 0.45;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* 入力の誤り（各入力欄のすぐ下に出る。.form-error は静的HTMLのとき、.wpcf7-… は Contact Form 7 のとき） */
.form-error,
.wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.4rem;
  color: var(--c-red);
  font-size: var(--fz-2);
  line-height: var(--lh-base);
}

.is-invalid.form-input,
.is-invalid.form-textarea,
.wpcf7-not-valid.form-input,
.wpcf7-not-valid.form-textarea {
  border-color: var(--c-red);
}

/* 送信結果のお知らせ（フォームの下） */
.wpcf7 form .wpcf7-response-output {
  margin: 2.4rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--c-gold);
  font-size: var(--fz-2);
  line-height: var(--lh-base);
  text-align: center;
}

.wpcf7 .wpcf7-spinner {
  display: block;
  margin: 1.2rem auto 0;
}

/* 1280px以上は、画面上部に2段のメニューが残る。分類のボタンは、その下で止める */
@media (min-width: 1280px) {
  .faq-tabs {
    --faq-top: 10.4rem;
  }
}