/*
 * ブロックで作ったページの内容（会社情報、採用情報、事業領域のページ）。
 * 編集画面で選ぶスタイル（ブロック → スタイル）は inc/blocks.php で登録していて、
 * それぞれ "is-style-<name>" というクラスとして、ここで見た目を決める。
 */

/* ブロック同士の間隔。WordPress 独自のブロック間隔の設定はテーマでオフにしている */
.rcs-blocks :where(.wp-block-group, .wp-block-column) > * + * {
  margin-top: 1.5rem;
}

.rcs-blocks :where(p) {
  line-height: 2;
}

.rcs-blocks h2 {
  color: var(--color-navy-900);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.375;
  letter-spacing: 0.025em;
}

.rcs-blocks h3 {
  color: var(--color-navy-900);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.rcs-blocks :where(.wp-block-group, .wp-block-column) > h2 + * {
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .rcs-blocks h2 {
    font-size: 2.25rem;
  }

  .rcs-blocks h3 {
    font-size: 1.25rem;
  }
}

/* グループ："セクション（上下に余白）" と "紺色の帯"。横幅いっぱいで、中身はページの幅にそろえる。 */
.wp-block-group.is-style-rcs-section,
.wp-block-group.is-style-rcs-dark {
  padding-block: 5rem;
  padding-inline: max(1.25rem, calc((100% - 76rem) / 2));
}

@media (min-width: 640px) {
  .wp-block-group.is-style-rcs-section,
  .wp-block-group.is-style-rcs-dark {
    padding-block: 7rem;
    padding-inline: max(2rem, calc((100% - 76rem) / 2));
  }
}

.wp-block-group.is-style-rcs-dark {
  background: linear-gradient(120deg in oklab, var(--color-navy-900), var(--color-navy-800) 55%, var(--color-accent-500));
  color: var(--color-white);
}

.wp-block-group.is-style-rcs-dark h2,
.wp-block-group.is-style-rcs-dark h3 {
  color: var(--color-white);
}

/* ふつうの段落だけにして、[rcs_stat] の中のラベルは自分の色のままにする */
.wp-block-group.is-style-rcs-dark :where(p:not([class])) {
  color: rgb(255 255 255 / 0.8);
}

/* 段落："英字の小見出し"（見出しの上の小さな英字ラベル） */
p.is-style-rcs-eyebrow {
  color: var(--color-navy-800); /* 鮮やかな青だと、まわりの落ち着いた紺から浮くため。色は前の黄色い点だけ */
  font-family: var(--font-en);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.is-style-rcs-dark p.is-style-rcs-eyebrow {
  color: var(--color-accent-300);
}

p.is-style-rcs-eyebrow + h2,
p.is-style-rcs-eyebrow + h3 {
  margin-top: 0.75rem !important;
}

/* 段落："補足（左に線）" */
p.is-style-rcs-note {
  border-left: 4px solid var(--area-color, var(--color-navy-900));
  background: var(--color-surface);
  padding: 1rem 1.25rem;
  color: var(--color-navy-900);
  font-size: 0.875rem;
  font-weight: 700;
}

/* 段落："タグ（枠線）" */
p.is-style-rcs-tag {
  width: fit-content;
  border: 1px solid rgb(76 79 105 / 0.2);
  border-radius: var(--radius-round);
  padding: 0.25rem 0.75rem;
  color: var(--color-navy-800);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

/* グループ："白いカード"。紺色の帯の上では枠線だけになる。 */
.wp-block-group.is-style-rcs-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-large);
  background: var(--color-white);
  padding: 1.75rem;
}

.wp-block-group.is-style-rcs-card > * + * {
  margin-top: 1rem;
}

.wp-block-group.is-style-rcs-card p {
  font-size: 0.875rem;
}

.is-style-rcs-dark .wp-block-group.is-style-rcs-card {
  border-color: rgb(255 255 255 / 0.2);
  background: transparent;
}

@media (min-width: 640px) {
  .wp-block-group.is-style-rcs-card {
    padding: 2.25rem;
  }
}

/* カラムに1枚だけのカードはカラムいっぱいに広げ、横に並んだカードをそろえる */
.wp-block-column > .wp-block-group.is-style-rcs-card:only-child {
  height: 100%;
}

/* 帯の中の小さなセクション（例：働き方 / 福利厚生） */
.rcs-blocks .wp-block-group:not([class*="is-style-"]) + .wp-block-group:not([class*="is-style-"]) {
  margin-top: 6rem;
}

.rcs-blocks h3.rcs-label {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

/*
 * カラム。WordPress の標準の CSS は左の余白でカラムの間をあけ、600px から1行に2つ並べる。
 * ここでは gap で間をあけ、782px 未満では縦に積む。
 */
.rcs-blocks .wp-block-columns {
  gap: 1.5rem;
  margin-bottom: 0;
}

.rcs-blocks .wp-block-columns > .wp-block-column {
  margin-left: 0 !important;
}

.rcs-blocks * + .wp-block-columns {
  margin-top: 3rem;
}

@media (max-width: 781px) {
  .rcs-blocks .wp-block-columns {
    flex-wrap: wrap !important;
  }

  /* WordPress の「1行に2つ」のルールと同じセレクターにして、こちらを優先させる */
  .rcs-blocks .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:only-child) {
    flex-basis: 100% !important;
  }
}

/* カラム："見出し左・内容右"（見出しのカラムが 1/3、内容が 2/3） */
.wp-block-columns.is-style-rcs-split {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .wp-block-columns.is-style-rcs-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 4rem;
  }
}

