@charset "utf-8";
/*
Theme Name: MYU 2026
Theme URI: https://www.m-y-u.co.jp/
Description: 株式会社MYU 2026年リニューアル用子テーマ。トップは先方制作HTML（QA2）、下層は黒基調。
Author: 株式会社ニジモ
Version: 1.0.0
Template: myuplanning
*/

/* ==========================================================================
   下層ページ共通（body.myu-sub）― 配色は「問い合わせページ.html」に準拠
   ========================================================================== */
:root {
  --myu-bg: #0f1115;
  --myu-card: #161920;
  --myu-card-rgba: rgba(22, 25, 32, 0.7);
  --myu-gold: #d4af37;
  --myu-text: #ffffff;
  --myu-muted: #8e94a0;
  --myu-border: #262b35;
  --myu-font: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

body.myu-sub {
  background: var(--myu-bg);
  color: var(--myu-text);
  font-family: var(--myu-font);
  font-size: 62.5%;             /* 親テーマの em 基準を維持 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* 固定ヘッダー（78px / 980px以下は66px）ぶん押し下げる */
.myu-sub #wrapper {
  max-width: none;
  overflow: visible;
  padding-top: 78px;
}
@media (max-width: 980px) { .myu-sub #wrapper { padding-top: 66px; } }

/* 親テーマの白背景・左サイドメニュー前提を解除 */
.myu-sub #header { display: none !important; }
.myu-sub #main {
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
  max-width: 1200px;
  min-width: 0;
  min-height: 0;
  font-size: 1.5em;
  line-height: 1.8;
  color: #e8e8ea;
  box-sizing: border-box;
}
.myu-sub #main.page_nosubimage,
.myu-sub #main.single,
.myu-sub #main.category,
.myu-sub #main.notfound { padding: 4rem 2rem 6rem; }
.myu-sub #main_content { margin: 0; }
.myu-sub #sub_image { height: auto; max-width: 100%; }
.myu-sub #sub_image img { height: auto; max-width: 100%; }

/* ページタイトル：英語＋日本語、白文字、センター寄せ（左の紺のメニューは廃止） */
.myu-sub #main #main_menu {
  position: static;
  display: block !important;
  width: auto;
  min-height: 0;
  margin: 0 0 4rem;
  padding: 0;
  background: none;
  text-align: center;
}
.myu-sub #main #main_menu h3 {
  margin: 0;
  color: var(--myu-text);
  font-family: var(--myu-font);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.myu-sub #main #main_menu h3 span {
  display: block;
  position: static;
  margin-top: 0.5rem;
  overflow: visible;
  text-indent: 0;
  color: var(--myu-muted);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}
.myu-sub #main #main_menu ul { display: none; }

/* 見出し・本文・リンク */
.myu-sub #main h3 { color: var(--myu-text); font-weight: 500; }
.myu-sub #main h4 { color: var(--myu-text); }
.myu-sub #main h5 { color: var(--myu-gold); }
.myu-sub #main_content a { color: var(--myu-gold); text-decoration: underline; text-underline-offset: 3px; }
.myu-sub #main_content a:hover { color: #e6c866; }
.myu-sub .red,
.myu-sub .contact_inner .kome { color: var(--myu-gold); background: none; }
.myu-sub .orange { color: var(--myu-gold); }
.myu-sub .blue { color: #8fb4e8; }
.myu-sub .box_red, .myu-sub .box_orange, .myu-sub #content .box,
.myu-sub #main .box_step, .myu-sub #main .box_number { border-color: var(--myu-border); }

/* テーブル（親テーマの白地・灰罫線を黒基調へ） */
.myu-sub th {
  color: var(--myu-muted);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--myu-border);
  font-size: 0.9em;
  letter-spacing: 0.08em;
}
.myu-sub td { border-color: var(--myu-border); }
.myu-sub table.nostyle th { color: var(--myu-muted); background: none; }
.myu-sub #main.contact table th,
.myu-sub #main.contact table td { font-size: 1.1em; }

/* ==========================================================================
   フォーム（MYU.css「ULTRA LUXURY FORM」の配色を親テーマの自前フォームへ適用）
   ========================================================================== */
.myu-sub .contact_inner {
  margin: 0 auto;
  padding: 4rem 3rem;
  max-width: 820px;
  background: var(--myu-card-rgba);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  box-sizing: border-box;
}
@media (max-width: 600px) { .myu-sub .contact_inner { padding: 2.5rem 1.25rem; } }

