@charset "UTF-8";
/* =================================================================
 * profile/ 専用スタイル（エンゼルコミュニティ会社概要ページ準拠）
 * このディレクトリ内で完結する自己完結型CSS。現行サイトのCSSには依存しません。
 * ブランドカラーは --accent 1か所で各社に合わせて変更できます。
 * ================================================================= */

:root {
  --accent: #4b70b4;      /* メインのブランドブルー（各社で変更可） */
  --accent-dark: #4766A7; /* ホバー等のアクセント */
  --accent-line: #6D9D35; /* 見出し下線のグリーン */
  --btn: #16ad18;         /* ボタンのグリーン */
  /* l-grid 制御変数 */
  --grid-gap: 20px;
  --grid-row: 20px;
  --grid-mt: 30px;
  --grid-mb: 15px;
}

/* ------- リセット / 基本 ------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding-top: 70px;
  color: #333;
  font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ','Meiryo','MS ゴシック',sans-serif;
  background: #fff;
}
main { margin-top: 0; }
a { color: #333; text-decoration: none; transition: .3s; }
a:hover { opacity: 1; }
@media (min-width:768px) { a:hover { opacity: .7; } }
img { max-width: 100%; }

/* ------- 余白ユーティリティ ------- */
.mt15 { margin-top: 15px; }
.mt30 { margin-top: 30px; }
.mt50 { margin-top: 50px; }
.mt80 { margin-top: 80px; }
.mb70 { margin-bottom: 70px; }
.pt20 { padding-top: 20px; }
.pb20 { padding-bottom: 10px; }
@media (min-width:768px) { .pb20 { padding-bottom: 20px; } }
.m30 { margin: 30px auto; }

/* ------- 改行コントロール ------- */
@media screen and (min-width:768px) { .pc { display:block; } .sp { display:none; } }
@media screen and (max-width:769px) { .pc { display:none; } .sp { display:block; } }

