/* リンク用の右矢印は right_arrow.svg に統一し、マスクで現在の文字色を適用する。
   装飾用のため、HTML側では aria-hidden を指定する。 */
:root { --alice-right-arrow-mask: url("../images/common/right_arrow.svg"); }

/* スマホでは右向きの遷移矢印を一括して12pxにする。PC用の各部品の寸法は維持する。 */
@media (max-width: 767px) {
  :root { --alice-link-arrow-size: var(--alice-space-12); }
}

.alice-arrow-icon {
  display:inline-grid; place-items:center;
  width:var(--alice-link-arrow-size, var(--alice-space-20)); height:var(--alice-link-arrow-size, var(--alice-space-20));
  flex:0 0 auto; color:var(--alice-color-action);
}

.alice-arrow-icon::before {
  content:""; display:block; width:100%; height:100%;
}

/* HTMLで出力した矢印、共通ボタン、CSS疑似要素は同じ画像を使う。 */
.alice-arrow-icon::before,
.action-link::after, a.button::after, a.text-link::after,
.facility-link::after, .service-resource-card::after,
.footer-disclosure .footer-group-content a::after,
.knowledge-footer-topics a::after {
  background-color:currentColor;
  -webkit-mask:var(--alice-right-arrow-mask) center / contain no-repeat;
  mask:var(--alice-right-arrow-mask) center / contain no-repeat;
}

/* 下向きのPCメニュー矢印には適用しない。スマホの遷移リンクだけに適用する。 */
@media (max-width: 767px) {
  :is(#primary-nav a:not(.nav-contact):not(.nav-utility-phone), .knowledge-nav a)::after {
    background-color:currentColor;
    -webkit-mask:var(--alice-right-arrow-mask) center / contain no-repeat;
    mask:var(--alice-right-arrow-mask) center / contain no-repeat;
  }
}

/* 再利用可能なUI部品。直接編集する公開CSS。 */
.contact-cta :focus-visible { outline-color: var(--alice-color-focus-inverse); }

.contact-cta .cta-action-card:focus-visible { outline-color: var(--alice-color-deep); }

/* フォームの実行ボタン。ページ移動用のa.buttonの寸法は共通リンク部品で管理する。 */
.button:is(button, input) { display: inline-flex; align-items: center; justify-content: center; background: var(--alice-color-action); color: var(--alice-color-inverse); padding: var(--alice-space-12) var(--alice-space-32); min-height: var(--alice-button-height); font-size: var(--alice-font-small); font-weight: var(--alice-weight-bold); line-height: var(--alice-leading-label); border: var(--alice-border-width) solid var(--alice-color-action); border-radius: var(--alice-radius-button); box-shadow: var(--alice-shadow-none); transition: background var(--alice-motion-normal) var(--alice-motion-ease), border-color var(--alice-motion-normal) var(--alice-motion-ease); }

.button:is(button, input):hover, .button:is(button, input):active { background: var(--alice-color-action-hover); border-color: var(--alice-color-action-hover); }

.button:is(button, input):disabled { background: var(--alice-color-disabled-bg); border-color: var(--alice-color-border); color: var(--alice-color-disabled-text); cursor: not-allowed; }

.text-link { display: inline-flex; align-items: center; gap: var(--alice-space-32); min-height: var(--alice-target-min); padding-block: var(--alice-space-8); border-bottom: var(--alice-border-width) solid var(--alice-color-action); color: var(--alice-color-action); font-size: var(--alice-font-small); font-weight: var(--alice-weight-medium); }

.text-link:hover { color: var(--alice-color-action-hover); border-color: var(--alice-color-action-hover); }

.empty-news { border-top: var(--alice-border-width) solid var(--alice-color-border); padding-block: var(--alice-space-24); color: var(--alice-color-muted); font-size: var(--alice-font-body); }

/* 写真に青いオーバーレイを重ね、CTAの白文字の可読性を確保する。 */
.contact-cta {
  position: relative;
  padding-block: var(--alice-section-space);
  background-color: var(--alice-color-cta-overlay);
  background-image: url("../images/common/cta_image.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--alice-color-inverse);
}

.contact-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--alice-color-cta-overlay);
  opacity: 0.82;
  pointer-events: none;
}

.cta-intro, .cta-channel { min-width: 0; }

.cta-intro h2 { font-size: var(--alice-font-h2); font-weight: var(--alice-weight-medium); }

.contact-cta .cta-english { color: var(--alice-color-inverse); }

.cta-description { max-width: var(--alice-width-aside); margin-top: var(--alice-space-64); font-size: var(--alice-font-body); line-height: var(--alice-leading-body); }

.cta-channel-title { margin-bottom: var(--alice-space-20); font-size: var(--alice-font-lead); font-weight: var(--alice-weight-medium); line-height: var(--alice-leading-heading); text-align: center; }

.cta-action-card {
  display: grid; grid-template-columns: minmax(0, var(--alice-space-48)) minmax(var(--alice-space-32), 1fr) minmax(0, var(--alice-space-48));
  align-items: center; gap: var(--alice-space-16); min-height: var(--alice-space-120);
  padding: var(--alice-space-24); border-radius: var(--alice-radius-card);
  background: var(--alice-color-surface); color: var(--alice-color-text);
  transition: background var(--alice-motion-normal) var(--alice-motion-ease);
}

