@charset "UTF-8";

/* ==========================================================================
   下層ページ専用スタイル（style.css の後に読み込む）
   ========================================================================== */

/* --- ページタイトル ---------------------------------------------------- */
.page-head { text-align: center; padding: 70px 0 62px; }

.page-head__ja {
  display: inline-block;
  position: relative;
  font-size: clamp(26px, 3.6vw, 36px);
  color: var(--brown);
  letter-spacing: .1em;
}

.page-head__ja::after {
  content: "";
  position: absolute;
  left: -8px; right: -8px; bottom: 2px;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(247,230,168,0) 0%, var(--marker) 14%, var(--marker) 86%, rgba(247,230,168,0) 100%);
  z-index: -1;
}

.page-head__ja small {
  display: block;
  font-size: .58em;
  letter-spacing: .08em;
  margin-bottom: 2px;
}

.page-head__en {
  display: block;
  margin-top: 12px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--green-deep);
}

/* --- 企業理念 ---------------------------------------------------------- */
.philosophy__catch {
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(21px, 3vw, 28px);
  color: var(--brown);
  letter-spacing: .12em;
  padding-bottom: 26px;
  border-bottom: 2px dotted var(--green-light);
  margin: 0 auto 46px;
  max-width: 720px;
}

.philosophy__img {
  /* 上限460px。ただし画面が狭いときは画面幅に収める（min がないと溢れる） */
  max-width: min(460px, 100%);
  margin: 0 auto;
  display: block;
  border-radius: 46% 54% 52% 48% / 48% 44% 56% 52%;
  box-shadow: var(--shadow-card);
}

/* --- 経営理念 ---------------------------------------------------------- */
.creed__item { margin-bottom: 44px; }
.creed__item:last-child { margin-bottom: 0; }

.creed__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  color: var(--brown);
  letter-spacing: .1em;
  padding-bottom: 12px;
  border-bottom: 2px dotted var(--line);
  margin-bottom: 18px;
}

.creed__title svg { width: 22px; height: 22px; flex: 0 0 auto; }

.creed__body { margin: 0; }

.creed__body + .creed__body { margin-top: 1em; }

.creed__lead { font-size: 1.15em; font-weight: 700; text-align: center; }

.creed__list { list-style: none; margin: 0; padding: 0; counter-reset: creed; }

.creed__list li { position: relative; padding-left: 2.4em; margin-bottom: 4px; }

.creed__list li::before {
  counter-increment: creed;
  content: counter(creed) "．";
  position: absolute;
  left: 0;
  color: var(--green-deep);
  font-weight: 700;
}

/* --- ヘルパー四ヶ条 ---------------------------------------------------- */
.four { list-style: none; margin: 0 0 56px; padding: 0; counter-reset: four; }

.four li {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 22px 6px;
  border-bottom: 2px dotted var(--line);
}

.four li::before {
  counter-increment: four;
  content: counter(four);
  flex: 0 0 auto;
  width: 40px;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--camel);
  line-height: 1;
}

.four p { margin: 0; }

/* --- 会社概要 ---------------------------------------------------------- */
.company { margin: 0; }

.company > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding: 20px 8px;
  border-bottom: 1px dotted var(--line);
}

.company dt {
  flex: 0 0 190px;
  font-weight: 700;
  color: var(--brown);
  letter-spacing: .06em;
}

.company dd { flex: 1 1 320px; margin: 0; }
.company dd span { display: block; }

.company dd a { color: inherit; overflow-wrap: anywhere; }

/* --- 事業内容（6ブロック） --------------------------------------------- */
.biz { padding: 76px 0 80px; }
.biz--cream { background: var(--cream-bg); }

.biz__inner {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 60px);
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
}

.biz__inner--rev { flex-direction: row-reverse; }

.biz__figure { flex: 0 0 40%; }

.biz__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  box-shadow: var(--shadow-card);
}

/* 画像が未配置のときの仮表示 */
.biz__title {
  font-size: clamp(21px, 2.6vw, 26px);
  color: var(--brown);
  letter-spacing: .1em;
  margin-bottom: 18px;
  padding-left: 18px;
  border-left: 5px solid var(--green);
  line-height: 1.4;
}

.biz__text { margin: 0; font-size: 16px; }

/* --- 採用ページ -------------------------------------------------------- */
.rec-lead { text-align: center; }

.rec-lead__title {
  font-size: clamp(20px, 2.8vw, 26px);
  color: var(--brown);
  letter-spacing: .08em;
  margin-bottom: 30px;
}