.myu-sub input[type="text"],
.myu-sub input[type="email"],
.myu-sub input[type="tel"],
.myu-sub input[type="number"],
.myu-sub select,
.myu-sub textarea,
.myu-sub #main_content.recruit_entry select,
.myu-sub #main_content.recruit_entry input,
.myu-sub #main_content.recruit_entry textarea {
  background-color: rgba(10, 12, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--myu-text);
  padding: 0.9rem 1rem;
  font-size: 16px;
  font-family: var(--myu-font);
  border-radius: 0;
  letter-spacing: 0.05em;
  box-sizing: border-box;
  transition: border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s;
}
.myu-sub input[type="text"]:focus,
.myu-sub input[type="email"]:focus,
.myu-sub input[type="tel"]:focus,
.myu-sub select:focus,
.myu-sub textarea:focus,
.myu-sub #main_content.recruit_entry select:focus,
.myu-sub #main_content.recruit_entry input:focus,
.myu-sub #main_content.recruit_entry textarea:focus {
  outline: none;
  background-color: rgba(10, 12, 15, 0.9);
  border-color: var(--myu-gold);
  border-bottom-color: var(--myu-gold);
}
.myu-sub ::placeholder { color: #5f6570; opacity: 1; }
.myu-sub :placeholder-shown { color: #5f6570; }
.myu-sub select option { background: var(--myu-card); color: var(--myu-text); }
.myu-sub textarea { min-height: 160px; }
.myu-sub input[type="checkbox"],
.myu-sub input[type="radio"] { accent-color: var(--myu-gold); width: 16px; height: 16px; vertical-align: -2px; margin-right: 6px; }
.myu-sub label { color: #d9dbe0; }

/* 採用エントリー固有 */
.myu-sub #main_content.recruit_entry h4 {
  margin-bottom: 1.5rem;
  padding: 0.5rem 1rem;
  color: var(--myu-text);
  background: var(--myu-card);
  border-left: 2px solid var(--myu-gold);
}
.myu-sub #main_content.recruit_entry h5 { color: var(--myu-text); }
.myu-sub #main_content.recruit_entry th { background: rgba(255, 255, 255, 0.03); }
.myu-sub #main_content.recruit_entry .required { color: #0f1115; background: var(--myu-gold); }
.myu-sub #main_content.recruit_entry .any { color: var(--myu-text); background: #3a4150; }
.myu-sub #main_content.recruit_entry .privacy_policy {
  color: #c9ccd3;
  background: rgba(10, 12, 15, 0.6);
  border: 1px solid var(--myu-border);
}
.myu-sub #main_content.recruit_entry .agree { border: 1px solid var(--myu-gold); background: rgba(212, 175, 55, 0.06); }
.myu-sub #main_content.recruit_entry #post_to_address { color: #0f1115 !important; background: var(--myu-gold); }

/* 送信・戻るボタン */
.myu-sub input[type="submit"],
.myu-sub button[type="submit"],
.myu-sub #main_content.recruit_entry input[type='submit'] {
  display: inline-block;
  margin: 0.5rem;
  padding: 1rem 2.5rem;
  width: auto;
  color: #0f1115;
  background: var(--myu-gold);
  border: 1px solid var(--myu-gold);
  border-radius: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.myu-sub input[type="submit"]:hover,
.myu-sub button[type="submit"]:hover,
.myu-sub #main_content.recruit_entry input[type='submit']:hover {
  color: var(--myu-gold);
  background: transparent;
}
.myu-sub input[type="submit"].back,
.myu-sub #main_content.recruit_entry input[type='submit'].back {
  color: var(--myu-muted);
  background: transparent;
  border-color: var(--myu-border);
}
.myu-sub input[type="submit"].back:hover { color: var(--myu-text); border-color: var(--myu-muted); }

/* FujiSSL サイトシール（白地のまま小さなカードに） */
.myu-sub #main_content div[align="right"] > div[style] {
  background: #fff;
  color: #333;
  border-color: var(--myu-border) !important;
}
.myu-sub #main_content div[align="right"] > div[style] a { color: #0062b8; }

/* ==========================================================================
   投稿・一覧（news 等）
   ========================================================================== */
.myu-sub #content hr { border-bottom-color: var(--myu-border); }
.myu-sub .navigation a, .myu-sub .pager a { color: var(--myu-gold); }

/* ==========================================================================
   QA2 フッターの直前に親テーマのフッターが出ないよう保険（子テーマの footer.php が置換済み）
   ========================================================================== */
.myu-sub #footer { display: none !important; }

/* ==========================================================================
   レスポンシブ（親 responsible.css の 780px 以下ルールを黒基調に合わせる）
   ========================================================================== */
@media (max-width: 780px) {
  .myu-sub #main.page,
  .myu-sub #main.single,
  .myu-sub #main.category { padding: 2.5rem 1rem 4rem; }
  .myu-sub #main #main_menu { margin-bottom: 2.5rem; }
  .myu-sub #main #main_menu h3 { font-size: 2rem; }
  .myu-sub #recruit_list table th,
  .myu-sub #recruit_single table th,
  .myu-sub #main_content.recruit_entry table th { background: rgba(255, 255, 255, 0.03); }
  .myu-sub #main.contact #tel_1, .myu-sub #main.contact #tel_2, .myu-sub #main.contact #tel_3,
  .myu-sub #main.contact #fax_1, .myu-sub #main.contact #fax_2, .myu-sub #main.contact #fax_3 { width: 60px; padding: 0.6rem 0.4rem; }
}

/* ==========================================================================
   子テーマ独自：ボタン／テスト環境注意文
   ========================================================================== */
.myu-sub .myu-btn {
  display: inline-block;
  margin: 1.5rem 0.5rem 0;
  padding: 1rem 2.75rem;
  color: #0f1115;
  background: var(--myu-gold);
  border: 1px solid var(--myu-gold);
  border-radius: 0;
  font-family: var(--myu-font);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.myu-sub .myu-btn:hover { color: var(--myu-gold); background: transparent; }
.myu-sub .myu-btn-back { color: var(--myu-muted); background: transparent; border-color: var(--myu-border); }
.myu-sub .myu-btn-back:hover { color: var(--myu-text); border-color: var(--myu-muted); }
.myu-staging-notice {
  margin: 1rem auto 2rem;
  padding: 1rem 1.25rem;
  max-width: 820px;
  color: #ffd97a;
  background: rgba(212, 175, 55, 0.08);
  border: 1px dashed var(--myu-gold);
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: normal;
}
@media (max-width: 780px) {
  .myu-sub #main_content.recruit_entry #tel_1,
  .myu-sub #main_content.recruit_entry #tel_2,
  .myu-sub #main_content.recruit_entry #tel_3 { width: 27%; padding: 0.7rem 0.5rem; }
}