.cta-action-card:hover, .cta-action-card:focus-visible { background: var(--alice-color-surface-alt); }

.cta-action-icon {
  display: grid; place-items: center; align-self: stretch; min-width: 0;
  padding-right: var(--alice-space-16); border-right: var(--alice-border-width) solid var(--alice-color-border);
}

.cta-action-icon img { display: block; width: var(--alice-space-32); height: var(--alice-space-32); }

.cta-action-label { flex: 1; min-width: 0; font-size: var(--alice-font-lead); font-weight: var(--alice-weight-medium); line-height: var(--alice-leading-heading); overflow-wrap: anywhere; text-align: center; }

.cta-phone-details { display: flex; flex: 1; flex-direction: column; align-items: center; gap: var(--alice-space-4); min-width: 0; text-align: center; }

.cta-phone-card .cta-action-label { flex: none; font-size: var(--alice-font-h3); font-weight: var(--alice-weight-bold); font-variant-numeric: tabular-nums; }

.cta-phone-hours { font-size: var(--alice-font-small); font-weight: var(--alice-weight-normal); line-height: var(--alice-leading-label); overflow-wrap: anywhere; }

.cta-action-card:hover .cta-action-label, .cta-action-card:focus-visible .cta-action-label { color: var(--alice-color-action); }

/* CTAの右矢印も通常の一覧リンクと同じSVG・青色・サイズを使う。
   円背景や独自の矢印描画を持たず、共通の.alice-arrow-iconを再利用する。 */
.cta-action-arrow { justify-self:center; }

.button-light { background: var(--alice-color-surface); color: var(--alice-color-action); border-color: var(--alice-color-surface); }

.button-light:hover { background: var(--alice-color-surface-alt); color: var(--alice-color-action-hover); border-color: var(--alice-color-surface-alt); }

.button-outline { background: transparent; border-color: var(--alice-color-inverse); }

.button-outline:hover { background: var(--alice-color-action-hover); border-color: var(--alice-color-inverse); }

.notice { border-left: var(--alice-focus-width) solid var(--alice-color-action); border-radius: var(--alice-radius-control); background: var(--alice-color-surface-alt); padding: var(--alice-space-16) var(--alice-space-24); font-size: var(--alice-font-small); color: var(--alice-color-text); margin: 0 0 var(--alice-space-32); }

.notice--error { border-color: var(--alice-color-error); background: var(--alice-color-error-bg); color: var(--alice-color-error); }

.policy-content .check-list { display: block; list-style: disc; padding-left: var(--alice-space-24); margin-top: var(--alice-space-16); }

.policy-content .check-list li { display: list-item; }

.policy-content .check-list li + li { margin-top: var(--alice-space-8); }

.check-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--alice-space-12) var(--alice-space-24); margin-top: var(--alice-space-24); }

.check-list li { position: relative; font-size: var(--alice-font-body); }

/* すべてのFAQで同じ開閉コンポーネントを使う。 */
.faq { border-bottom: var(--alice-border-width) solid var(--alice-color-border); }

.faq:first-of-type { border-top: var(--alice-border-width) solid var(--alice-color-border); }

.faq summary {
  display: grid; grid-template-columns: var(--alice-space-40) minmax(0, 1fr) var(--alice-space-24);
  align-items: center; gap: var(--alice-space-16); min-height: var(--alice-target-min);
  padding: var(--alice-space-24) var(--alice-space-12);
  cursor: pointer; list-style: none; font-size: var(--alice-font-body);
  font-weight: var(--alice-weight-normal); line-height: var(--alice-leading-heading);
  transition: color var(--alice-motion-normal) var(--alice-motion-ease);
}

.faq summary:hover, .faq summary:focus-visible { color: var(--alice-color-action); }

.faq summary::-webkit-details-marker { display: none; }

.faq-mark { font-family: var(--alice-font-family-latin); font-weight: var(--alice-weight-normal); text-align: center; }

.faq-question { min-width: 0; }

.faq-indicator { text-align: center; font-size: var(--alice-font-h3); font-weight: var(--alice-weight-normal); line-height: var(--alice-leading-none); }

.faq-indicator::before { content: "+"; }

.faq[open] .faq-indicator::before { content: "−"; }

.faq-answer {
  display: grid; grid-template-columns: var(--alice-space-40) minmax(0, 1fr) var(--alice-space-24);
  align-items: start; gap: var(--alice-space-16);
  padding: var(--alice-space-16) var(--alice-space-12) var(--alice-space-48);
}

.faq-answer .faq-mark { grid-column: 1; color: var(--alice-color-action); }

.faq-answer p { grid-column: 2; margin: 0; font-size: var(--alice-font-body); line-height: var(--alice-leading-reading); font-weight: var(--alice-weight-normal); }

/* FAQのカテゴリは見出しと余白で区切る。 */
.faq-group > h2 {
  display: flex; align-items: center; min-height: var(--alice-target-min);
  margin-bottom: var(--alice-space-32);
  font-size: var(--alice-font-h3);
}

.faq-group + .faq-group { padding-top: var(--alice-space-80); }

.faq-group > .faq:first-of-type { border-top: var(--alice-border-width) solid var(--alice-color-border); }

