@charset "utf-8";
/* ============================================================================
   common_rules.css — サービスサイト共通ルール（2026-11-10）
   根拠：スタジオ元月さんの数値表 Six_Sites_Current_vs_Target_Specs.docx「HTML Mail Box」章
         （GlobalBox で先に当てた形にそろえる。Q./A. 20px・ナビのホバー色＝サイトの青 は五月女承認済み）
   全ページで最後に読み込む（Setup/site_partials/goodmail/head.html）。
   ヘッダー・フッターのHTMLは Setup/site_partials/goodmail/ の部品から書き込む＝ここを直したら部品も確認する。
   ============================================================================ */
:root{
  --hmb-blue:#004da0;
  --hmb-blue-hover:#003d7f;
  --hmb-blue-active:#003670;
  --hmb-cta:#BF5700;
  --hmb-cta-hover:#AD4E00;
  --hmb-cta-active:#9E4700;
  --hmb-text:#1A1A1A;
  --hmb-text-2:#4A4A4A;
  --hmb-text-3:#4F4F4F;
  --hmb-line:#e2e6ee;
  --hmb-bg-2:#f5f7fc;
}

/* ---------- 文字：日本語は Noto Sans JP（400/700）。本文16px ---------- */
body{
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;
  font-size:1.6rem;
}

/* ---------- ヘッダー ----------
   PC：高さ80px・左ロゴ（by B.A.D入り）／ナビ15px太字／右CTA 44px。電話番号はヘッダーに出さない（フッター・固定バーにある。2026-11-10 五月女判断）。
   1080px以下：ナビが1行に収まらないためメニューを畳む（GlobalBoxは960px。ナビ項目が多いぶん広い）。
   スマホ（767px以下）：高さ72px・1行。ロゴ（by B.A.Dなし）＋問い合わせアイコン＋メニュー（各44px・間8px） */
