@charset "UTF-8";
/* ===========================================================
   サンプルサイト（人材）共通スタイル
   数値はすべて docs/実測/jinzai/ の計測値に合わせる（解釈しない）。
   1rem = 10px（html: 62.5%）。
   =========================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 62.5%; }
img { max-width: 100%; height: auto; display: block; border-style: none; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; }

/* ---------- 変数（配色は palette の実測値） ---------- */
:root {
  --c-red: #d74144;          /* アクセント（フッター・帯・ボタン・SPメニュー） */
  --c-bg: #f8f8f8;           /* body・ヘッダー背景 */
  --c-white: #ffffff;
  --c-text: #000000;
  --c-line: #c0c0c0;         /* 罫線 */
  --c-fill: #f0f0f0;         /* 補助背景 */
  --c-line-soft: #e9e9e9;    /* 淡い区切り */
  --w-wide: 1240px;
  --w-main: 1080px;
  --w-mid: 1040px;
  --w-narrow: 864px;
  --h-header: 90px;
  --h-header-sp: 56px;
}

/* ---------- base ---------- */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;            /* 16px → 24px */
  letter-spacing: 0;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
main { display: block; padding-top: var(--h-header); }
body.is-white { background: var(--c-white); }
h1, h2, h3, h4 { font-weight: 700; line-height: inherit; }

/* ---------- コンテナ（containers の実測値 1040 / 1080 / 864 / 1240） ---------- */
.u-inner { width: 100%; max-width: var(--w-main); margin-inline: auto; }
.u-inner--mid { width: 100%; max-width: var(--w-mid); margin-inline: auto; }
.u-inner--narrow { width: 100%; max-width: var(--w-narrow); margin-inline: auto; }
.u-inner--wide { width: 100%; max-width: var(--w-wide); margin-inline: auto; }
.u-hidden { display: none; }

/* ===========================================================
   ヘッダー（PC 90px／SP 56px・fixed・背景 #f8f8f8・影なし・スクロールで変化なし）
   =========================================================== */
.l-header {
  position: fixed; top: 0; left: 0; z-index: 1000;
  width: 100%; height: var(--h-header);
  background: var(--c-bg);
  transition: all;
}
.l-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0;
}
.l-logo { padding-left: 20px; }
.l-logo a { display: block; transition: opacity .2s; }
.l-logo img { height: 48px; width: auto; }
.l-logo a:hover { opacity: .7; }
.l-logo__tag { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--c-text); }

.l-header__main { display: flex; align-items: stretch; height: 100%; gap: 16px; }
.l-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.l-nav__row { display: flex; align-items: center; }
.l-nav__list { display: flex; align-items: center; gap: 20px; }
.l-nav__row--sub .l-nav__list { gap: 16px; }
.l-nav__row--sub .l-nav__item { font-size: 1.5rem; }
.l-nav__row--sub .l-nav__item a { font-weight: 700; }
.l-nav__row--main .l-nav__item { font-size: 1.6rem; }
.l-nav__row--main .l-nav__item a { font-weight: 700; }
.l-nav__item a:hover, .l-nav__item a:hover::before, .l-nav__item a:hover::after { text-decoration-line: underline; }
.l-nav__item dl { display: flex; align-items: center; gap: 4px; }
.l-nav__item dt { font-weight: 400; }
.l-nav__item dd { display: none; }
.l-nav__caret { display: inline-block; width: .5em; height: .5em; margin-left: .4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); }

/* 右端の2ブロック（ログイン／問い合わせ）はヘッダーの高さいっぱい・アイコンは背景画像で描く
   （参考のヘッダーは img 1・svg 0・btn 1＝要素数を増やさないため） */
