@charset "UTF-8";
/* 2026-11-05 たかさき移住体験レポート 提出用フォーム（第2弾・page-report-form.php だけが読む）
   すべて .p-form__parent.is-r2 の下に閉じる。style.css（共通）は触らない。
   単位は共通と同じ rem（SP: 375px=3.75rem / PC: 1456px=14.56rem） */

/* ---------- 見出し ---------- */
@media screen and (min-width: 768px) {
  .is-r2 .c-page-header span {
    font-size: 0.3rem;
    line-height: 0.4rem;
  }
  .is-r2 #contact-form .l-desc {
    font-size: 0.2rem;
    line-height: 0.32rem;
  }
}

/* ---------- 【必須】の印（デザイン案：項目名の前に黄緑）・任意は印なし ---------- */
.is-r2 .p-form__item--required dt::after,
.is-r2 .p-form__item--optional dt::after {
  content: none;
  display: none;
}
.is-r2 .p-form__item--required dt::before {
  content: "【必須】";
  color: #D0FF00;
  font-weight: 700;
  letter-spacing: -0.04em;
  flex: none;
  margin-left: -0.4em;
  margin-right: 0;
}
.is-r2 .p-form__item dt {
  flex-wrap: wrap;
}
.is-r2 .p-form__item dt small {
  white-space: normal;
  margin-left: 0.04rem;
}
@media screen and (min-width: 768px) {
  .is-r2 .p-form__item--required dt {
    display: flex;
  }
}
@media screen and (max-width: 767px) {
  .is-r2 .p-form__item dt {
    display: block;
  }
  .is-r2 .p-form__item dt * {
    white-space: normal;
  }
  .is-r2 .p-form__item dt small {
    display: block;
    margin-left: 0;
    text-align: right;
  }
}

/* ---------- 欄の幅 ---------- */
@media screen and (min-width: 768px) {
  .is-r2 .p-form__item dd.p-form__item--short {
    max-width: 2.4rem;
  }
}

/* ---------- 丸ボタン：同行者は横並び・検討度合いは縦並び ---------- */
.is-r2 .p-form__item--radio dd .wpcf7-radio {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.06rem 0.24rem;
}
.is-r2 .p-form__item--radio.r2-vertical dd .wpcf7-radio {
  flex-direction: column;
  gap: 0.08rem;
}
.is-r2 .p-form__item--radio dd .wpcf7-list-item {
  margin-right: 0;
}
.is-r2 .p-form__item--radio dd label {
  cursor: pointer;
}

/* ---------- 文章の欄の高さ（デザイン案に合わせる） ---------- */
.is-r2 .p-form textarea {
  border-color: #D0FF00;
}
.is-r2 .r2-memo textarea {
  min-height: 0.8rem;
  height: 0.8rem;
}
.is-r2 #customer-photo-note {
  min-height: 1.36rem;
  height: 1.36rem;
}
@media screen and (min-width: 768px) {
  .is-r2 .r2-memo textarea {
    min-height: 1rem;
    height: 1rem;
  }
}

/* ---------- 写真 ---------- */
.is-r2 .r2-note {
  margin-top: 0.08rem;
  font-size: 0.12rem;
  line-height: 0.2rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .is-r2 .r2-note {
    font-size: 0.14rem;
    line-height: 0.24rem;
  }
}

/* ---------- 掲載の同意 ---------- */
.is-r2 .r2-agree {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
  position: relative;
}
.is-r2 .r2-agree .wpcf7-list-item {
  margin: 0;
}
.is-r2 .r2-agree label {
  cursor: pointer;
}
.is-r2 .r2-agree .wpcf7-not-valid-tip {
  display: block;
  text-align: center;
  margin-top: 0.06rem;
}
.is-r2 .r2-opinion {
  margin-top: 0.6rem;
}

/* ---------- 下の「ご記入ありがとう!」と確認ボタン ---------- */
.is-r2 #contact-form .p-form__confirm--message {
  margin-top: 0.9rem;
}
.is-r2 #report-form-bottom {
  margin-top: 1.95rem;
}
@media screen and (min-width: 768px) {
  .is-r2 #contact-form .p-form__confirm--message {
    margin-top: 1.2rem;
  }
  .is-r2 #report-form-bottom {
    margin-top: 2.4rem;
  }
}

