@charset "UTF-8";

/* =========================================================
   policy.css … お問い合わせページ（policy/index.php）
   ※ フォントサイズは custom.css の :root 変数のみ使用
   ========================================================= */

/* =========================================================
   ページ全体（SP）
   ========================================================= */
/* .policy {
  padding: 30px 12px 80px;
} */

/* パンくずはPCのみ */
.breadcrumb {
  display: none;
}

/* ---------- ページ見出し ---------- */
.policy-label {
  padding: 0 8px 14px;
  border-bottom: 1px solid #cfc4bb;
}

.policy-title {
  margin-top: 36px;
  color: #5b534d;
  font-size: var(--main-heading);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-align: center;
}

.policy-lead {
  margin-top: 28px;
  font-size: var(--main-text);
  line-height: 1.8;
  text-align: center;
}

.policy-content {
  line-height: 2;
  margin-bottom: 1.5em;
  padding-bottom: 17px;

  background-image: radial-gradient(circle, #c9a989 1.5px, transparent 1.5px);
  background-size: 13px 3px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.policy-content ul li {
  list-style-type: disc;
  list-style-position: outside;
  margin: 0.5em 0 0.5em 1em;
  line-height: 1.5;
}

.policy-content ul {
  margin: 1em 0;
}

/* =========================================================
   左：ご案内（SP）
   ========================================================= */
.policy-wrapper {
  min-width: 360px;
  width: 93%;
  margin: 0 auto 100px;
}

h2 {
  color: #7F9F83;
  font-size: var(--sub-heading);
  position: relative;
  text-align: center;
  padding-bottom: 15px;
  margin-bottom: 40px;
}

h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 75px;
  height: 2px;
  background-color: #9D8370;
}

h3 {
  color: #7F9F83;
  font-size: var(--sub-heading);
  margin-bottom: .5em;
}

.policy-guide-img {
  width: 100%;
  aspect-ratio: 500 / 375;
  object-fit: cover;
}

.policy-guide-heading {
  margin: 28px 0 0;
  color: #c96e86;
  font-family: "Noto Serif JP", serif;
  font-size: var(--middle-heading);
  font-weight: 500;
  line-height: 1.5;
}

.policy-guide-question {
  margin-top: 14px;
  font-size: var(--sub-heading);
  line-height: 1.6;
}

.policy-guide-text {
  margin-top: 22px;
  font-size: var(--main-text);
  line-height: 1.85;
}

.policy-guide-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 40px;
}

/* 飾りの丸はPCのみ */
.policy-circles {
  display: none;
}

.policy-inner {
  background-color: #fdfdfd;
  padding: 30px 1em;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16);
}

.policy-intro {
  margin-bottom: 1.5em;
  line-height: 2;
}

.policy-box {
  margin-bottom: 40px;
}

.date {
  text-align: right;
}


/* =========================================================
   右：フォーム（SP）
   ========================================================= */
.policy-form {
  margin-top: 56px;
}