.faq-contact { margin-top: var(--alice-space-48); padding-top: var(--alice-space-40); text-align: center; }

.faq-contact p { margin-bottom: var(--alice-space-24); line-height: var(--alice-leading-reading); }

.filters { background: var(--alice-color-surface-alt); border-radius: var(--alice-radius-card); padding: var(--alice-card-pad); display: flex; flex-wrap: wrap; gap: var(--alice-space-16); align-items: flex-end; margin-bottom: var(--alice-space-32); }

.filters label { font-size: var(--alice-font-small); flex: 1; min-width: var(--alice-width-search-min); }

.filters input { display: block; width: 100%; padding: var(--alice-space-12) var(--alice-space-16); background: var(--alice-color-surface); border: var(--alice-border-width) solid var(--alice-color-control-border); color: var(--alice-color-text); min-height: var(--alice-control-height); border-radius: var(--alice-radius-control); font-size: var(--alice-font-input); line-height: var(--alice-leading-label); }

.filters input { margin-top: var(--alice-space-8); }

/* 全検索フォームの送信ボタンは同一のSVG・寸法・間隔を使う。 */
.alice-search-submit { gap:var(--alice-space-8); white-space:nowrap; }
.alice-search-submit-icon {
  display:inline-flex; flex:0 0 var(--alice-space-20);
  width:var(--alice-space-20); height:var(--alice-space-20);
  align-items:center; justify-content:center;
}
.alice-search-submit-icon img {
  display:block; width:100%; height:100%;
  /* SVGは濃灰色なので、青い検索ボタン上では白く表示する。 */
  filter:brightness(0) invert(1);
}

.result-count { font-size: var(--alice-font-small); color: var(--alice-color-muted); }

.empty-state { padding: var(--alice-space-64) var(--alice-space-32); background: var(--alice-color-surface-alt); border-radius: var(--alice-radius-card); text-align: center; }

.empty-state :is(h2, h3) { font-size: var(--alice-font-h3); margin-bottom: var(--alice-space-24); }

.empty-state p { font-size: var(--alice-font-body); color: var(--alice-color-muted); }

.empty-state .button { margin-top: var(--alice-space-32); }

.pagination { display: flex; flex-wrap: wrap; gap: var(--alice-space-8); margin-top: var(--alice-space-40); justify-content: center; }

.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--alice-target-min); min-height: var(--alice-target-min); padding: var(--alice-space-8) var(--alice-space-16); border: var(--alice-border-width) solid var(--alice-color-control-border); border-radius: var(--alice-radius-control); font-size: var(--alice-font-small); }

.pagination .current { background: var(--alice-color-text); color: var(--alice-color-inverse); border-color: var(--alice-color-text); }

.pagination a { transition:background var(--alice-motion-normal) var(--alice-motion-ease),border-color var(--alice-motion-normal) var(--alice-motion-ease); }

.pagination a:hover, .pagination a:focus-visible { color:var(--alice-color-text); background:var(--alice-color-disabled-bg); border-color:var(--alice-color-text); }

.article-content a:not(.card, .button, .text-link) { color: var(--alice-color-action); text-decoration: underline; text-underline-offset: var(--alice-space-4); }

.back-link { margin-top: var(--alice-space-48); }

.back-link--center { text-align:center; }

.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--alice-column-gap); margin-top: var(--alice-space-48); }

.contact-page .form-layout { display: block; margin-top: 0; }

.contact-page .contact-form { max-width: none; margin-inline: auto; }

.recruit-application-page .alice-cf7-fields > .alice-cf7-field:first-of-type { border-top: 0; }

/* 電話は問い合わせフォームの下に補助導線として配置する。 */
.contact-phone-notice { display:grid; grid-template-columns:minmax(0,1fr) max-content; align-items:center; gap:var(--alice-space-24); margin-top:var(--alice-space-64); padding:var(--alice-space-32); border:var(--alice-border-width) solid var(--alice-color-border); border-radius:var(--alice-radius-control); background:var(--alice-color-surface); }

.contact-phone-notice__intro { min-width:0; }

.contact-phone-notice__title { color:var(--alice-color-text); font-size:var(--alice-font-h4); font-weight:var(--alice-weight-medium); line-height:var(--alice-leading-heading); margin-bottom:var(--alice-space-8); }

.contact-phone-notice__description { color:var(--alice-color-muted); font-size:var(--alice-font-small); line-height:var(--alice-leading-body); }

.contact-phone-notice__details { display:flex; flex-direction:column; align-items:flex-start; gap:var(--alice-space-4); min-width:0; }

.contact-phone-notice__number { display:inline-flex; align-items:center; justify-content:center; min-height:var(--alice-target-min); max-width:100%; gap:var(--alice-space-12); color:var(--alice-color-text); text-decoration:none; font-size:calc(var(--alice-font-h3) + var(--alice-space-8)); font-weight:var(--alice-weight-bold); font-variant-numeric:tabular-nums; line-height:var(--alice-leading-compact); }

.contact-phone-notice__number:hover, .contact-phone-notice__number:focus-visible { color:var(--alice-color-action); }

.contact-phone-notice__number:focus-visible { outline:var(--alice-focus-width) solid var(--alice-color-focus); outline-offset:var(--alice-space-4); }

