@charset "UTF-8";
/*
 * ======================================
 * site.css — 有限会社八拳警備保障 HACHIKEN
 * 共通SCSS(main.css)で再現できないサイト固有デザインのみを追加。
 * 配色・フォントは scss/_vars.scss で上書き済み（base=海ブルー / sub=黄緑 / accent=橙）。
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .hk-topbar*        - ヘッダー上部インフォバー（連絡先・SNS）
 * .hk-header*        - sticky白ヘッダー（nav en/ja + 橙CTAピル + 3色アクティブ下線）
 * .hk-footer*        - 濃紺3カラムフッター（ロゴ/info・サイトマップ・地図）
 * .hk-cta*           - 橙グラデのお問い合わせCTA帯
 * .hk-head*          - セクション見出し（小英字キッカー + 大見出し）
 * .hk-dots           - 見出し下の3色ドット装飾（青・赤・橙＝ロゴカラー）
 * .hk-pill / .hk-btn - 配色別ピル/ソリッドボタン
 * .hk-bgword         - セクション背景の大型透かし英字
 * .hk-mv*            - メインビュー（CMSスライダー枠 + 装飾オーバーレイ）
 * .hk-bubble         - MVの浮遊カラフル円
 * .hk-news*          - TOPニュースストリップ
 * .hk-concept*       - コンセプト（数値スタッツ）
 * .hk-biz*           - 事業バナーカード（写真+大ナンバー+矢印）
 * .hk-logo*          - ロゴストーリー（濃紺・色ドットリスト）
 * .hk-blogcard*      - サムネ付きブログカード
 * .hk-phero*         - 下層ページ ヒーロー帯（グラデ + 透かし英字 + 波）
 * .hk-svc* / .hk-gal* / .hk-pricebox - 事業ページ部品
 * .hk-faq*           - Q&Aアコーディオン
 * .hk-recruit* / .hk-form* - 採用・お問い合わせ
 * .hk-side* / .hk-pager - ブログ一覧サイドバー・ページネーション
 * .hk-reveal         - スクロールフェードイン
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 * 装飾パターン不足: 見出し下の3色ドット / 大型背景透かし英字 / 浮遊カラフル円
 * 構造不足: 写真上に大ナンバー+矢印が載る事業バナー / sticky+情報バー複合ヘッダー
 * 値の粒度不足: 各セクション固有のグラデ配色・余白（design準拠）
 */

/* ============================================================
   base 補正
   ============================================================ */
:root{
  --hk-blue:#2EA7E0; --hk-blue-d:#0e6aa3; --hk-navy:#10618a;
  --hk-green:#6fae15; --hk-green-d:#5f9c10; --hk-lime:#8ec63f;
  --hk-orange:#F39800; --hk-orange-d:#e07f00; --hk-red:#E60012;
  --hk-ink:#243029; --hk-body:#46514a; --hk-muted:#8a948c;
}
body{ overflow-x:hidden; }
img{ max-width:100%; }
.hk-en{ font-family:"Roboto Condensed",sans-serif; }
.hk-serif{ font-family:"Noto Serif JP",serif; }

/* ============================================================
   TOP INFO BAR
   ============================================================ */
