/* ===================================================
   MHシステム株式会社 コーポレートサイト
   style.css - トップページ用スタイル（全ページ共通のHeader/Footer等を含む）
   =================================================== */

/* ---------------------------------------------------
   Reset & Variables
--------------------------------------------------- */
/* レスポンシブ対応の改行ユーティリティ。
   通常の<br>は画面幅に関わらず必ずその位置で改行されるため、
   狭い画面では不自然に短い1行目ができたり、自然な折り返しと
   二重に改行されて読みにくくなることがある。
   <br class="mh-lbreak">として使うと、PC幅(961px以上)でのみ
   改行が効き、タブレット・スマホ幅(960px以下)では通常のテキストとして
   無視され、コンテナ幅に応じて自然に折り返すようになる。 */
.mh-lbreak{display:none;}
@media (min-width:961px){
  .mh-lbreak{display:inline;}
}

:root{
  --mh-blue:#1e6bff;
  --mh-navy:#4a5578;
  --mh-teal:#5fae9d;
  --mh-text:#1a1a1a;
  --mh-sub:#666666;
  --mh-line:#e6e6e6;
  --mh-ph-bg1:#ece7de; /* 都市イメージ プレースホルダー背景（画像読み込み前のフォールバック） */
  --mh-ph-bg2:#eae6de; /* PCイメージ プレースホルダー背景（画像読み込み前のフォールバック） */
  --mh-ph-bg:#ece7de;  /* WORKSカード画像 プレースホルダー背景（画像読み込み前のフォールバック） */

  /* --- Hero: 画面いっぱいに収める用の変数 ---
     --mh-vh   : 100dvh未対応の古いブラウザ向けフォールバック。site.jsが
                 window.innerHeight を元に実測値へ上書きする。初期値は 1vh。
     --mh-header-h : ヘッダーの実際の高さ。site.jsがResizeObserverで実測して
                 常に最新値へ上書きする。初期値は概算の92pxを保険として設定。 */
  --mh-vh:1vh;
  --mh-header-h:92px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--mh-text);
  background:#fff;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}

/* ---------------------------------------------------
   Header
--------------------------------------------------- */
.mh-header{
  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
  transition:background-color .25s ease;
}
/* スクロールして追従状態になったら、うっすら透過させる */
.mh-header.is-scrolled{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.mh-header__inner{
  max-width:1400px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* --- Logo (画像に差し替え可能な構造) --- */
.mh-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  font-size:17px;
  white-space:nowrap;
  color:#333;
}
/* 本番ではこの img の src を実ロゴ画像に差し替えるだけでOK */
.mh-logo__img{
  height:36px;
  width:auto;
  display:block;
}

/* --- Nav --- */
.mh-nav{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.6vw,44px); /* 画面幅に応じて間隔も縮小 */
}
.mh-nav a{
  font-size:clamp(13px,1.35vw,17px); /* 画面幅に応じて文字サイズも縮小、改行を防ぐ */
  font-weight:500;
  color:#222;
  position:relative;
  padding-bottom:10px;
  white-space:nowrap;
  transition:color .2s;
}
.mh-nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:var(--mh-blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s;
}
.mh-nav a:hover{color:var(--mh-blue);}
.mh-nav a:hover::after{transform:scaleX(1);}
.mh-nav a.is-current{color:var(--mh-blue);font-weight:700;}
.mh-nav a.is-current::after{transform:scaleX(1);}

/* --- Header CTA --- */
.mh-header__cta{
  background:var(--mh-blue);
  color:#fff !important;
  font-size:15px;
  font-weight:700;
  padding:14px 26px;
  border-radius:999px;
  white-space:nowrap;
  transition:opacity .2s;
  display:inline-block;
}
.mh-header__cta:hover{opacity:.85;}

/* --- Hamburger (mobile) --- */
.mh-nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.mh-nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:#222;
  margin:5px 0;
  transition:.25s;
}
.mh-nav.is-open{
  display:flex;
  flex-direction:column;
  position:absolute;
  top:100%;left:0;right:0;
  background:#fff;
  padding:16px 24px 24px;
  gap:16px;
  box-shadow:0 8px 16px rgba(0,0,0,.06);
}
@media (max-width:900px){
  .mh-nav, .mh-header__cta{display:none;}
  .mh-nav-toggle{display:block;}
  .mh-logo__img {height:24px;}
}