.contact-phone-notice__icon img { width:var(--alice-space-24); height:var(--alice-space-24); }

.contact-phone-notice__digits { white-space:nowrap; }

.contact-phone-notice__hours { color:var(--alice-color-muted); font-size:var(--alice-font-small); line-height:var(--alice-leading-body); }

@media (max-width: 767px) {
.contact-phone-notice { grid-template-columns:minmax(0,1fr); gap:var(--alice-space-16); margin-top:var(--alice-space-48); padding:var(--alice-space-24); text-align:center; }
.contact-phone-notice__details { align-items:center; }
.contact-phone-notice__number { font-size:clamp(var(--alice-font-h3), 7.5vw, calc(var(--alice-font-h3) + var(--alice-space-8))); }
}

@media (max-width: 479px) {
.contact-phone-notice { padding:var(--alice-space-24) var(--alice-space-16); }
.contact-phone-notice__number { gap:var(--alice-space-8); }
}

.contact-form { width: 100%; max-width: var(--alice-width-form); }

/* Alice管理のCF7に範囲を限定し、他のフォームの外観に影響させない。 */
.alice-cf7-form { min-width: 0; }

.alice-cf7-form .wpcf7 { width: 100%; }

.alice-cf7-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--alice-space-12); padding-block: var(--alice-space-24); border-bottom: var(--alice-border-width) solid var(--alice-color-border); }

.alice-cf7-field:first-child { border-top: var(--alice-border-width) solid var(--alice-color-border); }

.alice-cf7-meta { display: flex; align-items: center; gap: var(--alice-space-12); flex-wrap: wrap; }

.alice-cf7-label { color: var(--alice-color-text); font-size: var(--alice-font-small); font-weight: var(--alice-weight-medium); line-height: var(--alice-leading-body); }

.alice-cf7-required, .alice-cf7-optional { display: inline-flex; align-items: center; justify-content: center; order: -1; flex: 0 0 auto; padding: var(--alice-space-4) var(--alice-space-8); font-size: var(--alice-font-caption); line-height: var(--alice-leading-label); font-weight: var(--alice-weight-normal); border-radius: var(--alice-radius-control); }

.alice-cf7-required { color: var(--alice-color-error); background: var(--alice-color-error-bg); }

.alice-cf7-optional { color: var(--alice-color-muted); background: var(--alice-gray-100); border: var(--alice-border-width) solid var(--alice-color-border); }

/* 旧版の項目順に依存せず、必須バッジ・ラベルの順をグリッドで保証する。 */
.contact-page .alice-cf7-form .alice-cf7-meta,
.contact-page .alice-cf7-form .mw-contact-field__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; justify-items: start; column-gap: var(--alice-space-12); row-gap: var(--alice-space-4); }

/* CF7が自動挿入するp要素を平坦化し、グリッドの配置を保つ。 */
.contact-page .alice-cf7-form .alice-cf7-meta > p,
.contact-page .alice-cf7-form .mw-contact-field__meta > p { display: contents; }

.contact-page .alice-cf7-form .alice-cf7-meta .alice-cf7-required,
.contact-page .alice-cf7-form .alice-cf7-meta .alice-cf7-optional,
.contact-page .alice-cf7-form .mw-contact-field__meta .mw-contact-field__badge { grid-column: 1; grid-row: 1; }

.contact-page .alice-cf7-form .alice-cf7-meta .alice-cf7-label,
.contact-page .alice-cf7-form .mw-contact-field__meta .mw-contact-field__name { grid-column: 2; grid-row: 1; }

/* 旧版のMW形式の保存済みフォームも本文を変えずに表示する。 */
.contact-page .alice-cf7-form .mw-contact-field__badge--required { color: var(--alice-color-error); background: var(--alice-color-error-bg); border-color: transparent; }

.contact-page .alice-cf7-form .mw-contact-field__badge--optional { color: var(--alice-color-muted); background: var(--alice-gray-100); border: var(--alice-border-width) solid var(--alice-color-border); }

.alice-cf7-control, .alice-cf7-control .wpcf7-form-control-wrap { display: block; min-width: 0; width: 100%; }

.alice-cf7-control .alice-cf7-input { display: block; box-sizing: border-box; width: 100%; min-height: var(--alice-control-height); padding: var(--alice-space-12) var(--alice-space-16); border: var(--alice-border-width) solid var(--alice-color-control-border); border-radius: var(--alice-radius-control); background: var(--alice-color-surface); color: var(--alice-color-text); font-size: var(--alice-font-body); }

.alice-cf7-control textarea.alice-cf7-input { min-height: var(--alice-space-120); resize: vertical; }

.alice-cf7-hint { margin-top: var(--alice-space-8); font-size: var(--alice-font-caption); color: var(--alice-color-muted); line-height: var(--alice-leading-body); }

/* CF7のフォーム下部に適用する余白。 */
.alice-cf7-bottom { margin-top: var(--alice-space-32); }

.alice-cf7-privacy { margin: var(--alice-space-24) 0 0; color: var(--alice-color-muted); font-size: var(--alice-font-caption); line-height: var(--alice-leading-reading); text-align: left; }

