@charset "UTF-8";
/* ── 数字だけを明朝にする（全サイト共通）──
   指定スタック＝'ShipporiMix','Shippori Mincho','Zen Old Mincho',
                 'Hiragino Mincho ProN','Yu Mincho',serif
   ★「数字のみ」なので unicode-range で数字だけを切り出す。
     和文見出し（Noto Serif JP）・欧文見出し（Baskervville）はそのまま。
   ★実体＝しっぽり明朝の従属欧文サブセット26KB（hannari 採用LP から流用）。
     対象＝数字 0-9 ／ , ／ . ／ ％ ／ ¥(U+00A5)。
     ￥(U+FFE5 全角) と 〜(U+301C) はサブセットに無いので従来の書体のまま。 */
@font-face{
  font-family:'ShipporiMix';
  src:url('fonts/shippori-latin-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
  unicode-range:U+0030-0039, U+002C, U+002E, U+0025, U+00A5;
}
@font-face{
  font-family:'ShipporiMix';
  src:url('fonts/shippori-latin-400.woff2') format('woff2');
  font-weight:500 700;
  font-display:swap;
  unicode-range:U+0030-0039, U+002C, U+002E, U+0025, U+00A5;
}

/* niau group ハブ ワイヤーフレーム｜実寸レイアウト
   ★2026-08-21 ご指示：
     ・配色は墨のみ。書体は本番で実際に使うものを設定する
     ・もっと余白を十分にとる／見出しは小さく（英語見出しの方が大きい）
     ・画像と背景色（帯）を組み合わせる／均一でなく動きのあるレイアウト
   数値は 参考サイト（PC1440実測）と
   chorule-hair.com（本番・書体とウェイト）から起こしている */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#222222;        /* 本番は #362A33 */
  --mut:#5f5f5f;
  --line:#c9c9c9;
  --line2:#9a9a9a;
  --paper:#ffffff;
  --band:#f2f2f2;       /* 本番は #EFF3F4 */
  --wm:#ebebeb;         /* 透かし文字 */

  /* ★余白：実測 左右マージン180px・コンテンツ幅1066px */
  --maxw:1066px;
  --pad:clamp(20px,12.5vw,180px);
  --sec:clamp(72px,10vw,140px);
  --band-inset:clamp(0px,9vw,130px);   /* 帯は全幅にしない（実測 left130 / right1296） */

  /* ★見出しは小さく。英語が主役・和文が従（実測 英35px ls.20em ／ 和35px ls.16em ／ 副題12px） */
  --fs-wm:clamp(56px,13.5vw,195px);    /* 巨大な英字透かし（実測195px） */
  --fs-en:clamp(24px,2.45vw,35px);     /* 欧文見出し・ラベル */
  --fs-ja:clamp(20px,2.45vw,35px);     /* 和文ステートメント */
  --fs-ja-sub:12px;                    /* 和文の副題（実測12px） */
  --fs-body:16px;
  --fs-cap:13px;
  --fs-small:12px;
}
html{overflow-x:hidden}
body{background:var(--paper);color:var(--ink);
  font-family:'ShipporiMix',"Noto Sans JP","Yu Gothic",游ゴシック,"Hiragino Kaku Gothic ProN",sans-serif;
  font-size:var(--fs-body);line-height:1.8;
  word-break:auto-phrase;line-break:strict;-webkit-font-smoothing:antialiased}
/* 実測：コンテンツ1066px ＋ 左右マージン180px ＝ 外形1426px。
   border-box では max-width に padding が含まれるため、外形で指定する */
.inner{max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:var(--sec)}

/* 帯：全幅にせず左右を内側に寄せる（＝動きを作る装置） */
.band{background:var(--band);margin-inline:var(--band-inset)}

/* ── 書体（本番実測）───────────────── */
/* ★2026-08-21 ご指示：見出しの字間を詰める。
   参考サイトは 欧文.20em/和文.16em だが、本番 chorule-hair.com の実測は −0.02em（詰め）。
   「現行本番を軸にする」決裁に合わせ、本番側へ戻す */