.rec-lead__text { margin-bottom: 46px; }
.rec-lead__text span { display: block; }

.rec-lead__img {
  /* 上限620px。ただし画面が狭いときは画面幅に収める */
  max-width: min(620px, 100%);
  margin: 0 auto 44px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: block;
}

.rec-lead__img--empty {
  max-width: min(620px, 100%);
  height: 300px;
  margin: 0 auto 44px;
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(45deg, var(--green-pale), var(--green-pale) 14px, #f6f9ee 14px, #f6f9ee 28px);
  display: grid;
  place-items: center;
  color: var(--green-deep);
  font-size: 13px;
  letter-spacing: .08em;
}

.rec-catch {
  display: block;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 23px);
  color: var(--brown);
  margin: 0 auto 34px;
  width: fit-content;
  padding: 0 6px 3px;
  background: linear-gradient(transparent 62%, var(--marker) 62%);
  letter-spacing: .06em;
}

.req { width: 100%; border-collapse: collapse; margin-top: 40px; }

.req th, .req td {
  border: 1px solid var(--line);
  padding: 20px 24px;
  text-align: left;
  vertical-align: top;
  font-size: 15.5px;
  line-height: 1.9;
}

.req th {
  width: 210px;
  background: var(--cream-bg);
  color: var(--brown);
  font-weight: 700;
  letter-spacing: .06em;
}

.req td span { display: block; }
.req td .gap { height: .9em; }

/* --- フォーム ---------------------------------------------------------- */
.form { max-width: 760px; margin: 0 auto; }

.form__row { margin-bottom: 28px; }

.form__label {
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  color: var(--brown);
  letter-spacing: .06em;
}

.form__req { color: #c8552f; font-size: 13px; margin-left: 6px; font-weight: 500; }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid #ddd2c2;
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  color: var(--brown-deep);
  line-height: 1.7;
  transition: border-color .25s, box-shadow .25s;
}

.form textarea { min-height: 210px; resize: vertical; }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(164, 181, 87, .18);
}

.form ::placeholder { color: #b8ab9b; }

.form__note { margin: 34px 0 12px; font-size: 15px; }

.form__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  cursor: pointer;
}

.form__check input { width: 19px; height: 19px; accent-color: var(--green-deep); }

.form__submit { text-align: center; }

.form__submit button {
  border: none;
  cursor: pointer;
  font-family: "Zen Maru Gothic", sans-serif;
  padding: 16px 62px;
  font-size: 17px;
}

.form__msg {
  display: none;
  margin: 22px auto 0;
  max-width: 620px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #fdf1d9;
  border: 1px solid var(--gold-light);
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
}

.form__msg.is-shown { display: block; }

.form__after { list-style: disc; margin: 34px 0 0; padding-left: 1.4em; font-size: 15px; }
.form__after li { margin-bottom: 6px; }

/* --- プライバシーポリシー ---------------------------------------------- */
.policy { padding: 8px 0 70px; }

.policy__title {
  text-align: center;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--brown);
  letter-spacing: .1em;
  padding: 26px 0;
  border-top: 2px solid var(--green-light);
  border-bottom: 2px solid var(--green-light);
  margin-bottom: 46px;
}

.policy h2 {
  font-size: 18px;
  color: var(--brown);
  letter-spacing: .06em;
  margin: 42px 0 14px;
  padding-left: 14px;
  border-left: 4px solid var(--green);
}

.policy ul { padding-left: 1.4em; margin: 0 0 1.2em; }
.policy li { margin-bottom: 4px; }

.policy__addr {
  margin-top: 34px;
  padding: 26px 28px;
  background: var(--cream-bg);
  border-radius: var(--radius);
  font-size: 15.5px;
  line-height: 2;
}

.policy__addr span { display: block; }

/* --- レスポンシブ ------------------------------------------------------ */
@media (max-width: 820px) {
  .biz__inner, .biz__inner--rev { flex-direction: column; }
  .biz__figure { flex: 1 1 auto; width: min(100%, 420px); }
  .biz { padding: 56px 0 58px; }
  .req th, .req td { display: block; width: auto; border-bottom: none; }
  .req td { border-top: none; }
  .req tr { display: block; border-bottom: 1px solid var(--line); }
  .company dt { flex: 1 1 100%; }
  .four li { gap: 14px; }
  .four li::before { font-size: 28px; width: 30px; }
  .page-head { padding: 48px 0 44px; }
}