/* ---------- 確認画面：空の任意欄は行ごと隠す ---------- */
.is-r2 .p-form__confirm--item[data-r2-optional]:has(dd > span:empty) {
  display: none;
}
.is-r2 .p-form__confirm--item.r2-optional:not(:has(.p-form__confirm--files span:not(:empty))) {
  display: none;
}
.is-r2 .p-form__confirm--item dd span {
  word-break: break-word;
}

/* ---------- 2026-11-06 選択欄の矢印：欄の内側（右端から少し内）に置く ---------- */
.is-r2 .p-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.14rem center;
  background-size: 0.12rem 0.08rem;
  padding-right: 0.38rem;
  text-overflow: ellipsis;
  cursor: pointer;
}
.is-r2 .p-form select::-ms-expand {
  display: none;
}

/* ---------- 2026-11-06 チェック欄：四角の中心を文字の1行目の中心にそろえる ---------- */
.is-r2 .p-form .wpcf7-list-item label:has(input[type=checkbox])::before {
  margin-top: 0.1rem;
  margin-top: calc((1lh - 0.14rem) / 2);
}

/* ---------- 2026-11-06 必須の欄が空の時：ほんのり赤く ---------- */
.is-r2 .p-form__first input.wpcf7-not-valid,
.is-r2 .p-form__first select.wpcf7-not-valid,
.is-r2 .p-form__first textarea.wpcf7-not-valid {
  background-color: #FFEEF1;
  border-color: #F25A7B;
  box-shadow: 0 0 0 0.01rem #F25A7B;
}
.is-r2 .p-form__first .wpcf7-radio.wpcf7-not-valid,
.is-r2 .p-form__first .wpcf7-checkbox.wpcf7-not-valid,
.is-r2 .p-form__first .p-form__file.fm-ng {
  background-color: rgba(242, 90, 123, 0.18);
  outline: 0.02rem solid #F25A7B;
  outline-offset: 0;
  border-radius: 0.06rem;
  padding: 0.06rem 0.08rem;
  margin: -0.06rem -0.08rem;
}
.is-r2 .p-form__first .wpcf7-checkbox.wpcf7-not-valid .wpcf7-list-item label:has(input[type=checkbox])::before {
  border-color: #F25A7B;
  background-color: #FFEEF1;
}
.is-r2 .p-form__first .fm-tip {
  position: static;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0.08rem 0 0;
  padding: 0.02rem 0.08rem;
  border-radius: 0.04rem;
  background: #FFEEF1;
  color: #D6264E;
  font-size: 0.12rem;
  line-height: 0.18rem;
  font-weight: 700;
  white-space: normal;
  transform: none;
}
.is-r2 .p-form__first .fm-summary {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 0.16rem;
  padding: 0.08rem 0.14rem;
  border-radius: 0.06rem;
  background: #FFEEF1;
  color: #D6264E;
  font-size: 0.13rem;
  line-height: 0.2rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .is-r2 .p-form__first .fm-tip {
    font-size: 0.14rem;
    line-height: 0.2rem;
  }
  .is-r2 .p-form__first .fm-summary {
    font-size: 0.15rem;
    line-height: 0.24rem;
  }
}

/* ---------- 2026-11-06 完了画面（.r2-complete の下に閉じる・page-report-form__complete.php だけが使う） ---------- */
.r2-complete .r2-top {
  position: relative;
  display: block;
  width: 1.9rem;
  height: 2.46rem;
  margin: 0.2rem auto 0;
  text-decoration: none;
}
.r2-complete .r2-top img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.r2-complete .r2-top span {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  font-family: "M PLUS 1p", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", serif;
  font-size: 0.2rem;
  line-height: 1;
  font-weight: 700;
  color: #1827BD;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
  .r2-complete .r2-top span {
    font-size: 0.22rem;
  }
}