/* ---------------------------------------------------
   Hero
--------------------------------------------------- */
.mh-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end; /* テキストは画面下寄りに配置（元デザインの余白バランスを踏襲） */
  padding:0 40px clamp(28px,6vh,120px);

  /* 1行目: dvh非対応の古いブラウザ向けフォールバック（site.jsが--mh-vhを実測値で更新）
     2行目: 対応ブラウザではこちらが効く。モバイルのアドレスバー分の変動にも自動追従する。
     どちらもヘッダーの実測高さ(--mh-header-h)を差し引くことで、
     「ヘッダー＋ヒーロー＝画面ちょうど1枚分」になるようにしている。 */
  height:calc(var(--mh-vh) * 100 - var(--mh-header-h));
  height:calc(100dvh - var(--mh-header-h));

  min-height:420px; /* 極端に低い高さ（折りたたみ端末の変形時など）での最終防波堤 */
}
.mh-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.9) 0%, rgba(255,255,255,.5) 35%, rgba(255,255,255,0) 65%),
    url(img/hero-img.png) center center / cover no-repeat;
  z-index:0;
}
.mh-hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1400px;
  margin:0 auto;
}
.mh-hero__lead{
  /* min()で「横幅基準」と「縦幅基準」の小さい方を採用。
     横長で縦の低い画面（スマホ横向きなど）でも縦にはみ出さない。 */
  font-size:clamp(14px, min(2vw, 2.4vh), 28px);
  font-weight:500;
  line-height:1.6;
  margin:0 0 clamp(12px,2.4vh,28px);
  color:#000;
}
.mh-hero__title{
  font-family:"Inter",sans-serif;
  font-weight:900;
  font-size:clamp(32px, min(9.5vw, 11vh), 140px);
  line-height:1.02;
  margin:0;
  color:var(--mh-blue);
  letter-spacing:-1px;
}
.mh-hero__title span{display:block;}

/* ---------------------------------------------------
   About us（旧: Making History）
   レイヤー構造: テキスト・ボタン(z-index:2) > img(z-index:1) > 背景(z-index:0)

   設計方針:
   ・左のPC画像／右の都市画像は「独立した装飾要素」としてposition:absoluteで配置する。
     グリッドの列として幅を確保しないため、テキスト列の位置や幅に一切影響を与えない。
   ・テキスト列(.mh-concept__content)は margin-left / max-width で独自に位置と幅を持つ。
     画像の有無に関わらず常に同じ幅を保つ（floatによる回り込みは使わない）。
--------------------------------------------------- */
.mh-concept{
  position:relative;
  z-index:0; /* 背景レイヤー */
  background:#fbfaf9;
  padding:90px 40px 100px;
}
.mh-concept__inner{
  position:relative;
  max-width:82%;
  margin:0 auto;
  min-height:720px; /* 画像を絶対配置するための基準の高さ */
}

/* --- 左下：PC作業イメージ（テキスト列とは無関係に絶対配置） --- */
.mh-concept__laptop-wrap{
  position:absolute;
  left:0;
  bottom:0;
  width:39%;
  z-index:1;
}
.mh-concept__laptop{
  width:100%;
  aspect-ratio:820/500;
  object-fit:cover;
  background:var(--mh-ph-bg2); /* 画像読み込み前のフォールバック */
  border-radius:4px;
  opacity:.4;
}

/* --- 右上：都市イメージ（テキスト列とは無関係に絶対配置） --- */
.mh-concept__city{
  position:absolute;
  top:0;
  right:0;
  width:33%;
  max-width:420px;
  aspect-ratio:640/540;
  object-fit:cover;
  background:var(--mh-ph-bg1); /* 画像読み込み前のフォールバック */
  border-radius:4px;
  z-index:1;
  opacity:.4;
}

/* --- テキスト列：画像から独立した位置・幅を持つ --- */
.mh-concept__content{
  position:relative;
  z-index:2; /* テキストは画像より前面 */
  margin-left:31%;  /* 画像の幅に関係なく常に一定 */
  max-width:33%;     /* 画像の有無で変化しない、常に一定の幅 */
  min-width:320px;
}
.mh-concept__title{
  font-family:"Inter",sans-serif;
  font-weight:900;
  font-size:clamp(36px,4.2vw,64px);
  line-height:1.05;
  color:var(--mh-text);
  margin:0 0 40px;
  letter-spacing:-1px;
  text-align:center; /* 見出しはテキスト列の幅の中で中央寄せ */
}
.mh-concept__title span{display:block;}
.mh-concept__text p{
  font-size:17px;
  line-height:2;
  color:var(--mh-sub);
  margin:0 0 32px;
  font-weight:500;
}
.mh-concept__text p:last-of-type{margin-bottom:44px;}