.en{font-family:'ShipporiMix',"Baskervville","Times New Roman",serif;font-weight:400;letter-spacing:.04em;line-height:1.1}
.ja{font-family:'ShipporiMix',"Noto Serif JP","Yu Mincho",serif;font-weight:300;letter-spacing:-.02em}
h1,h2,h3{font-weight:400;line-height:1.2}
h1 .en,h2 .en{display:block;font-size:var(--fs-en)}
h1 .ja,h2 .ja{display:block;font-size:var(--fs-ja);line-height:1.85;margin-top:.5em}
.sub{font-size:var(--fs-ja-sub);letter-spacing:.04em;color:var(--mut)}
p{max-width:32em}
.cap{font-size:var(--fs-cap);line-height:1.85;color:var(--mut);text-wrap:pretty}
.small{font-size:var(--fs-small);line-height:1.9;color:var(--mut);text-wrap:pretty}

/* ── ヘッダー（実測 130px）───────────── */
.hdr{position:fixed;top:0;left:0;right:0;height:130px;z-index:50;
  display:flex;align-items:center;background:rgba(255,255,255,.94)}
.hdr .bar{width:100%;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
.hdr .logo{font-size:16px;letter-spacing:.02em}
.hdr nav ul{display:flex;gap:clamp(14px,2vw,32px);list-style:none;font-size:13px;letter-spacing:.02em}
.hdr nav li{white-space:nowrap}   /* ナビ項目は折らない */
.hdr .util{background:var(--ink);color:#fff;padding:14px 24px;font-size:12px;letter-spacing:.04em;
  min-height:48px;display:flex;align-items:center;border-radius:35px}
.hdr .burger{display:none;align-items:center;gap:6px;font-size:13px;min-height:48px}
body{padding-top:130px}
/* ══════════════════════════════════════════════════════════
   スマホ：左右の余白を仕様どおり 20px にし、写真を大きく使う
   ★12.5vw のままだと 375px で 46.9px になり、設計仕様表の「SP 20px」と食い違う。
     帯の内側寄せ（9vw＝33.75px）も重なって、写真が 131px まで縮んでいた。
   ★この案件は写真の質で見せる設計。スマホでは写真の枠を画面いっぱいに使う。
   ══════════════════════════════════════════════════════════ */
@media(max-width:899px){
  :root{
    --pad:20px;
    --band-inset:0px;      /* 帯は全幅に。内側へ寄せる余裕はスマホには無い */
  }
  /* 写真を並べる枠は左右の余白を食って画面いっぱいに（断ち切り） */
  .ktiles{margin-inline:calc(var(--pad) * -1);gap:2px}
  /* ★ヒーローとページ頭の写真は、親（grid）が padding を持たないので元から全幅。
     負マージンを足すと 20px はみ出す（実測 395>375）。足さないのが正しい。 */
}

@media(max-width:899px){
  .hdr{height:64px}body{padding-top:64px}
  .hdr nav,.hdr .util{display:none}.hdr .burger{display:flex}
}

/* ── 画像枠＝対角線 ───────────────── */
figure.ph{margin:0}
.ph{border:1px solid var(--line2);background:
  linear-gradient(to top right,transparent 49.6%,var(--line2) 49.8%,var(--line2) 50.2%,transparent 50.4%),
  linear-gradient(to top left, transparent 49.6%,var(--line2) 49.8%,var(--line2) 50.2%,transparent 50.4%),#f6f6f6;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#3c3c3c;font-size:12px;padding:10px;line-height:1.7}

/* ── ヒーロー：左に小さい文字・右の写真は画面右端まで ── */
.hero{padding-block:0;position:relative}
.hero__grid{display:grid;grid-template-columns:minmax(0,624fr) minmax(0,801fr);align-items:center}
.hero__grid>*{min-width:0}
.hero__copy{padding-left:var(--pad);padding-right:clamp(20px,4vw,64px)}
.hero__ph{height:568px}
/* 巨大な英字透かし：写真の下端に重ね、画面幅を超えて流す（実測 195px・幅3120px） */
/* 巨大な英字透かし：ヒーローの下端をまたいで流す。写真が上に重なる＝画像と背景の組み合わせ */
.wmband{position:relative;overflow:hidden;height:calc(var(--fs-wm) * .62);margin-top:calc(var(--fs-wm) * -.42)}
/* 透かしは DOM のテキストではなく CSS の装飾にする（読ませる文字ではないため） */
.wmband::before{content:"niau group　hair & photo　niau group";
  position:absolute;left:0;top:calc(var(--fs-wm) * -.26);
  font-family:'ShipporiMix',"Baskervville",serif;font-size:var(--fs-wm);line-height:1;letter-spacing:.04em;
  color:var(--wm);white-space:nowrap;pointer-events:none;user-select:none}
.hero__grid{position:relative;z-index:2}
@media(max-width:899px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:32px}
  .hero__copy{padding-inline:var(--pad)}
  /* ★スマホでも「右端まで断ち切り」を守る（左20pxのインデントを外した）。
     この案件は写真の質で見せる設計なので、写真を余白で削らない */
  .hero__ph{height:auto;aspect-ratio:4/5;margin-left:0}
  .wmband{height:calc(var(--fs-wm) * .5);margin-top:calc(var(--fs-wm) * -.3)}
}


/* ── 下層のページヘッダー＝上部に画像を置く──
   もともと「下層は写真で押す型ではない」としてヒーロー画像を置いていなかったが、
   niau は専属カメラマンが写真を常時供給できるため、下層でも写真を主役にする方針へ変更。
   ★トップと同じ強さにしない。高さで階層差を出す（トップ568px → 二階層420px → 三階層340px）。
   ★二階層と三階層で構造を変える：
     二階層＝見出し左・写真は画面右端まで断ち切り（回遊のハブなので強く）
     三階層＝全幅の横長1枚（該当145件で最多＝量産テンプレなので構造を単純に保つ） */
.phead{padding-block:0}
.phead__grid{display:grid;grid-template-columns:minmax(0,520fr) minmax(0,905fr);align-items:end}
.phead__grid>*{min-width:0}
.phead__copy{padding-left:var(--pad);padding-right:clamp(20px,3.4vw,56px);
  padding-block:clamp(32px,4.5vw,72px)}
.phead__ph{height:clamp(260px,29vw,420px)}
.phead__crumb{font-size:var(--fs-small);color:var(--mut);margin-bottom:clamp(20px,3vw,40px)}
@media(max-width:899px){
  .phead__grid{grid-template-columns:minmax(0,1fr)}
  .phead__copy{padding-inline:var(--pad);padding-bottom:24px}
  .phead__ph{height:auto;aspect-ratio:16/10;margin-left:var(--pad)}
}
/* 三階層：全幅の横長1枚。帯と同じく左右を内側に寄せて、全幅ベタにしない */
.phead--wide{padding-block:0}
.phead--wide .phead__ph{height:clamp(200px,23vw,340px);margin-inline:var(--band-inset)}
.phead--wide .phead__copy{padding-inline:var(--pad);padding-block:clamp(28px,4vw,60px) clamp(24px,3vw,44px)}
@media(max-width:899px){
  .phead--wide .phead__ph{height:auto;aspect-ratio:16/9;margin-inline:0}
}

/* ── ボタン ─────────────────────── */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:13px 26px;white-space:nowrap;
  border:1px solid var(--ink);font-size:12px;letter-spacing:.04em;background:var(--paper);color:var(--ink);
  text-decoration:none;border-radius:35px}  /* 本番実測：ピル35px が2箇所実在 */
