@charset "UTF-8";
/* ============================================================
   HDCコーポレートサイト：qloba用 カスタムCSS（組み合わせ版）
   2026-11-08 書き直し（旧やわらか版は _archive/ に保管）
   正のデザイン：Claude Designキャンバス「Mix.dc.html」（組み合わせ版）

   ■ 貼る場所：qlobaの「スタイルシート」欄（プレミアムプランから使える）
   ■ しくみ：
     - qloba全体の見た目（書体・色・ボタン・記事カード・メニュー）はここで一括
     - 凝った部分（ヒーロー文・事業カード・Haidyの帯・会社概要など）は、
       テキスト部品に貼るHTML（qloba-parts/ の各ファイル）に「hdc-」で始まる目印を付けてあり、
       このCSSがその目印を見て形を整える
     - 部品番号（section-15 など）には頼らない。部品を作り直しても崩れない
   ■ 公開前に差し替えるもの（★の行）：画像のURL2つ
     （ペイントの細い線・ヘッダーのロゴ）。qlobaにアップロードした画像のURLに替える
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Klee+One:wght@600&display=swap");

:root{
  --hdc-ink:#162644;        /* 紺：文字・ボタン */
  --hdc-text:#33404b;       /* 本文 */
  --hdc-muted:#4a5560;      /* 補足の文字 */
  --hdc-line:#d5dbe0;       /* 罫線 */
  --hdc-surface:#f5f7f8;    /* 一段沈んだ面（グレーの帯） */
  --hdc-card-bg:#eef4f6;    /* カード画像の地 */
  /* Web用の差し色（ペイント4色を濃くしたもの・6:2:1:1） */
  --hdc-teal:#0b6f84; --hdc-mustard:#b8901c; --hdc-rose:#b4527a; --hdc-indigo:#5f63b8;
  /* Haidy */
  --hdc-haidy:#fa2d8f; --hdc-haidy-bg:#fde8f2;
  /* 半透明の丸（ペイント配色） */
  --hdc-cyan:#47eafc; --hdc-cyan-500:#13d6f8; --hdc-yellow:#fde903;
  --hdc-lavender:#c7cbfa; --hdc-pink-100:#f4c6f5; --hdc-pink-400:#fb7fd0;
  /* ★ ペイントの細い線の画像（公開時：qlobaにアップした paint-top.jpg のURLに） */
  --hdc-paint:url("https://dl.qloba.info/uploads/projects/page_image/image/48841/fd32350e-66e0-46b6-835b-fafc19e59d5e.jpg");
  /* ★ ヘッダーのロゴ（公開時：qlobaにアップした HDC_LOGO_HORIZONTAL のURLに） */
  --hdc-logo:url("https://dl.qloba.info/uploads/projects/page_image/image/48838/0e5413f5-d8e4-48c8-9620-8417b13798aa.svg");
  --hdc-font:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
}

/* ---------- 1. 全体：白地・紺の文字・書体 ---------- */
body{ background:#fff !important; }
#page-projects-show,
#page-projects-show .theme-color-default,
#page-projects-show .text__text,
#page-projects-show .heading__h,
#page-projects-show [class*="use-webfont"]{
  font-family:var(--hdc-font) !important;
  color:var(--hdc-ink);
}
#page-projects-show a{ color:var(--hdc-ink); }
#page-projects-show a:hover{ color:var(--hdc-teal); }

/* ページの上下端：ペイントの細い線（10px） */
#page-projects-show::before,
#page-projects-show::after{
  content:""; display:block; height:10px;
  background:var(--hdc-paint) center/cover no-repeat;
}

/* ---------- 2. ヘッダー：ロゴ画像＋社名は文字のまま残す（検索・読み上げ用） ---------- */
.site-header__container{
  background:#fff !important;
  padding:20px 48px !important;
}
.site-header__logo{ display:none !important; }           /* qlobaのページアイコン（正方形）は隠す */
.site-header__title a{
  display:block; width:220px; height:40px;                /* ロゴの高さ40px（最小38px以上） */
  margin:6px 0;                                           /* ロゴ周りの余白 */
  background:var(--hdc-logo) left center/contain no-repeat;
  font-size:0 !important; color:transparent !important;   /* 社名の文字は見えなくするが、ページには残る */
}
.site-header__menu-item, .site-header__submenu-item{ color:var(--hdc-muted) !important; }
@media (max-width:760px){
  .site-header__container{ padding:14px 20px !important; }
  .site-header__title a{ width:180px; height:38px; }
}