.alice-cf7-privacy a { color: var(--alice-color-action); text-decoration: underline; text-underline-offset: var(--alice-space-4); }

/* CF7の送信中表示は保持し、ボタン横に不要な幅を確保しない。 */
.alice-cf7-submit-wrap { position:relative; display:flex; align-items:center; justify-content:center; }

.alice-cf7-submit-wrap > p { position:relative; display:flex; justify-content:center; align-items:center; margin:0; }

.alice-cf7-submit-wrap .wpcf7-spinner { position:absolute; top:calc(100% + var(--alice-space-8)); left:50%; margin:0; transform:translateX(-50%); }

.contact-page .alice-cf7-submit-wrap .alice-cf7-submit { width: auto; }

.alice-cf7-form .mw-contact-field__badge { order: -1; }

.alice-cf7-form .mw-contact-radio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--alice-space-8); }

.alice-cf7-submit-wrap .alice-cf7-submit { min-height: var(--alice-control-height); }

.alice-cf7-form .wpcf7-not-valid-tip { font-size: var(--alice-font-caption); color: var(--alice-color-error); margin-top: var(--alice-space-8); }

.alice-cf7-form .wpcf7 form .wpcf7-response-output { margin: var(--alice-space-24) 0 0; padding: var(--alice-space-16); border: var(--alice-border-width) solid var(--alice-color-border); border-radius: var(--alice-radius-control); }

/* 工程は枠・薄い番号・下向き三角で順序を示す。 */
.flow-guide-content { max-width: var(--alice-width-reading); background: var(--alice-color-surface); }

.flow-guide-section-title { text-align: center; margin-bottom: var(--alice-space-40); }

.flow-guide-section-title h2 { font-size: var(--alice-font-h2); font-weight: var(--alice-weight-medium); }

.flow-guide-lead { margin-top: var(--alice-space-16); color: var(--alice-color-muted); line-height: var(--alice-leading-reading); }

.flow-steps { display: flex; flex-direction: column; gap: var(--alice-space-48); list-style: none; margin: 0; padding: 0; }

.flow-step { position: relative; min-width: 0; }

.flow-step-card {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center; column-gap: var(--alice-space-48); min-width: 0;
  padding: var(--alice-space-40) var(--alice-space-48);
  border: var(--alice-border-width) solid var(--alice-color-border);
  border-radius: var(--alice-radius-card); background: var(--alice-color-surface);
}

.flow-step-heading {
  position: relative; isolation: isolate; display: flex; align-items: center;
  min-width: 0; min-height: var(--alice-space-120);
  padding-inline: var(--alice-space-40) var(--alice-space-16);
}

.flow-step-number {
  position: absolute; z-index: calc(-1 * var(--alice-z-decor)); left: 0; top: 50%;
  transform: translateY(-50%); font-family: var(--alice-font-family-latin);
  font-size: var(--alice-space-120); font-weight: var(--alice-weight-normal);
  font-variant-numeric: tabular-nums; line-height: var(--alice-leading-none);
  color: var(--alice-color-action); opacity: 0.10;
  pointer-events: none; user-select: none;
}

.flow-step-title { margin: 0; font-size: var(--alice-font-h3); font-weight: var(--alice-weight-medium); line-height: var(--alice-leading-heading); }

.flow-step-text { min-width: 0; margin: 0; color: var(--alice-color-text); font-size: var(--alice-font-body); line-height: var(--alice-leading-reading); }

.flow-step:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--alice-space-32));
  transform: translateX(-50%); width: 0; height: 0;
  border-left: var(--alice-space-12) solid transparent;
  border-right: var(--alice-space-12) solid transparent;
  border-top: var(--alice-space-16) solid var(--alice-color-muted);
  pointer-events: none;
}

@media (max-width: 1199px) {
.flow-step-card { padding-inline: var(--alice-space-32); column-gap: var(--alice-space-32); }
.flow-step-heading { min-height: var(--alice-space-96); }
.flow-step-number { font-size: var(--alice-space-48); }
}

@media (max-width: 959px) {
.flow-step-card { grid-template-columns: minmax(0,1fr); row-gap: var(--alice-space-16); }
.flow-step-heading { min-height: var(--alice-space-96); }
}

@media (max-width: 479px) {
.flow-guide-section-title { margin-bottom: var(--alice-space-32); }
.flow-step-card { padding: var(--alice-space-24) var(--alice-space-16); }
.flow-step-title { font-size: var(--alice-font-h4); }
}

@media (max-width: 1199px) {
.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
.card-grid { grid-template-columns: 1fr; }
.cta-phone-card .cta-action-label { font-size: var(--alice-font-h2); }
.cta-phone-hours { font-size: var(--alice-font-caption); }
.check-list { grid-template-columns: 1fr; margin-top: var(--alice-space-20); }
.faq summary { grid-template-columns: var(--alice-space-24) minmax(0, 1fr) var(--alice-space-24); gap: var(--alice-space-12); padding: var(--alice-space-20) 0; }
.faq-answer { grid-template-columns: var(--alice-space-24) minmax(0, 1fr) var(--alice-space-24); gap: var(--alice-space-12); padding: var(--alice-space-12) 0 var(--alice-space-32); }
.faq-group + .faq-group { padding-top: var(--alice-space-56); }
.filters label { flex-basis: 100%; min-width: 0; }
.filters button { width: 100%; }
.empty-state { padding: var(--alice-space-40) var(--alice-space-24); }
.form-layout { margin-top: var(--alice-space-32); }
}