.l-header__actions { display: flex; align-items: stretch; height: 100%; }
.l-haction {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 160px; height: 100%; padding: 0 8px;
  font-size: 1.3rem; font-weight: 700; text-align: center; line-height: 1.2;
  transition: opacity .2s;
}
.l-haction::before { content: ""; display: block; width: 26px; height: 26px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.l-haction:hover { opacity: .7; }
.l-haction--login { background: var(--c-fill); color: var(--c-text); }
.l-haction--login::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4.5' y='10' width='15' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.l-haction--contact { background: var(--c-red); color: var(--c-white); }
.l-haction--contact::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.6 6.4 12 13l8.4-6.6'/%3E%3C/svg%3E"); }

/* ハンバーガー（SP のみ・56×56・右端） */
.l-hamburger { display: none; width: 56px; height: 56px; position: relative; flex: 0 0 56px; }
.l-hamburger span {
  position: absolute; left: 16px; width: 24px; height: 2px; background: var(--c-red);
}
.l-hamburger span:nth-child(1) { top: 20px; }
.l-hamburger span:nth-child(2) { top: 27px; }
.l-hamburger span:nth-child(3) { top: 34px; }
.l-hamburger.is-open span:nth-child(1) { top: 27px; transform: rotate(45deg); }
.l-hamburger.is-open span:nth-child(2) { opacity: 0; }
.l-hamburger.is-open span:nth-child(3) { top: 27px; transform: rotate(-45deg); }

/* SP メニューパネル（幅100%・ヘッダー下・背景 #d74144・リンク8本・フラット） */
.l-drawer {
  display: none;
  position: fixed; left: 0; top: var(--h-header-sp); z-index: 999;
  width: 100%; height: calc(100vh - var(--h-header-sp));
  background: var(--c-red); color: var(--c-white);
  overflow-y: auto;
  transition: all;
}
.l-drawer.is-open { display: block; }
.l-drawer__list { padding: 8px 0; }
.l-drawer__item { border-bottom: 1px solid rgba(255, 255, 255, .35); }
.l-drawer__item a { display: block; padding: 16px 20px; font-size: 1.5rem; font-weight: 700; }
.l-drawer__item a:hover, .l-drawer__item a:hover::before, .l-drawer__item a:hover::after { text-decoration-line: underline; }

/* ===========================================================
   下層ページのタイトル帯（PC 200px／SP 90px・英字の透かし）
   =========================================================== */
.p-band {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 200px; padding: 0;
  background: var(--c-red);
}
.p-band::before {
  content: attr(data-en);
  position: absolute; top: 50%; left: 0;
  font-size: 15rem; font-weight: 700; line-height: 1; white-space: nowrap;
  color: #f5f5f5; opacity: .15;
  transform: translateY(-50%) translateX(5vw);
  pointer-events: none;
}
.p-band__inner { position: relative; width: 100%; max-width: var(--w-main); margin-inline: auto; }
.p-band h1 { font-size: 4rem; font-weight: 700; color: var(--c-white); }

/* ===========================================================
   ボタン（塗り・線・小・大型CTA）
   =========================================================== */
/* 外側の p は本文の書体のまま（参考の `p.btn` と同じ）。丸いボタンは中の a で作る */
.c-btn { margin-top: 32px; text-align: center; }
.c-btn > a {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: .5em 1.5em .5em 1em;
  font-size: 1.8rem; font-weight: 700;
  color: var(--c-white); background: var(--c-red);
  border-radius: 3em;
}
.c-btn > a::after {
  content: ""; position: absolute; right: .75em;
  width: .6em; height: .6em;
  border-top: 3px solid currentColor; border-right: 3px solid currentColor;
  transform: rotate(45deg);
}
.c-btn--line > a { color: var(--c-red); background: transparent; border: 3px solid var(--c-red); }
.c-btn--small > a { min-height: 40px; width: 174px; padding: .2em 1em .3em .75em; line-height: 1.2; font-size: 1.6rem; }
.c-btn > a:hover { text-decoration: none; opacity: .85; }

/* パンくず（参考実測 2026-09-29: 文字 14px・#000000・行高 PC 21px／SP 24px・器は幅いっぱいで左右 PC 35px／SP 20px） */
.p-crumb { padding-top: 24px; font-size: 1.4rem; line-height: 1.5; }
.p-crumb__inner { width: 100%; padding: 0 35px; }
.p-crumb__inner li { display: inline; }
.p-crumb { color: #000000; }
.p-crumb a:hover, .p-crumb a:hover::before, .p-crumb a:hover::after { text-decoration-line: underline; }

/* 企業情報ページのサブナビ（参考: SP で 375×99・PC は1行で 49px＝ブロックにならない） */
.p-compnav { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 36px; row-gap: 21px; width: 100%; max-width: var(--w-main); margin: 32px auto 0; }
.p-compnav li a, .p-compnav li span { display: block; padding: 0 16px 11px; font-size: 2rem; font-weight: 700; line-height: 1.5; border-bottom: 4px solid transparent; }
.p-compnav li span { border-bottom-color: var(--c-red); }
.p-compnav a:hover, .p-compnav a:hover::before, .p-compnav a:hover::after { text-decoration-line: underline; }
.p-crumb span { margin: 0 8px; }

/* 年で絞り込むタブ（高さが小さいのでブロックには数えられない）
   参考実測 2026-09-29: 文字 #000000・リンク PC 20px／SP 18px・項目の枠は ALL が PC 136／SP 68、年が PC 147／SP 78 で隙間なし */
.p-years { margin-top: 80px; color: #000000; }
.p-years__inner { display: flex; justify-content: center; gap: 0; width: 100%; max-width: var(--w-mid); margin-inline: auto; padding: 0 20px; font-size: 2rem; font-weight: 700; }
.p-years__inner a { width: 147px; text-align: center; }
.p-years__inner a:first-child { width: 136px; }
.p-years a:hover, .p-years a:hover::before, .p-years a:hover::after { text-decoration-line: underline; }

/* カテゴリの白箱（1040幅・上下 20 左右 30 の内側余白） */
.p-cats {
  display: flex; align-items: center; gap: 72px;
  width: calc(100% - 40px); max-width: var(--w-mid); min-height: 102px; margin: 56px auto 0;
  padding: 20px 30px; background: var(--c-white); border: 1px solid #dddddd;
}
.p-cats a { position: relative; display: inline-flex; align-items: center; padding-left: 34px; font-size: 1.5rem; }
.p-cats a::before { content: ""; position: absolute; left: 0; width: 22px; height: 22px; border: 1px solid var(--c-red); border-radius: 50%; }
.p-cats a::after { content: ""; position: absolute; left: 8px; width: 5px; height: 5px; border-top: 1px solid var(--c-red); border-right: 1px solid var(--c-red); transform: rotate(45deg); }
.p-cats a:hover, .p-cats a:hover::before, .p-cats a:hover::after { text-decoration-line: underline; }

/* 記事本文（一覧＋詳細の詳細側） */
.p-article { width: calc(100% - 40px); max-width: var(--w-mid); margin: 84px auto 0; padding: 0; }
/* 日付・補足の #555555 とタグの #de6143 は参考どおり（2026-09-29 に参考40ページのパレットを全数確認: news-01 の参考が
   #de6143(6)・#555555(5) を「主要色（5回以上）」として持つ＝消すと MUST が FAIL する。他ページの参考に無いのはページごとの差）。
   一方 .p-cats のマーカーは参考の ::before/::after を直接測って rgb(215,65,68)=--c-red だったので変更済み */
.p-article__meta { display: flex; align-items: center; gap: 16px; font-size: 1.4rem; color: #555555; }
.p-article__meta span:last-child { padding: 2px 12px; font-size: 1.2rem; color: var(--c-white); background: #de6143; border-radius: 2px; }
.p-article h2 { margin-top: 16px; font-size: 3.2rem; font-weight: 700; color: var(--c-red); }
.p-article p { margin-top: 32px; }
.p-article p a { text-decoration: underline; }
.p-article__nav { display: flex; justify-content: center; gap: 40px; margin-top: 64px; padding-top: 32px; border-top: 1px solid #dddddd; font-size: 1.4rem; }
.p-article__nav a:hover, .p-article__nav a:hover::before, .p-article__nav a:hover::after { text-decoration-line: underline; }

/* 本文セクション（全幅・内側 1080）。見出しの line-height は body から継承させる */
.p-sec { margin-top: 27px; }
.p-sec + .p-sec { margin-top: 62px; }
.p-sec h2 { font-size: 3.2rem; font-weight: 700; color: var(--c-red); text-align: center; }
.p-sec--h2dark h2 { color: var(--c-text); }
.p-sec--policy p { margin-top: 56px; }
.p-sec h3 { position: relative; margin-top: 40px; padding-bottom: 10px; font-size: 2.4rem; font-weight: 700; text-align: center; border-bottom: 1px solid #dddddd; }
.p-sec h3::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 80px; height: 3px; margin-left: -40px; background: var(--c-red); }
/* 見出しを左に寄せるページ（参考の text-align に合わせる） */
.p-sec--left h2, .p-sec--left h3 { text-align: left; }
.p-sec--left h3::after { left: 0; margin-left: 0; }
/* h3 が 28px のページ（service・service-job・recruit 系） */
.p-sec--h3lg h3 { font-size: 2.8rem; }
.p-sec p { margin-top: 24px; }
.p-sec--mid2 p { margin-top: 86px; }
.p-sec--pts p { margin-top: 55px; }
.p-sec--pts-c p { margin-top: 39px; }
.p-sec--wide-h2 h2 { margin-bottom: 100px; }
.p-sec .u-inner { padding: 0 20px; }

/* フォームまわり（ダミー送信） */
.p-lead { margin-top: 24px; }
.p-lead--big { margin-top: 24px; font-size: 2.4rem; font-weight: 700; }
.u-inner--940 { width: 100%; max-width: 940px; margin-inline: auto; }
.u-inner--840 { width: 100%; max-width: 840px; margin-inline: auto; }
.p-sec--form h3 { font-size: 2rem; }
.p-sec--form .c-form { margin-top: 24px; }
.c-form__opts { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.c-form__opts label { display: inline-flex; align-items: center; gap: 6px; }
.c-form__two { display: flex; gap: 16px; }
.c-form__agree { margin-top: 32px; text-align: center; }
.c-form__agree label { display: inline-flex; align-items: center; gap: 6px; }
.c-form__agree a { text-decoration: underline; }
.c-form__note { margin-top: 16px; font-size: 1.3rem; text-align: center; color: #555555; }
.c-form__submit button { display: inline-flex; align-items: center; justify-content: center; min-width: 280px; min-height: 56px; padding: .5em 1.5em; font-size: 1.8rem; font-weight: 700; color: var(--c-white); background: var(--c-red); border-radius: 3em; }
.c-complete { padding: 40px 0 0; text-align: center; }
.c-complete__lead { font-size: 2.4rem; font-weight: 700; color: var(--c-red); }
.c-complete p + p { margin-top: 16px; }

/* 本文中の写真（横長・幅は実測値） */
.c-imglink { display: inline-block; transition: opacity .2s; }
.c-imglink:hover { opacity: .7; }
.c-imglink:hover, .c-imglink:hover::before, .c-imglink:hover::after { text-decoration-line: underline; }
.p-figure { margin-top: 32px; }
.p-figure img { width: 685px; max-width: 100%; height: auto; }

/* 幅いっぱい（1040）の写真 */
.p-figure--wide img { width: 100%; height: auto; }
body.is-service .p-figure--wide img { height: 400px; object-fit: cover; }

/* 小さめの誘導帯（短い型のサービス詳細） */
.p-guide { margin-top: 120px; margin-bottom: 100px; }
.p-guide h3 { margin-top: 0; font-size: 2.4rem; font-weight: 700; line-height: 1.25; }
.p-guide .c-btn { margin-top: 80px; }
.p-guide p { margin-top: 80px; }
.p-guide a { text-decoration: underline; }

/* 企業理念・トップメッセージ・沿革まわり */
.u-center { text-align: center; }
.p-movie { display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 32px; border: none; background: #1b1b1b; }
.p-values { display: flex; gap: 32px; margin-top: 32px; }
.p-value { flex: 1 1 0; }
.p-value__img img { width: 100%; height: auto; }
.p-value__title { margin-top: 16px; font-weight: 700; }
.p-value p + p { margin-top: 8px; }
.p-figure--3x4 img { width: 640px; }
.p-figure--portrait { width: 374px; max-width: 100%; }
.p-figure--portrait img { width: 100%; height: auto; }

/* 企業向けサービス一覧の写真カード（参考: 写真＋白い帯 70px にラベル 18px と丸い矢印 30px） */
.p-svccard { margin-top: 48px; }
body.is-service .p-sec h3 { margin-top: 96px; }
.p-svccard img { width: 100%; height: 321px; object-fit: cover; }
.p-svccard--wide img { height: 400px; }
.p-svccard .p-svccard__cap { display: flex; align-items: center; justify-content: center; height: 70px; margin-top: 0; padding: 0 24px; font-size: 2rem; font-weight: 700; background: var(--c-white); }
.p-svccards { display: flex; gap: 40px; }
.p-svccards .p-svccard { flex: 1 1 0; min-width: 0; }
.p-sign { display: block; margin-top: 32px; font-weight: 700; text-align: right; }
.p-history { margin-top: 32px; }
.p-history__row { display: flex; gap: 32px; padding: 20px 0; border-top: 1px solid #dddddd; }
.p-history__row:last-child { border-bottom: 1px solid #dddddd; }
.p-history dt { flex: 0 0 8em; font-weight: 700; color: #000000; }
.p-intro h2 { font-size: 3.2rem; font-weight: 700; color: var(--c-red); }
.p-intro p { margin-top: 24px; }
/* 参考実測 2026-09-29: 導入ブロックは見出しも本文も外側の器（PC 120/1040・SP 20/335）。940 の器に入れると 50px 内側へずれる */
.p-intro .u-inner--940 { max-width: var(--w-mid); }

/* 求人カード・募集要項 */
.p-job { padding: 32px 0; border-top: 1px solid #dddddd; }
.p-job:last-of-type { border-bottom: 1px solid #dddddd; }
.p-job__title { font-size: 1.8rem; font-weight: 700; }
.p-job__meta { margin-top: 4px; font-size: 1.4rem; color: #555555; }
/* 本文の定義リスト（dd は本文の書体のまま＝参考の dd 見本と同じ 16px/400） */
.p-dl { margin-top: 16px; }
.p-dl__row { display: flex; gap: 32px; margin-top: 12px; }
.p-dl dt { flex: 0 0 8em; font-weight: 400; }
.p-job p:last-child { margin-top: 4px; }
.p-job a { text-decoration: underline; }
.p-spec { margin-top: 24px; }
.p-spec__row { display: flex; gap: 32px; padding: 48px 0; border-top: 1px solid #dddddd; }
.p-spec__row:last-child { border-bottom: 1px solid #dddddd; }
.p-spec dt { flex: 0 0 10em; font-weight: 400; }
.p-spec dd p { margin-top: 32px; }
.p-spec dd p:first-child { margin-top: 0; }
.p-note { margin-top: 24px; font-size: 1.4rem; color: #555555; }

/* 法務ページ（条文） */
.p-legal { margin-top: 80px; }
.p-legal h2 { font-size: 3.2rem; font-weight: 700; color: var(--c-red); margin-bottom: 100px; }
.p-legal h3 { font-size: 3.2rem; font-weight: 700; color: var(--c-red); margin-bottom: 100px; }
/* 参考実測 2026-09-29: 条文の見出しだけ外側の器（PC 120/1040）、本文は内側（PC 170/940）。見出しを 50px 外へ出して合わせる */
.p-legal h2, .p-legal h3 { margin-inline: -50px; }
/* 参考の条文は「見出し 48px ＋ 100px の余白 ＋ 本文」で1セクションの高さが決まる（実測） */
.p-legal p { margin-top: 24px; }
.p-legal__note { padding: 0; }
.p-legal__note p { margin-top: 12px; }
.p-legal a { text-decoration: underline; }
.p-legal a.c-imglink:not(:hover) { text-decoration-line: none; }
.p-mark img { width: 170px; height: auto; }

/* サイトマップ */
.p-map { display: flex; flex-direction: column; gap: 70px; margin-top: 48px; }
.p-map__group { width: 100%; }
.p-map__title { padding: 10px 16px; font-size: 2rem; font-weight: 700; line-height: 1.4; color: var(--c-red); background: #ebedf0; }
.p-map ul { margin-top: 16px; }
.p-map li { margin-top: 12px; font-size: 1.4rem; color: #333333; }
.p-map a:hover, .p-map a:hover::before, .p-map a:hover::after { text-decoration-line: underline; }

/* ===== トップページ ===== */
/* ヒーロー: 左にリード・右に写真（参考の実測 h=658・内側コンテナ 864） */
.p-hero { position: relative; }
.p-hero__flex { display: flex; align-items: center; gap: 40px; }
.p-hero__lead { width: 100%; max-width: 864px; margin-left: auto; padding: 0 40px; flex: 0 0 486px; }
.p-hero__en { display: block; font-size: 1.4rem; font-weight: 700; letter-spacing: .1em; color: var(--c-red); }
.p-hero__lead h1 { margin-top: 12px; font-size: 1em; font-weight: 400; color: transparent; }
/* 参考の h1 も自身は 16/400/透明で、大見出しは中の要素が描いている（実測 JSON の heads がこの値）。
   h1 の値を動かすと typography の MUST が落ちるため、見出しの見え方は子の span に持たせる。
   寸法は参考スクショの実測: PC＝字の墨の高さ 39px・行送り 66px／SP＝墨 27px・行送り 37px */
.p-hero__catch { display: block; font-size: 4.4rem; font-weight: 700; line-height: 1.5; color: var(--c-text); }
.p-hero__lead p { margin-top: 16px; }
.p-hero__slider { flex: 1 1 auto; min-width: 0; }
.p-hero__slider li img { width: 100%; height: auto; }
.p-hero__thumb { width: 100%; max-width: 864px; margin: 24px auto 0; }
.p-hero__thumb li { padding: 0 4px; }
.p-hero__thumb img { width: 100%; height: auto; }
.p-hero .slick-prev, .p-hero .slick-next, .p-visual .slick-prev, .p-visual .slick-next {
  position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px;
  font-size: 0; color: transparent; background-color: var(--c-red); border-radius: 50%; transition: all; }
.p-hero .slick-prev, .p-visual .slick-prev { left: 8px; }
.p-hero .slick-next, .p-visual .slick-next { right: 8px; }
.p-hero .slick-prev:hover, .p-hero .slick-next:hover, .p-visual .slick-prev:hover, .p-visual .slick-next:hover { background-color: #de6365; }
/* 前／次の山形。ボタンの字は font-size:0／color:transparent で消しているため、
   足さないと赤い丸が無印の装飾に見える（2026-09-28 統括の受入で本番を見て是正）。
   形はこのサイトの矢印の作り方（45°回した L 字）に合わせる。 */
.p-hero .slick-prev::before, .p-hero .slick-next::before,
.p-visual .slick-prev::before, .p-visual .slick-next::before {
  content: ""; position: absolute; top: 50%; width: 10px; height: 10px;
  border-top: 2px solid var(--c-white); border-right: 2px solid var(--c-white); }
.p-hero .slick-prev::before, .p-visual .slick-prev::before { left: 19px; transform: translateY(-50%) rotate(-135deg); }
.p-hero .slick-next::before, .p-visual .slick-next::before { right: 19px; transform: translateY(-50%) rotate(45deg); }
.p-hero .slick-dots, .p-visual .slick-dots { display: flex; justify-content: center; gap: 12px; margin-top: 16px; font-size: 0; }
.p-hero .slick-dots li button, .p-visual .slick-dots li button {
  width: 12px; height: 12px; font-size: 0; color: #000000; background-color: var(--c-line); border-radius: 50%; }

/* 赤帯（円弧つき）: 背景は内側のパネルに持たせる（参考はセクション自体に背景色なし） */
#topService { margin-top: 80px; padding: 14% 0 15%; }
.s-arc__inner { position: relative; padding: 80px 0; background: var(--c-red); color: var(--c-white); }
.s-arc__inner::before, .s-arc__inner::after { content: ""; position: absolute; left: 0; width: 100%; height: 0; background: inherit; }
.s-arc__inner::before { top: 0; padding-bottom: 14%; transform: translateY(-100%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.s-arc__inner::after { bottom: 0; padding-bottom: 15%; transform: translateY(100%); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
#topService h2 { font-size: 1em; font-weight: 400; color: var(--c-text); text-align: center; }
.s-arc__en { margin-top: 8px; font-size: 5.6rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-align: center; }
.p-svclist { margin-top: 56px; }
.p-svclist li { border-bottom: 1px solid rgba(255, 255, 255, .5); }
.p-svclist a { position: relative; display: flex; align-items: center; gap: 24px; padding: 24px 56px 24px 8px; font-size: 2rem; font-weight: 700; }
.p-svclist a::after { content: ""; position: absolute; right: 8px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 1px solid currentColor; border-radius: 50%; }
.p-svclist__no { font-size: 2.4rem; }
.p-svclist a:hover, .p-svclist a:hover::before, .p-svclist a:hover::after { text-decoration-line: underline; }

/* トップの各セクション */
.p-top { margin-top: 80px; }
#topCompany h2 { font-size: 3.2rem; font-weight: 700; line-height: 1; }
#topCase h2, #topColumn h2, #topInfo h2 { font-size: 3.6rem; font-weight: 700; line-height: 1.5; }
.p-top p { margin-top: 24px; }

/* 柱（左にラベル＋ボタン、右に一覧）。参考のトップは企業情報・導入事例・お知らせがこの形 */
.p-pillar { position: relative; }
.p-pillar__label { display: flex; flex-direction: column; align-items: flex-start; }
.p-pillar__head { display: flex; align-items: baseline; gap: 12px; }
.p-pillar__en { font-weight: 700; line-height: 1; color: var(--c-red); }
.p-pillar__en--sm { font-size: 2rem; letter-spacing: .04em; }

/* 丸い矢印（参考: 1px の赤い円＋くの字） */
.c-circ { position: absolute; right: 34px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border: 1px solid var(--c-red); border-radius: 50%; }
.c-circ::after { content: ""; position: absolute; left: 13px; top: 12px; width: 7px; height: 7px; border-top: 2px solid var(--c-red); border-right: 2px solid var(--c-red); transform: rotate(45deg); }
.c-circ--inline { position: relative; top: auto; right: auto; flex: 0 0 30px; width: 30px; height: 30px; margin: 0 0 0 20px; }
.c-circ--inline::after { left: 10px; top: 9px; }

/* #topCompany: 縦書きの柱（企業情報／COMPANY）＋ 3行（ラベル＋丸矢印｜横長写真・行の下に罫線） */
#topCompany .p-pillar__label--vert { position: absolute; left: 0; bottom: 0; align-items: center; row-gap: 20px; }
#topCompany .p-pillar__label--vert h2, #topCompany .p-pillar__label--vert .p-pillar__en { writing-mode: vertical-rl; }
#topCompany .p-pillar__en { font-size: 6.4rem; letter-spacing: -.04em; }
.p-top__banners { width: 915px; max-width: calc(100% - 145px); margin-left: 145px; }
.p-top__banners > div { display: flex; align-items: center; height: 226px; border-bottom: 1px solid var(--c-line); }
.p-top__banners dt { position: relative; flex: 0 0 457.6px; padding: 0 34px 0 60px; }
.p-top__banners dt a { font-size: 2.4rem; font-weight: 700; }
.p-top__banners dt a::before { content: ""; position: absolute; left: 20px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--c-red); border-radius: 50%; }
.p-top__banners dd { flex: 0 0 457.6px; }
.p-top__banners img { width: 100%; aspect-ratio: 457.6 / 169.5; object-fit: cover; }
.p-top__banners a:hover, .p-top__banners a:hover::before, .p-top__banners a:hover::after { text-decoration-line: underline; }
#topCompany .c-btn { margin-top: 33px; }
#topCompany .c-btn > a { width: 220px; border-width: 2px; }

/* #topCase: 左の柱＋右に写真カード2枚（写真の下 1/3 に帯＋白文字＝制作記録 §5.5） */
.p-top--case { padding: 80px 0; background: var(--c-white); }
#topCase .p-pillar--row { display: flex; align-items: center; gap: 48px; padding: 0 20px; }
#topCase .p-pillar__label { flex: 0 0 176px; }
#topCase h2 { margin-top: 9px; }
#topCase .c-btn { margin-top: 19px; }
.p-casecards { display: flex; flex: 1; gap: 37px; }
.p-casecard { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 389.4px; height: 233px; padding: 0 16px; overflow: hidden; background-color: var(--c-fill); background-position: center; background-size: cover; border-radius: 8px; }
/* 暗幕は「参考と同じ濃さ」ではなく「参考と同じ見え方」に合わせる＝生成写真が参考の写真より明るいぶん濃くする。
   実測（カード内の平均輝度）: 参考 70.8／74.5 に対し、.08→.5 のままだと 137.8／118.7 で白いキャプションが読めない */
.p-casecard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .72)); }
.p-casecard p { position: relative; margin-top: 0; font-size: 2rem; font-weight: 700; color: var(--c-white); text-align: center; }
.p-casecard:hover { opacity: .85; }

/* #topInfo: 左端まで伸びる淡い灰色のパネル（右上下だけ角丸）＋左の柱＋右に一覧 */
.p-infopanel { margin-right: 120px; background: var(--c-line-soft); border-radius: 0 20px 20px 0; }
.p-infopanel__inner { display: flex; align-items: center; gap: 125px; width: 100%; max-width: var(--w-main); margin-left: max(0px, calc((100% - 960px) / 2)); padding: 55px 61px 61px 20px; }
#topInfo .p-pillar__label--center { flex: 0 0 175px; align-items: center; text-align: center; }
#topInfo h2 { margin-top: 9px; text-align: center; }
#topInfo .c-btn { margin-top: 22px; }
.p-colcards { display: flex; gap: 40px; margin-top: 32px; }
.p-colcards li { flex: 1 1 0; }
.p-colcards img { width: 100%; height: auto; }
.p-colcards__date { margin-top: 12px; font-size: 1.4rem; color: #555555; }
.p-colcards p + p { margin-top: 4px; }
.p-colcards a:hover, .p-colcards a:hover::before, .p-colcards a:hover::after { text-decoration-line: underline; }
.p-infolist { flex: 1; }
.p-infolist li { padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.p-infolist__date { margin-top: 0 !important; font-size: 1.4rem; font-weight: 700; color: var(--c-red); }
.p-infolist li p { margin-top: 0; }
.p-infolist li p + p { margin-top: 4px; font-weight: 700; }
.p-infolist a:hover, .p-infolist a:hover::before, .p-infolist a:hover::after { text-decoration-line: underline; }
.p-visual { margin-top: 80px; margin-bottom: 100px; padding: 30px 0 40px; background: var(--c-bg); }
.p-colcards li { flex: 1; }
.p-visual__slider li { padding: 0 8px; }
.p-visual__slider img { width: 100%; height: auto; }

/* ===== コラム ===== */
.p-cats--wrap { flex-wrap: wrap; gap: 12px 40px; min-height: 165px; }
.p-colgrid { display: flex; flex-wrap: wrap; gap: 40px 70px; width: calc(100% - 40px); max-width: var(--w-mid); margin: 34px auto 0; }
.p-colgrid__item { width: 300px; max-width: 100%; }
.p-colgrid__item > a { display: block; transition: opacity .2s; }
.p-col__relation .p-colgrid__item > a { padding-bottom: 32px; }
.p-colgrid__item > a:hover { opacity: .7; }
.p-colgrid__item img { width: 100%; height: auto; }
.p-colgrid__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.p-colgrid__tags li { padding: 2px 10px; font-size: 1.1rem; color: var(--c-white); background: #de6143; border-radius: 2px; }
.p-colgrid__date { margin-top: 20px; font-size: 1.3rem; color: #555555; }
.p-col__relation .p-colgrid__date { margin-top: 28px; }
.p-colgrid__title { margin-top: 16px; font-weight: 700; }
.p-col__relation .p-colgrid__title { margin-top: 24px; }
.p-colgrid__more { margin-top: 4px; font-size: 1.3rem; color: #555555; }
.p-colgrid--3 { width: 100%; margin-top: 24px; }
.p-col { width: calc(100% - 40px); max-width: var(--w-mid); margin: 34px auto 0; }
.u-inner--976 { width: 100%; max-width: 976px; margin-inline: auto; }  /* 参考のコラム詳細の内側コンテナ */
.p-col__main { margin-top: 40px; }
body.is-col02 .l-footer { background-color: transparent; background-image: linear-gradient(var(--c-red), var(--c-red)); }
.p-col__title { font-size: 3.2rem; font-weight: 700; color: var(--c-red); }
.p-col__date { margin-top: 16px; font-size: 1.4rem; color: #555555; }
.p-col__hero { width: 640px; max-width: 100%; margin: 32px auto 0; }
.p-col__hero img { width: 100%; height: auto; }
.p-col__intro { margin-top: 40px; line-height: 2; }
.p-col__toc { margin-top: 16px; padding: 30px 50px; background: var(--c-white); }
.p-col__toc li { margin-top: 8px; font-weight: 700; }
.p-col__toc li:first-child { margin-top: 0; }
.p-col__toc a:hover, .p-col__toc a:hover::before, .p-col__toc a:hover::after { text-decoration-line: underline; }
.p-col__body { margin-top: 50px; }
.p-col__body div { line-height: 2; }
.p-col__body h3 { margin-top: 96px; padding-bottom: 10px; font-size: 2.8rem; font-weight: 700; border-bottom: 3px solid var(--c-red); }
.p-col__body h4 { margin-top: 32px; font-size: 1.6rem; font-weight: 700; line-height: 2; }
.p-col__body div { margin-top: 56px; }
.p-col__box { width: 527px; max-width: 100%; margin: 56px auto; padding: 24px 28px; line-height: 2; background: #f5f5f5; }
.p-col__body p { margin-top: 20px; }
.p-col__box { width: 527px; max-width: 100%; margin-inline: auto; padding: 24px; background: var(--c-white); border: 1px solid #dddddd; }
.p-col__band { width: 976px; max-width: 100%; margin-inline: auto; margin-top: 40px; padding: 8px 20px; font-size: 2rem; font-weight: 700; line-height: 2; color: var(--c-white); background: var(--c-red); }
.p-col__icons { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 56px; }
.p-col__icons li { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.p-col__points { margin-top: 48px; padding-left: 1.2em; list-style: disc; line-height: 2; }
.p-col__points li { margin-top: 20px; }
.p-col--detail { margin-top: 34px; }
.p-col--detail p { margin-top: 48px; }
.p-col--detail .p-dl { margin-top: 56px; }
.p-col--detail .p-dl__row { margin-top: 24px; line-height: 2; }
.p-col__relation { width: calc(100% - 40px); max-width: var(--w-mid); margin: 64px auto 0; }
.p-col__relation h3 { font-size: 2.8rem; font-weight: 700; }

/* ===== そらのわ保育園（サブブランド・配色と書体が本体と違う） ===== */
.p-hoiku { background-color: transparent; background-image: linear-gradient(#fffefb, #fffefb); }
.p-hoiku .u-inner { padding: 0 20px; }
.p-hoiku__body { width: 1040px; max-width: 100%; margin-inline: auto; padding: 0 20px; }
.p-hoiku h2 { font-size: 2.2rem; font-weight: 700; line-height: 1.4; color: #e05252; text-align: center; }
.p-hoiku h3 { margin-top: 64px; font-size: 2.3rem; font-weight: 700; line-height: 1.5; color: #2b2523; text-align: center; }
.p-hoiku h3.p-hoiku__band { padding: 16px 24px; font-size: 1.75rem; line-height: 1.5; color: var(--c-white); background: #e05252; border-radius: 8px; }
.p-hoiku p { width: 566px; max-width: 100%; margin: 80px auto 0; font-size: 1.4rem; line-height: 1.9; color: #38312e; }
.p-hoiku__hero { margin-top: 32px; text-align: center; }
.p-hoiku__hero img { width: 640px; max-width: 100%; height: auto; margin-inline: auto; }
.p-hoiku__insta { margin-top: 32px; text-align: center; }
.insta-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 280px; min-height: 48px; padding: .5em 1.5em; font-size: 1.35rem; font-weight: 700; line-height: 1.5; color: #dc2743; background: var(--c-white); border: 2px solid #dc2743; border-radius: 3em; }
.insta-btn:hover { opacity: .95; background-color: #fff5f5; }
.p-hoiku__grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.p-hoiku__cell { width: 240px; background-color: #fffefb; }
.p-hoiku__cell img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.p-hoiku__cell p { width: auto; margin: 8px 0 0; font-size: 1.4rem; text-align: center; }
.p-hoiku__rooms { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; align-items: flex-end; }
.p-hoiku__room img { height: auto; }
.p-hoiku__room p { width: auto; margin: 8px 0 0; font-size: 1.4rem; }
.p-hoiku__map { margin-top: 32px; text-align: center; }
.p-hoiku__map img { width: 800px; max-width: 100%; height: auto; margin-inline: auto; }
.p-hoiku__table { width: 100%; margin-top: 32px; background: var(--c-white); }
.p-hoiku__table th, .p-hoiku__table td { padding: 12px 16px; font-size: 1.45rem; line-height: 1.8; text-align: left; border: 1px solid #eae3d9; }
.p-hoiku__table th { width: 10em; font-weight: 700; color: #2b2523; background: #eae3d9; }
.p-hoiku__table td { color: #2b2523; font-weight: 700; }
.p-hoiku__staff { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 32px; }
.p-hoiku__member { flex: 1 1 300px; }
.p-hoiku__member img { width: 100%; height: auto; }
.p-hoiku__member p { width: auto; margin: 8px 0 0; }
.p-hoiku__subhead { margin-top: 64px; font-size: 2rem; font-weight: 700; color: #2b2523; text-align: center; }
.p-hoiku__faq { margin-top: 24px; }
.p-hoiku__faq dt { margin-top: 16px; font-size: 1.75rem; font-weight: 700; line-height: 1.4; color: #e05252; }
.p-hoiku__faq dd { margin-top: 4px; font-size: 1.45rem; line-height: 1.8; color: #38312e; }
.p-hoiku__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 40px; font-weight: 700; }
.p-hoiku__links a:hover, .p-hoiku__links a:hover::before, .p-hoiku__links a:hover::after { text-decoration-line: underline; }
.p-hoiku__link { margin-top: 24px; text-align: center; }
.p-hoiku__link a { text-decoration: underline; color: #444444; }
.c-btn--hoiku > a { background: #e05252; }
.c-btn--hoiku.c-btn--line > a { color: #e05252; background: transparent; border-color: #e05252; }

/* ===== そらのわ保育園の採用（サブブランド） ===== */
.p-jr { padding-bottom: 40px; }
.p-jr { width: 880px; max-width: calc(100% - 20px); margin: 57px auto 0; color: #38312e; }
.p-jr__header { padding: 30px 23px; background: #fcf8f2; text-align: center; }
.p-jr__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }
.p-jr__tags span { display: inline-block; padding: 5px 16px; font-size: 1.2rem; font-weight: 700; line-height: 1.5; color: var(--c-white); background: #e05252; border-radius: 3em; }
.p-jr__header h1 { font-size: 2.2rem; font-weight: 700; line-height: 1.4; color: #2b2523; }
.p-jr__header p { margin-top: 16px; font-size: 1.4rem; font-weight: 700; line-height: 1.7; color: #e05252; text-align: center; }
/* ポイント: PC は3枚並びで1ブロック（880×140）、SP は1枚ずつがブロック（355×120/120/140） */
.p-jr__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 35px; }
.p-jr__points > div { padding: 22px 20px; background: #fffefb; border: 1px solid #f0e8dc; }
.p-jr__points span { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.7; color: #e05252; }
.p-jr__points p { margin-top: 8px; font-size: 1.15rem; font-weight: 400; line-height: 1.7043478; color: #524843; }
.p-jr__block { margin-top: 56px; }
.p-jr__block h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.7; color: #2b2523; }
/* 表: 幅 827（SP 303）・td は 12px/20.4（SP 11px/18.7）・上下 padding 16 */
.p-jr__table { width: 827px; max-width: calc(100% - 52px); margin: 24px auto 0; background: var(--c-white); }
.p-jr__table th { width: 207px; padding: 16px 20px; font-size: 1.25rem; font-weight: 700; line-height: 1.704; color: #423935; text-align: left; vertical-align: top; background: #fcf8f2; border: 1px solid #eae3d9; }
.p-jr__table td { padding: 16px 20px; font-size: 1.2rem; font-weight: 400; line-height: 1.7; color: #38312e; border: 1px solid #eae3d9; }
/* バナー: 参考は背景色を持たず（グラデーションのみ）文字が白 */
.p-jr__insta { margin-top: 56px; padding: 25px 20px; color: var(--c-white); text-align: center;
  background-image: linear-gradient(90deg, #f09433 0%, #dc2743 60%, #bc1888 100%); }
.p-jr__insta h3 { font-size: 1.5rem; font-weight: 400; line-height: 1.7; }
.p-jr__insta p { margin-top: 8px; font-size: 1.2rem; line-height: 1.7; }
.p-jr__insta .insta-btn { display: inline-block; margin-top: 12px; padding: 10px 28px; font-size: 1.2rem; font-weight: 700; line-height: 1.7; color: #dc2743; background-color: #ffffff; border-radius: 3em; transition: background-color .2s; }
.p-jr__insta .insta-btn:hover { opacity: 1; background-color: #fff5f5; }
.p-jr__contact { margin-top: 56px; padding: 32px 27px; background: #fcf8f2; text-align: center; }
.p-jr__insta { position: relative; }
.p-jr__contact h3 { font-size: 1.7rem; font-weight: 700; line-height: 1.7; color: #e05252; }
.p-jr__contact > p { margin-top: 12px; font-size: 1.4rem; line-height: 1.9; }
.p-jr__card { width: 650px; max-width: 100%; margin: 24px auto 0; padding: 25px; background: var(--c-white); text-align: left; }
.p-jr__card p { font-size: 1.4rem; line-height: 1.9; }
.p-jr__card a { text-decoration: underline; color: #dc2743; }
.p-jr__btn { width: 826px; max-width: 100%; margin: 24px auto 0; }
.p-jr__btn a { display: flex; align-items: center; justify-content: center; height: 120px; font-size: 2rem; font-weight: 700; color: var(--c-white); background: #e05252; border-radius: 16px; }
.p-jr__btn a:hover { opacity: .85; }
.p-jr .p-note { text-align: center; }

/* ===== 拠点一覧 ===== */
/* 参考のコンテナは 1170（外）と 1130（内） */
body.is-location .p-band__inner, body.is-location .p-cta__inner { max-width: 1170px; }
body.is-sitemap .p-sec h2 { letter-spacing: .05em; }
.p-locs { width: 100%; max-width: 1170px; margin: 145px auto 0; padding: 0 20px; }
.p-locs__inner { display: flex; flex-wrap: wrap; gap: 100px 40px; width: 100%; max-width: 1130px; margin-inline: auto; }
.p-loc { width: 530px; max-width: 100%; }
.p-loc dt { font-size: 2.4rem; font-weight: 700; color: var(--c-red); }
.p-loc__cont { margin-top: 20px; }
.p-loc__photo { float: left; width: 154px; height: 154px; margin: 0 20px 12px 0; object-fit: cover; }
.p-loc__cont p { font-size: 1.6rem; line-height: 1.5; }
.p-loc__info { display: flex; gap: 20px; margin-top: 20px; }
.p-loc__info img { width: 154px; height: 154px; object-fit: cover; }
.p-loc__info p { font-size: 1.6rem; line-height: 1.5; }
.p-loc__mapcell { margin-top: 20px; padding: 16px; background: var(--c-white); }
.p-loc__map-area { padding: 0; }
.p-loc__cont .p-loc__map-area { clear: both; margin-top: 20px; }
.p-loc__map { display: block; width: 100%; height: auto; }

/* 画像を含むリンクのホバーは opacity（参考の hover 計測に合わせる） */
.p-svccard a:hover, .p-figure a:hover { opacity: .7; }

/* 本文中の帯状の写真 */
.p-banner { margin-top: 32px; text-align: center; }
.p-banner img { width: 640px; max-width: 100%; height: auto; margin-inline: auto; }
.c-btn--240 > a { width: 240px; }
.c-btn--280 > a { width: 280px; }

/* 横並びの関連リンク（記事末尾） */
.p-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 32px; font-size: 1.4rem; }
.p-links a:hover, .p-links a:hover::before, .p-links a:hover::after { text-decoration-line: underline; }
.p-article--tight p { margin-top: 20px; }
.p-article--airy p { margin-top: 56px; }
.p-article--airy .p-article__nav { margin-top: 80px; }
.p-article--tight .p-links { margin-top: 24px; }

/* 記事本文の箇条書き */
.p-list { margin-top: 24px; padding-left: 1.2em; list-style: disc; }
.p-list li { margin-top: 4px; }

/* お知らせ一覧（1件 = 1ブロック・上28/下30 の内側余白） */
.p-newslist { width: calc(100% - 40px); max-width: var(--w-mid); margin: 34px auto 0; }
.p-newsitem { padding: 28px 0 30px; border-top: 1px solid #dddddd; }
.p-newsitem:first-child { border-top: none; }
.p-newsitem:last-child { border-bottom: 1px solid #dddddd; }
.p-newsitem__row { display: flex; align-items: center; gap: 16px; }
.p-newsitem__date { font-size: 1.4rem; font-weight: 700; color: var(--c-red); }
.p-newsitem__cat { min-width: 84px; padding: 3px 16px; font-size: 1.2rem; font-weight: 700; line-height: 1.5; text-align: center; color: var(--c-white); background: var(--c-red); border-radius: 3em; }
.p-newsitem__title { margin-top: 10px; }
.p-newsitem__more { display: none; }
.p-newsitem a:hover .p-newsitem__title, .p-newsitem a:hover::before, .p-newsitem a:hover::after { text-decoration-line: underline; }

/* 下層ページ共通の CTA 帯（p 3本＋ a 1本＝参考の要素数） */
.p-cta { padding: 0; margin: 200px 0 100px; }
.p-cta__inner { width: 100%; max-width: var(--w-main); margin-inline: auto; padding: 90px 20px; text-align: center; }
.p-cta__lead { font-size: 1.8rem; font-weight: 700; }
.p-cta__tel { margin-top: 28px; font-size: 3.2rem; font-weight: 700; line-height: 1.25; color: var(--c-red); }
.p-cta__hours { margin-top: 2px; font-size: 1.6rem; line-height: 1.25; }
.c-cta {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  width: 500px; max-width: 100%; height: 120px;
  margin: 32px auto 0;
  padding: .5em 80px .5em 70px;
  font-size: 2.4rem; font-weight: 700; text-align: left;
  color: var(--c-white); background: var(--c-red);
  border-radius: 16px;
}
.c-cta__en { font-size: 1.6rem; font-weight: 700; letter-spacing: .08em; }
.c-cta::before {
  content: ""; position: absolute; right: 32px; top: 50%;
  width: 40px; height: 40px; margin-top: -20px;
  border: 2px solid currentColor; border-radius: 50%;
}
.c-cta::after {
  content: ""; position: absolute; right: 48px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* ===========================================================
   赤帯セクション（上下が大きな円弧・PNG は使わず border-radius で作る）
   円弧の高さは「幅に対する%」＝ padding-bottom で確保する
   =========================================================== */
/* 円弧つきの赤帯は .s-arc__inner（内側パネル）が背景と円弧を持つ＝参考はセクション自体に背景色がない */

/* ===========================================================
   フッター（背景 #d74144・白文字・PC 4カラム＋ロゴ・SP は下層リンクを畳む）
   =========================================================== */
/* footer 要素自体の color は body から #000 を継承する（実測値）。白は内側で指定する */
.l-footer { background: var(--c-red); }
.l-footer a:hover, .l-footer a:hover::before, .l-footer a:hover::after { text-decoration-line: underline; }
.l-footer__inner { width: 100%; max-width: var(--w-main); margin-inline: auto; padding: 36px 20px 16px; color: var(--c-white); }
.l-footer__cols { display: flex; justify-content: space-between; gap: 24px; }
.l-footer__col { font-size: 1.4rem; }
.l-footer__col > p { font-weight: 700; margin-bottom: 6px; line-height: 1.6; }
.l-footer__col dd { font-size: 1.3rem; line-height: 1.5; }
.l-footer__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 20px; }
.l-footer__logo img { width: 79px; height: 91px; }
.l-footer__icons { display: flex; align-items: center; gap: 12px; }
.l-footer__icons img { height: 43.7px; width: auto; }
.l-footer__meta { font-size: 1.2rem; line-height: 1.7; }
.l-footer__util { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 16px; font-size: 1.2rem; }
.l-footer__demo { margin-top: 12px; font-size: 1.2rem; line-height: 1.6; }
.l-footer__copy { margin-top: 6px; font-size: 1.2rem; line-height: 1.6; }

/* ===========================================================
   フォーム（項目構成は参考どおり・送信はダミー）
   =========================================================== */
.c-form { width: 100%; max-width: var(--w-narrow); margin-inline: auto; }
.c-form { width: 500px; max-width: 100%; margin-inline: auto; }
.c-form__row { padding: 8px 0; border-top: 1px solid #dddddd; }
.c-form__row dt { font-weight: 400; }
.c-form__row dd { margin-top: 4px; }
.c-form__req { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 1.2rem; color: var(--c-white); background: var(--c-red); border-radius: 2px; }
.c-form input[type="text"], .c-form input[type="tel"], .c-form input[type="email"], .c-form textarea, .c-form select {
  width: 100%; padding: 8px 12px; background: var(--c-white); border: 1px solid #b1b1b1; border-radius: 4px;
}
.c-form input.is-short { width: 8em; }
.c-form__birth { display: flex; align-items: center; gap: 8px; }
.c-form__birth select { width: auto; min-width: 5em; }
.c-form textarea { min-height: 120px; }
.c-form__tel { display: flex; align-items: center; gap: 8px; }
.c-form__tel input { width: 6em; }
.c-form__submit { display: flex; justify-content: center; margin-top: 40px; }
.c-form__submit button { position: relative; transition: opacity .2s; }
.c-form__submit button:hover { opacity: .7; }
.c-spinner { display: none; width: 1em; height: 1em; margin-left: .5em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; }
.is-sending .c-spinner { display: inline-block; animation: spin 1000ms linear infinite; }
.c-form__note { animation: blink 2000ms ease-in-out infinite; }
.c-complete { display: none; }
.is-complete .c-complete { display: block; }
.is-complete .c-form { display: none; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ===========================================================
   ブレークポイント（参考の @media の px 値をすべて宣言する＝方針 §11-9）
   =========================================================== */
@media print, screen and (min-width: 768px) {
  .p-legal--art5 p { margin-top: 6px; }
  .p-legal--p7 h3 { margin-bottom: 172px; }
  .p-legal--p8 h3 { margin-bottom: 196px; }
  .p-sec--job p { margin-top: 79px; }
  .p-sec--policy p { margin-top: 58px; }
  .p-sec--movie h2 { margin-bottom: 88px; }
  .p-sec--movie p { margin-top: 36px; }
  .p-legal--lic h2 { margin-bottom: 196px; }
  .p-sec--msg2 h2 { margin-bottom: 96px; }
  .p-sec--msg3 .p-figure--portrait { float: right; margin: 0 0 24px 40px; }
  .p-sec--msg3 h2 { margin-bottom: 148px; }
  .p-sec--msg3::after { content: ""; display: block; clear: both; }
  .p-sec--food2 h2 { margin-bottom: 84px; }
  .p-sec--food2 p { margin-top: 46px; }
  .p-sec--rel h2 { margin-bottom: 142px; }
  .p-sec--rel p { margin-top: 141px; }
  .p-visual { padding: 60px 0; background: #ffffff; }
  .l-hamburger, .l-drawer { display: none; }
}

@media screen and (max-width: 767px) {
  body { font-size: 1.4rem; line-height: 1.7142857; }  /* 14px → 24px */
  main { padding-top: var(--h-header-sp); }
  .l-header { height: var(--h-header-sp); }
  .l-header__inner { padding: 0; }
  .p-sign__co { display: block; }  /* 署名は SP だけ「社名／役職＋氏名」で折る（名前の最後の1字が落ちるのを防ぐ） */
  .l-logo { padding-left: 16px; }
  .l-logo img, .l-logo svg { height: 29.8px; }
  .l-nav { display: none; }
  .l-header__main { gap: 0; }
  /* 375 では入れ物が数 px 足りず、「はたらく人の、次の一歩へ。」の「へ。」／「スタッフ用ログイン」の「ン」／
     「お問い合わせ」の「せ」だけが2行目に落ちていた。字送りと文字サイズを詰めて1行に収める（2026-09-29 是正）。
     ヘッダーの高さ 56・ロゴ高さ 29.8・リンク数 3 は変わらない＝compare の header は据え置き。 */
  .l-logo__tag { font-size: .9rem; margin-bottom: 2px; letter-spacing: -.05em; }
  .l-haction { width: auto; min-width: 78px; padding: 0 8px; font-size: 1.05rem; letter-spacing: -.02em; gap: 2px; }
  .l-haction::before { width: 20px; height: 20px; }
  .l-hamburger { display: block; }
  .p-cta { margin: 120px 0 61px; }
  .p-years { margin-top: 56px; }
  .p-cats { margin-top: 32px; }
  .p-cta__inner { padding: 56px 16px; }
  /* 375 では4項目を1行に押し込むと各項目が min-content まで縮み、「すべて」が「す／べ／て」と1字ずつ3行に割れていた。
     参考も SP では折り返して（実測: 1行目 85/100/93・2行目 144）各項目は1行に収まっているので、こちらも折り返す（2026-09-29 是正） */
  .p-cats { flex-wrap: wrap; align-content: center; gap: 24px; min-height: 109px; padding: 14px; }
  .p-cats a { white-space: nowrap; }
  .p-cats a { font-size: 1.3rem; }
  .p-years__inner { font-size: 1.8rem; }
  .p-years__inner a { width: 78px; }
  .p-years__inner a:first-child { width: 68px; }
  .p-crumb { line-height: 24px; }
  .p-crumb__inner { padding: 0 20px; }
  .p-compnav { column-gap: 30px; row-gap: 21px; }
  .p-compnav li a, .p-compnav li span { padding: 0 8px 8px; font-size: 1.8rem; }
  .p-sec h2 { font-size: 2.4rem; }
  .p-sec h3 { margin-top: 32px; font-size: 2rem; }
  .p-sec--h3lg h3 { font-size: 2.2rem; line-height: 1.5; }
  .p-svccard img { height: 215px; }
  .p-svccard--wide img { height: 129px; }
  .p-svccard .p-svccard__cap { height: 60px; padding: 0 16px; font-size: 1.5rem; }
  .p-svccards { display: block; }
  .p-svccards .p-svccard { margin-top: 40px; }
  body.is-service .p-sec h3 { margin-top: 88px; }
  .p-sec .u-inner { padding: 0 20px; }
  .p-newsitem__title { margin-top: 12px; }
  .p-article--tight p { margin-top: 4px; }
  .p-article--tight .p-article__nav { margin-top: 24px; padding-top: 12px; }
  .p-sec--form h3 { font-size: 1.8rem; }
  .p-guide h3 { font-size: 2rem; }
  .p-guide p { margin-top: 40px; }
  .p-guide .c-btn { margin-top: 40px; }
  .p-lead--big { font-size: 2rem; }
  .l-footer__col dd[data-sp] { font-size: 1.4rem; line-height: 1.714; }
  .p-values { flex-direction: column; gap: 24px; }
  .p-history__row { flex-direction: column; gap: 4px; }
  .p-spec__row { flex-direction: column; gap: 4px; }
  .p-map { gap: 110px; }
  body.is-sitemap .p-sec h2 { font-size: 3.2rem; }
  .p-map__title { font-size: 1.6rem; }
  .p-locs { margin-top: 80px; }
  .p-locs__inner { gap: 48px 24px; }
  .p-loc dt { font-size: 2rem; }
  .p-loc__info p { font-size: 1.4rem; line-height: 1.714; }
  .p-loc__mapcell { padding: 14px; }
  .p-colgrid { gap: 24px; }
  .p-col__body h3 { font-size: 2.2rem; line-height: 1.5; }
  .p-col__band { font-size: 1.8rem; line-height: 2; }
  .p-col--detail .p-dl dt { font-size: 1.6rem; font-weight: 700; line-height: 1.5; }
  .p-col__body h4 { font-size: 1.4rem; line-height: 2; }
  .p-col__relation h3 { font-size: 2.2rem; line-height: 1.5; }
  .p-colgrid__item { width: calc(50% - 12px); }
  .p-col__toc { padding: 20px; }
  .p-col__title { font-size: 2.4rem; }
  .p-spec dt { flex: none; }
  .p-history dt { flex: none; }
  .p-legal h2, .p-legal h3, .p-intro h2 { font-size: 2.4rem; }
  .p-intro { padding: 0 20px; }  /* 参考は SP で見出しと本文が別ブロック（幅335）。--pad 限定だと terms・mynumber・privacy 冒頭が余白ゼロのまま画面端に接していた（2026-09-29 是正） */
  /* 参考実測 2026-09-29: SP の条文は見出し 20/335・本文 50/275。器に 50px の余白を入れ、見出しだけ 30px 外へ出す */
  .p-legal > .u-inner { padding: 0 50px; }
  .p-legal h2, .p-legal h3 { margin-inline: -30px; }
  .p-legal h2, .p-legal h3 { margin-bottom: 68px; }
  body.is-privacy .p-legal h2, body.is-privacy .p-legal h3 { margin-bottom: 165px; }
  body.is-terms .p-legal h2, body.is-terms .p-legal h3 { margin-bottom: 109px; }
  .p-legal p { margin-top: 57px; }
  .p-legal__note { padding: 0; }
  .p-legal__note p { margin-top: 0; }
  .p-legal__note p + p { margin-top: 56px; }
  /* そらのわ保育園の採用（参考はサブブランドで文字が一段小さい） */
  .p-jr { max-width: calc(100% - 20px); }
  .p-jr__header { padding: 30px 23px; }
  .p-jr__tags { gap: 10px; margin-bottom: 20px; }
  .p-jr__contact { padding: 35px 30px; }
  .p-jr__header h1 { font-size: 1.6rem; }
  .p-jr__header p { font-size: 1.2rem; }
  .p-jr__points { grid-template-columns: 1fr; gap: 16px; }
  .p-jr__block h2 { font-size: 1.35rem; }
  .p-jr__table { max-width: calc(100% - 52px); }
  .p-jr__table th { display: block; width: auto; padding: 14px 20px; font-size: 1.1rem; line-height: 1.7; border-bottom: none; }
  .p-jr__table td { display: block; padding: 19px 20px; font-size: 1.1rem; line-height: 1.7; }
  .p-jr__contact h3 { font-size: 1.4rem; }
  .p-jr__insta { padding: 25px 20px; }
  body.is-privacy .p-legal--p5 h3 { margin-bottom: 92px; }
  body.is-privacy .p-legal--p6 h3 { margin-bottom: 70px; }
  body.is-privacy .p-legal--p6 p { margin-top: 35px; }
  body.is-privacy .p-legal--p11 h3 { margin-bottom: 61px; }
  body.is-privacy .p-legal--p12 h3 { margin-bottom: 99px; }
  body.is-privacy .p-legal--p15 h3 { margin-bottom: 50px; }
  body.is-privacy .p-legal--p15 p { margin-top: 28px; }
  .p-sec--mid2 p { margin-top: 99px; }
  .p-sec--pts-a p { margin-top: 77px; }
  .p-sec--pts-b p { margin-top: 62px; }
  .p-sec--pts-c p { margin-top: 49px; }
  .p-sec--job p { margin-top: 55px; }
  .p-sec--policy p { margin-top: 53px; }
  .p-sec--movie h2 { margin-bottom: 104px; }
  .p-sec--movie p { margin-top: 66px; }
  body.is-terms .p-legal--art5 p { margin-top: 0; }
  body.is-terms .p-legal--lic h2 { margin-bottom: 33px; }
  .p-sec--msg2 h2 { margin-bottom: 110px; }
  .p-sec--food2 h2 { margin-bottom: 84px; }
  .p-sec--food2 p { margin-top: 63px; }
  .p-sec--rel h2 { margin-bottom: 72px; }
  .p-sec--rel p { margin-top: 71px; }
  #topCompany .p-pillar__label--vert { position: static; align-items: center; row-gap: 6px; margin-bottom: 38px; }
  #topCompany .p-pillar__label--vert h2, #topCompany .p-pillar__label--vert .p-pillar__en { writing-mode: horizontal-tb; }
  #topCompany .p-pillar__en { font-size: 4.8rem; letter-spacing: -.02em; }
  #topCompany .p-top__banners { width: auto; max-width: none; margin-left: 0; padding: 0 20px; }
  #topCompany .p-top__banners > div { flex-direction: column-reverse; align-items: stretch; height: auto; border-bottom: none; }
  #topCompany .p-top__banners > div + div { margin-top: 36px; }
  #topCompany .p-top__banners dt { flex: none; padding: 14px 44px 0 20px; }
  #topCompany .p-top__banners dt a::before { left: 0; width: 10px; height: 10px; margin-top: -5px; }
  #topCompany .p-top__banners dt a { font-size: 1.8rem; }
  #topCompany .p-top__banners dd { flex: none; }
  #topCompany .p-top__banners img { aspect-ratio: 335 / 124; object-fit: cover; }
  #topCompany .c-circ { right: 0; width: 30px; height: 30px; margin-top: -15px; }
  #topCompany .c-circ::after { left: 10px; top: 9px; }
  #topCompany .c-btn { margin-top: 44px; }
  #topCompany .c-btn > a, #topCase .c-btn > a, #topInfo .c-btn > a { width: 240px; }
  #topCase .p-pillar--row { flex-direction: column; align-items: stretch; gap: 0; }
  #topCase .p-pillar__label { display: contents; }
  #topCase .p-pillar__en { order: 1; }
  #topCase h2 { order: 2; margin-top: 4px; }
  #topCase .p-casecards { order: 3; flex-direction: column; gap: 12px; margin-top: 20px; }
  #topCase .p-casecard { flex: none; width: 100%; height: 100px; }
  #topCase .p-casecard p { margin-top: 0; font-size: 1.8rem; }
  #topCase .c-btn { order: 4; margin-top: 24px; }
  .p-infopanel { margin-right: 20px; }
  .p-infopanel__inner { flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; padding: 32px 20px 36px; }
  #topInfo .p-pillar__label--center { display: contents; text-align: left; }
  #topInfo .p-pillar__en { order: 1; }
  #topInfo h2 { order: 2; margin-top: 4px; text-align: left; }
  #topInfo .p-infolist { order: 3; margin-top: 20px; }
  #topInfo .c-btn { order: 4; margin-top: 28px; }
  #topColumn .p-pillar__head { flex-direction: column-reverse; align-items: flex-start; gap: 2px; }
  .p-colcards li:nth-child(3) { display: none; }
  /* 参考の SP 実測: 一覧は左右 20px の余白・カード 159px・間 17px（2026-09-29 是正。
     直す前は ul が 375px 全幅でカードが画面の端に接し、2枚目のタイトルが右端に張り付いていた） */
  .p-colcards li { width: calc(50% - 8.5px); flex: none; }
  body.is-mynumber .p-dl__row dt { font-size: 1.6rem; font-weight: 700; line-height: 1.7125; }
  .p-hoiku h3, .p-hoiku h3.p-hoiku__band { line-height: 1.7143; }
  .p-hoiku__links li { font-weight: 400; }
  .p-hoiku .insta-btn { line-height: 1.7143; }
  .p-hoiku p { margin-top: 35px; }
  .p-hero__lead p { font-weight: 700; }
  .p-history dt { font-size: 1.6rem; line-height: 1.7125; }
  .p-svclist { gap: 12px 24px; font-size: 1.6rem; }
  #topCompany h2 { font-size: 2rem; line-height: 1.7156; }
  #topCase h2, #topColumn h2 { font-size: 3.2rem; line-height: 1; }
  #topInfo h2 { font-size: 3.2rem; line-height: 1.7156; }
  #topCase { padding: 52px 0; }
  .p-visual__slider { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 36px; }
  .p-visual__slider li { width: 40%; padding: 0 8px; }
  .p-article { margin-top: 40px; }
  .p-article h2 { font-size: 2.4rem; }
  .p-cta__tel { margin-top: 20px; }
  .c-cta { height: 80px; padding: .5em 55px; font-size: 2rem; }
  .c-cta__en { font-size: 1.3rem; }
  .c-cta::before { right: 16px; width: 32px; height: 32px; margin-top: -16px; }
  .c-cta::after { right: 28px; }
  .p-band { min-height: 90px; margin-bottom: 40px; }
  .p-band::before { font-size: 4.6rem; transform: translateY(-50%); }
  .p-band__inner { padding: 0 16px; }
  .p-band h1 { font-size: 2rem; }
  .c-btn > a { min-height: 48px; font-size: 1.6rem; }
  .c-btn > a::after { width: .45em; height: .45em; }
  #topService { padding: 11% 0 13.33%; }
  .s-arc__inner { padding: 40px 0; }
  .s-arc__inner::before { padding-bottom: 11%; }
  .s-arc__inner::after { padding-bottom: 13.33%; }
  .s-arc__en { font-size: 3.2rem; }
  .p-svclist a { font-size: 1.6rem; padding: 44px 48px 44px 4px; }
  .p-svclist__no { font-size: 1.8rem; }
  /* SP はヒーローの文と写真が別ブロック（参考の実測） */
  .p-hero__flex { display: contents; }
  .p-hero__lead { flex: none; max-width: none; padding: 24px 16px 36px; }
  .p-hero__catch { font-size: 3rem; line-height: 1.233; }  /* 参考 SP 実測: 墨 27px・行送り 37px */
  .p-hero__thumb { margin-top: 12px; }
  .p-hero__thumb li { padding: 0 2px; }
  .p-hero__thumb img { max-height: 56px; object-fit: cover; }
  /* 参考の SP 実測: コラム節は見出しもカードも左右 20px の余白の中（h2 x=20 w=335・カード 159・間 17） */
  #topColumn .u-inner { padding: 0 20px; }
  .p-colcards { flex-direction: row; gap: 17px; }
  .p-colcards__date { font-size: 1.1rem; }
  .p-colcards li p { font-size: 1.2rem; }
  #topCompany { padding-bottom: 50px; }
  .p-map__group { width: 100%; }
  .l-footer__inner { padding: 24px 16px 10px; }
  .l-footer__cols { flex-direction: column; gap: 8px; }
  /* SP は主要導線だけを残す（可視リンク＝ロゴ1＋data-sp 12＝13本） */
  .l-footer__col dd, .l-footer__util li { display: none; }
  .l-footer__col dd[data-sp], .l-footer__util li[data-sp] { display: block; }
  .l-footer__col > p { margin-bottom: 2px; line-height: 1.5; }
  .l-footer__col dd { font-size: 1.25rem; line-height: 1.7; }
  .l-footer__bottom { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 14px; }
  .l-footer__meta { flex: 1 1 180px; font-size: 1.1rem; line-height: 1.6; }
  .l-footer__util { margin-top: 12px; gap: 2px 14px; font-size: 1.4rem; }
  .l-footer__demo { margin-top: 10px; font-size: 1.1rem; line-height: 1.55; }
  .l-footer__copy { font-size: 1.1rem; }
  .c-form__row { flex-direction: column; gap: 8px; }
  .c-form__label { flex: none; }
}

@media screen and (min-width: 1201px) {
  .p-band::before { transform: translateY(-50%) translateX(5vw); }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
  .l-header__inner { padding: 0 16px; }
  .p-band::before { transform: translateY(-50%) translateX(12vw); }
}

@media screen and (min-width: 321px) and (max-width: 767px) {
  .p-band::before { font-size: 4.6rem; }
}

@media screen and (max-width: 340px) {
  .l-hbtn { min-width: 64px; font-size: 1rem; }
}

@media screen and (max-width: 320px) {
  .p-band::before { font-size: 14vw; }
}

@media print, screen and (min-width: 1440px) {
  .l-header__inner { padding: 0 40px; }
}

@media screen and (min-width: 1120px) {
  .l-nav__list { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-sending .c-spinner, .c-form__note { animation: none; }
}