/*
 * リスト："番号付きカード"。各項目は「太字の名前、改行（Shift+Enter）、説明」の順に書く。
 * 768px 以上では2列に並ぶ。分野のページでは、番号・名前の下の線・背景のグラデーションが分野の色になる。
 */
ol.is-style-rcs-steps {
  --step-color: var(--area-color, var(--color-accent-600));
  display: grid;
  gap: 1.25rem;
  counter-reset: rcs-step;
  list-style: none;
  padding: 0;
}

@media (min-width: 768px) {
  ol.is-style-rcs-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

ol.is-style-rcs-steps > li {
  position: relative;
  overflow: hidden;
  counter-increment: rcs-step;
  border: 1px solid var(--color-line);
  border-radius: 1.5rem 3rem 1.5rem 1.5rem; /* 右上だけ大きく丸める */
  background: linear-gradient(135deg, var(--color-white) 55%, color-mix(in oklab, var(--step-color) 7%, white));
  box-shadow: 0 1px 2px rgb(76 79 105 / 0.04), 0 12px 28px -16px rgb(76 79 105 / 0.18);
  padding: 4.5rem 1.5rem 1.75rem;
  color: var(--color-muted);
  font-size: 0.9375rem;
  line-height: 1.9;
}

/* 番号（01、02…） */
ol.is-style-rcs-steps > li::before {
  content: counter(rcs-step, decimal-leading-zero);
  position: absolute;
  top: 1.75rem;
  left: 1.5rem;
  color: var(--step-color);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

ol.is-style-rcs-steps strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-navy-900);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* 名前の下の短い線 */
ol.is-style-rcs-steps strong::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  margin-top: 0.625rem;
  border-radius: 2px;
  background: var(--step-color);
}

ol.is-style-rcs-steps strong + br {
  display: none;
}

@media (min-width: 640px) {
  ol.is-style-rcs-steps > li {
    padding: 2rem 2.5rem 2.25rem 6rem;
  }

  ol.is-style-rcs-steps > li::before {
    top: 2.125rem;
    left: 2rem;
  }
}

/* リスト："技術バッジ" */
ul.is-style-rcs-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
}

ul.is-style-rcs-badges > li {
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-round);
  background: var(--color-white);
  padding: 0.25rem 0.75rem;
  color: var(--color-navy-900);
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

/* テーブル："項目と内容"（会社概要、募集職種など）。1列目が項目名。 */
.wp-block-table.is-style-rcs-profile {
  margin: 0;
}