.policy-form-card {
  padding: 24px 21px 34px;
  border: 1px solid #cfc4bb;
  background-color: #fffdfb;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.policy-fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

/* ピンクの小見出し（お問合せ内容・園名をえらぶ） */
.policy-form-heading {
  display: block;
  padding: 0;
  color: #c96e86;
  font-size: var(--main-text);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* ---------- ラジオボタン ---------- */
.policy-radio-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.policy-radio {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

/* 丸を自作（中の点は checked のとき表示） */
.policy-radio-input {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid #5b534d;
  border-radius: 50%;
  background-color: #fff;
  appearance: none;
  cursor: pointer;
}

.policy-radio-input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #c96e86;
  transform: translate(-50%, -50%);
}

.policy-radio-text {
  font-size: var(--main-text);
  letter-spacing: 0.05em;
}

/* ---------- 入力欄 ---------- */
.policy-field {
  margin-top: 22px;
}

.policy-field-nursery {
  margin-top: 24px;
}

.policy-field-label {
  display: block;
  font-size: var(--main-text);
  letter-spacing: 0.1em;
}

.policy-required {
  margin-left: 6px;
  color: #c96e86;
}

.policy-field-note {
  letter-spacing: 0.05em;
}

.policy-input {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid #9c918a;
  border-radius: 0;
  background-color: #fff;
  color: #5b534d;
  font-family: inherit;
  font-size: var(--main-text);
}

.policy-input::placeholder {
  color: #c7c0bb;
}

.policy-input:focus {
  border-color: #c96e86;
  outline: 2px solid rgba(201, 110, 134, 0.25);
  outline-offset: 0;
}

/* ---------- セレクト（右端に「∨」） ---------- */
.policy-select {
  position: relative;
  margin-top: 12px;
}

.policy-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #5b534d;
  border-bottom: 1.5px solid #5b534d;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.policy-select-input {
  margin-top: 0;
  padding-right: 44px;
  appearance: none;
  cursor: pointer;
}

/* 点線の区切り */
.policy-divider {
  margin: 28px 0 0;
  border: none;
  border-top: 2px dotted #8a7f78;
}

/* ---------- 年齢・所有資格（横並び） ---------- */
.policy-field-row {
  display: flex;
  gap: 18px;
}

.policy-field-age {
  flex: 0 0 auto;
}

.policy-field-license {
  flex: 1;
}

.policy-age {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.policy-age .policy-input {
  width: 84px;
  padding: 0 10px;
}

.policy-age-unit {
  font-size: var(--main-text);
  line-height: 1;
}

/* ---------- 内容 ---------- */
.policy-field-message {
  margin-top: 40px;
}

.policy-textarea {
  height: 280px;
  padding: 12px 14px;
  line-height: 1.7;
  resize: vertical;
}

/* ---------- 同意・確認画面ボタン ---------- */
.policy-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 44px;
}

/* チェックボックスと文字を横に並べる（文字が2行になっても、チェックボックスは1行目の高さにそろう） */
.policy-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
  cursor: pointer;
}

.policy-agree-input {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  /* 文字1行目の中央にそろえる（行の高さ24px − 22px）÷ 2 */
  border: 1.5px solid #b9aea6;
  border-radius: 4px;
  background-color: #fff;
  appearance: none;
  cursor: pointer;
}

/* チェックマーク */
.policy-agree-input:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #c96e86;
  border-bottom: 2px solid #c96e86;
  transform: rotate(45deg);
}

.policy-agree-text {
  font-size: calc(var(--main-text) * 0.875);
  /* 16px × 0.875 ＝ 14px */
  line-height: 24px;
  letter-spacing: 0.05em;
}

.policy-submit-btn {
  width: 264px;
  height: 54px;
  margin-top: 26px;
  border: 1px solid #b9aea6;
  background-color: #fff6f3;
  color: #5b534d;
  font-family: inherit;
  font-size: var(--main-text);
  letter-spacing: 0.1em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: background-color 0.3s;
}

.policy-submit-btn:hover {
  background-color: #fff;
}

/* SP */

.policy-head {
  max-width: 350px;
  margin: 0 auto 60px;
}

.page-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0 auto;
  list-style: none;
}

.page-nav li {
  margin: 0;
}

.page-nav a {
  position: relative;
  display: block;
  /* テキストは幅210pxで改行。リンク自体（下線・矢印）は親の横幅いっぱい */
  padding-right: max(calc(100% - 212px), 34px);
  /* 100%＝親（li）の横幅。矢印と重ならないよう最低34pxは確保
     ※210pxちょうどだと「採用選考にあたっての当社の」（13文字≒208.4px）が描画の誤差で入りきらず「の」だけ落ちるため、2px余裕をもたせて212px */
  word-break: auto-phrase;
  /* 「基 / 本方針」のような単語の途中ではなく、文節で改行（Chrome・Edge対応） */
  padding-bottom: 8px;
  border-bottom: 1px solid #6F625A;

  color: #756d63;
  text-decoration: none;
  font-size: 16px;
  line-height: 1.6;
  transition: border-color 0.3s, color 0.3s;
}

.page-nav a::after {
  content: "↓";
  position: absolute;
  right: 0;
  bottom: 12px;
  /* 最終行の高さにそろえる（下余白8px＋(行の高さ25.6px − 18px)÷2） */
  font-size: 18px;
  line-height: 1;
  transition: color 0.3s, translate 0.3s;
}