@media (max-width:900px){
  .mh-concept{padding:70px 24px 90px;}
  .mh-concept__inner{min-height:0;}
  .mh-concept__city{
    position:static;
    width:100%;
    max-width:none;
    margin:0 0 32px;
  }
  .mh-concept__content{
    margin-left:0;
    max-width:none;
    min-width:0; /* デスクトップ用のmin-width:320pxがそのまま残ると、
                    幅の狭いスマホ（iPhone SEなど）でコンテナからはみ出し、
                    右にズレて見える原因になるためリセットする */
  }
  .mh-concept__title{font-size:40px;margin-bottom:28px;}
  .mh-concept__laptop-wrap{
    position:relative;
    width:100%;
    margin-top:40px;
  }
}

/* ---------------------------------------------------
   WORKS
--------------------------------------------------- */
.mh-works{
  background:#eef0f2;
  padding:110px 40px 130px;
}
.mh-works__inner{
  max-width:1360px;
  margin:0 auto;
}
.mh-works__head{
  max-width:720px;   /* ブロック自体は中央寄せ */
  margin:0 auto 70px;
  text-align:center !important; /* タイトルはContactセクションと同じく中央揃え。
                                    SWELL側の後読みCSSに上書きされる不具合対策で!important */
}
.mh-works__title{
  font-family:"Inter",sans-serif;
  font-weight:900;
  font-size:clamp(44px,6vw,68px);
  letter-spacing:-1px;
  color:var(--mh-text);
  margin:0 0 24px;
}
.mh-works__lead{
  font-size:16px;
  color:var(--mh-sub);
  margin:0;
  max-width:720px; /* 左揃えにすると1行が長くなりすぎるため、読みやすい幅に制限 */
  text-align:left !important;
}

/* --- Cards --- */
.mh-works__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.mh-works__card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(20,30,50,.06); /* .mh-portcardと同じ理由でぼかし半径を縮小
                                                (隣接カードの隙間28pxに影が滲み出るのを防ぐ) */
  display:flex;
  flex-direction:column;
}
.mh-works__icon{
  aspect-ratio:1/0.78;
  object-fit:cover;
  background:var(--mh-ph-bg); /* 画像読み込み前のフォールバック */
}
.mh-works__body{
  padding:28px 32px 32px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.mh-works__cat{
  font-size:13px;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--mh-blue);
  margin:0 0 12px;
  text-transform:uppercase;
}
.mh-works__card-title{
  font-size:22px;
  font-weight:800;
  color:var(--mh-text);
  margin:0 0 14px;
  line-height:1.4;
  min-height:62px !important; /* 22px×1.4×2行分。タイトルの文字数が変わって
                       折り返し行数が変わっても、下の要素の位置がズレないように。
                       !important: SWELL側の後読みCSSに上書きされる不具合対策 */
}
.mh-works__desc{
  font-size:14.5px;
  line-height:1.8;
  color:var(--mh-sub);
  margin:0 0 16px;
  height:104px !important; /* 約4行分。flex:1で余白を吸収する方式だと、カードごとに
                   使用プロダクト例の開始位置(区切り線の高さ)がバラバラに
                   なってしまっていたため、固定高さに変更。カード全体の
                   高さがグリッドで揃えられて余白が余った場合は、
                   VIEW WORKSより下に空白として現れるだけになる。
                   !important: SWELLのCSSがwp_head()経由で後から読み込まれ、
                   同じ詳細度のheight指定で上書きされてしまう不具合が
                   あったため付与。 */
  overflow:hidden !important;
}
.mh-works__product{
  margin:16px 0 24px;
  padding-top:14px;
  border-top:1px solid var(--mh-line); /* 実績紹介ページの.mh-portcard__productと同じ区切り線 */
  min-height:100px !important; /* ラベル(約23px)+アイコン2行分(32px×2+行間gap12px=76px)の目安。
                        現状最大のカード(6アイコン=2行)に合わせて確保しておくことで、
                        カードごとにアイコンの行数が変わってもVIEW WORKSの位置が揃う。
                        将来3行以上になった場合はこの高さを超えて自然に下へ伸びる
                        （overflow:hiddenにしていないため、はみ出し・見切れは発生しない）。
                        !important: SWELL側の後読みCSSに上書きされる不具合対策 */
}
.mh-works__product-label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--mh-text);
  margin:0 0 8px;
}