/* 説明文のすぐ後に置いた表は、少し間をあける */
p + .wp-block-table.is-style-rcs-profile {
  margin-top: 2.5rem;
}

.wp-block-table.is-style-rcs-profile table {
  width: 100%;
  border-top: 1px solid var(--color-line);
  border-collapse: collapse;
  font-size: 0.875rem;
}

.wp-block-table.is-style-rcs-profile tr {
  border-bottom: 1px solid var(--color-line);
}

.wp-block-table.is-style-rcs-profile td {
  display: block;
  border: 0;
  padding: 0 0 1.25rem;
  line-height: 1.625;
  vertical-align: top;
}

.wp-block-table.is-style-rcs-profile td:first-child {
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
  color: var(--color-navy-900);
  font-weight: 700;
}

@media (min-width: 640px) {
  .wp-block-table.is-style-rcs-profile td {
    display: table-cell;
    padding: 1.25rem 0;
  }

  .wp-block-table.is-style-rcs-profile td:first-child {
    width: 10rem;
    padding: 1.25rem 2rem 1.25rem 0;
  }
}

/* ボタン。スタイル "白" と "白い枠線" は紺色の帯で使う。 */
.rcs-blocks .wp-block-buttons {
  gap: 1rem;
}

.rcs-blocks .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  background: var(--color-navy-900);
  padding: 0.875rem 1.75rem;
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.rcs-blocks .wp-block-button__link::after,
.editor-styles-wrapper .wp-block-button__link::after {
  content: "→";
}

.rcs-blocks .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button__link:hover {
  border-color: var(--color-yellow-soft);
  background: var(--color-yellow-soft);
  color: var(--color-navy-900);
}

.wp-block-button.is-style-rcs-white .wp-block-button__link {
  background: var(--color-white);
  color: var(--color-navy-900);
}

.wp-block-button.is-style-rcs-ghost .wp-block-button__link {
  border-color: rgb(255 255 255 / 0.4);
  background: transparent;
  color: var(--color-white);
}

/* "紺の枠線"：白い背景やカードの上で、2つ目のボタンに使う */
.wp-block-button.is-style-rcs-outline .wp-block-button__link {
  border-color: var(--color-navy-900);
  background: transparent;
  color: var(--color-navy-900);
}

/* 横に並んだカードの最後にボタンがあるときは、ボタンをカードの下端にそろえる（例：エントリーのページ） */
.wp-block-column > .wp-block-group.is-style-rcs-card:only-child:has(> .wp-block-buttons:last-child) {
  display: flex;
  flex-direction: column;
}

.wp-block-column > .wp-block-group.is-style-rcs-card:only-child > .wp-block-buttons:last-child {
  margin-top: auto;
  padding-top: 1rem;
}

/* 画像 */
.rcs-blocks .wp-block-image {
  margin: 0;
  border-radius: var(--radius-large); /* WordPress は画像に外枠と同じ角丸を付ける */
}

.rcs-blocks .wp-block-image img {
  width: 100%;
  border-radius: var(--radius-large);
}

/* 画像："横長の写真（4:3）" と "縦長の写真（4:5）" は写真をその形に切り抜く */
.wp-block-image.is-style-rcs-landscape img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 画像："イラスト（小さめ）"。線画のイラストを見出しの下などに添える。角丸は付けない */
.rcs-blocks .wp-block-image.is-style-rcs-illustration,
.wp-block-image.is-style-rcs-illustration img {
  border-radius: 0;
}

.wp-block-image.is-style-rcs-illustration {
  max-width: 14rem;
  margin-top: 2rem !important;
}

@media (min-width: 1024px) {
  .wp-block-image.is-style-rcs-illustration {
    max-width: 20rem;
    margin-top: 3rem !important;
  }
}

/*
 * 見出しのとなりのカラムにイラストだけを置いたとき：見出し（英字ラベル〜説明文）とほぼ同じ高さに小さくし、
 * 上の余白をなくしてカラムの右端にそろえる
 */
.wp-block-column > .wp-block-image.is-style-rcs-illustration:only-child {
  max-width: 13rem;
  margin-top: 0 !important;
}