.btn--fill{background:var(--ink);color:#fff}
.arrow{width:36px;height:36px;border:1px solid var(--line2);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--mut);flex:0 0 auto}

/* ── 章：縦組みラベルは【右端】（実測 left1187 / 英35px＋和12px）── */
/* ★auto 列だと縦組みラベルの実幅と噛み合わず、親を4pxはみ出す（1440pxで実測）。
   max-content にすると中身の実幅で確定する */
.sec{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:clamp(24px,4vw,64px);align-items:start}
.sec>*{min-width:0}
/* ★縦組みは、字送りの分だけ実幅が max-content より大きくなる（実測 38.5px の列に 41px）。
   width:max-content を明示して、列幅を中身の実寸で確定させる */
.vlabel{writing-mode:vertical-rl;display:flex;gap:14px;align-items:flex-start;white-space:nowrap;
  letter-spacing:.06em;width:max-content}
.vlabel .en{font-size:var(--fs-en)}
.vlabel .sub{font-size:var(--fs-ja-sub)}
@media(max-width:899px){
  .sec{grid-template-columns:minmax(0,1fr);gap:20px}
  .sec>.vlabel{order:-1;writing-mode:horizontal-tb;flex-direction:column;gap:4px;white-space:normal}
  .vlabel .en{font-size:20px;letter-spacing:.04em}
}