@media (max-width: 479px) {
.button:is(button, input) { width: 100%; padding-inline: var(--alice-space-24); }
}

/* 本文の写真だけに角丸を付け、全面ヒーロー写真には付けない。 */
.home-work-card img, .post-card img, .representative-photo img, .article-image { border-radius:var(--alice-radius-image); }

.post-card .client-logo img, .home-work-card .client-logo img, .client-logo img { display:block; width:auto; height:auto; max-width:100%; max-height:var(--alice-space-80); aspect-ratio:auto; object-fit:contain; border-radius:var(--alice-radius-none); margin:0; background:var(--alice-color-surface); }

/* 施工実績の案内は枠のないテキストリンクとし、カード内中央に配置する。 */
.home-work-info .text-link { display:flex; width:fit-content; max-width:100%; margin:var(--alice-space-20) auto 0; }

@media (max-width: 959px) {
.home-facilities .section-heading { display:block; }
.home-facilities .section-heading > p { margin-top:var(--alice-space-24); max-width:var(--alice-width-intro); }
}

/* 共通一覧はトップのカードと分け、1列の線型リンクにする。 */
.directory-link-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin-block:var(--alice-space-32); border-top:var(--alice-border-width) solid var(--alice-color-border); }

.directory-link-row {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--alice-space-24);
  align-items:center; column-gap:var(--alice-space-48);
  min-height:var(--alice-target-min); padding:var(--alice-space-40) var(--alice-space-24);
  border-bottom:var(--alice-border-width) solid var(--alice-color-border);
  background:transparent; color:var(--alice-color-text); text-decoration:none; border-radius:var(--alice-radius-none);
  transition:background var(--alice-motion-normal) var(--alice-motion-ease);
}

.directory-link-title { min-width:0; font-size:var(--alice-font-h4); font-weight:var(--alice-weight-medium); line-height:var(--alice-leading-heading); }

.directory-link-description { min-width:0; width:100%; max-width:var(--alice-width-directory-copy); font-size:var(--alice-font-small); line-height:var(--alice-leading-body); color:var(--alice-color-muted); }

.directory-link-arrow { justify-self:end; color:var(--alice-color-action); }

.directory-link-row:hover, .directory-link-row:focus-visible { background:var(--alice-color-surface-alt); }

.directory-link-row:hover .directory-link-title, .directory-link-row:focus-visible .directory-link-title { color:var(--alice-color-action); }

/* トップページの会社情報・サービス・お困りごと・施設／設備の共通リンク操作。
   背景・枠線・配置はページ固有CSSに残し、文字色と矢印の反応だけここで統一する。 */
.alice-hover-link .service-row-title,
.alice-hover-link.facility-link {
  transition:color var(--alice-motion-normal) var(--alice-motion-ease);
}

.alice-hover-link .service-row-arrow,
.alice-hover-link.facility-link::after {
  color:var(--alice-color-muted);
  transition:color var(--alice-motion-normal) var(--alice-motion-ease),
    transform 260ms cubic-bezier(0.22,1,0.36,1);
}

/* 行リンクでは下線を追加しない。カードもタイトル色と矢印の動きを共通化する。 */
.alice-hover-link:is(:hover, :focus-visible) .service-row-title,
.alice-hover-link:is(:hover, :focus-visible) .service-row-arrow,
.alice-hover-link.facility-link:is(:hover, :focus-visible),
.alice-hover-link.facility-link:is(:hover, :focus-visible)::after {
  color:var(--alice-color-action);
}

.alice-hover-link.facility-link:is(:hover, :focus-visible) { text-decoration:none; }

@media (prefers-reduced-motion: no-preference) {
  .alice-hover-link:is(:hover, :focus-visible) .service-row-arrow,
  .alice-hover-link.facility-link:is(:hover, :focus-visible)::after {
    transform:translateX(var(--alice-space-4));
  }
}

@media (max-width: 959px) {
.directory-link-row { grid-template-columns:minmax(0,1fr) var(--alice-space-24); column-gap:var(--alice-space-16); row-gap:var(--alice-space-8); padding:var(--alice-space-32) var(--alice-space-16); }
.directory-link-title { grid-column:1; grid-row:1; }
.directory-link-description { grid-column:1; grid-row:2; }
.directory-link-arrow { grid-column:2; grid-row:1 / span 2; align-self:center; }
}

.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--alice-space-64); margin-block: var(--alice-space-32); }

.card { display: block; position: relative; padding-block: var(--alice-space-32); border-top: var(--alice-border-width) solid var(--alice-color-border); }

.card .kicker { margin-bottom: var(--alice-space-12); }

.card h3 { font-size: var(--alice-font-h3); margin-bottom: var(--alice-space-16); }

.card p { font-size: var(--alice-font-small); color: var(--alice-color-muted); }

.post-card img { margin-bottom: var(--alice-space-24); aspect-ratio: var(--alice-image-ratio); object-fit: cover; }

.empty-state { text-align: left; }

@media (max-width: 767px) {
.card-grid { grid-template-columns:1fr; }
}