/* ---------------------------------------------------
   使用プロダクト アイコン行（共通パーツ）
   page-top.php のWORKSカード、page-works.php の実績カード
   の両方で使用する。テキストではなく各サービスのロゴアイコンを
   横並びで表示する。alt/titleに製品名を入れてアクセシビリティを確保。
--------------------------------------------------- */
.mh-product-icons{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.mh-product-icons__icon{
  height:32px;
  width:56px;
  object-fit:contain;
  object-position:center;
  display:block;
}
/* 各アイコンのリンク化ラッパー。カード自体が既にリンク(<a>)になっている場合、
   HTML仕様上<a>の中に<a>をネストできないため、<span>+JS(site.js)でリンク的な
   挙動(新規タブで開く／親カードへのクリック伝播を止める)を実現している。
   リンク先(data-href)は仮のプレースホルダー。本番の各サービス公式サイトURLに差し替えてください。 */
.mh-product-icons__icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff; /* カード自体の背景(#fff)と揃える。アイコン画像側に背景色が
                       付いている場合でも、周囲との差が目立たないようにする */
  border-radius:4px;
  line-height:0; /* img下に生まれる余白を消す */
  cursor:pointer;
  transition:opacity .2s;
}
.mh-product-icons__icon-link:hover{opacity:.65;}
.mh-works__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--mh-blue);
}
.mh-works__link svg{width:14px;height:14px;transition:transform .2s;}
.mh-works__card:hover .mh-works__link svg{transform:translateX(4px);}

/* --- Bottom CTA --- */
.mh-works__cta{
  text-align:center;
  margin-top:60px;
}
.mh-works__cta a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--mh-blue);
  color:#fff;
  font-size:15px;
  font-weight:700;
  padding:17px 34px;
  border-radius:8px;
  transition:opacity .2s;
}
.mh-works__cta a:hover{opacity:.85;}
.mh-works__cta svg{width:16px;height:16px;}

@media (max-width:960px){
  .mh-works__grid{grid-template-columns:1fr;}
  .mh-works__desc{
    /* 1カラム表示になり横に並ぶカードが無くなるため、高さを揃える必要が
       無くなる。固定を解除して文章が見切れないようにする。
       上の基本スタイルが!importantになったため、こちらも!importantが必要 */
    height:auto !important;
    overflow:visible !important;
  }
}
@media (max-width:600px){
  .mh-works{padding:80px 20px 90px;}
  .mh-works__head{margin-bottom:44px;}
}

/* ---------------------------------------------------
   News
   更新頻度が高いため、本番ではWordPressの「投稿(news)」を
   get_posts() 等でループ出力する想定。ここではダミーで構成を確認する。
--------------------------------------------------- */
.mh-news{
  padding:110px 40px 120px;
  background:#fff;
}
.mh-news__inner{
  max-width:1200px;
  margin:0 auto;
}
.mh-news__head{
  margin-bottom:36px;
}
.mh-news__title{
  font-family:"Inter",sans-serif;
  font-weight:900;
  font-size:clamp(44px,6vw,68px);
  letter-spacing:-1px;
  margin:0;
}
.mh-news__list{
  border-top:1px solid var(--mh-line);
}
.mh-news__item{
  display:flex;
  align-items:center;
  gap:24px;
  padding:26px 4px;
  border-bottom:1px solid var(--mh-line);
  transition:opacity .2s;
}
.mh-news__item:hover{opacity:.6;}
.mh-news__date{
  font-size:14px;
  color:var(--mh-sub);
  font-weight:600;
  flex:none;
  width:100px;
}
.mh-news__tag{
  flex:none;
  font-size:11px;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--mh-blue);
  background:#eef3ff;
  padding:5px 12px;
  border-radius:4px;
}
.mh-news__headline{
  flex:1;
  font-size:15.5px;
  font-weight:500;
  color:var(--mh-text);
}
.mh-news__arrow{
  flex:none;
  width:16px;
  height:16px;
  color:var(--mh-sub);
}