/* ── ブランドカード：均一に並べず段差をつける ── */
.brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,48px)}
.brands .brand:nth-child(even){margin-top:clamp(28px,4vw,64px)}   /* ★偶数列を下げて動きを作る */
@media(max-width:899px){
  .brands{grid-template-columns:minmax(0,1fr)}
  .brands .brand:nth-child(even){margin-top:0}
}
.brand{background:var(--paper);padding:clamp(20px,2.2vw,32px);position:relative;min-width:0}
.brand .ph{aspect-ratio:3/2;margin-bottom:20px}
.brand .en{display:block;font-size:17px;letter-spacing:.02em}
.brand .sub{display:block;margin-top:4px}
.brand .arrow{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px)}

/* ── 「次がある」＝罫線の目盛り（幅と上端を段階的に広げる＝階段）── */
.steps{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.steps>div{border-right:1px solid var(--line);padding:0 clamp(16px,2vw,28px) 40px;min-width:0}
.steps>div:last-child{border-right:none}
.steps>div{padding-top:28px}
.steps .en{display:block;font-size:14px;letter-spacing:.06em;color:var(--mut);margin-bottom:4px}
.steps b{display:block;font-weight:400;font-size:17px;letter-spacing:-.01em;margin-bottom:10px}
@media(max-width:899px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps>div{border-right:none;border-bottom:1px solid var(--line);padding:24px 0!important}
  .steps>div:last-child{border-bottom:none}
}


/* ── 募集要項・会社概要＝「項目→内容」の表（読み上げのため table + th scope）──
   ★table は min-content 未満に縮まないので、狭幅では行組みに落とす（Chromium の
     word-break:auto-phrase は min-content を文節幅まで押し上げ、横溢れの原因になる） */
table.dl{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:24px;border-top:1px solid var(--line)}
table.dl th,table.dl td{text-align:left;font-weight:400;vertical-align:top;
  padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;overflow-wrap:break-word}
table.dl th{width:38%;padding-right:16px;color:var(--mut)}
@media(max-width:640px){
  table.dl,table.dl tbody,table.dl tr,table.dl th,table.dl td{display:block;width:auto}
  table.dl th{border:0;padding:14px 0 2px;color:var(--mut);font-size:12px}
  table.dl td{padding:0 0 14px}
}

/* ── 定義リスト ───────────────────── */
.dl{border-top:1px solid var(--line)}
.dl .row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;
  padding:22px 0;border-bottom:1px solid var(--line)}
.dl dt{color:var(--mut);font-size:13px;letter-spacing:.02em}
@media(max-width:899px){.dl .row{grid-template-columns:minmax(0,1fr);gap:4px}}

/* ── お知らせ ─────────────────────── */
.news{border-top:1px solid var(--line)}
.news .row{display:grid;grid-template-columns:140px minmax(0,1fr) 36px;gap:24px;align-items:center;
  padding:24px 0;border-bottom:1px solid var(--line)}
