@charset "UTF-8";
/* ==========================================================================
   B案 追加スタイル（style.css の後に読み込む）
   --------------------------------------------------------------------------
   求人担当のご意見を反映した「端的にまとめる」構成用のコンポーネント。
   ・pillars     … ロワールで働く5つの魅力
   ・tri         … 勤務／お休み／スタート方法 などの3カラム集約
   ・checks      … 箇条書きの記号をチェックに統一（番号と・の混在をなくす）
   ・store-list  … 店舗一覧のコンパクト表示
   ・flow-line   … 応募〜採用の流れを1行ずつ
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 5つの魅力
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  gap: .9rem;
}
.pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.35rem 1.2rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-green);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pillar__no {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-green);
  color: var(--c-white);
  font-family: var(--f-en);
  font-size: 1.15rem;
  line-height: 1;
}
.pillar h3 {
  margin-bottom: .4em;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-brown);
}
.pillar p {
  font-size: .87rem;
  line-height: 1.95;
  color: var(--c-ink-soft);
}

/* --------------------------------------------------------------------------
   2. 3カラム集約ブロック
   -------------------------------------------------------------------------- */
.tri {
  display: grid;
  gap: 1rem;
}
.tri__col {
  padding: 1.5rem 1.3rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.tri--cards .tri__col { box-shadow: var(--shadow); }
.tri__head {
  margin-bottom: .9em;
  padding-bottom: .6em;
  border-bottom: 1px solid var(--c-gold-lt);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-brown);
}

/* --------------------------------------------------------------------------
   3. チェックリスト（記号を統一）
   -------------------------------------------------------------------------- */
.checks li {
  position: relative;
  padding-left: 1.5em;
  font-size: .87rem;
  line-height: 1.95;
  color: var(--c-ink-soft);
}
.checks li + li { margin-top: .5em; }
.checks li::before {
  content: "";
  position: absolute;
  left: .15em; top: .6em;
  width: .55em; height: .3em;
  border-left: 1.5px solid var(--c-green);
  border-bottom: 1.5px solid var(--c-green);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   4. 強調文
   -------------------------------------------------------------------------- */
.highlight {
  margin-top: 1.6rem;
  padding: 1.3rem 1.3rem;
  background: var(--c-bg-deep);
  border-radius: var(--radius);
  text-align: center;
  font-size: clamp(.88rem, 3.4vw, .95rem);
  line-height: 2.05;
  color: var(--c-brown);
}
.highlight strong {
  color: var(--c-gold);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. 実績の数字
   -------------------------------------------------------------------------- */
.stats--b .stat__num { font-size: clamp(1.9rem, 8vw, 2.7rem); }
.stats--b .stat__num span { font-size: .45em; margin-inline: .1em; }

/* --------------------------------------------------------------------------
   6. 店舗一覧（コンパクト）
   -------------------------------------------------------------------------- */
.store-list {
  display: grid;
  gap: .8rem;
}
.store-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1rem;
  align-items: center;
  padding: .9rem 1rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.store-row img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--c-bg-deep);
}
.store-row h3 {
  font-family: var(--f-en);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--c-brown);
}
.store-row h3 span {
  font-family: var(--f-serif);
  font-size: .55rem;
  letter-spacing: .08em;
  color: var(--c-ink-soft);
  margin-left: .3em;
}
.store-row__area {
  margin-top: .15em;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--c-gold);
}
.store-row__data {
  margin-top: .35em;
  font-size: .78rem;
  line-height: 1.75;
  color: var(--c-ink-soft);
}

/* --------------------------------------------------------------------------
   7. 応募〜採用の流れ
   -------------------------------------------------------------------------- */
.flow-line {
  display: grid;
  gap: .7rem;
}
.flow-line li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.2rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  font-size: .84rem;
  line-height: 1.75;
  color: var(--c-ink-soft);
}
.flow-line b {
  display: block;
  margin-bottom: .1em;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-brown);
}
.flow-line__no {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #bfa066, var(--c-gold));
  color: var(--c-white);
  font-family: var(--f-en);
  font-size: 1.05rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   8. キービジュアルの上余白
   --------------------------------------------------------------------------
   style.css の .kv は margin-top: 0 のため、本文ブロックと接してしまう。
   B案は各セクションの末尾に写真を置くので、上にも余白を取る。
   -------------------------------------------------------------------------- */
.plan-b .kv { margin-top: clamp(2.2rem, 6vw, 3.5rem); }

/* --------------------------------------------------------------------------
   9. タブレット（768px〜）
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .pillars    { grid-template-columns: repeat(2, 1fr); }
  .tri        { grid-template-columns: repeat(3, 1fr); }
  .store-list { grid-template-columns: repeat(2, 1fr); }
  .store-row  { grid-template-columns: 110px 1fr; }
  .flow-line  { grid-template-columns: repeat(4, 1fr); }
  .flow-line li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: .6rem;
    padding: 1.3rem 1rem;
  }
}

/* --------------------------------------------------------------------------
   10. デスクトップ（1024px〜）
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   11. ホバー
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .pillar,
  .store-row {
    transition: transform .4s var(--ease-float), box-shadow .4s var(--ease-float);
  }
  .pillar:hover,
  .store-row:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(74, 63, 54, .12);
  }
}