@media (max-width:600px){
  .mh-news{padding:70px 20px 80px;}
  .mh-news__item{
    gap:10px;
    padding:18px 0;
    /* 元々あった flex-wrap:wrap を外し、1行のまま収まるようにする。
       代わりに各要素の幅・文字サイズを絞り、はみ出す分は
       .mh-news__headline側でテキストを省略(…)表示する。 */
  }
  .mh-news__date{
    font-size:11.5px;
    width:64px; /* "2026.08.31"がぎりぎり改行されない最小幅の目安 */
  }
  .mh-news__tag{
    font-size:9.5px;
    padding:4px 8px;
  }
  .mh-news__headline{
    font-size:12.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; /* はみ出した文字を「…」で省略。折り返さない */
    min-width:0; /* flexアイテムは初期値がmin-width:autoのため、
                    これが無いと中身の文字数分だけ幅が確保されてしまい、
                    text-overflow:ellipsisが効かず結局はみ出す・折り返す */
  }
  .mh-news__arrow{
    width:13px;
    height:13px;
  }
}

/* ---------------------------------------------------
   Company
--------------------------------------------------- */
.mh-company{
  background:#eef0f2;
  padding:90px 40px;
}
.mh-company__inner{
  max-width:1200px;
  margin:0 auto;
}
.mh-company__title{
  font-family:"Inter",sans-serif;
  font-weight:900;
  font-size:clamp(44px,6vw,68px);
  color:var(--mh-text);
  margin:0 0 40px;
  letter-spacing:-1px;
}
.mh-company__grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  align-items:center;
}
.mh-company__list{
  border-top:1px solid #e6e6e6;
}
.mh-company__row{
  display:flex;
  gap:28px;
  padding:22px 0;
  border-bottom:1px solid #e6e6e6;
}
.mh-company__label{
  flex:none;
  width:110px;
  font-size:14px;
  font-weight:800;
  color:var(--mh-blue);
}
.mh-company__value{
  font-size:15px;
  color:var(--mh-text);
  line-height:1.7;
}
.mh-company__map{
  width:100%;
  aspect-ratio:4/3;
  background:#e9ebee;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8a9099;
  font-size:13px;
  font-weight:700;
  letter-spacing:.5px;
  text-align:center;
}
/* Googleマップ埋め込み例:
<iframe class="mh-company__map" style="border:0;" loading="lazy"
  src="https://www.google.com/maps/embed?pb=..."></iframe>
*/

@media (max-width:900px){
  .mh-company{padding:64px 24px;}
  .mh-company__grid{
    grid-template-columns:1fr;
    gap:32px;
  }
}

/* ---------------------------------------------------
   Contact
--------------------------------------------------- */
.mh-contact{
  position:relative;
  background:#fff;
  padding:70px 40px;
}
.mh-contact__inner{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}
.mh-contact__title{
  font-family:"Inter",sans-serif;
  font-weight:900;
  font-size:clamp(44px,6vw,68px);
  color:var(--mh-text);
  margin:0 0 28px;
  letter-spacing:-1px;
}
.mh-contact__text{
  color:var(--mh-sub);
  font-size:14.5px;
  line-height:1.9;
  margin:0 auto 40px;
  max-width:640px;
  text-align:left; /* 見出しは中央揃えのままでよいが、複数行になる本文は
                       中央揃えだと行ごとの見た目がガタつくため左揃えにする */
}

/* --- お問い合わせフォーム(Contact Form 7) --- */
.mh-contact-form{
  max-width:640px;
  margin:0 auto;
  text-align:left; /* フォーム内部(ラベル・入力欄)は左揃えのまま */
}
.mh-contact-form p{
  margin:0 0 24px;
  font-size:14px;
  font-weight:700;
  color:var(--mh-text);
}
.mh-contact-form input[type="text"],
.mh-contact-form input[type="email"],
.mh-contact-form input[type="tel"],
.mh-contact-form textarea{
  display:block;
  width:100%;
  margin-top:10px;
  padding:14px 16px;
  border:none;
  border-radius:8px;
  font-size:15px;
  font-family:inherit;
  color:var(--mh-text);
  background:#f5f6f8;
}
.mh-contact-form textarea{
  min-height:160px;
  resize:vertical;
}
.mh-contact-form input[type="text"]:focus,
.mh-contact-form input[type="email"]:focus,
.mh-contact-form input[type="tel"]:focus,
.mh-contact-form textarea:focus{
  outline:3px solid rgba(30,107,255,.3);
}