@media (max-width: 1199px) {
.cta-intro { grid-column:1 / -1; }
.cta-description { margin-top:var(--alice-space-32); }
}

@media (max-width: 767px) {
.form-layout { grid-template-columns:1fr; gap:var(--alice-space-32); }
.cta-intro { grid-column:auto; }
.cta-action-card { min-height:var(--alice-space-96); gap:var(--alice-space-8); padding:var(--alice-space-16); }
.cta-action-icon { padding-right:var(--alice-space-8); }
.cta-action-icon img { max-width:100%; }
.cta-action-label { font-size:var(--alice-font-body); }
.cta-channel-title { font-size:var(--alice-font-body); }
/* スマホの電話アイコンと番号は同じ行、受付時間はその下に置く。 */
 .cta-phone-card { grid-template-columns: minmax(0, max-content) minmax(0, max-content); grid-template-rows: auto auto; justify-content:center; align-content:center; column-gap:var(--alice-space-8); row-gap:var(--alice-space-4); }
.cta-phone-card .cta-phone-details { display:contents; }
.cta-phone-card .cta-action-icon { grid-column:1; grid-row:1; align-self:center; padding:0; border:0; }
.cta-phone-card .cta-action-label { grid-column:2; grid-row:1; font-size: clamp(var(--alice-font-h3), 7.2vw, var(--alice-font-h2)); white-space: normal; }
.cta-phone-card .cta-phone-hours { grid-column:1 / -1; grid-row:2; justify-self:stretch; width:100%; min-width:0; max-width:100%; text-align:center; }
}

.definition-list { margin: var(--alice-space-24) 0 0; }

.definition-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--alice-space-24); border-top: var(--alice-border-width) solid var(--alice-color-border); padding-block: var(--alice-space-24); }

.definition-list > div:last-child { border-bottom: var(--alice-border-width) solid var(--alice-color-border); }

.definition-list dt { color: var(--alice-color-muted); font-weight: var(--alice-weight-normal); }

.definition-list dd { margin: 0; }

@media (max-width: 767px) {
.definition-list > div { grid-template-columns: 1fr; gap: var(--alice-space-8); }
}

.company-more .card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }

@media (max-width: 767px) {
.company-more .card-grid { grid-template-columns: 1fr; }
}

.recruit-entry .button { flex-shrink: 0; }

.knowledge-browse[open] > summary .faq-indicator::before { content:"−"; }

.knowledge-topic-group[open] .faq-indicator::before { content:"−"; }

.knowledge-side-contact .button { display:flex; padding-inline:var(--alice-space-12); font-size:var(--alice-font-small); text-align:center; }

.home-knowledge-copy .text-link { margin-top:var(--alice-space-24); }

@media (max-width: 767px) {
.home-knowledge-copy .home-knowledge-action .text-link { margin-top:0; }
}

/* 企業サイトの補助項目はすべての折りたたみ幅で表示する。 */

/* ご利用案内と、お知らせ・施工実績一覧でホバー・キーボードフォーカスを共通化する。
   背景と見出しの色だけを変え、上下の区切り線は通常のグレーを維持する。 */
:is(.service-request-guide .service-guide-card, .post-list .post-card) {
  transition:background-color var(--alice-motion-normal) var(--alice-motion-ease);
}

:is(.service-request-guide .service-guide-card, .post-list .post-card):is(:hover, :focus-visible) {
  background-color:var(--alice-color-action-surface-hover);
  border-color:var(--alice-color-border);
}

:is(.service-request-guide .service-guide-card .service-resource-label, .post-list .post-card h3) {
  transition:color var(--alice-motion-normal) var(--alice-motion-ease);
}

:is(.service-request-guide .service-guide-card, .post-list .post-card):is(:hover, :focus-visible) :is(.service-resource-label, h3) {
  color:var(--alice-color-action);
}

/* お知らせ・施工実績一覧は1行全体をリンクとし、区切り線は常に通常色とする。 */
.post-list { display:grid; grid-template-columns:minmax(0,1fr); margin-block:var(--alice-space-32); }

.post-list .post-card {
  display:flex; align-items:flex-start; gap:var(--alice-space-32); padding-inline:var(--alice-space-16);
  border-bottom:var(--alice-border-width) solid var(--alice-color-border);
  /* 隣接する罫線を重ね、行の境界が太くならないようにする。 */
  margin-bottom:calc(-1 * var(--alice-border-width));
}

.post-list .post-card h3 { font-size:var(--alice-font-h4); }

.post-card-media { flex:0 0 var(--alice-width-control-min); }

.post-list .post-card-media img { width:100%; height:auto; margin:0; }

.post-list .post-card-media .client-logo { margin:0; }

.post-card-copy { flex:1; min-width:0; }

/* News index: YYYY年M月D日 / announcement tag / title; no thumbnail or excerpt. */
.post-list--news .post-card { align-items:center; padding-block:var(--alice-space-24); }

.post-list--news .post-card-copy { display:grid; grid-template-columns:var(--alice-space-120) var(--alice-space-80) minmax(0,1fr); align-items:center; column-gap:var(--alice-space-24); }