/* ---------- 3. カバー写真：1枚を大きく・角を少し丸める ---------- */
#hero.hero__container{
  width:auto !important;
  margin:0 48px;
  border-radius:8px;
  overflow:hidden;
  background:#eaf6f8;
}
#hero .swiper-container{ visibility:visible !important; }
#hero .swiper-wrapper{ transform:none !important; display:block !important; }
#hero .hero__aligned-wrapper{ width:100% !important; display:block; }
#hero .hero__aligned-wrapper:not(:first-child){ display:none !important; }  /* 2枚目以降は出さない */
#hero img.hero--aligned{
  width:100% !important; max-width:none !important;
  height:clamp(240px, 36vw, 500px); object-fit:cover; display:block;
}
@media (max-width:760px){ #hero.hero__container{ margin:0 20px; } }

/* ---------- 4. メニュー（カバー写真の下） ---------- */
.site-menu__container{ background:#fff !important; padding:8px 48px !important; }
.site-menu__items{ justify-content:center; gap:4px 28px; }
.site-menu__item{ font-size:15px; font-weight:500; color:var(--hdc-ink) !important; }
.site-menu__item a:hover{ color:var(--hdc-teal) !important; }
.mobile-site-menu__container{ background:#fff !important; }

/* ---------- 5. セクションの土台 ---------- */
.section__container{
  background:#fff !important;
  background-image:none !important;    /* 今の背景画像（釧路の写真など）は外す */
  color:var(--hdc-ink) !important;
  position:relative;
}
.section__wrapper{
  max-width:1224px;
  position:relative; z-index:1;
  text-align:left;
}
.section--boxed{ background:transparent !important; padding:0 !important; margin:0 !important; }
.text__text{ line-height:1.9; color:var(--hdc-text); }
.heading__h{
  font-family:var(--hdc-font) !important;
  font-weight:900 !important;
  color:var(--hdc-ink) !important;
  background:none !important;
}
.hr__container hr{ border-color:var(--hdc-line) !important; border-width:1px 0 0 !important; }

/* グレーの帯にする部分（私たちについて・導入事例・代表メッセージ） */
.section__container:has(.hdc-gray){ background:var(--hdc-surface) !important; }

/* ---------- 6. ボタン（qlobaのボタン部品も紺の角ボタンに） ---------- */
.button__button,
.hdc-btn{
  display:inline-flex; align-items:center; box-sizing:border-box; min-height:44px;
  background:var(--hdc-ink) !important;
  color:#fff !important;
  border:1px solid var(--hdc-ink) !important;
  border-radius:4px !important;
  padding:14px 28px !important;
  font-size:16px; font-weight:700; text-decoration:none !important;
  box-shadow:none !important;
}
.button__button:hover, .hdc-btn:hover{ opacity:.88; color:#fff !important; }
.hdc-btn--ghost{ background:#fff !important; color:var(--hdc-ink) !important; }
.hdc-btn--ghost:hover{ color:var(--hdc-ink) !important; }
.hdc-btn--white{ background:#fff !important; color:var(--hdc-ink) !important; border-color:#fff !important; }
.hdc-btn--white:hover{ color:var(--hdc-ink) !important; }

/* 「詳しく見る」などの文字リンク */
.hdc-more{
  font-weight:700; color:var(--hdc-teal) !important;
  border-bottom:1px solid var(--hdc-teal); padding-bottom:2px;
  text-decoration:none !important;
}

/* ---------- 7. 見出しのかたまり（英字の小見出し＋見出し＋短い線） ---------- */
.hdc-kicker{
  margin:0 0 10px !important; font-size:13px; font-weight:700;
  letter-spacing:.18em; color:var(--hdc-muted);
}
.hdc-h2{
  margin:0 0 18px !important; font-weight:900; line-height:1.5;
  font-size:clamp(26px, 3vw, 38px); color:var(--hdc-ink);
}
.hdc-h3{ margin:0 0 6px !important; font-weight:900; font-size:22px; color:var(--hdc-ink); }
.hdc-lead{ margin:0 0 20px !important; font-size:15px; color:var(--hdc-muted); }
.hdc-note{ margin:0 0 24px !important; font-size:13px; color:var(--hdc-muted); }
/* 見出しの下の短い線：差し色4色を6:2:1:1で */
.hdc-bar{
  height:4px; width:72px; margin:0 0 32px;
  background:linear-gradient(90deg, var(--hdc-teal) 0 60%, var(--hdc-mustard) 60% 80%, var(--hdc-rose) 80% 90%, var(--hdc-indigo) 90% 100%);
}
.hdc-nowrap{ white-space:nowrap; }

/* ---------- 8. ヒーロー（しくみで、人と仕事をつなぐ。）＋半透明の丸 ---------- */
.section__container:has(.hdc-hero){ overflow:hidden; }
.section__container:has(.hdc-hero)::before,
.section__container:has(.hdc-hero)::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0;
}
.section__container:has(.hdc-hero)::before{ width:400px; height:400px; right:-90px; top:-110px; background:var(--hdc-cyan); opacity:.35; }
.section__container:has(.hdc-hero)::after { width:220px; height:220px; right:190px; top:50px; background:var(--hdc-yellow); opacity:.4; }
.hdc-hero{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:64px; align-items:end; padding:24px 0 40px;
}
.hdc-hero::before{   /* 線だけの丸 */
  content:""; position:absolute; right:-24px; top:220px; width:160px; height:160px;
  border-radius:50%; border:3px solid var(--hdc-cyan-500); box-sizing:border-box; z-index:-1;
}
.hdc-eyebrow{ margin:0 0 18px !important; font-size:14px; font-weight:700; letter-spacing:.14em; color:var(--hdc-teal); }
.hdc-display{
  margin:0 0 26px !important; font-weight:900; line-height:1.35; letter-spacing:-1px;
  font-size:clamp(36px, 5vw, 64px); color:var(--hdc-ink);
}
.hdc-hero__text{ margin:0 0 34px !important; font-size:18px; line-height:2; color:var(--hdc-muted); max-width:600px; }
.hdc-actions{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hdc-hand{   /* 手書き風のひとこと */
  font-family:"Klee One", cursive !important; font-weight:600; font-size:20px;
  display:inline-block; transform:rotate(-3deg); margin-left:10px;
  border-bottom:3px solid var(--hdc-pink-400); color:var(--hdc-ink);
}
.hdc-awards{
  background:#fff; border:1px solid var(--hdc-line); border-radius:8px;
  padding:28px; display:flex; flex-direction:column; gap:28px;
}
.hdc-awards img{ display:block; max-width:100%; height:auto; }
.hdc-awards__partner{ width:260px; }     /* パートナーロゴ：Web最小250px以上 */
.hdc-awards__award{ width:240px; }
.hdc-awards p{ margin:10px 0 0 !important; font-size:14px; color:var(--hdc-muted); }
.hdc-awards p.is-strong{ font-weight:700; font-size:15px; color:var(--hdc-ink); }

/* ヒーローの後・私たちについての前：ペイントの細い線（6px） */
.section__container:has(.hdc-about)::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:var(--hdc-paint) center 40%/cover no-repeat;
}

/* ---------- 9. 私たちについて（Irisのキツネ入り） ---------- */
.hdc-about{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; padding:32px 0;
}
.hdc-about__iris{ width:130px; height:auto; display:block; border-radius:50%; margin-bottom:20px; }
.hdc-about__body p{ margin:0 0 18px !important; font-size:16px; line-height:2.05; color:var(--hdc-text); }

/* ---------- 10. 事業内容のカード ---------- */
.hdc-cards{ display:grid; gap:20px; margin-bottom:56px; }
.hdc-cards--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.hdc-cards--3{ grid-template-columns:repeat(3, minmax(0,1fr)); margin-bottom:0; }
.hdc-card{
  border:1px solid var(--hdc-line); border-top:3px solid var(--hdc-teal);
  border-radius:6px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column;
}
.hdc-card.is-pink{ border-top-color:var(--hdc-haidy); }
.hdc-card.is-mustard{ border-top-color:var(--hdc-mustard); }
.hdc-card.is-indigo{ border-top-color:var(--hdc-indigo); }
.hdc-card__img{ height:180px; background:var(--hdc-card-bg); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hdc-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hdc-card__img.is-contain{ background:#fff; padding:16px; box-sizing:border-box; }
.hdc-card__img.is-contain img{ object-fit:contain; }
.hdc-card__img.is-haidy{ background:var(--hdc-haidy-bg); align-items:flex-end; }
.hdc-card__img.is-haidy img{ width:auto; height:160px; object-fit:contain; }
.hdc-card__img.is-empty{ font-size:13px; color:var(--hdc-muted); text-align:center; padding:16px; box-sizing:border-box; }
.hdc-card__body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.hdc-card__no{ font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--hdc-teal); }
.hdc-card.is-pink .hdc-card__no{ color:var(--hdc-rose); }
.hdc-card.is-mustard .hdc-card__no{ color:var(--hdc-muted); }
.hdc-card.is-indigo .hdc-card__no{ color:var(--hdc-indigo); }
.hdc-card__title{ margin:0 !important; font-weight:700; font-size:20px; line-height:1.5; color:var(--hdc-ink); }
.hdc-card__text{ margin:0 !important; font-size:15px; line-height:1.95; color:var(--hdc-muted); flex-grow:1; }
.hdc-card .hdc-more{ align-self:flex-start; }
.hdc-ai{ color:var(--hdc-haidy); }   /* Haidyの「ai」だけピンク */

/* ---------- 11. Haidyの帯（淡いピンク＋上にHaidyピンクの線＋半透明の丸） ---------- */
.hdc-haidy{
  position:relative; overflow:hidden;
  background:var(--hdc-haidy-bg); border-top:4px solid var(--hdc-haidy); border-radius:16px;
  padding:40px 48px;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:40px; align-items:center;
}
.hdc-haidy::before, .hdc-haidy::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; }
.hdc-haidy::before{ right:-70px; bottom:-100px; width:280px; height:280px; background:var(--hdc-lavender); opacity:.55; }
.hdc-haidy::after { right:170px; top:-60px; width:170px; height:170px; background:var(--hdc-pink-100); opacity:.6; }
.hdc-haidy > *{ position:relative; z-index:1; }
.hdc-haidy__img{ width:140px; height:auto; display:block; }
.hdc-haidy__name{ margin:0 !important; font-family:Arial, sans-serif !important; font-weight:900; font-size:44px; letter-spacing:-2px; line-height:1; color:var(--hdc-ink); }
.hdc-haidy__title{ margin:14px 0 8px !important; font-weight:900; font-size:26px; color:var(--hdc-ink); }
.hdc-haidy__text{ margin:0 !important; font-size:16px; line-height:1.9; color:var(--hdc-text); }
.hdc-haidy .hdc-btn{ white-space:nowrap; }

/* ---------- 12. 記事パーツ（導入事例・お知らせ）→ 落ち着いたカード ---------- */
.wall__card-item-inner{
  background:#fff; border:1px solid var(--hdc-line); border-radius:6px; overflow:hidden;
}
.section__container:has(.hdc-gray) .wall__card-item-inner{ border-color:transparent; }
.wall__card-title{ font-weight:700 !important; line-height:1.7; padding:16px 20px 4px; margin:0 !important; }
.wall__card-title a{ color:var(--hdc-ink) !important; }
.wall__card-info{ padding:0 20px 18px; font-size:13px; color:var(--hdc-muted); }
.wall__card-info ._text-gray-400, .wall__card-info .sysicon{ display:none; }   /* いいね数のアイコンは出さない */
/* 「すべて見る」→ 白地に紺の線のボタン */
#page-projects-show a.wall__all-items{
  display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box;
  background:#fff !important; color:var(--hdc-ink) !important;
  border:1px solid var(--hdc-ink) !important; border-radius:4px !important;
  padding:12px 24px !important; font-weight:700; text-decoration:none;
}
#page-projects-show a.wall__all-items .sysicon{ color:var(--hdc-ink); }

/* ---------- 13. 代表メッセージ（正面の写真・小さめ） ---------- */
.hdc-message{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:48px; align-items:center; padding:24px 0; }
.hdc-message__photo{ width:180px; aspect-ratio:4/5; border-radius:8px; overflow:hidden; background:#e3eaee; }
.hdc-message__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
.hdc-message__name{ margin:0 !important; font-weight:900; font-size:30px; color:var(--hdc-ink); }
.hdc-message__role{ margin:4px 0 18px !important; font-size:14px; color:var(--hdc-muted); }
.hdc-message__text{ margin:0 0 22px !important; font-size:18px; line-height:2.05; max-width:720px; color:var(--hdc-ink); }
.hdc-links{ display:flex; gap:28px; flex-wrap:wrap; }
.hdc-message .hdc-bar{ margin-bottom:22px; }

/* ---------- 14. 会社概要の表 ---------- */
.hdc-company{ width:100%; border-collapse:collapse; font-size:16px; }
.hdc-company th, .hdc-company td{ text-align:left; padding:18px 12px; border-bottom:1px solid var(--hdc-line); vertical-align:top; color:var(--hdc-ink); }
.hdc-company th{ width:200px; font-weight:700; }
.hdc-company tr:first-child th, .hdc-company tr:first-child td{ border-top:1px solid var(--hdc-ink); }
.hdc-legal{ margin:20px 0 0 !important; font-size:14px; }

/* ---------- 15. お問い合わせ（紺の帯・上にペイントの細い線6px） ---------- */
.section__container:has(.hdc-contact){ background:var(--hdc-ink) !important; }
.section__container:has(.hdc-contact)::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:var(--hdc-paint) center 40%/cover no-repeat;
}
.hdc-contact{ text-align:center; padding:32px 0; }
.hdc-contact .hdc-kicker{ color:#c9d3dc; }
.hdc-contact .hdc-h2{ color:#fff; }
.hdc-contact__text{ margin:0 0 32px !important; font-size:16px; line-height:2; color:#e3e8ee; }

/* ---------- 16. フッター ---------- */
.hdc-footer{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.hdc-footer__logo{ height:38px; width:auto; display:block; margin:8px 0 16px; }
.hdc-footer__addr{ margin:0 !important; font-size:14px; color:var(--hdc-muted); }
.hdc-footer__nav{ display:grid; grid-template-columns:repeat(3, auto); gap:10px 36px; font-size:14px; align-content:start; }
.hdc-footer__nav a{ text-decoration:none; }
.hdc-copy{ margin:28px 0 0 !important; font-size:12px; color:var(--hdc-muted); }
.site-footer__container{ background:#fff !important; border-top:1px solid var(--hdc-line); color:var(--hdc-muted); }
.site-footer__container a{ color:var(--hdc-muted) !important; }

/* ---------- 17. スマホ・タブレット ---------- */
@media (max-width:1100px){
  .hdc-cards--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px){
  .hdc-hero, .hdc-about, .hdc-message, .hdc-haidy{ grid-template-columns:1fr; gap:28px; }
  .hdc-cards--4, .hdc-cards--3{ grid-template-columns:1fr; }
  .hdc-haidy{ padding:32px 24px; }
  .hdc-hero::before, .hdc-haidy::before, .hdc-haidy::after,
  .section__container:has(.hdc-hero)::after{ display:none; }
  .hdc-hand{ margin-left:0; }
  .hdc-company th{ width:96px; }
  .hdc-company th, .hdc-company td{ padding:14px 8px; font-size:15px; }
  .hdc-footer__nav{ grid-template-columns:repeat(2, auto); }
}

/* =========================================================
   画像置き場の段を隠す（11/8追加）
   いちばん下の「画像8枚の段」は、HTMLで使う画像をqlobaに置いておくための段。
   消すと画像ファイルまで消えるおそれがあるので、段は残して見た目だけ隠す。
   目印：ペイントの線の画像（48841）は、この段にしか画像部品として置いていない
   ========================================================= */
.section__container:has(img[src*="/image/48841/"]){ display:none !important; }
.site-menu__item:empty{ display:none; }