/*
 * marketer-chrome.css
 * マーケターTOP(layouts/marketer.blade.php)のヘッダ/フッタ意匠を、
 * cojpクローン各ページ(cojp/layouts/app.blade.php 配下)へ適用するための「スコープ済み」スタイル。
 *
 * 方針:
 *  - /marketer/assets/css/style.css は冒頭にグローバルリセット(* / body / img / a / ul / p / button)を持つため、
 *    クローン本文(cojp CSS前提)に読み込むと崩れる。よって本ファイルにはヘッダ/フッタ関連のみを抽出し、
 *    リセットは .site-header / .site-footer 配下にスコープしてある(本文非干渉)。
 *  - :root のカスタムプロパティは値の宣言のみで描画へ影響しないためグローバルで可。
 *  - .pc-only/.sp-only はマーケター固有クラス(cojpは disp_pc/disp_sp)で非干渉。
 *  - TOPのヘッダ/フッタ意匠を変更した場合は本ファイルも追従が必要(style.css からの手動抽出)。
 */

:root{--color-primary:#ff4e89;--color-primary-hover:#d94274;--color-secondary:#0160fa;--color-secondary-hover:#0152d5;--color-navy:#003e71;--color-text:#090b34;--color-text-body:#333;--color-text-light:#606060;--color-bg:#fff;--color-bg-gray:#f8f8f8;--color-border:#cecece;--color-footer-bg:#000;--color-footer-text:#ccd0df;--font-family:"Noto Sans JP", sans-serif;--font-size-base:16px;--font-size-sm:14px;--font-size-xs:12px;--max-width:1200px;--padding-x:120px;--header-height:119px}

/* 表示切替(マーケター固有) */
.pc-only{display:inline}
.sp-only{display:none}

/* スコープ済みリセット(chrome内のみ・cojp本文へは波及させない) */
.site-header *,.site-header *::before,.site-header *::after,
.site-footer *,.site-footer *::before,.site-footer *::after{box-sizing:border-box}
.site-header a,.site-footer a{color:inherit;text-decoration:none}
.site-header ul,.site-footer ul{margin:0;padding:0;list-style:none}
.site-header img,.site-footer img{max-width:100%;height:auto;display:block}
.site-header button{cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit}

/* ===== Header ===== */
.site-header{z-index:100;background-color:var(--color-bg);border-bottom:1px solid var(--color-border);height:var(--header-height);position:sticky;top:0}
.site-header__inner{max-width:calc(var(--max-width) + var(--padding-x) * 2);padding:0 var(--padding-x);justify-content:space-between;align-items:center;height:100%;margin:0 auto;display:flex}
.site-header__logo{align-items:center;display:flex}
.site-header__logo-img{width:65px;height:auto;display:block}
.site-header__nav{flex-direction:column;align-items:flex-end;gap:12px;display:flex}
.site-header__top-row{align-items:center;gap:10px;display:flex}
.site-header__corporate-btn{color:#fff;white-space:nowrap;background:#000;border-radius:4px;align-items:center;padding:4px 10px;font-size:12px;line-height:1.6;display:inline-flex}
.site-header__btn-row{align-items:center;gap:16px;display:flex}
.site-header__corporate-btn-sp{display:none}
.site-header__btn{font-size:var(--font-size-sm);color:#fff;white-space:nowrap;border-radius:4px;align-items:center;gap:6px;padding:14px 16px;font-weight:700;display:inline-flex}
.site-header__btn-icon{flex-shrink:0;width:18px;height:18px}
.site-header__btn--search{background-color:var(--color-primary);background-image:linear-gradient(135deg,var(--color-primary-hover) 50%,transparent 50%);background-position:100%;background-size:300%;transition:background-position .6s ease-in-out}
.site-header__btn--register{background-color:var(--color-secondary);background-image:linear-gradient(135deg,var(--color-secondary-hover) 50%,transparent 50%);background-position:100%;background-size:300%;transition:background-position .6s ease-in-out}
.site-header__btn--search:hover,.site-header__btn--register:hover{background-position:0}

/* ===== Footer ===== */
.site-footer{background-color:var(--color-footer-bg);color:#fff;padding-top:48px}
.site-footer__inner{max-width:calc(var(--max-width) + var(--padding-x) * 2);padding:0 var(--padding-x);flex-direction:column;gap:35px;margin:0 auto;display:flex}
.site-footer__top{justify-content:space-between;align-items:flex-start;display:flex}
.site-footer__top-left{flex-direction:column;gap:16px;display:flex}
.site-footer__logo{display:block}
.site-footer__logo-img{background-color:#fff;width:180px;height:39px;display:block;-webkit-mask-image:url(../assets/images/logo-footer-mask.svg);mask-image:url(../assets/images/logo-footer-mask.svg);-webkit-mask-size:180px 39px;mask-size:180px 39px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.site-footer__breadcrumb{align-items:center;gap:24px;display:flex}
.site-footer__breadcrumb-link{font-size:var(--font-size-xs);color:#fff;align-items:center;gap:4px;line-height:1;transition:opacity .2s;display:inline-flex}
.site-footer__breadcrumb-link:hover{opacity:.75}
.site-footer__breadcrumb-link img{flex-shrink:0;width:12px;height:12px}
.site-footer__badges{align-items:center;gap:24px;display:flex}
.site-footer__badge{background-color:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:96px;height:96px;padding:8px;display:flex;overflow:hidden}
.site-footer__badge img{object-fit:contain;width:100%;height:100%}
.site-footer__copyright{font-size:var(--font-size-xs);justify-content:space-between;align-items:center;padding:16px 0 24px;display:flex}
.site-footer__copyright-links{flex-shrink:0;gap:20px;display:flex}
.site-footer__copyright-links a{color:#fff;transition:opacity .2s}
.site-footer__copyright-links a:hover{opacity:.75}
.site-footer__copyright-center{font-size:var(--font-size-xs);color:#fff;white-space:nowrap;align-items:center;gap:8px;display:flex}
.site-footer__copyright-divider{opacity:.5}

/* ===== Responsive ===== */
@media (max-width:1240px){
  .site-footer__copyright{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:20px}
  .site-footer__copyright-center{white-space:normal;flex-direction:column;align-items:flex-start;gap:4px}
  .site-footer__copyright-divider{display:none}
}
@media (max-width:768px){
  :root{--header-height:64px;--padding-x:20px}
  .pc-only{display:none}
  .sp-only{display:inline}
  .site-header__inner{padding:0 16px}
  .site-header__logo-img{width:38px}
  .site-header__btn{font-size:var(--font-size-xs);gap:4px;padding:8px}
  .site-header__btn-icon{width:16px;height:16px}
  .site-header__nav{flex-direction:row;align-items:center;gap:8px}
  .site-header__top-row{display:none}
  .site-header__btn-row{gap:8px}
  .site-header__corporate-btn-sp{color:#fff;text-align:center;background:#000;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:10px;font-weight:700;line-height:1.2;display:inline-flex}
  .site-footer__inner{padding:0 var(--padding-x);gap:24px}
  .site-footer__top{flex-direction:column;gap:20px}
  .site-footer__badges{gap:16px}
  .site-footer__badge{width:72px;height:72px}
}

/* =====================================================================
   cojp 本文CSS との競合ガード
   クローンページは cojp の style.css（<head>の後、実行時に document.write で
   後読み）も読み込むため、その a / body 等のグローバル規則がヘッダ/フッタの
   文字色・サイズ・装飾へ波及する（後読み＝カスケードで後勝ち、かつ a:link 等は
   .site-footer__x(0,1,0) より詳細度が高い）。
   そこでブロッククラスを前置して詳細度を (0,2,x) まで上げ、TOP と同じ意匠
   （白文字・指定フォントサイズ・下線なし）に固定する。 */
.site-header, .site-header a, .site-header span, .site-header button,
.site-footer, .site-footer a, .site-footer span { font-family: var(--font-family); }

/* ヘッダ：白文字ボタン（色・下線は!importantで後読みCSS/!importantにも確実勝ち、サイズは詳細度で固定） */
.site-header a.site-header__corporate-btn    { color:#fff!important; text-decoration:none!important; font-size:12px; line-height:1.6; }
.site-header a.site-header__corporate-btn-sp { color:#fff!important; text-decoration:none!important; font-size:10px; }
.site-header a.site-header__btn               { color:#fff!important; text-decoration:none!important; font-size:var(--font-size-sm); font-weight:700; }

/* フッタ：白文字・指定サイズ・下線なし */
.site-footer.site-footer { color:#fff!important; }
.site-footer a.site-footer__breadcrumb-link { color:#fff!important; text-decoration:none!important; font-size:var(--font-size-xs); }
.site-footer .site-footer__copyright,
.site-footer .site-footer__copyright-center,
.site-footer .site-footer__copyright-center span { color:#fff!important; font-size:var(--font-size-xs); }
.site-footer .site-footer__copyright-links a { color:#fff!important; text-decoration:none!important; font-size:var(--font-size-xs); }

/* モバイル：ヘッダボタンの文字サイズ（ガードの詳細度に合わせ再指定し、SP時はxsへ） */
@media (max-width:768px){
  .site-header a.site-header__btn { font-size:var(--font-size-xs); }
}