@media (min-width: 782px) {
  .wp-block-column > .wp-block-image.is-style-rcs-illustration:only-child {
    margin-left: auto;
  }
}

/* 画像："写真（黄色い影）"。右上を大きく丸め、黄色の影をずらして重ねる（事業分野ページの概要の横など） */
.rcs-blocks .wp-block-image.is-style-rcs-accent {
  margin-right: 0.75rem !important; /* 影の分だけ右をあけ、画面の端で切れないようにする */
  border-radius: 1.5rem 7rem 1.5rem 1.5rem;
}

.wp-block-image.is-style-rcs-accent img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1.5rem 7rem 1.5rem 1.5rem;
  box-shadow: 0.75rem 0.75rem 0 var(--accent-shadow, var(--color-yellow)); /* 分野のページでは分野の色（pages.css） */
}

@media (min-width: 1024px) {
  .rcs-blocks .wp-block-image.is-style-rcs-accent {
    margin-right: 1.25rem !important;
  }

  .wp-block-image.is-style-rcs-accent img {
    box-shadow: 1.25rem 1.25rem 0 var(--accent-shadow, var(--color-yellow));
  }
}

/*
 * 画像："イラスト（背景つき）"。tech-pic などのイラストを、淡いラベンダーの角丸の背景の上に置く。
 * イラストは切り抜かずに全体を見せる（写真の代わりに使う。採用情報のメッセージ・働き方・福利厚生）。
 */
.rcs-blocks .wp-block-image.is-style-rcs-panel {
  background: linear-gradient(135deg in oklab, var(--color-accent-50), rgb(255 255 255 / 0.7));
}

.wp-block-image.is-style-rcs-panel img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 1.5rem;
}

/* 縦長の写真は、人物と文章を一緒に見られる大きさにおさえる */
.wp-block-image.is-style-rcs-portrait {
  max-width: 20rem;
}

.wp-block-image.is-style-rcs-portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* 横に並んだカラムの右端に縦長の写真だけを置いたときは、カラムの右端にそろえる（会社情報の代表の写真など） */
@media (min-width: 782px) {
  .rcs-blocks .wp-block-column:last-child > .wp-block-image.is-style-rcs-portrait:only-child {
    margin-left: auto;
  }
}

/* 縦長の写真を横長に切り抜くときは、顔（上の部分）が枠に入るようにする */
.wp-block-image.rcs-photo-top img {
  object-position: 50% 20%;
}

/*
 * 縦に並んだカードの横の写真：パソコンでは、となりのカードの列とちょうど同じ高さに切り抜く。
 * 写真は列の高さを決めない（重ねて置く）ので、写真の縦横比によって高さがずれることがない。
 */