header.site-head{
  position:fixed;top:0;left:0;right:0;z-index:102;
  height:80px;background:#fff;border-bottom:1px solid var(--hmb-line);
  transition:box-shadow .2s ease;
}
header.site-head.is-scrolled{box-shadow:0 2px 8px rgba(0,77,160,.08)}
.site-head__wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;max-width:1148px;margin:0 auto;padding:0 24px}
.site-head .brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.site-head .brand picture,.site-head .brand img{display:block}
/* SVGの上下にブランドの安全余白が入っているため、見た目のロゴは約6割の高さになる */
.site-head .brand img{height:60px;width:auto;max-width:none}
.site-head .gnav{display:flex;align-items:center;gap:24px;position:static;width:auto;background:none;padding:0}
.site-head .gnav ul{display:flex;gap:20px;margin:0;padding:0;list-style:none}
.site-head .gnav ul li{margin:0;padding:0;border:0;width:auto}
.site-head .gnav ul a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0 0;color:var(--hmb-text);text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.02em;border-bottom:2px solid transparent;line-height:1.4}
.site-head .gnav ul a:hover,.site-head .gnav ul a:focus-visible,.site-head .gnav ul a[aria-current]{color:var(--hmb-blue);border-bottom-color:var(--hmb-blue)}
.site-head .head-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border:0;border-radius:4px;background:var(--hmb-cta);color:#fff;font-size:15px;font-weight:700;letter-spacing:.04em;line-height:1.4;white-space:nowrap;text-decoration:none}
.site-head .head-cta:hover{background:var(--hmb-cta-hover)}
.site-head .head-cta:active{background:var(--hmb-cta-active)}
.site-head a:focus-visible,.site-head button:focus-visible{outline:2px solid var(--hmb-blue);outline-offset:3px}
.site-head .head-tools{display:none;align-items:center;gap:8px;margin-left:auto}
.site-head .head-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:4px;color:#fff;cursor:pointer;text-decoration:none}
.site-head .head-ico--cta{background:var(--hmb-cta)}
.site-head .head-ico--cta:hover{background:var(--hmb-cta-hover)}
.site-head .head-ico--cta:active{background:var(--hmb-cta-active)}
.site-head .nav-toggle{background:var(--hmb-blue)}
.site-head .nav-toggle:hover{background:var(--hmb-blue-hover)}
.site-head .nav-toggle:active{background:var(--hmb-blue-active)}
.site-head .nav-toggle .i-close{display:none}
.site-head .nav-toggle[aria-expanded="true"] .i-open{display:none}
.site-head .nav-toggle[aria-expanded="true"] .i-close{display:block}
@media (max-width:1080px){
  .site-head .head-tools{display:flex}
  /* メニューはヘッダーの真下に縦に開く。白地・左右24px・1項目56px以上・区切り線1px #E5E5E5。長いときはパネルだけスクロール */
  .site-head .gnav{position:absolute;top:100%;left:0;right:0;display:none;background:#fff;padding:0 24px;
    border-bottom:1px solid var(--hmb-line);box-shadow:0 8px 16px rgba(0,0,0,.06);
    max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
  .site-head .gnav.is-open{display:block}
  .site-head .gnav ul{flex-direction:column;gap:0}
  .site-head .gnav ul li + li{border-top:1px solid #E5E5E5}
  .site-head .gnav ul a{display:flex;min-height:56px;padding:0;border-bottom:0;font-size:15px}
  .site-head .gnav ul a:hover,.site-head .gnav ul a:focus-visible,.site-head .gnav ul a[aria-current]{border-bottom:0;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
  .site-head .gnav ul a:focus-visible{outline-offset:-2px}
  /* パネルの中にCTAは出さない（ヘッダーの問い合わせアイコンが常に見えている） */
  .site-head .gnav .head-cta{display:none}
}
@media (max-width:767px){
  header.site-head{height:72px}
  .site-head .brand img{height:52px}
  .site-head .gnav{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px)}
}

/* ---------- ボタン：主ボタンは高さ60px・16px・角丸4px・枠なしの塗り（PC・スマホ共通） ---------- */
/* トップ（2026-08 作り直し版）：主＝オレンジ、副＝青。主次の区別はそのまま、大きさだけそろえる
   （記事内の .consult-btn は見出し＋説明文のカード型の導線なので対象外） */
.topPage .mv__cta-btn--primary,.topPage .mv__cta-btn--secondary,
.topPage .btn--primary,.topPage .btn--secondary,
.topPage .sec-mv .mv_cta .mv_cta_main,
.pageEndCta .pageEndCta_btn,
.gate-submit{
  display:inline-flex !important;align-items:center;justify-content:center;
  min-height:60px;padding-top:0 !important;padding-bottom:0 !important;
  font-size:16px !important;line-height:1.4 !important;border:0 !important;border-radius:4px !important;box-shadow:none !important;
}
.topPage .mv__cta-btn--primary:hover,.topPage .btn--primary:hover,.topPage .sec-mv .mv_cta .mv_cta_main:hover,.pageEndCta .pageEndCta_btn:hover{background-color:var(--hmb-cta-hover) !important;opacity:1 !important;transform:none !important}
.topPage .mv__cta-btn--primary:active,.topPage .btn--primary:active,.topPage .sec-mv .mv_cta .mv_cta_main:active,.pageEndCta .pageEndCta_btn:active{background-color:var(--hmb-cta-active) !important}
.topPage .mv__cta-btn--secondary:hover,.topPage .btn--secondary:hover{transform:none !important;box-shadow:none !important}

/* ---------- フォーム：1行の入力欄と選択欄は枠線込みで高さ50px。角丸4px ---------- */
.gate-input,.gate-select{height:50px !important;border-radius:4px !important;box-sizing:border-box !important;padding-top:0 !important;padding-bottom:0 !important}

/* ---------- 固定の問い合わせバー（内側のページ）：ボタンは60px・16px・4px ---------- */
footer .addFooter .inner .fixed_mail a{display:inline-flex !important;align-items:center;justify-content:center;min-height:60px;padding:0 32px !important;font-size:16px !important;border-radius:4px !important;line-height:1.4 !important}
@media only screen and (max-width:768px){
  footer .addFooter .footerMob{padding:8px 0 calc(8px + env(safe-area-inset-bottom)) !important}
  footer .addFooter .footerMob a.mailmob{height:60px !important;border-radius:4px !important}
}

/* ---------- FAQ：1問1枚のカード。押すと開く（最初は全部閉じる）。カテゴリのタブはそのまま ----------
   Q./A. は文字だけ・ブランドの青・20px/700（スマホ18px）。本文の始まりは左32px＋印27px＋間16px＝75px */
.faqPage .faqList.faqActive{display:grid;gap:16px}
.faqPage .faqList > li{margin:0 !important;padding:0 !important;border:0 !important;background:none !important}
.faqPage .faq-item{background:#fff;border:1px solid var(--hmb-line);border-radius:4px}
.faqPage .faq-item summary{position:relative;padding:24px 58px 24px 75px;font-size:16px;font-weight:700;line-height:26px;color:var(--hmb-text);cursor:pointer;list-style:none}
.faqPage .faq-item summary::-webkit-details-marker{display:none}
.faqPage .faq-item summary::before{content:"Q.";position:absolute;left:32px;top:24px;width:27px;font-size:20px;font-weight:700;line-height:26px;color:var(--hmb-blue);font-family:"Helvetica Neue",Arial,sans-serif}
.faqPage .faq-item summary::after{content:"";position:absolute;right:32px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid var(--hmb-blue);border-bottom:2px solid var(--hmb-blue);transform:rotate(45deg);transition:transform .15s}
.faqPage .faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faqPage .faq-item summary:hover{color:var(--hmb-blue)}
.faqPage .faq-item summary:focus-visible{outline:2px solid var(--hmb-blue);outline-offset:-2px;border-radius:4px}
.faqPage .faq-item .faq-a{position:relative;margin:0 32px;padding:24px 0 24px 43px;border-top:1px solid var(--hmb-line);font-size:16px;line-height:29px;color:var(--hmb-text-2)}
.faqPage .faq-item .faq-a::before{content:"A.";position:absolute;left:0;top:24px;width:27px;font-size:20px;font-weight:700;line-height:29px;color:var(--hmb-blue);font-family:"Helvetica Neue",Arial,sans-serif}
@media (prefers-reduced-motion:reduce){.faqPage .faq-item summary::after{transition:none}}
@media (max-width:767px){
  .faqPage .faqList.faqActive{gap:12px}
  .faqPage .faq-item summary{padding:16px 44px 16px 54px;font-size:15px}
  .faqPage .faq-item summary::before{left:18px;top:16px;width:24px;font-size:18px}
  .faqPage .faq-item summary::after{right:18px}
  .faqPage .faq-item .faq-a{margin:0 18px;padding:16px 0 16px 36px;font-size:15px;line-height:26px}
  .faqPage .faq-item .faq-a::before{top:16px;width:24px;font-size:18px;line-height:26px}
}

/* ---------- フッター：ChinaBoxの骨格。左＝ロゴと会社情報／右＝サイト内リンク（同じ幅の3列）、
   下段＝B.A.Dのサービス、最下段＝プライバシーポリシーとコピーライト。文字14／13／12px。
   リンクは下線なし、マウスを乗せたときだけ下線 ---------- */
footer.site-foot{background:#fff;border-top:1px solid var(--hmb-line);font-size:14px;color:var(--hmb-text-3);line-height:1.9;padding:0}
/* 固定バー（.addFooter）とページトップ（.pagetop）もフッターの中にあるため、リンクの指定は .foot-wrap の中だけに効かせる */
.site-foot .foot-wrap a{display:inline;padding:0;margin:0;color:var(--hmb-text-2);text-decoration:none}
.site-foot .foot-wrap a:hover{color:var(--hmb-blue);text-decoration:underline;text-underline-offset:3px}
.foot-wrap{max-width:1148px;margin:0 auto;padding:0 24px}
.foot-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px 64px;align-items:start;padding-top:44px;padding-bottom:36px}
.site-foot .foot-wrap .foot-logo{display:inline-block;margin:0 0 -2px -14px}/* SVGの左の余白ぶん戻して文章の左端にそろえる */
.site-foot .foot-logo img{display:block;height:48px;width:auto;max-width:none}
.site-foot .foot-co{margin:0 0 8px;color:var(--hmb-text-2);font-size:14px}
.site-foot address{font-style:normal;font-size:14px}
.site-foot .foot-co-name{font-weight:700;color:var(--hmb-text-2)}
.foot-nav{padding-top:10px}
.foot-nav ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px;margin:0;padding:0;list-style:none}
.site-foot .foot-nav a{display:inline-block;padding:6px 0;font-size:14px;line-height:1.6}
.foot-svc{padding-bottom:28px}
.site-foot .website_link{margin:0;padding-top:22px;border-top:1px solid var(--hmb-line);font-size:13px;line-height:1.9}
.site-foot .website_link .service_tit{display:inline;margin:0}
.site-foot .website_link .service_tit span{display:inline-block;margin:0 16px 0 0;font-size:13px;font-weight:700;color:var(--hmb-text-2);line-height:1.9;text-align:left}
.site-foot .website_link .service_list{display:inline;margin:0;padding:0;width:auto}
/* 生成されるHTMLは li の間に空白が無い＝inline だと折り返す場所が無く1行のまま横にはみ出す（2026-11-10 375pxで976px実測）。inline-block にして項目ごとに折り返す */
.site-foot .website_link .service_list li{display:inline-block;margin:0;padding:0;border:0;white-space:nowrap}
/* 区切りは項目の後ろに付ける（前に付けると、折り返した行の頭に「|」が来る） */
.site-foot .website_link .service_list li:not(:last-child)::after{content:"|";margin:0 12px;color:#cfd6e4}
.site-foot .website_link .service_list a{display:inline;color:var(--hmb-text-2);line-height:1.9}
.foot-bottom{background:var(--hmb-bg-2);padding:14px 0}
.foot-bottom .foot-wrap{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap}
.site-foot .foot-bottom a,.foot-bottom small{font-size:12px;color:var(--hmb-text-3)}
@media (max-width:767px){
  .foot-main{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:36px}
  .foot-nav{padding-top:0}
  .foot-nav ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .site-foot .foot-nav a{padding:8px 0}
  .foot-bottom .foot-wrap{flex-direction:column;justify-content:center;text-align:center}
}

/* お問い合わせフォームの送信ボタン（色はHTMLに直書き＝ここでは状態の色だけ足す） */
#gmform button[type=submit]:hover{background:var(--hmb-cta-hover) !important}
#gmform button[type=submit]:active{background:var(--hmb-cta-active) !important}
#gmform button[type=submit]:focus-visible{outline:2px solid var(--hmb-blue);outline-offset:3px}

/* 押せる高さを24px以上に（WCAG 2.5.8。2026-11-10 /qc で 19〜23px を実測）。見た目の行の位置は変えない */
.site-foot .foot-wrap address a,
.site-foot .website_link .service_list a,
.site-foot .foot-bottom a{display:inline-block;padding:3px 0;line-height:1.6}

/* トップのFAQ（index.css の .faq-item）も同じカードにそろえる。
   Wordの数値（余白32px・印の幅27px・本文までの間隔16px）はこの部品が元になっているので、変えるのは
   角丸4px・枠1px（開いても枠を太くしない）・Q./A. 20px/700・A. を青（オレンジはCTA専用＝飾りに使わない）の4点だけ */
.topPage .faq-item__qa-wrapper,.topPage .faq-item__qa-wrapper--open{border:1px solid var(--hmb-line);border-radius:4px}
.topPage .faq-item__question:focus-visible{border-radius:4px}
.topPage .faq-item__q,.topPage .faq-item__a{font-size:20px;font-weight:700;width:27px;color:var(--hmb-blue);line-height:26px;font-family:"Helvetica Neue",Arial,sans-serif}
.topPage .faq-item__a{line-height:29px}
.topPage .faq-item__a-text{margin-left:16px}
.topPage .faq-item__divider{height:1px;background:var(--hmb-line)}
@media (max-width:767px){
  .topPage .faq-item__q,.topPage .faq-item__a{font-size:18px;width:24px}
  .topPage .faq-item__q-text,.topPage .faq-item__a-text{margin-left:12px}
}

/* 記事内フォーム（会員限定記事のメール登録）の送信ボタン：元の色は青（#004da0）。オレンジのホバーを当てない。
   横のロボット判定欄（Turnstile）の高さに引き伸ばされて78pxになっていたので、高さを60pxに固定（2026-11-10 /dc で発見） */
.gate-buttons .gate-submit{align-self:center;height:60px;font-weight:700}
.gate-submit:hover{background-color:#003d7f !important}
.gate-submit:active{background-color:#003670 !important}