@charset "UTF-8";
/* ==========================================================================
   SECTION 11 ｜ 会社概要 & フッター
   参考元: assets/images/SECTION 11/SECTION11_参考元画像.png (1448x1086)
   共通ヘッダー（y=0〜49）を落とした 1448x1036 を設計座標にする。
     ・会社概要ブロック  y=  0 〜 775（セクション高 776）
     ・フッター（紺地）  y=776 〜 1035（高さ 260）
       ※参考元の紺地は y=776 から始まっている（実測。778 にすると境目が1.5px下がる）
   すべての寸法は「設計px × --u」の単一座標系（入れ子の掛け算をしない）。
   数値は参考元のピクセル実測値（tools/box11.py）。
   ファイル末尾の「[CAL] 調整値」は tools/cal11.py が自動で書き換える。手で書かない。
   ========================================================================== */

section#company.s11,
footer#site-footer.s11f{
  --ink:    #0B1C41;   /* 実測 見出し・本文の紺 */
  --ink-th: #0B1439;   /* 実測 テーブル見出し（太字なので少し濃い） */
  --ink-td: #19254B;   /* 実測 テーブル本文 */
  --ink-btn:#1C2038;   /* 実測 CTAボタンの文字（黄地の上） */
  --y:      #FEBE02;   /* 実測 黄（バー・三角・CTA・番号丸） */
  --fnavy:  #011A44;   /* 実測 フッターの地 */
  --fy:     #F5C70A;   /* 実測 フッター見出しの黄 */
  --bg:     #FDFDFD;   /* 実測 ページ地 */
  --cline:  #F0F0F1;   /* 実測 カードの枠線 */
  --rule:   #E4E4E5;   /* 実測 テーブルの点線 */
}

/* ── 会社概要ブロック ─────────────────────────────────────── */
section#company.s11{
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
  padding: 0;
}

.s11-stage{
  --u: 0.0690608cqw;               /* 1 設計px。1448px 幅のとき 1px */
  position: relative;
  width: min(100%, 1448px);
  height: calc(804 * var(--u));
  container-type: inline-size;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--ink);
  font-feature-settings: "palt" 0;  /* 参考元は約物を詰めていない */
}
.s11-stage > *{ --u: 0.0690608cqw; }
.s11-stage img{ display: block; }