@media (min-width: 1024px) {
  .wp-block-image.rcs-photo-fill {
    position: relative;
    height: 100%;
    min-height: 18rem;
  }

  .wp-block-image.rcs-photo-fill img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/*
 * グループ："明るい青の帯（ページ最後の案内）"。お問い合わせバナーと同じ、角の丸い青いグラデーション。
 * ボタンは "白" と "白い枠線" を使う。
 */
.wp-block-group.is-style-rcs-cta {
  margin: 0 max(1.25rem, calc((100% - 76rem) / 2)) 5rem;
  border-radius: var(--radius-large);
  background: linear-gradient(to bottom right in oklab, var(--color-accent-600), var(--color-accent-500), var(--color-sky-400));
  padding: 3.5rem 2rem;
  color: var(--color-white);
}

.wp-block-group.is-style-rcs-cta h2,
.wp-block-group.is-style-rcs-cta h3 {
  color: var(--color-white);
}

.wp-block-group.is-style-rcs-cta :where(p:not([class])),
.is-style-rcs-cta p.is-style-rcs-eyebrow {
  color: rgb(255 255 255 / 0.85);
}

@media (min-width: 640px) {
  .wp-block-group.is-style-rcs-cta {
    margin: 0 max(2rem, calc((100% - 76rem) / 2)) 7rem;
    padding: 5rem 3.5rem;
  }
}

/*
 * カラム："流れ（矢印でつなぐ）"。各カラムに "白いカード" を1枚ずつ置くと、STEP の札が矢印の形でつながる
 * （研修制度、選考の流れなど）。横に並ぶ画面では右向き、縦に積む画面では下向きの矢印になる。
 * カードの最初の "英字の小見出し"（STEP 1 など）が、カードの上の矢印の札になる。
 * その次の段落（「入社後」など）は、時期を表す小さなタグになる。
 * 札のすぐ後に画像を置くと、淡い背景の上にイラストとして表示する（画像の後の段落が時期のタグになる）。
 */
.wp-block-columns.is-style-rcs-flow {
  --flow-arrow: 1rem; /* 矢印の先のとがりの長さ */
  gap: 1.5rem;
}

.wp-block-columns.is-style-rcs-flow > .wp-block-column {
  display: flex;
  flex-direction: column;
}

.wp-block-columns.is-style-rcs-flow > .wp-block-column > .wp-block-group.is-style-rcs-card {
  position: relative;
  flex: 1;
  margin-top: 4rem; /* 札の分 */
}

/* STEP の札（矢印の形） */
.is-style-rcs-flow .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.25rem;
  background: linear-gradient(90deg in oklab, var(--color-navy-900), var(--color-navy-700)); /* 見出しやボタンと同じ紺 */
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  /* 縦に積む画面：下向きの矢印 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--flow-arrow) * 0.6), 50% 100%, 0 calc(100% - var(--flow-arrow) * 0.6));
  padding-bottom: calc(var(--flow-arrow) * 0.3);
}

.is-style-rcs-flow .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child::before {
  display: none; /* ページの見出しの黄色い点は付けない */
}

.is-style-rcs-flow .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child + * {
  margin-top: 0 !important;
}

/* STEP のイラスト */
.is-style-rcs-flow .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child + figure.wp-block-image {
  display: flex;
  justify-content: center;
  height: 11rem;
  border-radius: var(--radius-large);
  background: linear-gradient(160deg in oklab, var(--color-accent-50), color-mix(in oklab, var(--color-accent-50) 40%, white));
  padding: 1rem;
}

.is-style-rcs-flow .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child + figure.wp-block-image img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

/* 時期のタグ（例：入社後） */
.is-style-rcs-flow .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child + p,
.is-style-rcs-flow .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child + figure + p {
  justify-self: start;
  width: fit-content;
  border: 1px solid var(--color-accent-500);
  border-radius: var(--radius-round);
  padding: 0.125rem 0.875rem;
  color: var(--color-accent-600);
  font-size: 0.75rem;
  font-weight: 700;
}

.is-style-rcs-flow .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child + figure + p {
  margin-top: 1.25rem;
}

.is-style-rcs-flow .is-style-rcs-card h3 {
  font-size: 1.25rem;
}

/* 横に並ぶ画面：右向きの矢印。2つ目からは左側が矢じりの形にくぼむ */
@media (min-width: 782px) {
  .is-style-rcs-flow .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child {
    right: calc(var(--flow-arrow) * -1 - 0.25rem); /* 矢じりを次の札のくぼみに差し込む */
    padding-bottom: 0;
    clip-path: polygon(0 0, calc(100% - var(--flow-arrow)) 0, 100% 50%, calc(100% - var(--flow-arrow)) 100%, 0 100%);
  }

  .is-style-rcs-flow > .wp-block-column + .wp-block-column .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child {
    left: calc(var(--flow-arrow) * -1 + 0.25rem);
    padding-left: var(--flow-arrow);
    clip-path: polygon(0 0, calc(100% - var(--flow-arrow)) 0, 100% 50%, calc(100% - var(--flow-arrow)) 100%, 0 100%, var(--flow-arrow) 50%);
  }

  /* 最後の札は右にはみ出さない */
  .is-style-rcs-flow > .wp-block-column:last-child .is-style-rcs-card > p.is-style-rcs-eyebrow:first-child {
    right: 0;
  }
}