.news time{font-size:13px;color:var(--mut);letter-spacing:.02em}
@media(max-width:899px){
  .news .row{grid-template-columns:minmax(0,1fr) 36px;gap:8px}
  .news .row time{grid-column:1/-1}
}

/* ── 全面バナー：文字は右下に寄せる（中央に置かない）── */
.banner{position:relative;min-height:460px;display:grid;align-items:end;justify-items:end}
.banner .ph{position:absolute;inset:0}
.banner .on{position:relative;z-index:1;background:rgba(255,255,255,.9);
  padding:clamp(24px,3vw,40px);max-width:440px;margin:0 clamp(20px,6vw,120px) clamp(28px,4vw,64px) 0}
@media(max-width:899px){.banner{min-height:340px}}

/* ── フッター ─────────────────────── */
.ftr{padding-block:var(--sec)}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:40px}
.ftr ul{list-style:none;font-size:13px;line-height:2.4}
/* ★keep-all を掛けない。WebKit では分割点が無くなり、2列のフッターで
   項目が列幅を9px超える（375px で実測）。基底の auto-phrase＋line-break:strict に任せる */
.ftr li{text-wrap:pretty}
.ftr h2{font-weight:400;font-size:12px;letter-spacing:.08em;color:var(--mut);margin-bottom:12px;
  font-family:'ShipporiMix',"Baskervville",serif}
@media(max-width:899px){.ftr__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* 375px では2列でも入りきらないので1列にする（タップ領域も稼げる） */
@media(max-width:479px){.ftr__grid{grid-template-columns:minmax(0,1fr);gap:26px}}

code{font-family:'ShipporiMix',ui-monospace,Menlo,monospace;font-size:.94em;overflow-wrap:anywhere}
/* .nw の中では code も折らない（break-all が nowrap に勝ってしまうため明示的に戻す） */
.nw code{overflow-wrap:normal;word-break:normal;white-space:nowrap}
/* 短い括弧書きは括弧ごと折らない（WebKit は line-break:strict でも「（」を行末に落とす） */
.nw{white-space:nowrap}
.todo{border:1px dashed var(--line2);background:#f0f0f0;padding:18px 20px;font-size:12px;color:#3c3c3c;line-height:1.9}

/* ── フォーム ─────────────────────── */
.form{max-width:640px}
.form label{display:block;font-size:13px;letter-spacing:.02em;margin-bottom:8px}
.form .field{border:1px solid var(--line);min-height:48px;padding:13px 16px;margin-bottom:24px;
  font-size:14px;color:var(--mut);background:var(--paper)}
.steps-bar{display:flex;gap:12px;font-size:12px;letter-spacing:.04em;color:var(--mut);margin-bottom:36px}
.steps-bar b{color:var(--ink);font-weight:400}

/* ── SP追従CTA ────────────────────── */
.sticky{display:none}
@media(max-width:899px){
  .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--ink);color:#fff;min-height:56px;align-items:center;justify-content:center;
    font-size:13px;letter-spacing:.04em}
  body{padding-bottom:56px}
}

/* ── 注記バッジ（ワイヤー用・本番では消す）── */
.mk{display:inline-block;background:var(--ink);color:#fff;font-size:11px;
  padding:3px 10px;margin-bottom:16px;letter-spacing:.02em}

/* ══════════════════════════════════════════════════════════════
   KINO 連動枠（2026-08-22 追加）
   実線の箱 ＝ 人が作って入れるもの（作り直さないと変わらない）
   破線の箱 ＝ KINO が外から取ってきて自動で描くもの
              （ホットペッパービューティー／Google ビジネスプロフィール／
                LINE ／ サロンからの投稿）。ページを触らずに中身が入れ替わる。
   ★ワイヤーの規律どおり配色は墨のみ。区別は「線種」だけでつける。
   ══════════════════════════════════════════════════════════════ */