/* 位置指定の共通形（--x/--y2/--w/--h だけを各要素が持つ） */
.s11-stage img[data-cal11],
.s11-card, .s11-rule, .s11-tri, .s11-t, .s11-mapframe{
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
}
.s11-stage img[data-cal11],
.s11-card, .s11-mapframe{
  width:  calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.s11-stage img[data-cal11]{ z-index: 3; }
.s11-cta{ display: contents; }

/* 重なり順：装飾 0 → カードの地 1 → 水彩 2 → 中身 3 */
.s11-stage img.s11-deco{ z-index: 0; }
.s11-stage img.s11-deco.oncard{ z-index: 3; }  /* カードの中のキラキラは白地より前 */
.s11-card{ z-index: 1; }
.s11-stage img.s11-wash{ z-index: 2; }

/* ── 装飾 ───────────────────────────────────────────────── */
.s11-deco{ pointer-events: none; }
.flipx{ transform: scaleX(-1); }

/* 黄色い三角（画像ではなく clip-path で描く） */
.s11-tri{
  position: absolute;
  background: var(--y);
  z-index: 0;
}
.s11-tri.l{
  left: 0; top: calc(732 * var(--u));
  width: calc(86.1 * var(--u)); height: calc(44 * var(--u));
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.s11-tri.r{
  left: calc(1369 * var(--u)); top: calc(733 * var(--u));
  width: calc(79 * var(--u)); height: calc(43 * var(--u));
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ── 見出し ─────────────────────────────────────────────── */
.s11-head{
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  margin: 0;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  z-index: 3;
}
.s11-sub{
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  margin: 0;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  z-index: 3;
}
/* 見出し下の横点線（3px の点＋3.75px のすき間＝実測 6.75px ピッチ） */
.s11-subline{
  position: absolute;
  left: calc(57 * var(--u));
  top:  calc(197 * var(--u));
  width: calc(762 * var(--u));
  height: calc(3 * var(--u));
  background-image: radial-gradient(circle at 50% 50%,
                    var(--rule) 0 45%, transparent 46%);
  background-size: calc(6.75 * var(--u)) 100%;
  z-index: 0;
}

/* ── カード（枠と影は CSS で描く） ───────────────────────── */
.s11-card{
  background: #FEFEFE;
  border: 1px solid var(--cline);
  border-radius: calc(16 * var(--u));
  box-sizing: border-box;
  box-shadow: 0 calc(1 * var(--u)) calc(12 * var(--u)) rgba(20, 24, 48, .06);
  overflow: hidden;
}

/* ── 会社概要テーブル ───────────────────────────────────── */
.s11-table{
  position: absolute;
  left: calc(66 * var(--u));
  top:  calc(219 * var(--u));
  width: calc(756 * var(--u));
  border-collapse: collapse;
  table-layout: fixed;
  z-index: 3;
}
.s11-table th,
.s11-table td{
  padding: 0;
  border: 0;
  text-align: left;
  vertical-align: middle;
}
.s11-table th{
  color: var(--ink-th);
  position: relative;
  width: calc(150 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
/* th の右の黄色い縦バー */
.s11-table th::after{
  content: "";
  position: absolute;
  left: calc(149 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: calc(2 * var(--u));
  height: calc(26 * var(--u));
  /* 参考元のバーは 2px だが、ベタの #FEBE02 ではなく
     左 (254,194,51)・右 (254,210,71) の「にじんだ細い線」（実測）。同じ2色で塗る。 */
  background: linear-gradient(90deg, rgb(254 194 51) 0 50%, rgb(254 210 71) 50%);
}
.s11-table tr.tall th::after{ height: calc(79 * var(--u)); }
/* 参考元では「事業内容」だけ4行の中央ではなく上寄りに置かれている（実測 12px 上）。
   下パディングで持ち上げる（vertical-align: middle のまま高さの中心をずらす）。 */
.s11-table tr.tall th{ padding-bottom: calc(26 * var(--u)); }
.s11-table tr:nth-child(1) th::after{ margin-top: calc(4 * var(--u)); }
.s11-table tr.tall th::after{ margin-top: calc(2 * var(--u)); }
/* 9行目（行動指針）は3行なので、黄色い縦バーもその高さに合わせる */
.s11-table tr:nth-child(9) th::after{ height: calc(62 * var(--u)); margin-top: 0; }
/* 参考元では1行目が中央より 4px 下、9行目が 2px 上にある（実測） */
.s11-table tr:nth-child(1) th,
.s11-table tr:nth-child(1) td{ padding-top: calc(8 * var(--u)); }
.s11-table tr:nth-child(9) th,
.s11-table tr:nth-child(9) td{ padding-bottom: calc(4 * var(--u)); }
.s11-table td{
  color: var(--ink-td);
  font-weight: 500;
}
/* 参考元の「事業内容」の4行だけ、他の行より一回り小さく組まれている
   （実測：字面の高さ 14px＝他の行の 15px の約93%、幅も同じ比率）。
   約物を詰めて幅を合わせると「・」「（）」の間が参考元より狭くなるので、
   詰めではなく字の大きさで合わせる。 */
.s11-table tr.tall td{ font-size: calc(15.2 * var(--u)); }
.s11-table td a{ color: inherit; text-decoration: none; }
.s11-table td a:hover{ text-decoration: underline; text-underline-offset: 2px; }
/* 行の高さは参考元の実測値。狭い画面では自然な高さに戻すので min-width で囲う。 */
@media (min-width: 1081px){
  .s11-table tr:nth-child(1){ height: calc(51 * var(--u)); }
  .s11-table tr:nth-child(2){ height: calc(43 * var(--u)); }
  .s11-table tr:nth-child(3){ height: calc(44 * var(--u)); }
  .s11-table tr:nth-child(4){ height: calc(44 * var(--u)); }
  .s11-table tr:nth-child(5){ height: calc(45 * var(--u)); }
  .s11-table tr:nth-child(6){ height: calc(44 * var(--u)); }
  .s11-table tr:nth-child(7){ height: calc(100 * var(--u)); }
  .s11-table tr:nth-child(8){ height: calc(44 * var(--u)); }
  /* 行動指針は3行になったので、その分だけ行を高くする（カードも同じだけ伸ばした） */
  .s11-table tr:nth-child(9){ height: calc(78 * var(--u)); }
}

/* 行間の点線（実測 x=90〜799・8本） */
.s11-rule{
  width: calc(710 * var(--u));
  height: calc(2 * var(--u));
  background-image: radial-gradient(circle at 50% 50%,
                    var(--rule) 0 45%, transparent 46%);
  background-size: calc(6.75 * var(--u)) 100%;
  z-index: 2;
}

/* ── 理念カードの中身 ───────────────────────────────────── */
/* カード内の横点線（実測 x=900〜1302） */
.s11-carddiv{
  position: absolute;
  left: calc(900 * var(--u));
  top:  calc(231 * var(--u));
  width: calc(403 * var(--u));
  height: calc(2 * var(--u));
  background-image: radial-gradient(circle at 50% 50%,
                    #C9CEDA 0 42%, transparent 43%);
  background-size: calc(6.2 * var(--u)) 100%;
  z-index: 3;
}

.s11-t{ margin: 0; line-height: 1; white-space: nowrap; z-index: 3; }

/* ── 地図 ───────────────────────────────────────────────── */
.s11-mapframe{
  border: 0;
  border-radius: calc(6 * var(--u));
  z-index: 3;
  filter: saturate(.85);
}

/* ── CTA ボタン ─────────────────────────────────────────── */
.s11-btn{
  position: absolute;
  left: calc(519 * var(--u));
  top:  calc(735 * var(--u));
  width: calc(411 * var(--u));
  height: calc(52 * var(--u));
  background: var(--y);
  border-radius: calc(8 * var(--u));
  z-index: 2;
  transition: filter .2s;
}
.s11-cta:hover .s11-btn{ filter: brightness(1.06); }
.s11-btntx{
  color: var(--ink-btn);
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  z-index: 3;
}

/* ── フッター ───────────────────────────────────────────── */
footer#site-footer.s11f{
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--fnavy);
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.s11f-stage{
  --u: 0.0690608cqw;
  position: relative;
  width: min(100%, 1448px);
  height: calc(260 * var(--u));
  container-type: inline-size;
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
}
.s11f-stage > *{ --u: 0.0690608cqw; }
.s11f-stage img{ display: block; }
/* フッター座標は「設計y − 778」で書く */
.s11f-stage .p,
.s11f-stage img,
.s11f-stage .s11f-vrule{
  position: absolute;
  left: calc(var(--x) * var(--u));
  top:  calc(var(--y2) * var(--u));
}
.s11f-stage img{
  width:  calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.s11f-stage .p{
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  font-weight: 500;
}
.s11f-h{ color: var(--fy); font-family: "Poppins", sans-serif; font-weight: 700; }
.s11f-logo{ font-weight: 900; }
.s11f-waao{ font-family: "Poppins", sans-serif; font-weight: 700; }
.s11f-vrule{
  width: calc(2 * var(--u));
  background-image: radial-gradient(circle at 50% 50%,
                    rgba(255,255,255,.85) 0 45%, transparent 46%);
  background-size: 100% calc(6.6 * var(--u));
}
.s11f-stage a{ color: #fff; text-decoration: none; }
.s11f-stage a:hover{ text-decoration: underline; text-underline-offset: 2px; opacity: .85; }
.s11f-chev{
  color: var(--fy);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
.s11f-copy{ color: rgba(255,255,255,.92); }
.s11f-stage img.wht{ filter: brightness(0) invert(1); }

/* ── モーション（信頼の着地点なので最小限） ───────────────── */
.s11-card, .s11-table, .s11-stage img[data-cal11]{ }
@media (prefers-reduced-motion: reduce){
  .s11-cta:hover .s11-btn{ filter: none; }
}

/* PC では「箱を作らない入れ物」。狭い画面のときだけ本物のカードになる。 */
.s11-philwrap, .s11-mapwrap, .s11-guides{ display: contents; }

/* ── 狭い画面：設計座標をやめて、ふつうの縦積みにする ─────────────── */
@media (max-width: 1080px){
  section#company.s11{ display: block; }
  .s11-stage, .s11f-stage,
  .s11-stage > *, .s11f-stage > *{
    --u: 1px;                 /* コンテナ問い合わせをやめるので 1px に固定 */
  }
  .s11-stage, .s11f-stage{
    width: auto; height: auto;
    container-type: normal;
    box-sizing: border-box;
  }
  .s11-stage{ padding: 44px 20px 52px; }

  /* 座標で置いていた装飾・カードの地は消す
     （.s11-stage img{display:block} に負けないよう img まで書く） */
  .s11-stage img.s11-deco,
  .s11-stage img.s11-wash,
  .s11f-stage img.s11f-spk,
  .s11-stage .s11-tri,
  .s11-stage .s11-subline,
  .s11-stage .s11-card,
  .s11-stage .s11-carddiv,
  .s11-stage .s11-rule,
  .s11-cta .s11-btn,
  .s11f-stage .s11f-vrule,
  .s11f-stage .s11f-chev{ display: none; }

  /* 位置指定をやめて流し込みに戻す */
  .s11-head, .s11-sub, .s11-table, .s11-t,
  .s11-philwrap, .s11-mapwrap, .s11-guides,
  .s11-stage img[data-cal11], .s11-stage img,
  .s11-mapframe, .s11-cta,
  .s11f-stage .p, .s11f-stage img{
    position: static;
    width: auto;
    height: auto;
    max-width: 100%;
  }

  .s11-stage .s11-head{ font-size: 32px; letter-spacing: 2px; margin: 0 0 12px; }
  .s11-stage .s11-sub{ font-size: 15px; letter-spacing: 0; margin: 0 0 26px; white-space: normal; }

  /* 会社概要は th を上、td を下にした縦積み */
  .s11-table{ width: 100%; margin: 0 0 26px; }
  .s11-table th, .s11-table td{ display: block; text-align: left; }
  .s11-stage .s11-table th{
    width: auto; padding: 14px 0 4px; font-size: 13px; letter-spacing: .06em;
    color: var(--ink-th); opacity: .72;
  }
  .s11-table th::after{ display: none; }
  .s11-stage .s11-table td{
    padding: 0 0 14px; font-size: 14.5px; line-height: 1.85;
    border-bottom: 1px dotted #DDE0E7;
  }
  .s11-stage .s11-table tr.tall td{ font-size: 14.5px; }
  .s11-table tr:last-child td{ border-bottom: 0; }

  /* 理念カード・地図カードは1枚のカードとして縦に積む */
  .s11-philwrap, .s11-mapwrap{
    display: block;
    background: #FEFEFE;
    border: 1px solid var(--cline);
    border-radius: 16px;
    box-shadow: 0 1px 12px rgba(20, 24, 48, .06);
    padding: 22px 20px 24px;
    margin: 0 0 20px;
  }
  .s11-philwrap img[data-cal11="badge_phil"],
  .s11-philwrap img[data-cal11="badge_act"]{ width: 116px; margin: 0 0 14px; }
  .s11-philwrap img[data-cal11="badge_act"]{ margin-top: 26px; }
  .s11-philwrap img[data-cal11="hw1"]{ width: 205px; margin: 0 0 10px; }
  .s11-philwrap img[data-cal11="hw2"]{ width: 258px; margin: 0 0 4px; }
  .s11-philwrap img[data-cal11="person"]{ width: 104px; margin: 6px 0 0 auto; }
  .s11-guides{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px 12px;
  }
  .s11-guides img[data-cal11^="num"]{ width: 24px; }
  .s11-guides img[data-cal11^="act"]{ width: auto; height: 17px; }

  .s11-mapwrap{ padding: 18px 16px 16px; }
  .s11-mapwrap img[data-cal11="pin"]{ width: 15px; display: inline-block; vertical-align: -2px; }
  .s11-stage .s11-loch{ display: inline-block; font-size: 17px; letter-spacing: 1px; margin: 0 0 8px 8px; }
  .s11-stage .s11-addr{ display: block; font-size: 14px; line-height: 1.75; margin: 0 0 14px; white-space: normal; }
  .s11-mapframe{ width: 100%; height: 240px; border-radius: 8px; }

  /* CTA はボタンそのものにする */
  .s11-stage .s11-cta{
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: var(--y); border-radius: 10px; padding: 16px 18px;
    color: var(--ink-btn); font-weight: 700; text-decoration: none;
  }
  .s11-cta img[data-cal11]{ width: 22px; }
  .s11-cta img[data-cal11="cta_ar"]{ width: 20px; }
  .s11-stage .s11-btntx{ position: static; font-size: 16px; letter-spacing: .5px; }

  /* フッター */
  .s11f-stage{ padding: 36px 20px 26px; }
  .s11f-col{ margin: 0 0 30px; }
  .s11f-stage .p{ white-space: normal; margin: 0 0 12px; font-size: 14px; letter-spacing: 0; }
  .s11f-stage .s11f-h{ font-size: 15px; letter-spacing: 1px; margin: 0 0 14px; }
  .s11f-stage .s11f-logo{ font-size: 21px; margin: 0 0 6px; }
  .s11f-stage .s11f-waao{ font-size: 15px; margin: 0 0 12px; }
  /* 指で押せる高さを確保する（リンクは行の高さぶんだけだと 20px しかない）。
     「›」は <p> ではなく <a> 側に付ける。<p> に付けると display:block の <a> が
     次の行に落ちて、矢印とテキストが交互に並ぶ「段々畑」になってしまう。 */
  .s11f-stage .s11f-menu{ margin: 0; }
  .s11f-stage .s11f-menu a{
    display: flex; align-items: baseline; gap: 8px;
    padding: 13px 0; line-height: 1.5;
  }
  .s11f-stage .s11f-menu a::before{
    content: "\203A"; color: var(--fy); font-weight: 700; flex: none;
  }
  .s11f-contact{
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 12px 10px;
  }
  .s11f-contact .s11f-h{ grid-column: 1 / -1; margin: 0; }
  .s11f-contact img{ width: 18px; }
  .s11f-stage .s11f-contact .p{ margin: 0; font-size: 13.5px; word-break: break-word; }
  .s11f-stage .s11f-copy{ text-align: center; font-size: 12px; margin: 20px 0 0; }
}

/* ==========================================================================
   [CAL] 調整値 ── tools/cal11.py が自動で書き換える。手で編集しない。
   ========================================================================== */
.s11-head{ --x: 61; --y2: 77; font-size: calc(47.67 * var(--u)); letter-spacing: calc(8.83 * var(--u)); }
.s11-sub{ --x: 60; --y2: 158; font-size: calc(19 * var(--u)); letter-spacing: calc(1.65 * var(--u)); }
.s11-table th{ font-size: calc(16.7 * var(--u)); letter-spacing: calc(1.83 * var(--u)); padding-left: calc(43 * var(--u)); }
.s11-table td{ font-size: calc(16.35 * var(--u)); letter-spacing: calc(0.38 * var(--u)); line-height: calc(20.7 * var(--u)); padding-left: calc(36 * var(--u)); }
.s11-btntx{ --x: 615; --y2: 750; font-size: calc(20.2 * var(--u)); letter-spacing: calc(1.25 * var(--u)); }
/* 行動指針の3行（素材の文字が差し替えられないのでテキストで組む） */
.s11-act{ font-size: calc(18 * var(--u)); letter-spacing: calc(0.2 * var(--u)); line-height: calc(26 * var(--u)); font-weight: 700; color: var(--ink); }
.s11-loch{ --x: 917; --y2: 451; font-size: calc(16.8 * var(--u)); letter-spacing: calc(3.3 * var(--u)); font-weight: 700; }
.s11-addr{ --x: 888; --y2: 474; font-size: calc(13 * var(--u)); letter-spacing: calc(0.75 * var(--u)); line-height: calc(19 * var(--u)); font-weight: 500; }
.s11f-h{ font-size: calc(15.7 * var(--u)); letter-spacing: calc(1.75 * var(--u)); }
.s11f-logo{ font-size: calc(22.4 * var(--u)); letter-spacing: calc(2.2 * var(--u)); }
.s11f-waao{ font-size: calc(18 * var(--u)); letter-spacing: calc(1.83 * var(--u)); }
.s11f-brandline{ font-size: calc(14 * var(--u)); letter-spacing: calc(0.46 * var(--u)); }
.s11f-menu{ font-size: calc(11.5 * var(--u)); letter-spacing: calc(0.85 * var(--u)); }
.s11f-cont{ font-size: calc(11.9 * var(--u)); letter-spacing: calc(0.38 * var(--u)); }
.s11f-chev{ font-size: calc(19 * var(--u)); }
.s11f-copy{ font-size: calc(14 * var(--u)); letter-spacing: calc(1.65 * var(--u)); }