/* ホバー：文字と下線をピンクに、矢印もピンクにして少し下へ（秒数はサイト共通の0.3秒） */
.page-nav a:hover {
  border-bottom-color: #c96e86;
  color: #c96e86;
}

.page-nav a:hover::after {
  color: #c96e86;
  translate: 0 4px;
}


/* PC */
@media (min-width: 1024px) {

  .policy-wrapper {
    min-width: unset;
    max-width: 1090px;
    width: 93%;
    margin: 0 auto 100px;
  }

  .policy-inner {
    padding: 65px 80px;
  }

  .page-nav {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 36px;
    row-gap: 28px;
  }

  /* 1段目：3つ */
  .page-nav li:nth-child(1),
  .page-nav li:nth-child(2),
  .page-nav li:nth-child(3) {
    grid-column: span 2;
  }

  /* 2段目：2つ */
  .page-nav li:nth-child(4),
  .page-nav li:nth-child(5) {
    grid-column: span 3;
  }

  /* PCはテキストを改行させない（210pxの改行はSPのみ） */
  .page-nav a {
    padding-right: 34px;
    white-space: nowrap;
  }

}

/* =========================================================
   PC（1024px〜）  ※カンプ w1440 基準
   ========================================================= */
@media screen and (min-width: 1024px) {

  .policy {
    padding: 0 20px 120px;
  }

  /* ---------- パンくず ---------- */
  .breadcrumb {
    display: block;
    /* max-width: 1165px; */
    margin: 0 auto;
    padding: 10px 0 55px 0;
  }

  .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    font-size: var(--breadcrumb-text);
    list-style: none;
  }

  .breadcrumb-item+.breadcrumb-item::before {
    content: "›";
    margin: 0 10px;
  }

  .breadcrumb-link {
    color: #5b534d;
  }

  .breadcrumb-link:hover {
    text-decoration: underline;
  }

  /* ---------- ページ見出し ---------- */
  .policy-head {
    max-width: 1180px;
    /* margin: 40px auto 0; */
  }

  .policy-label {
    padding: 0 0 16px;
  }

  .policy-title {
    margin-top: 100px;
  }

  .policy-lead {
    max-width: 842px;
    margin: 30px auto 0;
    line-height: 1.6;
    text-align: center;
  }

  /* ---------- 左右2カラム ---------- */
  .policy-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    max-width: 1292px;
    margin: 96px auto 0;
  }

  .policy-guide {
    flex: 0 1 510px;
  }

  .policy-guide-heading {
    margin-top: 30px;
    white-space: nowrap;
    /* カンプどおり1行（画像幅を少しはみ出しても折り返さない） */
  }

  .policy-guide-question {
    margin-top: 22px;
  }

  .policy-guide-text {
    margin-top: 26px;
  }

  .policy-guide-btns {
    margin-top: 72px;
  }

  /* 飾りの丸 */
  .policy-circles {
    position: relative;
    display: block;
    width: 230px;
    height: 180px;
    margin-top: 64px;
  }

  .policy-circle {
    position: absolute;
    border-radius: 50%;
  }

  .policy-circle-pink {
    top: 0;
    left: 80px;
    width: 148px;
    height: 148px;
    background-color: #c96e86;
  }

  .policy-circle-line {
    top: 36px;
    left: 0;
    width: 140px;
    height: 140px;
    border: 4px solid #c9a890;
  }

  /* ---------- フォーム ---------- */
  .policy-form {
    flex: 0 1 619px;
    margin-top: 0;
  }

  .policy-form-card {
    padding: 58px 40px 60px;
  }

  .policy-field-row {
    gap: 36px;
  }

  .policy-age .policy-input {
    width: 140px;
  }

  .policy-field-message {
    margin-top: 44px;
  }

  .policy-textarea {
    height: 292px;
  }

  .policy-submit {
    margin-top: 88px;
  }

  .policy-agree {
    gap: 14px;
  }

  .policy-submit-btn {
    width: 276px;
    height: 60px;
    margin-top: 28px;
  }

}