/*
 * 訪問診療モック用テーマ上書き（グリーン系）。
 * 既存 style.css の青系ブランド色を /houmon 配下だけで緑に寄せる。
 * body に .houmon-theme が付いたページにのみ適用され、美容側には影響しない。
 */

.houmon-theme {
  --hmn: #0d8b7d;
  --hmn-dark: #0a5f56;
  --hmn-pale: #26b3a3;
  --hmn-light: #e6f6f3;
}

/* 文字色 */
.houmon-theme .font_color_main { color: #0d8b7d !important; }
.houmon-theme .font_color_maindark { color: #0a5f56 !important; }
.houmon-theme .font_color_mainpale { color: #26b3a3 !important; }
.houmon-theme .font_color_maindeep { color: #0d8b7d !important; }

/* 背景色 */
.houmon-theme .bg_color_main { background: #0d8b7d !important; }
.houmon-theme .bg_color_mainpale { background: #26b3a3 !important; }
.houmon-theme .bg_color_mainlight { background: #e6f6f3 !important; }

/* ラベル */
.houmon-theme .label_main_stroke { color: #0d8b7d; border-color: #0d8b7d; }
.houmon-theme .label_maindark_filled { background: #0a5f56; border-color: #0a5f56; }
.houmon-theme .label_mainclear_filled { color: #0d8b7d; border-color: #0d8b7d; }
.houmon-theme .label_mainlight_filled { background: #e6f6f3; color: #0a5f56; }

/* ボタン */
.houmon-theme .btn_emphasis { border-color: #0d8b7d; background: #e6f6f3; color: #0d8b7d; }

/* ヘッダー */
/* 美容側と同じく固定（fixed）ヘッダーにする。高さは実測（padding 9px*2 + ロゴ47px ≒ 65px）で固定値。
   ここを変えたら下の content_body の padding-top も揃えて変更すること。 */
.houmon-header {
  background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  position: fixed; top: 0; left: 0; right: 0; z-index: 4000;
}
.houmon-header .houmon-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #0a5f56; }
.houmon-header .houmon-brand .houmon-badge {
  background: #0d8b7d; color: #fff; font-size: 13px; padding: 4px 10px; border-radius: 4px;
}
.houmon-header .houmon-nav a { color: #0a5f56; margin-left: 18px; font-size: 14px; text-decoration: none; }
.houmon-header .houmon-nav a.houmon-cta {
  background: #0d8b7d; color: #fff; padding: 10px 20px; border-radius: 6px;
}
/* 480px未満（真のスマホ幅）は、ロゴを大きいまま保つ代わりに brand行/nav行を縦積みにして横溢れを防ぐ。
   flexの自然折り返しに任せると折り返し幅が内容依存でブレるため、固定のブレークポイントにする。
   実測では430px以上なら1行に収まる（400pxだとバッジ/リンク内でテキストが折り返す）ため、
   既存のSCSS変数 $screen-xs-min(480px) に合わせて余裕を持たせている。
   768pxのままだと、768px未満の横幅（タブレット・PCの分割ウィンドウ等）で
   美容側の1行ヘッダーと違って不要に2段落ちして見えるため、480pxまで下げた。 */
.houmon-header-inner {
  /* padding: 9px 0; だとcontainer_defaultの横paddingまで0に打ち消してしまい、
     ロゴがブラウザ端にぴったり付いてしまう（美容側では起きない余白崩れ）。
     縦方向だけ上書きし、横方向はcontainer_default任せにする。 */
  padding-top: 9px;
  padding-bottom: 9px;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 8px;
}
.houmon-header .houmon-nav a:first-child { margin-left: 0; }
@media (min-width: 480px) {
  .houmon-header-inner {
    flex-direction: row;
    align-items: center;
  }
}

/* content_body / content_body_simplified の padding-top は houmon-header の実測高さに合わせる。
   480px未満は縦積み2段（実測 約103px）、480px以上は横1段（実測 約65px）。
   ヘッダーの構成を変えたら、ここも揃えて変更すること。 */
.houmon-theme .content_body,
.houmon-theme .content_body_simplified {
  padding-top: 103px;
}
@media (min-width: 480px) {
  .houmon-theme .content_body,
  .houmon-theme .content_body_simplified {
    padding-top: 65px;
  }
}

/* キービジュアル。
   重ね順は「下地色 → 写真(::before) → teal系の色かぶせ(::after) → テキスト」。
   - 下地色は写真の空白部分と同じ淡い水色#e3f0f6。写真の端をmask-imageで透明にしても
     下地となじむ。
   - 色かぶせはhero全幅に1枚だけ、写真の上にかぶせる。写真の内側も外側も同じ1枚を通して
     見えるため、濃さが揃い境目が出ない（色かぶせを写真の下に敷いて写真を半透過にすると、
     写真の部分だけ色かぶせが薄くなり明るい長方形として浮く）。

   写真の置き方：写真の箱は「高さ＝heroの高さ、幅＝その1.5倍（写真の縦横比3:2）」の
   固定サイズにし、coverでも切り抜きが起きないようにする。そのうえで、被写体の右端
   （白衣の右端。画像の横74%付近）がコンテンツの右端（container_defaultの内側＝ヘッダーの
   「相談する」ボタンの右端）に来るよう、箱の左端を
     left = 100% − (画像幅 × 0.74 + container_defaultの右padding15px)
   で決める。画面幅に比例する箱（横46%など）に写真を合わせると、画面幅によって被写体の位置も
   大きさも変わり、右端が揃わなかったり、ウルトラワイドで巨大化したりしていた。
   この値はheroの高さがmin-heightどおりであることを前提にしている（高さを変えたら
   画像幅と下のleftの値も揃えて変えること）。 */
.houmon-hero {
  position: relative;
  overflow: hidden;
  /* ::before/::after/テキストのz-indexをhero内に閉じ込め、固定ヘッダー等と干渉させない */
  isolation: isolate;
  background: #e3f0f6;
  /* 横方向の余白はheroではなく.houmon-hero-inner（container_default）が持つ。
     ここでも横paddingを付けるとheroとcontainer_defaultの両方の余白が重なって
     二重になる。 */
  color: #fff; padding: 56px 0; text-align: left;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.houmon-hero::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  /* 高さ480px × 1.5 */
  width: 720px;
  /* 720 × 0.74 + 15 = 548。ただし444px未満の幅では右端に揃えると被写体が左に寄りすぎ、
     顔が見出しの下に潜るため、それ以上は左へ動かさない（-104pxは375px幅で顔が見出しの
     右側に出る位置）。 */
  left: max(calc(100% - 548px), -104px);
  background: url('/img/houmon/9gsugit3lvsgas1655949797.jpg') no-repeat 74% top;
  background-size: cover;
  z-index: 0;
  /* 左端（テキスト側）を下地色に溶かす。右端は常に画面外に出るのでフェード不要。 */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%);
}
.houmon-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(13, 139, 125, 0.55) 0%, rgba(38, 179, 163, 0.55) 100%);
  pointer-events: none;
}
.houmon-hero-inner {
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .houmon-hero { min-height: 600px; }
  .houmon-hero::before {
    /* 高さ600px × 1.5。900 × 0.74 + 15 = 681 */
    width: 900px;
    left: calc(100% - 681px);
  }
}
@media (min-width: 1024px) {
  /* PCでは写真をhero本体ではなく.houmon-hero-content（max-width:1230pxで頭打ちにした
     ラッパー）に付け、コンテンツ幅の右端に揃える。ウルトラワイド画面ではコンテンツ幅の
     外側にheroの地の色だけが伸びる。 */
  .houmon-hero::before { content: none; }
  .houmon-hero-content {
    position: absolute;
    inset: 0;
    max-width: 1230px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .houmon-hero-content::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 900px;
    left: calc(100% - 681px);
    background: url('/img/houmon/9gsugit3lvsgas1655949797.jpg') no-repeat 74% top;
    background-size: cover;
    z-index: 0;
    /* 写真の右端はコンテンツ幅の右端から約220px外に出る。ウルトラワイド画面ではそこが
       見えるので、被写体の右（76%以降）を下地色へフェードさせる。 */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 76%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 76%, transparent 100%);
  }
}
.houmon-hero h1,
.houmon-hero p,
.houmon-hero .houmon-hero-badge {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.houmon-hero .houmon-hero-badge {
  display: inline-block; background: rgba(255, 255, 255, 0.2);
  padding: 4px 14px; border-radius: 999px; font-size: 13px; margin-bottom: 16px;
}
/* SPは被写体を右寄せにしているため、見出し・本文がheroの横幅いっぱいまで
   伸びると被写体（特に顔）にかぶる。左側の地の色部分に収まる幅に制限する。
   PC（1024px以上）は写真がテキストと別の帯に分かれるため、下のmin-width:1024pxで解除する。 */
.houmon-hero h1 { font-size: 28px; line-height: 1.5; margin: 0 0 12px; max-width: 260px; }
.houmon-hero p { font-size: 15px; opacity: 0.95; margin: 0 0 24px; max-width: 260px; }
.houmon-hero .houmon-hero-actions a {
  display: inline-block; margin: 6px; padding: 12px 24px; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.houmon-hero .houmon-hero-actions .is-primary { background: #fff; color: #0d8b7d; }
.houmon-hero .houmon-hero-actions .is-ghost { border: 1px solid #fff; color: #fff; }
@media (min-width: 1024px) {
  .houmon-hero .houmon-hero-actions { margin-left: -6px; }
  /* SP用の260px制限（被写体を避けるため）を解除。PCは写真と別の帯なので不要。
     このオーバーライドは.houmon-hero h1/p { max-width: 260px; }より後ろに書く必要がある
     （同じ詳細度なので、メディアクエリの中でもCSSソース順で後勝ち）。 */
  .houmon-hero h1 {
    max-width: none;
  }
  .houmon-hero p {
    /* 指定しないと1行の長文がheroの横幅いっぱいまで伸び、右側の帯と重なる。 */
    max-width: 480px;
  }
}

/* container_default（.pure-g系セクションが使う共通コンテナ。max-width:1230px, padding:15px）と
   幅・左右paddingを揃える。揃えないと同じページ内でセクションごとに幅がずれて見える。 */
.houmon-section { width: 100%; max-width: 1230px; margin: 0 auto; padding: 40px 15px; }
.houmon-section h2 { font-size: 20px; color: #0a5f56; border-left: 4px solid #0d8b7d; padding-left: 10px; margin-bottom: 20px; }

/* 都道府県一覧ページの「市区町村から探す」（views/houmon/list.ejs、見出し・件数の直下） */
.houmon-city-links { margin-top: 16px; }
.houmon-city-links-heading { font-size: 13px; font-weight: 700; color: #0a5f56; margin: 0 0 8px; }
.houmon-city-links-heading i { color: #26b3a3; margin-right: 4px; }
.houmon-city-links-list a {
  display: inline-block; margin: 4px 8px 4px 0; padding: 6px 14px;
  border: 1px solid #0d8b7d; border-radius: 999px; background: #fff;
  color: #0d8b7d; font-size: 14px; line-height: 1.4; text-decoration: none;
}
.houmon-city-links-list a:hover { background: #e6f6f3; }
.houmon-city-links-count { margin-left: 4px; font-size: 12px; color: #6b7c7a; }

/* 一覧ページ下部の内部リンク（views/houmon/partials/related-links.ejs）。求人一覧エリアの
   グレー背景（.body_joboffer::after、画面全体にfixedで敷かれている）と同化しないよう、
   見出しエリア（.firstview_job_list）と同じ白の帯にする。求人一覧との間はグレーのまま60px空ける。
   display:flow-rootは、先頭の見出しsectionのmargin-topが帯の外に突き抜けて帯の上がグレーに
   なるのを防ぐため。 */
.houmon-related-links {
  display: flow-root;
  margin-top: 60px;
  padding-bottom: 60px;
  background: #fff;
}

@media (min-width: 768px) {
  .houmon-hero h1 { font-size: 36px; }
}

/* --- 一覧・詳細（美容UI踏襲）で使う色クラスの緑上書き --- */
.houmon-theme .btn_strongest,
.houmon-theme .trigger_panel_search,
.houmon-theme .panel_editor_strongest {
  background: linear-gradient(120deg, #26b3a3 0%, #0d8b7d 100%);
  border-color: #0d8b7d;
}
.houmon-theme .btn_strongest:hover {
  border-color: #26b3a3;
  box-shadow: 0 0 12px #26b3a3;
}
.houmon-theme .label_maindark_stroke { color: #0a5f56; border-color: #0a5f56; background: #e6f6f3; }
.houmon-theme .label_mainpale_stroke { color: #0d8b7d; border-color: #26b3a3; }
.houmon-theme .label_mainclear_filled { color: #0a5f56; background: #c5ece6; border-color: #c5ece6; }
.houmon-theme .panel_skin_emphasis,
.houmon-theme .panel_blank { background: #e6f6f3; }
.houmon-theme .bg_color_mainlight { background: #e6f6f3 !important; }
/* 未経験可(label_leaf_stroke) は元から緑系のため据え置き */
.houmon-theme .heading_related { color: #0d8b7d; }

/* 「このような環境を求めていませんか？」パネル */
.houmon-theme .panel_environment_list .panel_environment { background-color: #e6f6f3; }
.houmon-theme .panel_environment_list .panel_environment i { color: #26b3a3; }

/* 「よくあるご質問」の回答（A）のアイコン。共有SCSS側が青（$colorMain）を!importantで
   指定しているため、同じく!important付きでtealに上書きする（Qはモノトーンのまま）。 */
.houmon-theme .panel_unique_faq .content_faq_a:before { background: #0d8b7d !important; }

/* --- 検索ドロワー・検索条件サブモーダル（partials/search-modal-panel.ejs）とFV検索エリア --- */
/* SP・タブレット幅の検索ドロワー（.panel_search、下から出る）の上端をhoumonヘッダーの実測高さに
   合わせる。美容のSCSSは上端を美容ヘッダーの高さ（SPは17.07vw＝375pxで64px）で決めているが、
   houmonヘッダーは480px未満で2段（約103px）・480px以上で1段（約65px）のため、そのままだと
   480px未満ではドロワーのタイトルと閉じるボタンがヘッダーの下に隠れて押せず、480〜767pxでは
   ヘッダーとドロワーの間に隙間ができる。1024px以上は右からのサイドドロワー（top:0）なので対象外。
   ヘッダーの構成を変えたら、上のcontent_bodyのpadding-topと合わせてここも変えること。 */
@media (max-width: 1023px) {
  .houmon-theme .panel_search {
    top: 65px;
    height: calc(100vh - 65px);
    height: calc(var(--vh) * 100 - 65px);
  }
}
@media (max-width: 479px) {
  .houmon-theme .panel_search {
    top: 103px;
    height: calc(100vh - 103px);
    height: calc(var(--vh) * 100 - 103px);
  }
}
/* 選択済みの条件ボタン、チェックボックス・ラジオの選択色を美容の青からtealに上書き */
.houmon-theme .btn_inputdata.has_data {
  background: #e6f6f3;
  box-shadow: 0 0 6px rgba(38, 179, 163, 0.5);
}
.houmon-theme .form_group .checkbox_group_default input:checked + label:before {
  background: #0d8b7d;
  border-color: #0d8b7d;
}
.houmon-theme .form_group .radio_group_default input:checked + label:before {
  border-color: #0d8b7d;
}
/* サブモーダルの選択肢は行全体をクリックできるようにする。行の上下の余白は.list_itemが
   持っており、そのままだとラベルの外（クリックできない）になるため、余白をlabel側に移す。
   チェックボックスの位置（label:before、top:-0.075em基準）も同じ分だけ下げる。 */
.houmon-theme .v_modal_body .list_common .list_item {
  padding-top: 0;
  padding-bottom: 0;
}
.houmon-theme .v_modal_body .list_item label {
  display: block;
  padding-top: 0.7em;
  padding-bottom: 0.75em;
}
.houmon-theme .v_modal_body .list_item label:before {
  top: calc(0.7em - 0.075em);
}

/* --- モック：一覧・詳細の背景は美容画像を使わず単色グレーにする --- */
.houmon-theme .body_joboffer::after { background: #eef0f2 !important; }
.houmon-theme .firstview_job_detail { background: #eef0f2 !important; }
.houmon-theme .firstview_job_detail .info_job_detail_wrapper .thumb_job_detail .thumb_article_inner { background: #eef0f2 !important; }