/* ------- テキスト装飾 ------- */
.mincho { font-family:"游明朝",YuMincho,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HG明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; }
.t-center { text-align:center; }
.t-just { text-align:justify; }
.t-bold { font-weight:bold; }
.t-shadow { text-shadow:#666 0 0 10px,#666 0 0 10px,#666 0 0 10px,#666 0 0 10px; }
.color-002 { color:#09f; font-weight:600; }
.lh-m { line-height:2; }
.font-xs { font-size:70%; }
.font-business { text-shadow:0 0 3px #fff,0 0 5px #fff,0 0 10px #fff; font-size:15px; color:#000; }
@media (min-width:768px) { .font-business { font-size:30px; } }
p { text-align:left; line-height:1.5; font-size:16px; }
img.radius0 { width:100%; border-radius:0; }

/* ------- ラベル ------- */
.label-001 { padding:2px 7px; border:1px solid #000; background:#fff; }

/* ------- 緑ボタン ------- */
.btn-2 {
  display:block; width:80%; margin:40px auto 0; padding:24px 0;
  font-size:20px; text-align:center; background:var(--btn); color:#fff;
  border:4px solid var(--btn); position:relative; z-index:1; transition:.3s;
  font-family:'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ','Meiryo','MS ゴシック',sans-serif;
}
.btn-2::before {
  content:""; width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;
  background:#fff; border:1px solid #fff; transform-origin:50% 0%; transform:scaleX(0);
  transition:transform ease .2s;
}
.btn-2:hover { color:var(--btn); font-weight:bold; opacity:1; }
.btn-2:hover::before { transform-origin:50% 100%; transform:scaleX(1); }

/* ------- セクション / 最大幅 / 背景色 ------- */
section { padding:50px 20px; }
@media (min-width:768px) { section { padding:80px 0; } }
section[id] { scroll-margin-top:70px; }
.w840 { max-width:840px; margin:0 auto; }
.w1000 { max-width:1000px; margin:0 auto; }
.w1200 { max-width:1200px; margin:0 auto; }
.bgc-001 { background:#fff; }
.bgc-002 { background:#DCDCDC; }
.bgc-003 { background:#f5f5f5; }

/* ------- グリッド ------- */
.l-grid { display:flex; flex-wrap:wrap; margin:var(--grid-mt) calc(var(--grid-gap)/-2) var(--grid-mb); padding:0; list-style:none; }
.l-grid > li { box-sizing:border-box; width:100%; padding-left:calc(var(--grid-gap)/2); padding-right:calc(var(--grid-gap)/2); margin-bottom:var(--grid-row); }
@media (min-width:768px) {
  .l-grid--pc4 > li { width:calc(100% / 4); }
  .l-grid--pc2 > li { width:calc(100% / 2); }
}

/* ------- liリンク（グループ会社カード） ------- */
.li-link { display:block; width:100%; color:inherit; text-decoration:none; cursor:pointer; }
.li-link .img-wrap { position:relative; overflow:hidden; }
.li-link img { width:100%; height:auto; display:block; transition:transform .4s ease; }
@media (hover:hover) and (pointer:fine) { .li-link:hover img { transform:scale(1.08); } }
@media (hover:none) { .li-link img { transform:none !important; transition:none; } }
.external-icon {
  position:absolute; right:12px; top:12px; width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; display:block; text-align:center; line-height:32px;
  font-size:16px; opacity:0; transform:translateY(-5px);
  transition:opacity .3s ease, transform .3s ease; pointer-events:none;
}
.external-icon::before { position:relative; top:8px; }
@media (hover:hover) and (pointer:fine) { .li-link.is-external:hover .external-icon { opacity:1; transform:translateY(0); } }
@media (hover:none) { .external-icon { opacity:1; transform:none; } }
.ttl-001 { width:100%; margin-top:10px; padding:10px 0; font-size:12px; color:#000; border-top:1px solid #000; border-bottom:1px solid #000; }
@media (min-width:768px) { .ttl-001 { font-size:13px; } }

/* ------- 見出し ------- */
.headline-001 h2 {
  font-size:22px; letter-spacing:5px; position:relative; text-align:center; line-height:1.4;
  font-family:"EB Garamond","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","Sawarabi Mincho","MS P明朝","MS 明朝",serif;
}
@media (min-width:768px) { .headline-001 h2 { font-size:40px; } }
.headline-001 h2 span { font-size:12px; letter-spacing:2px; line-height:1.4; display:block; }
@media (min-width:768px) { .headline-001 h2 span { font-size:20px; } }
.headline-001 h2:before {
  position:absolute; bottom:-10px; left:calc(50% - 40px); width:80px; height:4px; content:'';
  border-radius:10px; background:var(--accent-line);
}
@media (min-width:768px) { .headline-001 h2:before { left:calc(50% - 50px); width:100px; height:5px; } }
h3 {
  font-size:18px; letter-spacing:2px; line-height:1.3; display:block; text-align:center;
  font-family:"EB Garamond","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","Sawarabi Mincho","MS P明朝","MS 明朝",serif;
}
@media (min-width:768px) { h3 { font-size:26px; } }

/* ------- ヘッダー ------- */
header {
  display:flex; align-items:center; justify-content:space-between; position:fixed; top:0; left:0;
  z-index:99; background:#fff; height:70px; width:100%; border-bottom:1px solid #ccc;
  opacity:.98; visibility:visible;
}
.logo { margin:0; display:block; }
.logo img { height:45px; padding-left:10px; width:auto; }
@media (min-width:768px) { .logo img { height:50px; padding-left:30px; } }

/* ヘッダー内クイックリンク（PCのみ） */
.headermenu { display:none; }
@media (min-width:768px) {
  .headermenu {
    display:flex; align-items:center; justify-content:space-between; position:fixed; top:12px;
    right:100px; max-width:820px; height:45px; padding:0 10px; background:#fff; list-style:none; margin:0; gap:32px;
  }
}
.headermenu li { display:block; font-size:14px; color:#000;
  font-family:'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ','Meiryo','MS ゴシック',sans-serif; }
.headermenu li a { font-weight:700; color:#000; position:relative; opacity:1; white-space:nowrap; }
.headermenu li a::before {
  content:''; position:absolute; width:120%; height:5px; border-radius:50px; background:var(--accent-dark);
  bottom:-10px; left:-10%; transform-origin:center; transform:scaleX(0); transition:transform .2s ease-in-out;
}
.headermenu li a:hover { color:var(--accent-dark); }
.headermenu li a:hover::before { transform-origin:center; transform:scaleX(1); }
.headermenu li a i { margin-left:5px; }

/* ------- ハンバーガーボタン ------- */
.menuButton { display:block; height:50px; width:50px; cursor:pointer; position:fixed; top:4px; right:7px; z-index:88; transition:.6s; }
.menuButton div { height:2px; width:50%; background:#333; border-radius:20%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:.2s; }
.menuButton div:nth-last-of-type(1) { transform:translate(-50%,-9px); }
.menuButton div:nth-last-of-type(2) { opacity:1; }
.menuButton div:nth-last-of-type(3) { transform:translate(-50%,7px); }
.menuButton.active { transform:rotate(180deg); top:10px; }
.menuButton.active div:nth-last-of-type(1) { transform:rotate(45deg) translate(-50%,0); transform-origin:0% 50%; }
.menuButton.active div:nth-last-of-type(2) { opacity:0; transform:translate(0%,-50%); }
.menuButton.active div:nth-last-of-type(3) { transform:rotate(-45deg) translate(-50%,0); transform-origin:0% 50%; }
.menuButton span { display:block; width:100%; position:absolute; bottom:0; left:0; text-align:center; font-size:7px; letter-spacing:.08em; }
.menuButton.active span { display:none; }

/* ------- ナビマスク ------- */
.navMask { position:fixed; top:0; left:0; z-index:66; width:100%; height:100%; background:#000; opacity:0; visibility:hidden; transition:.3s; }
.navMask.active { opacity:.5; visibility:visible; }

/* ------- スライドナビ ------- */
nav {
  transform:translateX(100%); transition:.5s; position:fixed; top:70px; right:0; z-index:77;
  background:#fff; padding:0 0 70px; width:90%; height:100vh; overflow:auto;
  font-family:'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ','Meiryo','MS ゴシック',sans-serif;
}
@media (min-width:769px) { nav { width:500px; } }
nav.active { transform:translateX(0%); }
.menu { width:100%; margin:0 auto; }
.menu-title { position:relative; cursor:pointer; font-size:16px; letter-spacing:5px; color:#fff; background:var(--accent); border-bottom:1px solid #fff; padding:20px 40px 20px 16px; }
@media (min-width:768px) { .menu-title:hover { background:#4398C9; transition:.3s; transform:scale(1.01); overflow:hidden; } }
.menu-title::before { display:block; content:""; box-sizing:border-box; position:absolute; top:calc(50% - 6px); right:25px; width:6px; height:6px; border:6px solid transparent; border-left:6px solid #fff; transition:all .4s ease-out; transform-origin:3px 6px; transform:rotate(90deg); }
.menu-title.active::before { transform:rotate(-90deg); }
.menu-list { transition:all .4s ease-out; overflow:hidden; line-height:0; opacity:0; margin:0; padding:0; color:#333; background:#F2F3F4; }
.menu-list.active { line-height:1; opacity:1; }
.menu-list a { padding:15px 0 15px 30px; line-height:0; }
.menu-list.active a { display:block; font-size:16px; letter-spacing:2px; line-height:1.5; transition:.5s; }
.menu-list.active a:not(:last-child) { border-bottom:1px solid rgba(75,112,180,.6); }
@media (min-width:768px) { .menu-list.active a:hover { color:#000; background:#E0E0E0; transform:scale(1.01); overflow:hidden; } }
.menu-footer { color:#fff; font-size:12px; text-align:center; display:block; padding:15px 0; background:var(--accent); }

/* ------- トップ画像 + フェードインタイトル ------- */
.top-img-container { position:relative; }
.top-img-container img { width:100%; height:auto; display:block; }
.top-img-title {
  position:absolute; left:50%; top:50%; width:100%; margin:0; text-align:center; color:#fff; font-size:24px; z-index:10;
  font-family:"EB Garamond","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","Sawarabi Mincho","MS P明朝","MS 明朝",serif;
  opacity:0; transform:translate(-50%,-40%); transition:opacity 2s ease, transform 2s ease;
}
.top-img-title.is-show { opacity:1; transform:translate(-50%,-50%); }
@media (min-width:769px) { .top-img-title { font-size:70px; } }

/* ------- スクロールアニメーション ------- */
.anime-ue { transform:translateY(-30px); opacity:0; transition:1.5s; }
.anime-ue.show { opacity:1; transform:none; }

/* ------- お知らせテーブル ------- */
table.info { width:100%; table-layout:fixed; border-collapse:collapse; }
@media (min-width:768px) { table.info { width:80%; } }
table.info tr { border:none; border-bottom:1px dotted #000; }
table.info td { display:block; padding:10px 0; width:100%; box-sizing:border-box; min-width:0; }
@media (min-width:768px) { table.info td { padding:20px 0; } }
table.info td p { display:block; margin-top:20px; overflow-wrap:anywhere; word-break:break-word; }
/* 表題リンク（td直下のa）：太字・青・下線なし／ホバーで下線。日付との行間は20pxに統一 */
table.info td > a { display:block; margin-top:20px; font-weight:bold; color:var(--accent); text-decoration:none; font-size:14px; line-height:1.5; transition:.1s; overflow-wrap:anywhere; word-break:break-word; }
table.info td > a:hover { text-decoration:underline; opacity:1; }
/* 本文中のインラインリンク（相談センター等）：青・下線なし／ホバーで下線 */
table.info td p a { color:var(--accent); text-decoration:none; }
table.info td p a:hover { text-decoration:underline; }

/* ------- 会社概要テーブル ------- */
table.outline { width:100%; padding:0 10px; border-spacing:0; line-height:1.3; }
@media (min-width:768px) { table.outline { font-size:16px; } }
table.outline tr { border-top:solid 2px #ccc; border-bottom:solid 2px #ccc; }
table.outline th { width:15%; font-size:10px; font-weight:700; text-align:center; background:#f5f5f5; border-top:solid 2px var(--accent); border-bottom:solid 2px var(--accent); }
@media (min-width:768px) { table.outline th { width:25%; font-size:16px; } }
table.outline td { padding:20px 0 20px 20px; font-size:12px; text-align:left; }
@media (min-width:768px) { table.outline td { font-size:16px; } }
table.outline td a { color:var(--accent); text-decoration:none; }
table.outline td a:hover { text-decoration:underline; }

/* ------- アクセス（地図） ------- */
.access-block { margin-top:40px; }
.access-block:first-of-type { margin-top:0; }
.access-block h3 { text-align:center; }
.access-info { max-width:840px; margin:20px auto 0; line-height:1.9; text-align:center; }
.map-wrap { position:relative; width:100%; padding-top:56.25%; margin:24px auto 0; max-width:1000px; }
.map-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* ------- フッター ------- */
footer { display:block; width:100%; margin-top:0; text-align:center; background:#fff;
  font-family:'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ','Meiryo','MS ゴシック',sans-serif; }
.topButton2 { display:block; color:#000; background:#fff; width:100%; padding:30px 20px; }
@media (min-width:768px) { .topButton2 { padding:50px 20px; } }
.topButton2:hover { background:#eee; }
.topButton2 span { font-size:20px; }
@media (min-width:768px) { .topButton2 span { font-size:30px; } }
.topButton2 p { font-size:14px; line-height:3; letter-spacing:.08em; text-align:center; }
.f-logo { border-top:solid 10px var(--accent); }
.f-logo img { height:60px; margin:60px auto; width:auto; }
@media (min-width:768px) { .f-logo img { height:80px; margin:50px auto; } }
.f-navi-02 { display:none; }
@media (min-width:768px) { .f-navi-02 { display:block; padding:0 0 10px; } .f-navi-02 p { font-size:14px; text-align:center; } }
.f-copy { padding:30px 20px; background:var(--accent); }
.f-copy p { font-size:14px; text-align:center; color:#fff; }

/* =================================================================
 * 追加：ヒーロー画像スライダー / 見出しブロック / 会社紹介バナー
 * ================================================================= */

/* ------- ヒーロー画像スライダー（フェード） ------- */
.hero-slider { position:relative; width:100%; overflow:hidden; height:clamp(220px,46vw,620px); background:#000; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.hero-slide.is-active { opacity:1; }
.hero-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-dots { position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:center; gap:10px; z-index:2; }
.hero-dot { width:10px; height:10px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:.3s; }
.hero-dot.is-active { background:#fff; transform:scale(1.25); }
@media (min-width:768px){ .hero-dots{ bottom:24px; gap:14px; } .hero-dot{ width:12px; height:12px; } }

/* ------- 見出しブロック（リード） ------- */
.lead-block { padding:55px 20px; text-align:center; }
@media (min-width:768px){ .lead-block{ padding:80px 20px; } }
.lead-title { position:relative; font-size:26px; letter-spacing:.08em; color:#333; padding-bottom:22px; margin:0 auto; }
.lead-title:after { content:''; position:absolute; left:calc(50% - 25px); bottom:0; width:50px; height:4px; border-radius:10px; background:var(--accent-line); }
@media (min-width:768px){ .lead-title{ font-size:38px; padding-bottom:26px; } .lead-title:after{ left:calc(50% - 35px); width:70px; height:5px; } }
.lead-text { margin-top:26px; font-size:14px; line-height:2.1; color:#555; }
.lead-text br { display:none; }
@media (min-width:768px){ .lead-text{ margin-top:34px; font-size:16px; } .lead-text br{ display:inline; } }

/* ------- 会社紹介PDFバナー ------- */
.cp-banner { text-align:center; }
.cp-banner a { display:inline-block; max-width:960px; width:100%; }
.cp-banner img { width:100%; height:auto; border:1px solid #e5e5e5; }
.cp-banner a:hover img { opacity:.85; }