.hk-topbar{ background:var(--hk-navy); color:#fff; font-size:1.3rem; letter-spacing:.02em; }
.hk-topbar__inner{ max-width:1200px; margin:0 auto; padding:7px 24px; display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:flex-end; }
.hk-topbar__tagline{ margin-right:auto; font-weight:500; opacity:.92; }
.hk-topbar__tel{ display:inline-flex; align-items:center; gap:7px; }
.hk-topbar__tel-label{ font-family:"Roboto Condensed",sans-serif; opacity:.7; }
.hk-topbar__tel a{ font-family:"Roboto Condensed",sans-serif; font-weight:700; font-size:1.5rem; }
.hk-topbar__sep{ opacity:.5; }
.hk-topbar__hours{ opacity:.92; }
.hk-topbar__ig{ display:inline-flex; align-items:center; gap:5px; border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:2px 11px; font-family:"Roboto Condensed",sans-serif; font-weight:700; transition:background .15s ease; }
.hk-topbar__ig:hover{ background:rgba(255,255,255,.12); }

/* ============================================================
   HEADER（sticky・main.css .header を上書き）
   ============================================================ */
.hk-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid #e6efe9; box-shadow:0 2px 16px rgba(16,97,138,.06); }
.hk-header .header__inner{ max-width:1200px; height:auto; padding:12px 24px; }
.hk-header__logo img{ height:46px; }
.hk-header .header__nav{ gap:2px; }
.hk-header .header__nav-item a{ flex-direction:column; gap:1px; padding:8px 13px; border-radius:10px; transition:background .15s ease; }
.hk-header .header__nav-item a::after{ display:none; } /* 既定の下線を無効化 */
.hk-header .header__nav-item a:hover{ background:#f0f8fc; }
.hk-header .header__nav-en{ font-size:1.1rem; letter-spacing:.06em; color:var(--hk-blue); text-transform:uppercase; }
.hk-header .header__nav-ja{ font-size:1.4rem; font-weight:700; color:#2c2f2b; margin-top:0; }
.hk-header .header__nav-item--current > a{ position:relative; }
.hk-header .header__nav-item--current > a::before{ content:""; position:absolute; bottom:-13px; left:14px; right:14px; height:3px; border-radius:3px; background:linear-gradient(90deg,#2EA7E0,#B4DA0E); }
.hk-header .header__right{ gap:10px; }
.hk-header__cta{ flex-direction:row; height:auto; padding:11px 19px; background:var(--hk-orange); color:#fff; font-size:1.4rem; font-weight:700; border-radius:999px; gap:7px; box-shadow:0 6px 16px rgba(243,152,0,.32); }
.hk-header__cta:hover{ background:var(--hk-orange-d); }
.hk-header__blog{ flex-direction:row; height:auto; padding:11px 19px; background:var(--hk-blue); color:#fff; font-size:1.4rem; font-weight:700; border-radius:999px; gap:7px; box-shadow:0 6px 16px rgba(46,167,224,.32); }
.hk-header__blog:hover{ background:var(--hk-blue-d); opacity:1; }
/* SPナビ各項目 */
.sp-nav__link::after{ margin-left:10px; }              /* ① 矢印に余白 */
.sp-nav__en{ font-size:1.5rem; }                       /* ② 英字サイズ */
/* SPナビ下部（③ 電話＋Instagramを1カラム縦並び） */
.sp-nav__bottom{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.hk-spnav__tel,.hk-spnav__ig{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-weight:700; }
.hk-spnav__tel{ font-family:"Roboto Condensed",sans-serif; font-size:2rem; }
.hk-spnav__ig{ margin-top:0; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:6px 16px; font-size:1.4rem; }

/* ============================================================
   見出し（hk-head）＋ 3色ドット
   ============================================================ */
.hk-head{ margin-bottom:40px; }
.hk-head--center{ text-align:center; }
.hk-head__en{ font-family:"Roboto Condensed",sans-serif; font-weight:700; letter-spacing:.16em; color:var(--hk-blue); margin:0 0 6px; font-size:1.4rem; }
.hk-head__en--green{ color:var(--hk-green); }
.hk-head__en--orange{ color:var(--hk-orange); }
.hk-head__en--teal{ color:#13a39a; }
.hk-head__en--white{ color:#9ad9f5; }
.hk-head__ja{ font-size:clamp(2.4rem,3.4vw,3.8rem); font-weight:900; margin:0; color:var(--hk-ink); line-height:1.4; }
.hk-head__ja--serif{ font-family:"Noto Serif JP",serif; font-weight:700; color:#1c4a3a; line-height:1.55; }
/* 3色ドット（ロゴカラー：青・赤・橙） */
.hk-dots::after{ content:""; display:block; width:54px; height:11px; margin-top:15px;
  background-image:radial-gradient(circle at 5.5px 5.5px,#2EA7E0 5.5px,transparent 6px),radial-gradient(circle at 5.5px 5.5px,#E60012 5.5px,transparent 6px),radial-gradient(circle at 5.5px 5.5px,#F39800 5.5px,transparent 6px);
  background-repeat:no-repeat; background-position:0 0,21.5px 0,43px 0; background-size:11px 11px; }
.hk-head--center .hk-dots::after{ margin-left:auto; margin-right:auto; }

/* ============================================================
   ボタン / ピル
   ============================================================ */
.hk-pill{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:1.3rem; border-radius:999px; padding:10px 18px; transition:background .15s ease; }
.hk-pill--blue{ color:#10618a; border:1.5px solid #cfe6f3; }
.hk-pill--blue:hover{ background:#f0f8fc; }
.hk-pill--green{ color:var(--hk-green-d); border:1.5px solid #d6e9b6; }
.hk-pill--green:hover{ background:#f1f8e6; }
.hk-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:1.4rem; color:#fff; padding:13px 26px; border-radius:999px; transition:background .15s ease,transform .2s ease; border:none; cursor:pointer; }
.hk-btn:hover{ transform:translateY(-2px); }
.hk-btn--blue{ background:var(--hk-blue); box-shadow:0 8px 18px rgba(46,167,224,.28); }
.hk-btn--blue:hover{ background:#1b86c4; }
.hk-btn--green{ background:var(--hk-green); box-shadow:0 8px 18px rgba(122,176,11,.26); }
.hk-btn--green:hover{ background:var(--hk-green-d); }
.hk-btn--orange{ background:var(--hk-orange); box-shadow:0 10px 24px rgba(243,152,0,.32); }
.hk-btn--orange:hover{ background:var(--hk-orange-d); }

/* ============================================================
   背景透かし英字
   ============================================================ */
.hk-bgword{ position:absolute; font-family:"Roboto Condensed",sans-serif; font-weight:700; line-height:.8; pointer-events:none; user-select:none; z-index:0; white-space:nowrap; }

/* ============================================================
   セクション共通ラッパ
   ============================================================ */
.hk-sec{ position:relative; overflow:hidden; padding:88px 24px; }
.hk-sec__inner{ position:relative; max-width:1100px; margin:0 auto; z-index:1; }
.hk-sec--white{ background:#fff; }
.hk-sec--palegreen{ background:#f3faf4; }
.hk-sec--mintwhite{ background:#fbfdf8; }

/* ============================================================
   お問い合わせCTA帯（橙グラデ）
   ============================================================ */
.hk-cta{ position:relative; overflow:hidden; background:linear-gradient(120deg,#F39800,#f5b03a); color:#fff; padding:70px 24px; text-align:center; }
.hk-cta__word{ position:absolute; left:-1%; top:-30%; font-family:"Roboto Condensed",sans-serif; font-weight:700; font-size:clamp(8rem,16vw,22rem); color:rgba(255,255,255,.13); line-height:1; pointer-events:none; }
.hk-cta__inner{ position:relative; max-width:760px; margin:0 auto; z-index:1; }
.hk-cta__title{ font-size:clamp(2.4rem,3.4vw,3.6rem); font-weight:900; margin:0 0 12px; }
.hk-cta__lead{ margin:0 0 26px; font-size:1.6rem; font-weight:500; opacity:.96; }
/* 2ボタンを等幅に（width:fit-content + 1fr 1fr で大きい方の幅に揃う） */
.hk-cta__btns{ display:grid; grid-template-columns:1fr 1fr; gap:14px; width:-moz-fit-content; width:fit-content; max-width:100%; margin:0 auto; }
.hk-cta__mail{ display:inline-flex; align-items:center; justify-content:center; gap:9px; background:#fff; color:var(--hk-orange-d); font-weight:700; font-size:1.5rem; padding:15px 30px; border-radius:999px; box-shadow:0 10px 24px rgba(0,0,0,.16); transition:transform .2s ease; }
.hk-cta__mail:hover{ transform:translateY(-2px); }
.hk-cta__tel{ display:inline-flex; align-items:center; justify-content:center; gap:9px; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.7); color:#fff; font-weight:700; font-size:1.5rem; font-family:"Roboto Condensed",sans-serif; padding:15px 30px; border-radius:999px; transition:background .15s ease; }
@media (max-width:480px){ .hk-cta__btns{ grid-template-columns:1fr; width:100%; } }
.hk-cta__tel:hover{ background:rgba(255,255,255,.26); }

/* ============================================================
   FOOTER（濃紺3カラム）
   ============================================================ */
.hk-footer{ background:#0c4a6b; color:#dceaf2; }
.hk-footer__inner{ max-width:1100px; margin:0 auto; padding:60px 24px 40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px; align-items:start; }
.hk-footer__logo{ height:52px; width:auto; filter:brightness(0) invert(1); opacity:.95; margin-bottom:18px; display:block; }
.hk-footer__name{ margin:0 0 4px; font-weight:700; color:#fff; font-size:1.5rem; }
.hk-footer__addr{ margin:0; font-size:1.35rem; line-height:1.9; opacity:.85; }
.hk-footer__contact{ margin-top:16px; display:flex; flex-direction:column; gap:5px; font-size:1.35rem; }
.hk-footer__tel{ display:flex; gap:8px; align-items:baseline; }
.hk-footer__tel-label{ opacity:.6; font-family:"Roboto Condensed",sans-serif; font-weight:700; }
.hk-footer__tel a{ font-family:"Roboto Condensed",sans-serif; font-weight:700; font-size:1.6rem; color:#fff; }
.hk-footer__hours{ opacity:.85; }
.hk-footer__ig{ margin-top:16px; display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:7px 15px; font-size:1.3rem; font-weight:700; transition:background .15s ease; }
.hk-footer__ig:hover{ background:rgba(255,255,255,.1); }
.hk-footer__heading{ margin:0 0 16px; font-family:"Roboto Condensed",sans-serif; font-weight:700; letter-spacing:.1em; font-size:1.4rem; color:#8fd0ee; }
.hk-footer__nav{ list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px; font-size:1.4rem; }
.hk-footer__nav a{ opacity:.9; transition:opacity .15s,color .15s; }
.hk-footer__nav a:hover{ opacity:1; color:#8fd0ee; }
.hk-footer__cta{ display:inline-flex; align-items:center; gap:9px; background:var(--hk-orange); color:#fff; font-weight:700; padding:13px 24px; border-radius:999px; font-size:1.4rem; box-shadow:0 8px 20px rgba(243,152,0,.3); transition:background .15s ease; }
.hk-footer__cta:hover{ background:var(--hk-orange-d); }
.hk-footer__map{ border-radius:14px; border:1px solid rgba(255,255,255,.18); aspect-ratio:16/11; }
.hk-footer__map iframe{ width:100%; height:100%; border:0; display:block; }
.hk-footer__map-addr{ margin:10px 0 0; font-size:1.2rem; opacity:.7; }
.hk-footer__bottom{ background:rgba(0,0,0,.16); border-top:1px solid rgba(255,255,255,.14); }
.hk-footer__bottom-inner{ max-width:1100px; margin:0 auto; padding:18px 24px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:1.2rem; opacity:.75; color:#dceaf2; }
.hk-footer__bottom-en{ font-family:"Roboto Condensed",sans-serif; letter-spacing:.05em; }

/* ============================================================
   page-top（main.css 上書きの色）
   ============================================================ */
.page-top__link{ background:var(--hk-blue); }

/* ============================================================
   スクロールリビール
   ============================================================ */
.hk-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.hk-reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   TOP : メインビュー
   ============================================================ */
.hk-mv{ position:relative; overflow:hidden; background:#0a4d72; min-height:clamp(620px,90vh,940px); display:flex; align-items:center; }
/* CMSスライダー枠（中身はSwiperが注入。階層を高さ100%で通し、スライド位置はSwiperに任せる）
   CMS画像の読み込みが遅いため、即時プレースホルダ画像（head.phpでpreload済み）を敷く（読込後にSwiperが上書き） */
.hk-mv #slideshow{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; z-index:0; background:#0a4d72 url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28393/1.jpg') center/cover no-repeat; }
.hk-mv #cms-slider-1-1-area,
.hk-mv #slideshow .main_slider,
.hk-mv #slideshow .slideshow,
.hk-mv #slideshow .swiper,
.hk-mv #slideshow .swiper-container,
.hk-mv #slideshow .swiper-wrapper{ width:100%; height:100%; }
.hk-mv #slideshow .swiper-slide{ height:100%; overflow:hidden; } /* width等はSwiperのインライン指定に任せる */
.hk-mv #slideshow .main_slider__inner{ width:100%; height:100%; }
.hk-mv #slideshow img{ width:100%; height:100%; object-fit:cover; display:block; }
.hk-mv__overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,50,75,.30),rgba(8,50,75,.50)); z-index:1; }
.hk-mv__word{ position:absolute; right:-2%; top:6%; font-family:"Roboto Condensed",sans-serif; font-weight:700; font-size:clamp(8rem,16vw,23rem); color:rgba(255,255,255,.10); letter-spacing:.02em; line-height:.85; pointer-events:none; user-select:none; z-index:1; }
.hk-mv__inner{ position:relative; max-width:1200px; margin:0 auto; padding:0 24px; width:100%; z-index:2; animation:hk-risein .9s ease both; }
.hk-mv__copy{ margin:0; color:#fff; font-size:clamp(4rem,6.4vw,8rem); line-height:1.18; letter-spacing:.01em; font-weight:900; text-shadow:0 4px 30px rgba(6,40,60,.35); }
.hk-mv__copy span{ background:linear-gradient(90deg,#ffe27a,#ffd24d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hk-mv__sub{ margin:22px 0 0; color:#fff; font-size:clamp(1.4rem,1.7vw,1.8rem); font-weight:500; max-width:560px; line-height:1.9; text-shadow:0 2px 14px rgba(6,40,60,.4); }
.hk-mv__scroll{ position:absolute; left:50%; bottom:96px; transform:translateX(-50%); z-index:2; color:#fff; font-family:"Roboto Condensed",sans-serif; font-size:1.1rem; letter-spacing:.2em; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.9; }
.hk-mv__scroll::after{ content:""; width:1px; height:46px; background:rgba(255,255,255,.7); animation:hk-scroll 1.8s ease-in-out infinite; }
.hk-mv__wave{ position:absolute; bottom:0; left:0; width:200%; height:90px; animation:hk-wavey 14s linear infinite; z-index:2; }
.hk-mv__wave svg{ width:100%; height:100%; display:block; }
/* 浮遊カラフル円 */
.hk-mv__bubbles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.hk-bubble{ position:absolute; display:block; border-radius:50%; animation:hk-floaty 7s ease-in-out infinite; }
.hk-bubble span{ display:block; width:100%; height:100%; border-radius:50%; animation:hk-bubpop .8s cubic-bezier(.34,1.56,.64,1) both; }
.hk-bubble:nth-child(1){ left:71%; top:12%; width:120px; height:120px; }       .hk-bubble:nth-child(1) span{ background:#2EA7E0; opacity:.82; }
.hk-bubble:nth-child(2){ left:85%; top:58%; width:84px; height:84px; animation-duration:6.6s; }  .hk-bubble:nth-child(2) span{ background:#FFD24D; opacity:.85; animation-delay:.45s; }
.hk-bubble:nth-child(3){ left:62%; top:76%; width:56px; height:56px; animation-duration:7.4s; }  .hk-bubble:nth-child(3) span{ background:#E60012; opacity:.8; animation-delay:.6s; }
.hk-bubble:nth-child(4){ left:90%; top:22%; width:40px; height:40px; animation-duration:5.6s; }  .hk-bubble:nth-child(4) span{ background:#9AD9F5; opacity:.9; animation-delay:.3s; }
.hk-bubble:nth-child(5){ left:54%; top:46%; width:62px; height:62px; }                            .hk-bubble:nth-child(5) span{ background:#F39800; opacity:.8; animation-delay:.5s; }
.hk-bubble:nth-child(6){ left:47%; top:8%;  width:32px; height:32px; animation-duration:6s; }    .hk-bubble:nth-child(6) span{ background:#13A39A; opacity:.85; animation-delay:.35s; }
.hk-bubble:nth-child(7){ left:8%;  top:14%; width:50px; height:50px; animation-duration:7.2s; }  .hk-bubble:nth-child(7) span{ background:#8EC63F; opacity:.78; animation-delay:.25s; }
.hk-bubble:nth-child(8){ left:30%; top:86%; width:38px; height:38px; animation-duration:6.4s; }  .hk-bubble:nth-child(8) span{ background:#2EA7E0; opacity:.8; animation-delay:.55s; }
.hk-bubble:nth-child(9){ left:78%; top:84%; width:28px; height:28px; animation-duration:6.8s; }  .hk-bubble:nth-child(9) span{ background:#FFD24D; opacity:.9; animation-delay:.65s; }
@keyframes hk-risein{ 0%{opacity:0;transform:translateY(24px)} 100%{opacity:1;transform:none} }
@keyframes hk-wavey{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes hk-floaty{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-14px) rotate(6deg)} }
@keyframes hk-bubpop{ 0%{transform:scale(0);opacity:0} 65%{transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes hk-scroll{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ============================================================
   TOP : NEWS ストリップ
   ============================================================ */
.hk-news{ background:#fff; }
.hk-news__inner{ max-width:1100px; margin:0 auto; padding:34px 24px; display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; border-bottom:1px solid #eef3ee; }
.hk-news__label{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.hk-news__label-head{ display:flex; align-items:baseline; gap:12px; }
.hk-news__label-en{ font-family:"Roboto Condensed",sans-serif; font-weight:700; font-size:2.6rem; color:var(--hk-blue); letter-spacing:.04em; }
.hk-news__label-ja{ font-size:1.3rem; font-weight:700; color:var(--hk-muted); }
.hk-news__list{ flex:1 1 420px; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; }
.hk-news__row{ display:flex; gap:16px; align-items:center; padding:11px 6px; border-bottom:1px dashed #e9efe9; flex-wrap:wrap; transition:background .12s ease; }
.hk-news__row:hover{ background:#f6fbfe; }
.hk-news__date{ font-family:"Roboto Condensed",sans-serif; font-weight:700; color:#7c8a82; font-size:1.4rem; min-width:96px; }
.hk-news__cat{ font-size:1.1rem; font-weight:700; color:#fff; padding:3px 11px; border-radius:999px; }
.hk-news__cat--blue{ background:#2EA7E0; } .hk-news__cat--orange{ background:#F39800; } .hk-news__cat--green{ background:#6fae15; } .hk-news__cat--red{ background:#E60012; }
.hk-news__title{ font-size:1.5rem; font-weight:500; flex:1 1 240px; }
.hk-news__more{ align-self:flex-start; }

/* ============================================================
   TOP : CONCEPT
   ============================================================ */
.hk-concept{ background:#f3faf4; }
.hk-concept .hk-sec__inner{ max-width:950px; }
.hk-concept .hk-bgword{ right:2%; top:8%; font-size:clamp(5.6rem,11vw,15rem); color:#e4f1e3; }
.hk-concept__copy{ font-family:"Noto Serif JP",serif; font-weight:700; font-size:clamp(2.6rem,3.6vw,4rem); line-height:1.6; margin:0 0 26px; color:#1c4a3a; }
.hk-concept__text{ font-size:1.7rem; line-height:2.15; color:var(--hk-body); margin:0 auto; max-width:680px; font-weight:500; }
/* PC時は指定位置（pc-onlyの<br>）で改行。2行目が収まるよう本文幅を広げる */
@media (min-width:897px){ .hk-concept__text{ max-width:950px; } }
.hk-concept__text strong{ color:var(--hk-blue); }
.hk-concept__text .is-green{ color:var(--hk-green-d); }
.hk-stats{ margin-top:34px; display:flex; justify-content:center; gap:30px; flex-wrap:wrap; }
.hk-stats__item{ text-align:center; }
.hk-stats__num{ font-family:"Roboto Condensed",sans-serif; font-weight:700; font-size:4.2rem; line-height:1; }
.hk-stats__num span{ font-size:1.8rem; color:var(--hk-body); }
.hk-stats__num--orange{ color:var(--hk-orange); } .hk-stats__num--blue{ color:var(--hk-blue); } .hk-stats__num--green{ color:var(--hk-green-d); }
.hk-stats__label{ font-size:1.3rem; font-weight:700; color:var(--hk-muted); margin-top:4px; }
.hk-stats__div{ width:1px; background:#dbe7da; }

/* ============================================================
   TOP : BUSINESS バナー
   ============================================================ */
.hk-biz__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:26px; }
.hk-biz__card{ position:relative; overflow:hidden; border-radius:24px; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; padding:34px; color:#fff; transition:transform .2s ease,box-shadow .2s ease; }
.hk-biz__card:hover{ transform:translateY(-4px); box-shadow:0 22px 50px rgba(16,97,138,.3); }
.hk-biz__card--sec{ background:linear-gradient(150deg,rgba(46,167,224,.78),rgba(14,106,163,.90)),url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28393/biz-security.jpg') center 22%/cover; box-shadow:0 16px 40px rgba(46,167,224,.26); }
.hk-biz__card--env{ background:linear-gradient(150deg,rgba(122,176,11,.74),rgba(70,120,12,.90)),url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28393/biz-env.jpg') center 28%/cover; box-shadow:0 16px 40px rgba(122,176,11,.26); }
.hk-biz__num{ position:absolute; right:-6px; top:-18px; font-family:"Roboto Condensed",sans-serif; font-weight:700; font-size:12rem; color:rgba(255,255,255,.14); line-height:1; }
.hk-biz__icon{ margin-bottom:14px; font-size:4.2rem; }
.hk-biz__en{ margin:0; font-family:"Roboto Condensed",sans-serif; font-weight:700; letter-spacing:.1em; font-size:1.4rem; opacity:.93; }
.hk-biz__ja{ margin:4px 0 10px; font-size:2.8rem; font-weight:900; }
.hk-biz__desc{ margin:0; font-size:1.5rem; line-height:1.9; opacity:.96; font-weight:500; max-width:380px; }
.hk-biz__arrow{ margin-top:18px; font-weight:700; font-size:1.4rem; display:inline-flex; align-items:center; gap:8px; }
.hk-biz__arrow i{ background:#fff; border-radius:999px; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; }
.hk-biz__card--sec .hk-biz__arrow i{ color:var(--hk-blue); }
.hk-biz__card--env .hk-biz__arrow i{ color:var(--hk-green-d); }

/* ============================================================
   TOP : LOGO STORY（濃紺）
   ============================================================ */
.hk-logo{ position:relative; overflow:hidden; background:linear-gradient(180deg,#0e6aa3,#10618a); color:#fff; padding:90px 24px; }
.hk-logo .hk-bgword{ left:-1%; bottom:-4%; font-size:clamp(6rem,12vw,17rem); color:rgba(255,255,255,.07); }
.hk-logo__inner{ position:relative; max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:50px; align-items:center; z-index:1; }
.hk-logo__mark{ background:#fff; border-radius:28px; padding:46px; display:flex; align-items:center; justify-content:center; box-shadow:0 20px 50px rgba(0,0,0,.2); }
.hk-logo__mark img{ width:100%; max-width:280px; height:auto; }
.hk-logo__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.hk-logo__list li{ display:flex; gap:13px; }
.hk-logo__dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:9px; }
.hk-logo__dot--red{ background:#E60012; } .hk-logo__dot--orange{ background:#F39800; } .hk-logo__dot--blue{ background:#2EA7E0; } .hk-logo__dot--lime{ background:#B4DA0E; }
.hk-logo__list span:last-child{ line-height:1.85; font-weight:500; }
.hk-logo .hk-head__ja{ color:#fff; }
.hk-islandblog__head .hk-head{ margin-bottom:0; }

/* ============================================================
   TOP : ISLAND BLOG カード
   ============================================================ */
.hk-islandblog{ background:#fbfdf8; }
.hk-islandblog__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:38px; }
.hk-blogcard__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
/* ブログCMS：アニメーションなし（hoverの拡大・スクロールreveal は付けない） */
.hk-blogcard{ background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 8px 24px rgba(40,70,30,.07); display:flex; flex-direction:column; }
.hk-blogcard__thumb{ aspect-ratio:16/10; background-size:cover; background-position:center; position:relative; display:flex; align-items:flex-end; padding:12px; }
.hk-blogcard__cat{ font-size:1.1rem; font-weight:700; color:#fff; background:rgba(0,0,0,.4); padding:3px 11px; border-radius:999px; }
.hk-blogcard__body{ padding:18px 20px 22px; }
.hk-blogcard__date{ font-family:"Roboto Condensed",sans-serif; font-weight:700; color:#9aa69b; font-size:1.3rem; }
.hk-blogcard__title{ margin:6px 0 0; font-size:1.7rem; font-weight:700; line-height:1.6; color:#2c3329; }

@media (max-width:639px){
  .hk-mv{ min-height:78vh; }
  .hk-mv__scroll{ bottom:80px; }
  .hk-biz__ja{ font-size:2.4rem; }
}

/* ============================================================
   下層ページ ヒーロー帯
   ============================================================ */
.hk-phero{ position:relative; overflow:hidden; color:#fff; padding:78px 24px 96px; }
.hk-phero--sm{ padding:66px 24px 84px; }
.hk-phero--blue{ background:linear-gradient(125deg,#2EA7E0,#0e6aa3); }
.hk-phero--green{ background:linear-gradient(125deg,#8ec63f,#5f9c10); }
.hk-phero--teal{ background:linear-gradient(125deg,#0e6aa3,#13a39a); }
.hk-phero--orange{ background:linear-gradient(125deg,#F39800,#f5b03a); }
.hk-phero__word{ position:absolute; right:-1%; top:-8%; font-family:"Roboto Condensed",sans-serif; font-weight:700; font-size:clamp(5.6rem,13vw,20rem); color:rgba(255,255,255,.12); line-height:.8; pointer-events:none; user-select:none; }
.hk-phero__inner{ position:relative; max-width:1100px; margin:0 auto; z-index:1; }
.hk-phero__en{ font-family:"Roboto Condensed",sans-serif; font-weight:700; letter-spacing:.18em; margin:0 0 8px; font-size:1.4rem; opacity:.93; }
.hk-phero__ja{ margin:0; font-size:clamp(2.8rem,4.4vw,5.2rem); font-weight:900; }
.hk-phero__ja--sm{ font-size:clamp(2.6rem,4vw,4.6rem); }
.hk-phero__lead{ margin:18px 0 0; font-size:clamp(1.6rem,1.7vw,2rem); font-weight:500; max-width:660px; line-height:1.95; }
.hk-phero__wave{ position:absolute; bottom:-1px; left:0; width:100%; height:54px; }
.hk-phero--sm .hk-phero__wave{ height:48px; }
.hk-phero__wave svg{ width:100%; height:100%; display:block; }
.hk-breadcrumb{ font-size:1.2rem; color:#9aa69b; margin:0 0 22px; font-weight:700; }
.hk-breadcrumb a{ color:var(--hk-blue); }
.hk-breadcrumb--green a{ color:var(--hk-green-d); }

.hk-bordertop{ border-top:1px solid #eef3ee; }
.hk-w860{ max-width:860px; margin:0 auto; }
.hk-w880{ max-width:880px; margin:0 auto; }
.hk-w1000{ max-width:1000px; margin:0 auto; }
.hk-w1200{ max-width:1200px; margin:0 auto; }

/* 下層セクション見出し（小） */
.hk-secblock{ padding:72px 24px; background:#fff; }
.hk-secblock--tight{ padding:0 24px 56px; background:#fff; }
.hk-secblock__inner{ max-width:1000px; margin:0 auto; }

/* ============================================================
   事業ページ：サービスカード / ギャラリー / 料金ボックス
   ============================================================ */
.hk-svc__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.hk-svc{ border:1px solid #e2eef6; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 8px 22px rgba(46,167,224,.07); }
.hk-svc--green{ border-color:#e7f0d6; box-shadow:0 8px 22px rgba(122,176,11,.08); }
.hk-svc__img{ aspect-ratio:16/9; overflow:hidden; }
.hk-svc__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hk-svc__img--contain{ background:#f3faf4; display:flex; align-items:center; justify-content:center; padding:12px; }
.hk-svc__img--contain img{ height:100%; width:auto; max-width:100%; object-fit:contain; }
.hk-svc__body{ padding:24px 26px 28px; }
.hk-svc__title{ margin:0 0 10px; font-size:2rem; font-weight:900; color:#0e6aa3; }
.hk-svc--green .hk-svc__title{ color:var(--hk-green-d); }
.hk-svc__text{ margin:0; line-height:1.95; color:var(--hk-body); font-weight:500; }
.hk-svc__note{ display:block; margin-top:8px; font-size:1.3rem; color:var(--hk-muted); }
.hk-gal{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.hk-gal a{ display:block; }
.hk-gal img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; display:block; transition:transform .25s ease,box-shadow .25s ease; }
.hk-gal a:hover img{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.14); }
.hk-pricebox{ max-width:1000px; margin:0 auto; background:#f3faf4; border-radius:24px; padding:40px 38px; display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; }
.hk-pricebox__icon{ flex:0 0 auto; width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.4rem; }
.hk-pricebox__icon--blue{ background:#2EA7E0; } .hk-pricebox__icon--green{ background:#6fae15; }
.hk-pricebox__body{ flex:1 1 340px; }
.hk-pricebox__title{ margin:0 0 8px; font-size:2rem; font-weight:900; color:#1c4a3a; }
.hk-pricebox__text{ margin:0; line-height:1.95; color:var(--hk-body); font-weight:500; }
.hk-env-lead{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:36px; align-items:center; }
.hk-env-lead__text{ font-size:1.7rem; line-height:2.15; color:var(--hk-body); font-weight:500; margin:0; }
.hk-env-lead__img{ background:#f3faf4; border-radius:20px; padding:18px; display:flex; align-items:center; justify-content:center; }
.hk-env-lead__img img{ width:100%; height:auto; }

/* ============================================================
   Q&A アコーディオン
   ============================================================ */
.hk-faq{ max-width:840px; margin:0 auto; }
.hk-faq__list{ display:flex; flex-direction:column; gap:12px; }
.hk-faq__item{ border:1px solid #e2eef6; border-radius:14px; overflow:hidden; background:#fff; }
.hk-faq--green .hk-faq__item{ border-color:#e7f0d6; }
.hk-faq__q{ display:flex; gap:12px; align-items:center; padding:16px 20px; font-weight:700; cursor:pointer; transition:background .12s ease; }
.hk-faq__q:hover{ background:#f6fbfe; }
.hk-faq--green .hk-faq__q:hover{ background:#f6fbf0; }
.hk-faq__qmark{ flex:0 0 auto; font-family:"Roboto Condensed",sans-serif; font-weight:700; color:var(--hk-blue); font-size:1.8rem; }
.hk-faq--green .hk-faq__qmark{ color:var(--hk-green-d); }
.hk-faq__qtext{ flex:1; color:#2c3329; }
.hk-faq__sign{ flex:0 0 auto; color:var(--hk-blue); font-size:2rem; display:inline-block; transition:transform .2s ease; }
.hk-faq--green .hk-faq__sign{ color:var(--hk-green-d); }
.hk-faq__a{ display:none; padding:0 20px 18px 46px; color:var(--hk-body); line-height:1.9; font-weight:500; }
.hk-faq__item.is-open .hk-faq__a{ display:block; }
.hk-faq__item.is-open .hk-faq__sign{ transform:rotate(45deg); }
.hk-faq__caption{ margin:8px 0 0; font-size:1.3rem; color:#9aa69b; }

/* ============================================================
   会社概要ページ
   ============================================================ */
.hk-gukuru{ background:#fbfdf8; position:relative; overflow:hidden; }
.hk-gukuru::before{ content:""; position:absolute; left:-40px; bottom:-40px; width:340px; height:340px; background:url('https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28393/logo_mark.png') left bottom/contain no-repeat; opacity:.1; pointer-events:none; z-index:0; }
.hk-gukuru__inner{ position:relative; z-index:1; max-width:820px; margin:0 auto; text-align:center; }
.hk-gukuru__title{ font-family:"Noto Serif JP",serif; font-weight:700; font-size:clamp(2.6rem,3.6vw,4rem); margin:0 0 30px; color:#0e5a52; line-height:1.5; }
.hk-gukuru__title small{ font-size:.6em; color:var(--hk-body); }
.hk-gukuru__text{ font-family:"Noto Serif JP",serif; font-size:1.7rem; line-height:2.4; color:#3c463f; margin:0; text-align:left; }
.hk-message{ font-size:1.65rem; line-height:2.2; color:#3c463f; font-weight:500; display:flex; flex-direction:column; gap:20px; }
.hk-message p{ margin:0; }
.hk-message__sign{ margin-top:30px; text-align:right; }
.hk-message__sign-co{ margin:0; font-size:1.4rem; color:#7c8a82; font-weight:700; }
.hk-message__sign-name{ margin:2px 0 0; font-size:1.9rem; font-weight:900; color:var(--hk-ink); }
.hk-affil{ margin-top:34px; padding-top:26px; border-top:1px dashed #dbe7da; }
.hk-affil__label{ margin:0 0 12px; font-size:1.3rem; font-weight:700; color:#1c4a3a; }
.hk-affil__tags{ display:flex; flex-wrap:wrap; gap:10px; }
.hk-affil__tags span{ font-size:1.3rem; font-weight:700; color:var(--hk-body); background:#f3faf4; border:1px solid #e2eef0; border-radius:999px; padding:7px 16px; }
.hk-community__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:640px){ .hk-community__grid{ grid-template-columns:repeat(2,1fr); } }
.hk-community__grid figure{ margin:0; }
.hk-community__grid figure a{ display:block; }
.hk-community__grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; display:block; transition:transform .25s ease,box-shadow .25s ease; }
.hk-community__grid figure a:hover img{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.14); }
.hk-community__grid figcaption{ margin-top:8px; font-size:1.3rem; font-weight:700; color:#5c6660; }
.hk-ctable{ border:1px solid #e6efe9; border-radius:18px; overflow:hidden; }
.hk-ctable__row{ display:flex; flex-wrap:wrap; border-bottom:1px solid #eef3ee; }
.hk-ctable__row:last-child{ border-bottom:none; }
.hk-ctable__k{ flex:0 0 200px; background:#f3faf4; padding:18px 24px; font-weight:700; color:#1c4a3a; font-size:1.4rem; }
.hk-ctable__v{ flex:1 1 320px; padding:18px 24px; color:var(--hk-body); font-weight:500; line-height:1.85; }
.hk-cert__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.hk-cert{ background:#fff; border:1px solid #e6efe9; border-radius:16px; padding:22px; text-align:center; }
.hk-cert__ph{ aspect-ratio:4/3; border:1.5px dashed #cfe0d6; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#a9b6ac; font-size:1.3rem; font-weight:700; margin-bottom:14px; }
.hk-cert__img{ max-width:600px; margin:0 auto 14px; border-radius:10px; overflow:hidden; }
.hk-cert__img img{ width:100%; height:auto; display:block; }
.hk-cert__name{ margin:0; font-weight:700; font-size:1.4rem; color:#2c3329; line-height:1.6; }

/* ============================================================
   採用・お問い合わせページ
   ============================================================ */
.hk-recruit-deco{ position:relative; max-width:1800px; margin:0 auto; }
.hk-recruit-deco__img{ position:absolute; border-radius:50%; object-fit:cover; box-shadow:0 12px 30px rgba(0,0,0,.12); z-index:1; animation:hk-deco-float 6s ease-in-out infinite; }
.hk-recruit-deco__img--tl{ width:200px; height:200px; left:0; top:-60px; animation-duration:6s; }
.hk-recruit-deco__img--bl{ width:300px; height:300px; left:80px; top:210px; animation-duration:7.4s; animation-delay:.5s; }
.hk-recruit-deco__img--tr{ width:300px; height:300px; right:0; top:-90px; animation-duration:6.6s; animation-delay:.25s; }
.hk-recruit-deco__img--br{ width:200px; height:200px; right:180px; top:265px; animation-duration:7.8s; animation-delay:.7s; }
@keyframes hk-deco-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
/* 画像がMESSAGEボックスに重ならない最小幅まではボックスを少し狭めて余白を確保 */
@media (max-width:1280px){
    .hk-recruit-deco{ padding:0 250px; }
    .hk-recruit-deco__img--tl,.hk-recruit-deco__img--bl{ left:24px; }
    .hk-recruit-deco__img--tr,.hk-recruit-deco__img--br{ right:24px; }
}
@media (max-width:1100px){
    .hk-recruit-deco{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px; padding:0; }
    .hk-recruit-deco__img{ position:static; width:120px; height:120px; }
    .hk-recruit-deco__img--tl{ order:1; }
    .hk-recruit-deco__img--tr{ order:2; }
    .hk-recruit-msg{ order:3; flex:1 1 100%; }
    .hk-recruit-deco__img--bl{ order:4; }
    .hk-recruit-deco__img--br{ order:5; }
}
.hk-recruit-msg{ position:relative; z-index:2; max-width:820px; margin:0 auto; background:#fff7ec; border-radius:24px; padding:40px 38px; border:1px solid #fbe3c2; }
.hk-recruit-msg__title{ font-size:clamp(2.2rem,2.8vw,3rem); font-weight:900; margin:0 0 18px; color:#8a5200; line-height:1.5; }
.hk-recruit-msg__text{ margin:0; line-height:2.1; color:#5c4a30; font-weight:500; }
.hk-jobs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.hk-job{ background:#fff; border:1px solid #e6eff5; border-radius:18px; padding:30px 30px 32px; box-shadow:0 10px 28px rgba(40,70,100,.06); }
.hk-job--blue{ border-top:5px solid #2EA7E0; }
.hk-job--green{ border-top:5px solid #6fae15; }
.hk-job__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.hk-job__no{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; color:#fff; font-weight:900; font-size:1.8rem; display:flex; align-items:center; justify-content:center; }
.hk-job--blue .hk-job__no{ background:#2EA7E0; } .hk-job--green .hk-job__no{ background:#6fae15; }
.hk-job__title{ margin:0; font-size:2.1rem; font-weight:900; }
.hk-job--blue .hk-job__title{ color:#0e5a86; } .hk-job--green .hk-job__title{ color:#3a5a14; }
.hk-job__tag{ font-size:1.2rem; font-weight:700; color:#0e6aa3; background:#e8f4fb; border-radius:999px; padding:4px 13px; }
.hk-job__dl{ margin:0; display:flex; flex-direction:column; gap:14px; }
.hk-job__dl > div{ display:flex; gap:14px; }
.hk-job__dl dt{ flex:0 0 78px; font-weight:700; font-size:1.3rem; padding-top:2px; }
.hk-job--blue .hk-job__dl dt{ color:#2EA7E0; } .hk-job--green .hk-job__dl dt{ color:var(--hk-green-d); }
.hk-job__dl dd{ margin:0; font-size:1.5rem; font-weight:600; color:#3c463f; line-height:1.8; }
.hk-job__dl dd small{ font-size:1.3rem; color:#7c8a82; }
.hk-perks{ max-width:980px; margin:0 auto; background:#fbfdf8; border:1px solid #eaf2e2; border-radius:20px; padding:34px 36px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; align-items:center; }
.hk-perks__list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; }
.hk-perks__list span{ display:flex; align-items:center; gap:8px; font-size:1.45rem; font-weight:700; color:#2c3329; }
.hk-perks__list i{ color:var(--hk-orange); }
.hk-perks__pop{ border:2px solid #F39800; border-radius:16px; padding:22px 20px; text-align:center; background:#fff; }
.hk-perks__pop p{ margin:0; font-size:clamp(1.8rem,2vw,2.2rem); font-weight:900; color:var(--hk-orange-d); line-height:1.6; }

/* フォーム */
.hk-form{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:20px; }
.hk-form label{ display:flex; flex-direction:column; gap:7px; font-weight:700; font-size:1.4rem; color:#2c3329; }
.hk-form__req{ color:#E60012; font-size:1.1rem; }
.hk-form__opt{ color:#9aa69b; font-size:1.1rem; }
.hk-form input,.hk-form select,.hk-form textarea{ padding:13px 14px; border:1.5px solid #dbe4dd; border-radius:12px; font-size:1.5rem; background:#fbfdf8; color:#2c3329; width:100%; }
.hk-form input:focus,.hk-form select:focus,.hk-form textarea:focus{ border-color:var(--hk-orange); outline:none; }
.hk-form textarea{ resize:vertical; line-height:1.8; }
.hk-form__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.hk-form__submit{ align-self:center; margin-top:8px; font-size:1.6rem; padding:16px 48px; }

/* お問い合わせフォーム（CMS）ボックス */
.hk-formbox{ max-width:1000px; margin:0 auto; background:#fff; border:1px solid #e6efe9; border-radius:20px; padding:40px 44px; box-shadow:0 10px 30px rgba(16,97,138,.07); }
.hk-formbox input[type="text"],.hk-formbox input[type="email"],.hk-formbox input[type="tel"],.hk-formbox input[type="number"],.hk-formbox input[type="password"],.hk-formbox select,.hk-formbox textarea{ width:100%; padding:12px 14px; border:1.5px solid #dbe4dd; border-radius:12px; font-size:1.5rem; background:#fbfdf8; color:#2c3329; }
.hk-formbox input:focus,.hk-formbox select:focus,.hk-formbox textarea:focus{ border-color:var(--hk-orange); outline:none; }
.hk-formbox textarea{ resize:vertical; line-height:1.8; }
.hk-formbox input[type="submit"],.hk-formbox button[type="submit"],.hk-formbox .btn-submit{ background:var(--hk-orange); color:#fff; font-weight:700; font-size:1.6rem; padding:15px 44px; border:none; border-radius:999px; cursor:pointer; box-shadow:0 10px 24px rgba(243,152,0,.32); transition:background .15s ease; }
.hk-formbox input[type="submit"]:hover,.hk-formbox button[type="submit"]:hover,.hk-formbox .btn-submit:hover{ background:var(--hk-orange-d); }
@media (max-width:639px){ .hk-formbox{ padding:24px 20px; } }

/* CMSフォーム：必須バッジの色をサイトカラー（赤）に上書き */
.form-pattern-2 dl dt:not(.pattern-exclusion) span.required::before{
  content:'必須';
  color:#fff !important;
  background:#E60012 !important;
}
/* CMSフォーム：送信ボタンをサイトのオレンジ系ピルに上書き＋中央配置 */
.hk-formbox .submit-btn,
.form-pattern-2 .submit-btn,
button.submit-btn{
  display:flex !important;
  width:-moz-fit-content;
  width:fit-content;
  margin-left:auto !important;
  margin-right:auto !important;   /* 中央配置 */
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#F39800 !important;
  color:#fff !important;
  font-weight:700 !important;
  font-size:1.6rem !important;
  padding:15px 48px !important;
  border:none !important;
  border-radius:999px !important;
  box-shadow:0 10px 24px rgba(243,152,0,.32) !important;
  cursor:pointer !important;
  white-space:nowrap !important;   /* スマホでも1行で表示 */
  transition:background .15s ease, transform .2s ease !important;
}
@media (max-width:639px){
  .hk-formbox .submit-btn,
  .form-pattern-2 .submit-btn,
  button.submit-btn{ padding:14px 28px !important; font-size:1.5rem !important; max-width:100%; }
}
.hk-formbox .submit-btn:hover,
.form-pattern-2 .submit-btn:hover,
button.submit-btn:hover{
  background:#e07f00 !important;
  transform:translateY(-2px);
}
/* 送信ボタン内のメールアイコンを常に白に固定（ホバー時に背景と同化して消えるのを防ぐ） */
.hk-formbox .submit-btn i, .hk-formbox .submit-btn svg, .hk-formbox .submit-btn::before,
.form-pattern-2 .submit-btn i, .form-pattern-2 .submit-btn svg, .form-pattern-2 .submit-btn::before,
button.submit-btn i, button.submit-btn svg, button.submit-btn::before{
  color:#fff !important;
  fill:#fff !important;
}
.hk-formbox .submit-btn:hover i, .hk-formbox .submit-btn:hover svg, .hk-formbox .submit-btn:hover::before,
.form-pattern-2 .submit-btn:hover i, .form-pattern-2 .submit-btn:hover svg, .form-pattern-2 .submit-btn:hover::before,
button.submit-btn:hover i, button.submit-btn:hover svg, button.submit-btn:hover::before{
  color:#fff !important;
  fill:#fff !important;
}
/* アイコン(::before)が背景色方式の場合：ホバー時の背景色も白に固定 */
.hk-formbox .submit-btn:hover::before,
.form-pattern-2 .submit-btn:hover::before,
button.submit-btn:hover::before{
  background-color:#fff !important;
}

/* ============================================================
   THANKS（送信完了）ページ
   ============================================================ */
.hk-thanks{ max-width:640px; margin:0 auto; text-align:center; }
.hk-thanks__icon{ font-size:6.4rem; color:var(--hk-orange); line-height:1; margin-bottom:18px; }
.hk-thanks__title{ font-size:clamp(2.2rem,3vw,3rem); font-weight:900; color:var(--hk-ink); margin:0 0 20px; }
.hk-thanks__text{ font-size:1.6rem; line-height:2; color:var(--hk-body); font-weight:500; margin:0 0 18px; }
.hk-thanks__note{ font-size:1.3rem; color:var(--hk-muted); line-height:1.9; margin:0 0 32px; }
.hk-thanks__note a{ color:var(--hk-orange-d); font-weight:700; }

/* ============================================================
   ブログ一覧 / 記事詳細
   ============================================================ */
.hk-blogwrap{ background:#fff; padding:60px 24px 90px; }
.hk-blogwrap__grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:46px; align-items:start; }
.hk-side{ display:flex; flex-direction:column; gap:28px; }
.hk-side__box{ background:#f3faf4; border-radius:16px; padding:22px; }
.hk-side__box--green{ background:#fbfdf8; border:1px solid #eef3ee; }
.hk-side__title{ margin:0 0 14px; font-size:1.5rem; font-weight:900; color:#1c4a3a; border-left:4px solid #2EA7E0; padding-left:10px; }
.hk-side__box--green .hk-side__title{ color:#3a5a14; border-left-color:#6fae15; }
.hk-side__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.hk-side__list li{ font-size:1.4rem; font-weight:500; color:var(--hk-body); }
.hk-side__list--between li{ display:flex; justify-content:space-between; }
.hk-side__list--between span{ color:#9aa69b; }
.hk-side__recent{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.hk-side__recent li{ font-size:1.35rem; line-height:1.6; font-weight:500; color:var(--hk-body); }
.hk-side__recent .d{ font-family:"Roboto Condensed",sans-serif; font-weight:700; color:#9aa69b; display:block; font-size:1.2rem; }
/* ニュース一覧（サムネなし） */
.hk-newslist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.hk-newslist__row{ display:flex; gap:16px; align-items:center; padding:18px 8px; border-bottom:1px solid #eef3ee; flex-wrap:wrap; transition:background .12s ease; }
.hk-newslist__row:hover{ background:#f6fbfe; }
.hk-newslist__date{ font-family:"Roboto Condensed",sans-serif; font-weight:700; color:#7c8a82; font-size:1.4rem; min-width:96px; }
.hk-newslist__cat{ font-size:1.1rem; font-weight:700; color:#fff; padding:3px 12px; border-radius:999px; }
.hk-newslist__title{ font-size:1.55rem; font-weight:500; flex:1 1 240px; color:#2c3329; }
/* ページネーション */
.hk-pager{ display:flex; justify-content:center; gap:8px; margin-top:36px; }
.hk-pager a,.hk-pager span{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:"Roboto Condensed",sans-serif; font-weight:700; }
.hk-pager a{ border:1px solid #dbe4dd; color:#5c6660; transition:background .15s,color .15s; }
.hk-pager a:hover{ background:#f0f8fc; }
.hk-pager .is-current{ background:#2EA7E0; color:#fff; }
.hk-pager--green .is-current{ background:#6fae15; }
.hk-pager--green a:hover{ background:#f1f8e6; }
/* 記事詳細 */
.hk-entry{ background:#fff; padding:40px 24px 90px; }
.hk-entry__inner{ max-width:840px; margin:0 auto; }
.hk-entry__meta{ display:flex; gap:12px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.hk-entry__cat{ font-size:1.1rem; font-weight:700; color:#fff; padding:4px 13px; border-radius:999px; }
.hk-entry__date{ font-family:"Roboto Condensed",sans-serif; font-weight:700; color:#7c8a82; font-size:1.4rem; }
.hk-entry__title{ margin:0 0 28px; font-size:clamp(2.4rem,3.4vw,3.6rem); font-weight:900; line-height:1.5; color:var(--hk-ink); }
.hk-entry__hero{ aspect-ratio:16/8; border-radius:18px; overflow:hidden; margin-bottom:32px; }
.hk-entry__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.hk-entry__hero--ph{ background:linear-gradient(135deg,#2EA7E0,#0e6aa3); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.85); font-weight:700; font-size:1.3rem; }
.hk-entry__body{ line-height:2.2; color:#3c463f; font-weight:500; font-size:1.6rem; }
.hk-entry__body p{ margin:0 0 22px; }
.hk-entry__back{ margin-top:44px; text-align:center; }

@media (max-width:860px){
  .hk-blogwrap__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1100px){
  .hk-header .header__inner{ justify-content:flex-start; }
}
@media (max-width:639px){
  .hk-sec{ padding:54px 18px; }
  .hk-topbar__inner{ justify-content:center; padding:7px 14px; }
  .hk-cta__word{ font-size:11rem; }
  .hk-mv__scroll{ display:none; }   /* ④ MVのSCROLL非表示 */
  .hk-topbar{ display:none; }        /* ⑤ 上部インフォバー非表示 */
  .hk-footer__nav{ display:none; }   /* ⑥ フッターナビ非表示 */
}

/* ============================================================
   更新依頼680176 追加分
   ============================================================ */

/* 会社概要：八重山拳法の枠囲み紹介ボックス */
.hk-yaeyama{ margin-top:34px; text-align:left; background:#fff; border:1px solid #d6ece9; border-left:5px solid #13a39a; border-radius:16px; padding:28px 30px; box-shadow:0 8px 22px rgba(19,163,154,.08); }
.hk-yaeyama__title{ margin:0 0 8px; font-size:1.8rem; font-weight:900; color:#0e5a52; }
.hk-yaeyama__title:not(:first-child){ margin-top:24px; }
.hk-yaeyama__text{ margin:0; line-height:2; color:#3c463f; font-weight:500; font-size:1.5rem; }
.hk-yaeyama__gal{ position:relative; z-index:1; max-width:960px; margin:40px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.hk-yaeyama__gal a{ display:block; }
.hk-yaeyama__gal img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; display:block; transition:transform .25s ease,box-shadow .25s ease; }
.hk-yaeyama__gal a:hover img{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.14); }
@media (max-width:640px){ .hk-yaeyama__gal{ grid-template-columns:repeat(2,1fr); gap:12px; } }

/* TOP最上部バー：TEL・Instagramを明るく目立たせる（要目視確認） */
.hk-topbar__tel a{ color:#ffdb4d; }
.hk-topbar__tel-label{ opacity:.95; color:#ffdb4d; }
.hk-topbar__ig{ border-color:rgba(255,219,77,.85); color:#ffdb4d; }
.hk-topbar__ig:hover{ background:rgba(255,219,77,.14); }

/* ヘッダー固定ロゴを拡大（要目視確認） */
.hk-header__logo img{ height:62px; }

/* TOP NEWS：お知らせタイトルテキストを黒に（CMS出力・要実機確認） */
.hk-news__list #cms-blog-entry-list-1-area a,
.hk-news__list #cms-blog-entry-list-1-area .hk-news__title{ color:#2c2f2b !important; }

/* フッター：Instagramは黄色、SITE MAP下のナビは白に */
.hk-footer{ color:#e8f3fb; }
.hk-footer__addr{ opacity:.95; }
.hk-footer__nav a{ color:#fff; opacity:1; }
.hk-footer__ig{ border-color:#ffdb4d; color:#ffdb4d; }
.hk-footer__bottom-inner{ opacity:.92; }

/* 会社概要ページ：セクション背景を #FBFDF8 → #FFFFFF の交互に */
.hk-gukuru--white{ background:#fff; }
.hk-secblock--mint{ background:#fbfdf8; }

/* 代表挨拶：左に社長画像・右に挨拶文の2カラム */
.hk-message-layout{ display:flex; gap:38px; align-items:flex-start; }
.hk-message-photo{ margin:0; flex:0 0 320px; }
.hk-message-photo img{ width:100%; height:auto; border-radius:16px; display:block; box-shadow:0 12px 30px rgba(16,97,138,.14); }
.hk-message-photo__sign{ text-align:center; margin-top:14px; }
.hk-message-body{ flex:1 1 auto; min-width:0; }
@media (max-width:768px){
  .hk-message-layout{ flex-direction:column; align-items:center; gap:24px; }
  .hk-message-photo{ flex:0 0 auto; width:100%; max-width:280px; }
}

/* ============================================================
   ヘッダーナビ：下層ページのプルダウン
   ============================================================ */
/* PC：ホバーで展開 */
.header__nav-item--has-sub{ position:relative; }
.hk-header .header__dropdown{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); min-width:200px; background:#fff; border:1px solid #e6efe9; border-radius:12px; box-shadow:0 14px 34px rgba(16,97,138,.16); padding:8px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transition:opacity .18s ease,transform .18s ease; z-index:60; }
.hk-header .header__dropdown::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } /* ホバーが途切れないブリッジ */
.header__nav-item--has-sub:hover .header__dropdown,
.header__nav-item--has-sub:focus-within .header__dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(2px); }
.header__dropdown-link{ display:block; padding:9px 14px; border-radius:8px; font-size:1.35rem; font-weight:700; color:#2c2f2b; white-space:nowrap; text-align:left; }
.header__dropdown-link:hover{ background:#f0f8fc; color:#0e6aa3; }

/* スマホ：sp-nav サブメニュー（初期は閉じるアコーディオン） */
.sp-nav__link::after{ display:none; }                 /* 既定の「＞」マークを削除 */
.sp-nav__head{ display:flex; align-items:center; }
.sp-nav__head .sp-nav__link{ flex:1 1 auto; }
.sp-nav__toggle{ flex:0 0 auto; width:54px; align-self:stretch; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sp-nav__toggle i{ transition:transform .25s ease; opacity:.85; }
.sp-nav__item--open .sp-nav__toggle i{ transform:rotate(180deg); }
.sp-nav__sub{ list-style:none; margin:0; padding:0; overflow:hidden; max-height:0; transition:max-height .3s ease; }
.sp-nav__item--open .sp-nav__sub{ max-height:640px; margin-bottom:12px; }
.sp-nav__sublink{ display:block; padding:9px 10px; font-size:1.4rem; font-weight:600; color:#fff; opacity:.85; }
.sp-nav__sublink:hover{ opacity:1; background:rgba(255,255,255,.08); }

/* アンカージャンプ時に固定ヘッダー分のオフセットを確保 */
main [id]{ scroll-margin-top:96px; }