.kino{position:relative;border:1px dashed var(--line2);border-left:3px solid var(--ink);
  background:var(--paper);padding:clamp(20px,2.2vw,30px);margin-top:22px}
.kino::before{content:"AUTO";position:absolute;top:-8px;left:16px;background:var(--paper);
  padding:0 9px;font-size:10px;letter-spacing:.22em;color:var(--ink);line-height:1}
.band .kino{background:var(--band)}
.band .kino::before{background:var(--band)}
.kino__ttl{display:block;font-size:14px;letter-spacing:.02em;line-height:1.6}
.kino__src{display:block;font-size:11.5px;line-height:1.9;color:var(--mut);margin-top:6px;text-wrap:pretty}
.kino__src b{color:var(--ink);font-weight:400}
.kino .ph{margin-top:16px}
.kino .small{margin-top:10px}

/* 自動で並ぶタイル（スタイル・作品・日々の投稿） */
.ktiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:16px}
.ktiles .ph{aspect-ratio:3/4;margin:0;font-size:10px}
@media(max-width:899px){.ktiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ktiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ブログ・お知らせの一覧は記事なので横長。作品タイル（3:4）と役割が違う */
.ktiles--news .ph{aspect-ratio:3/2}
@media(max-width:899px){.ktiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 絞り込みチップ（スタイルを長さ・メニューで絞る） */
.kchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.kchips span{border:1px solid var(--line2);padding:7px 14px;font-size:11.5px;line-height:1.5;
  min-height:34px;display:inline-flex;align-items:center}

/* クーポン（左に金額・右に条件） */
.kcpn{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:16px;
  border-top:1px solid var(--line)}
.kcpn>div{border-bottom:1px solid var(--line);padding:14px 0;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline}
.kcpn .nm{font-size:13px;line-height:1.7}
.kcpn .pr{font-size:14px;white-space:nowrap}
/* ★狭い幅では、名前が折れて金額だけ右上に浮く。縦に積んで読ませる（375px で実測） */
@media(max-width:599px){
  .kcpn>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .kcpn .pr{justify-self:start}
}

/* 上部の処理中ティッカー＋最終同期 */
.ktick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:12px;font-size:11.5px;color:var(--mut)}
.ktick .dot{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}
.ktick .sync{margin-left:auto}

/* チャットの起動ボタン（全ページ右下・固定） */
.kfab{position:fixed;right:clamp(14px,2.4vw,34px);bottom:clamp(14px,2.4vw,34px);z-index:40;
  border:1px solid var(--ink);background:var(--paper);padding:13px 20px;font-size:12px;
  letter-spacing:.04em;min-height:48px;display:inline-flex;align-items:center;gap:9px}
.kfab::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink)}
/* ★スマホでは下部にCTAバー（.sticky・高さ56px・z-index:60）が出るため、
   チャットのボタンがその裏に隠れていた（ご指摘による）。
   バーの上へ逃がし、重なり順も前に出す。 */
@media(max-width:899px){
  .kfab{bottom:calc(56px + 12px);z-index:61}
}

/* 口コミ（引用＋出所） */
.kquote{border-left:2px solid var(--ink);padding-left:18px;margin-top:16px}
.kquote p{font-size:15px;line-height:1.95}
.kquote .meta{font-size:11.5px;color:var(--mut);margin-top:8px}

/* 出勤カレンダー（3ヶ月） */
.kcal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:16px}
@media(max-width:899px){.kcal{grid-template-columns:minmax(0,1fr)}}
.kcal .m{border:1px solid var(--line)}
.kcal .mh{font-size:11.5px;text-align:center;padding:7px 0;border-bottom:1px solid var(--line)}
.kcal .g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;padding:8px}
/* 未設定と出勤の差が見えないと、カレンダーに見えない（375px で実測） */
.kcal .g i{aspect-ratio:1/1;background:#ededed;font-style:normal;border:1px solid #e2e2e2}
.kcal .g i.o{background:#9d9d9d;border-color:#9d9d9d}