.post-list--news .post-card h3 { margin:0; min-width:0; font-size:var(--alice-font-body); font-weight:var(--alice-weight-normal); line-height:var(--alice-leading-heading); overflow-wrap:anywhere; }

.post-list--news .news-date { justify-self:start; font-size:var(--alice-font-small); color:var(--alice-color-muted); white-space:nowrap; }

.post-list--news .news-tag {
  display:inline-flex; align-items:center; justify-content:center; width:100%; white-space:nowrap;
  padding:var(--alice-space-4) var(--alice-space-12); border:var(--alice-border-width) solid var(--alice-color-border);
  border-radius:var(--alice-radius-control); font-size:var(--alice-font-caption); line-height:var(--alice-leading-label);
}

@media (max-width: 767px) {
.post-list .post-card { flex-direction:column; gap:var(--alice-space-16); }
.post-card-media { flex-basis:auto; width:100%; max-width:var(--alice-width-search-min); }
.post-list--news .post-card-copy { grid-template-columns:var(--alice-space-120) var(--alice-space-80); row-gap:var(--alice-space-12); column-gap:var(--alice-space-16); width:100%; }
.post-list--news .post-card h3 { grid-column:1 / -1; }
}

@media (max-width: 479px) {
.post-list--news .post-card-copy { grid-template-columns:minmax(0,1fr) var(--alice-space-80); }
}

/* 通常の移動ボタンはトップ・詳細・旧text-link呼び出しで同じ寸法を使う。 */
.action-link, a.button, a.text-link {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--alice-action-height, var(--alice-space-48));
  width:var(--alice-action-width, min(100%,20rem)); min-width:0; max-width:100%;
  padding:var(--alice-space-8) var(--alice-space-32);
  gap:var(--alice-space-16);
  border:var(--alice-border-width) solid var(--alice-color-text); border-radius:var(--alice-radius-button);
  background:var(--alice-color-surface); color:var(--alice-color-text); text-align:center; text-decoration:none;
  font-size:var(--alice-font-small); font-weight:var(--alice-weight-bold); line-height:var(--alice-leading-label);
  transition:background var(--alice-motion-normal) var(--alice-motion-ease),color var(--alice-motion-normal) var(--alice-motion-ease),border-color var(--alice-motion-normal) var(--alice-motion-ease);
}

.action-link::after, a.button::after, a.text-link::after {
  content:""; position:absolute; right:var(--alice-space-20); top:50%;
  width:var(--alice-link-arrow-size, var(--alice-space-16)); height:var(--alice-link-arrow-size, var(--alice-space-16));
  transform:translateY(-50%);
  transition:transform 260ms cubic-bezier(0.22,1,0.36,1),width 260ms cubic-bezier(0.22,1,0.36,1);
}

/* 青いヘッダー・ナレッジ相談ボタンの左側でmail_icon.svgを共用する。
   SVG自体は濃色のため、青地では白く見えるようにする。 */
.button-mail-icon {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 var(--alice-space-20);
  width:var(--alice-space-20); height:var(--alice-space-20);
}
.button-mail-icon img {
  display:block; width:100%; height:100%;
  filter:brightness(0) invert(1);
}

/* お問い合わせと矢印不要の修飾ボタンは、同じ共通矢印を非表示にする。 */
.action-link:is(.button-inquiry, .button-no-arrow)::after { content:none; }

/* 通常の共通ボタンは濃い青背景と白文字でホバー・フォーカスを明確にする。
   部分的な色の塗り広げを避け、切り替え中も文字と矢印の視認性を保つ。 */
:is(.action-link, a.button, a.text-link):not(.button-inquiry, .knowledge-contact-button, .nav-contact, .button-light, .button-outline):is(:hover, :focus-visible) {
  background:var(--alice-color-action-hover);
  color:var(--alice-color-inverse);
  border-color:var(--alice-color-action-hover);
  text-decoration:none;
}

/* 画像の幅を4px伸ばしながら右へ4px移動する（減らす設定では動かさない）。 */
@media (prefers-reduced-motion: no-preference) {
  :is(.action-link, a.button, a.text-link):not(.button-inquiry, .knowledge-contact-button, .nav-contact, .button-light, .button-outline):is(:hover, :focus-visible)::after {
    width:var(--alice-link-arrow-size, var(--alice-space-20));
    transform:translate(var(--alice-space-4),-50%);
  }
}

/* ナレッジの相談導線だけを青にする。共通ボタンの寸法や矢印は再利用する。 */
a.button.knowledge-contact-button {
  background:var(--alice-color-action);
  color:var(--alice-color-inverse);
  border-color:var(--alice-color-action);
}

a.button.knowledge-contact-button:is(:hover, :focus-visible) {
  background:var(--alice-color-action-hover);
  color:var(--alice-color-inverse);
  border-color:var(--alice-color-action-hover);
}

@media (max-width: 767px) {
/* 本文ボタンはスマホでも全幅にせず、操作領域の高さを確保する。 */
  .action-link, a.button, a.text-link { --alice-action-width:min(90%,18rem); --alice-action-height:var(--alice-space-56); }
}

.cta-inquiry-card { border-left: var(--alice-border-emphasis) solid var(--alice-color-action); }

.cta-inquiry-card:hover, .cta-inquiry-card:focus-visible { background: var(--alice-color-surface-alt); }