/* ラジオボタン(お問い合わせ内容)
   実際のDOM構造: <span class="wpcf7-list-item"><input type="radio">
                  <span class="wpcf7-list-item-label">テキスト</span></span>
   ※ <label>タグは存在しないため、.wpcf7-list-item 自体に直接指定する */
html body .mh-contact-form .wpcf7-form-control-wrap{
  display:block !important;
  margin-top:10px !important;
}
html body .mh-contact-form .wpcf7-radio{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
html body .mh-contact-form .wpcf7-list-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  cursor:pointer;
}
html body .mh-contact-form .wpcf7-list-item-label{
  font-weight:500;
  color:var(--mh-text);
  line-height:18px;
}
html body .mh-contact-form input[type="radio"]{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  margin:0 !important;
  padding:0 !important;
  flex:none !important;
  accent-color:var(--mh-blue);
}

/* 送信ボタン */
.mh-contact-form input[type="submit"]{
  display:block;
  margin:0 auto;
  background:var(--mh-blue);
  color:#fff;
  font-size:15px;
  font-weight:800;
  padding:16px 40px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:opacity .2s;
}
.mh-contact-form input[type="submit"]:hover{opacity:.85;}
.mh-contact-form input[type="submit"]:disabled{opacity:.5;cursor:not-allowed;}

/* 送信中のスピナー・完了/エラーメッセージ */
.mh-contact-form .wpcf7-not-valid-tip{
  color:#c02b2b;
  font-size:12.5px;
  font-weight:600;
  margin-top:6px;
}
.mh-contact-form .wpcf7-response-output{
  margin-top:24px;
  padding:14px 18px;
  border-radius:8px;
  background:#f0f4fa;
  color:var(--mh-text);
  font-size:14px;
  font-weight:600;
  border:2px solid transparent; /* 状態ごとの色は下のルールで上書きする */
}
/* エラー時（入力不備・送信失敗など）: 標準は黄色い枠 → 赤に変更 */
.mh-contact-form .wpcf7-form.invalid .wpcf7-response-output,
.mh-contact-form .wpcf7-form.unaccepted .wpcf7-response-output,
.mh-contact-form .wpcf7-form.failed .wpcf7-response-output,
.mh-contact-form .wpcf7-form.spam .wpcf7-response-output,
.mh-contact-form .wpcf7-form.aborted .wpcf7-response-output{
  border-color:#c02b2b;
  background:#fdecec;
}
/* 送信成功時: 標準は緑い枠 → 青に変更 */
.mh-contact-form .wpcf7-form.sent .wpcf7-response-output{
  border-color:var(--mh-blue);
  background:#eaf1ff;
}

@media (max-width:900px){
  .mh-contact-form{max-width:none;}
}

/* ---------------------------------------------------
   Page top button
--------------------------------------------------- */
.mh-totop{
  position:fixed;
  right:24px;
  bottom:24px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--mh-blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.mh-totop svg{width:18px;height:18px;}

/* ---------------------------------------------------
   Footer
--------------------------------------------------- */
.mh-footer{
  background:#eef0f2;
  padding:80px 40px 32px;
}
.mh-footer__inner{
  max-width:1200px;
  margin:0 auto;
}
.mh-footer__top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:56px;
}
.mh-footer__brand-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  font-size:15px;
  margin-bottom:16px;
}
.mh-footer__brand-logo__img{
  height:28px;
  width:auto;
  display:block;
}
.mh-footer__col-title{
  font-size:14px;
  font-weight:800;
  margin:0 0 18px;
}
.mh-footer__col ul li{margin-bottom:12px;}
.mh-footer__col ul li a{
  font-size:13.5px;
  color:var(--mh-sub);
  transition:color .2s;
}
.mh-footer__col ul li a:hover{color:var(--mh-blue);}

.mh-footer__bottom{
  border-top:1px solid #ddd;
  padding-top:28px;
  text-align:center;
}
.mh-footer__copyright{
  font-size:12px;
  color:#888;
  margin:0;
}

@media (max-width:900px){
  .mh-footer__top{
    grid-template-columns:repeat(2,1fr);
    row-gap:40px;
  }
  .mh-footer__top > div:first-child{grid-column:1/3;}
}
@media (max-width:520px){
  .mh-footer__top{grid-template-columns:1fr;}
  .mh-footer__top > div:first-child{grid-column:auto;}
}