/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/



@media (max-width: 1023px){


}



/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

.nojq.mobile {
  display: none !important;
}



/* =========================================
   NEWSのタイトル文字
   ========================================= */


  .info-list-item-content-link {
  font-size: 11px;
}

/* =========================================
   ヘッダーとFVの重なり調整
   ========================================= */
/* まず上の余計なマージンを消す */
html {
  margin-top: 0 !important;
}

/* ヘッダー高さ */
:root {
  --header-h: 16.28vw;
}

@media (min-width: 430px) {
  :root {
    --header-h: 70px;
  }
}

/* ヘッダーの高さを統一 */
#header {
  height: var(--header-h) !important;
}

/* コンテンツ全体をヘッダー分だけ下げる */

#content.content.cf {
  padding-top: var(--header-h) !important;
}

body.admin-bar {
  margin-top: 0 !important;
}

/* =========================================
   SPのみ：フッターメニュー帯（ベージュ＋細い＞）
   ========================================= */


    /* 帯が「半分」になる原因（fnm-text-width等）の幅制限を解除 */
  #footer .footer-bottom,
  #footer .footer-bottom-content,
  #footer .footer-bottom-logo,
  #footer #navi-footer,
  #footer .navi-footer-in,
  #footer .fnm-text-width{
    width: 100% !important;
    max-width: none !important;
  }

  /* 余白リセット（必要最小限） */
  #footer,
  #footer .footer-in,
  #footer .footer-in-wrap,
  #footer .footer-bottom{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ul / li を縦並び・フル幅に */
  #menu-footer{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
  }
  #menu-footer > li{
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border-top: 1px solid rgba(255,255,255,.85) !important;
  }
  #menu-footer > li:last-child{
    border-bottom: 1px solid rgba(255,255,255,.85) !important;
  }

  /* リンク本体（帯） */
  #menu-footer > li > a{
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    box-sizing: border-box !important;

    background: #c6b6a6 !important;
    color: #fff !important;
    text-decoration: none !important;

    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;

    /* 縦幅：ここで調整（切れるなら少し増やす） */
    padding: 5.5px 13px 5.5px 43px !important; /* 右は矢印スペース分広め */
    overflow: visible !important;            /* 矢印が切れない保険 */
  }



  /* タップ時（任意） */
  #menu-footer > li > a:active{
    filter: brightness(.95);
  }


/* =========================================
   ヘッダー
   ========================================= */

  
   /*タブり削除*/
   .header-container-in.hlt-top-menu.hlt-tm-right.wrap {
    display: none !important;
   }


  /* ヘッダーの中身を横並びにする */
body #header-in{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* ロゴを左に固定（中央寄せを解除） */
body #header-in .logo-header,
body #header-in .logo{
  margin: 0 !important;
  text-align: left !important;
  flex: 0 1 auto !important;
  display: block !important;
}

/* ロゴのリンク内も詰めておく */
body #header-in .logo-header a{
  display: flex !important;
  align-items: center !important;
}

/* 右側：ハンバーガーを右へ（Cocoonのボタン候補をまとめて指定） */
body #header-in .navi-open-button,
body #header-in .menu-button,
body #header-in .mobile-menu-button{
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

/* ---- 保険：ボタンがヘッダー外に居る場合でも右上に固定する ---- */
body .header-container-in{
  position: relative !important;
}

body .header-container-in .navi-open-button,
body .header-container-in .menu-button,
body .header-container-in .mobile-menu-button{
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1000 !important;
}

/* ボタンとロゴが被らないように右側の余白を確保 */
body #header-in{
  padding-right: 64px !important;
  box-sizing: border-box !important;
}

/* モバイル元のロゴを消す */
.header-container-in.hlt-top-menu.hlt-tm-small.wrap{
  display: none;
}

.header-container-in.hlt-top-menu.hlt-tm-right.wrap{
  display: none !important;
}



/* ===============================
   ロゴの位置調整（モバイル固定バー）
=============================== */

/* ロゴ＋ハンバーガーが入ってる帯（固定のやつ） */
ul.mobile-header-menu-buttons.mobile-menu-buttons{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  /* 左右の余白（ここが“紫の部分”の正体になりがち） */
  padding-left: 8px !important;
  padding-right: 8px !important;

  width: 100% !important;
  box-sizing: border-box !important;
}

/* 左：ロゴボタン */
  ul.mobile-header-menu-buttons .logo-menu-button{
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* ロゴを「もう少し左」＝左余白を削る */
ul.mobile-header-menu-buttons .logo-menu-button .menu-button-in{
  padding-left: 0 !important;
}

/* 右：ハンバーガーボタン */
ul.mobile-header-menu-buttons .navi-menu-button{
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

/* 右端に寄せたいなら右余白も削る */
ul.mobile-header-menu-buttons .navi-menu-button .menu-button-in{
  padding-right: 0 !important;
}

/* 上部固定のメニューバー自体を画面幅いっぱいに */
ul.mobile-header-menu-buttons.mobile-header-menu-buttons.mobile-menu-buttons{
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* 中身を左右に振り分け（ロゴ左／メニュー右） */
ul.mobile-header-menu-buttons.mobile-header-menu-buttons.mobile-menu-buttons{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding-top: 0px !important;   /* 紫の余白の原因になりやすい */
  padding-bottom: 0px !important;
  padding-right: 0px !important;

  min-height: 50px !important;
}

/* width:70px を殺して、狭くなるのを防ぐ */
ul.mobile-header-menu-buttons .menu-button{
  width: auto !important;
}

/* ロゴは左に寄せて、クリックしやすく */
ul.mobile-header-menu-buttons li.logo-menu-button{
  margin: 0 !important;
  flex: 0 0 auto !important;
}

ul.mobile-header-menu-buttons li.logo-menu-button a{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* ハンバーガー（メニューボタン）を右に */
ul.mobile-header-menu-buttons li.navi-menu-button{
  margin-left: auto !important;
  flex: 0 0 auto !important;
}



/* ===============================
   モバイル：ハンバーガーメニューを大きく＋背景グレー
=============================== */

/* 右側のメニューボタン全体（li） */
ul.mobile-header-menu-buttons li.navi-menu-button{
  margin-left: auto !important; /* 右寄せ維持 */
}

/* FontAwesomeの三本線は消す */
ul.mobile-header-menu-buttons li.navi-menu-button .navi-menu-icon{
  display: none !important;
}

/* ラベル（ボタン本体）を基準にする */
ul.mobile-header-menu-buttons li.navi-menu-button > label{
  position: relative !important;
  justify-content: center !important;
  gap: 0 !important;
  padding-bottom: 20px !important; /* 下に文字の居場所 */
}

/* 右端の余白（親側）を潰す */
ul.mobile-header-menu-buttons{
  padding-right: 0 !important;
  margin-right: 0 !important;
}

ul.mobile-header-menu-buttons > li.navi-menu-button{
  margin-right: 0 !important;
}

/* ボタン本体 */
ul.mobile-header-menu-buttons li.navi-menu-button > label#navi-menu-open {
  width: 16.28vw !important;
  height: 16.28vw !important;
  max-width: 70px !important;
  max-height: 70px !important;

  background: #e6e6e6 !important;
  border-radius: 0px !important;

  position: relative !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  display: block !important;
}



/* ハンバーガー3本線（デザイン再現） */
ul.mobile-header-menu-buttons li.navi-menu-button > label#navi-menu-open::before{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 38% !important;
  transform: translate(-50%, -75%) !important;

  width: 49px !important;      /* 横幅（調整OK） */
  height: 1.5px !important;      /* 線の太さ */
  background: #333 !important;

  /* 上下に2本追加 */
  box-shadow:
    0 -10px 0 #333,
    0 10px 0 #333 !important;
}



/* 「Site Map」文字：文字だけを下げる */
ul.mobile-header-menu-buttons li.navi-menu-button
> label#navi-menu-open
.navi-menu-caption{
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 12% !important;

  /* ←ここを修正 */
  transform: translate(-50%, -5px) !important;

  font-size: 11px !important;
  line-height: 1 !important;
  color: #333 !important;

  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

 /* ハンバーガーメニュー本体を広げる */
.menu-item {
  width: 90vw !important;
  max-width: none !important;
}

/* =========================================
   ヘッダー高さ（430px基準 → 70px）
   ========================================= */

#header {
  height: 16.28vw !important;
  max-height: 70px !important;
}

/* 中身も合わせる（超重要） */
#header .header-container,
#header .mobile-header-menu-buttons {
  height: 100% !important;
}

/* =========================================================
   Cocoon SP：ハンバーガーメニューを
   「左：ベージュ面」＋「右：暗い帯（×で閉じる）」にする
   対象DOM：#navi-menu-input / #navi-menu-open / #navi-menu-close / #navi-menu-content
   ========================================================= */


  /* 開いている間は「開くボタン」を消す（ズレ根絶＆挙動が自然） */
  #navi-menu-input:checked ~ #navi-menu-open{
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ===== オーバーレイ（メニュー外側） ===== */
  /* display-none を強制解除（これ超重要） */
  label#navi-menu-close{
    display: block !important;
  }

  /* ナビボタンの位置（これを消すとデフォルトの位置がずれます） */
  #navi-menu-close{
  
       /* width/height指定はむしろ消す（親幅に引っ張られる事故を避ける） */
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }



  /* =========================================
     オーバーレイ
     ========================================= */

 /* 通常時：存在ごと消す（これが重要） */
  label#navi-menu-close{
    display: none !important;
  }

  /* OPEN中だけ表示して全画面にする */
  #navi-menu-input:checked ~ label#navi-menu-close{
    display: block !important;

    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    background: rgba(0,0,0,.35) !important; /* 好みで 0.25〜0.45 */

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;

    opacity: 1 !important;
    pointer-events: auto !important;

    z-index: 999997 !important; /* メニューより下 */
    cursor: pointer !important;
  }

  /* ×は見た目だけ（クリックはラベル全体） */
  #navi-menu-input:checked ~ label#navi-menu-close::before{
    content: "×" !important;
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    font-size: 40px !important;
    line-height: 1 !important;
    color: #fff !important;
    opacity: .95 !important;
    pointer-events: none !important;
    z-index: 999999 !important;
  }

  /* メニュー本体はオーバーレイより上 */
  #navi-menu-content{
    position: fixed !important;
    z-index: 999998 !important;
  }


/* =========================================================
   Cocoon デフォルトの黒いクローズボタンを非表示
   ========================================================= */
/* クローズボタン本体 */
  .navi-menu-close-button{
    display: none !important;
  }

  /* 中の FontAwesome（念のため） */
  .navi-menu-close-button .fa,
  .navi-menu-close-button .fa-close{
    display: none !important;
  }

  /* =========================================================
   ナビ：文字サイズ最終調整
   ========================================================= */
  /* -------------------------------
     通常メニュー（例：お知らせ一覧 など）
  -------------------------------- */
  #navi-menu-content .menu-drawer > li > a{
    font-size: 13px !important;
    font-weight: 400 !important;
  }

  /* -------------------------------
     Recruit バナー
  -------------------------------- */

  /* Recruit（英字・見出し） */
  #navi-menu-content .menu-recruit-title{
    font-size: 16px !important;
    font-weight: 600 !important; /* 太め */
    line-height: 1.5 !important;
    letter-spacing: 0.5px;
  }

  /* 採用情報（サブテキスト） */
  #navi-menu-content .menu-recruit-sub{
    font-size: 12px !important;
    font-weight: 400 !important;
    opacity: 0.85 !important;
  }

  /* 私たちと一緒に働きませんか */
  #navi-menu-content .menu-recruit-right{
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px;
    text-align: right !important;
    margin-left: auto !important;
  }

  /* リクルートバナー全体はそのまま flex */
#navi-menu-content .menu-recruit-banner{
  align-items: center !important;
}

/* 左：Recruit / 採用情報 を中央寄せ */
#navi-menu-content .menu-recruit-left{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* 右：メッセージも中央寄せ */
#navi-menu-content .menu-recruit-right{
  text-align: right !important;
}





  /* =====  左パネル（メニュー本体） ===== */
  #navi-menu-content{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;

    width: 85vw !important;
    max-width: 460px !important;

    background: #c8b7a6 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* “きっちり-100%”でスッと消える（-110%/-105%のガタつき防止） */
    transform: translateX(-100%) !important;

    /* スライドは少し気持ちよく（自然なイージング） */
    transition: transform .30s cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform !important;

    /* オーバーレイより上 */
    z-index: 999998 !important;

    box-shadow: 0 0 24px rgba(0,0,0,.22) !important;
    padding-top: 22px !important;
  }

  /* checkedで左パネルを表示させる */
  #navi-menu-input:checked ~ #navi-menu-content{
    transform: translateX(0) !important;
  }






/* =========================================================
   SP ハンバーガーメニュー：完成デザイン寄せ（中身の見た目）
   対象：#navi-menu-content（左ベージュ面）内
   ========================================================= */

  /* 0) どこかで当たってる「幅10px」などを強制解除（縦になる原因） */
  #navi-menu-content .menu-drawer,
  #navi-menu-content .menu-drawer .menu-item{
    width: auto !important;
    max-width: none !important;
  }
  #navi-menu-content .menu-drawer .menu-item{
    display: block !important;
  }

  /* 1) 左パネル全体の余白（上に少し余白を作って“完成”に寄せる） */
  #navi-menu-content{
    padding-top: 22px !important;
  }

  /* 2) メニューULの余白リセット */
  #navi-menu-content .menu-drawer{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) メニュー1行（リンク）を“横並び＋右矢印”の行デザインに */
  #navi-menu-content .menu-drawer > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 18px 18px !important;
    margin: 0 !important;

    color: rgba(255,255,255,.95) !important;
    text-decoration: none !important;
    background: transparent !important;

    border-bottom: 1px solid rgba(255,255,255,.55) !important;
    box-sizing: border-box !important;
  }

  /* 右の「＞」 */
  #navi-menu-content .menu-drawer > li > a::after{
    content: "〉" !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: rgba(255,255,255,.85) !important;
    margin-left: 12px !important;
    flex: 0 0 auto !important;
  }

  /* 4) テキスト（日本語＋英語）を“左側に寄せて2列っぽく” */
  /* もし a の中がテキスト直書きだけでも崩れないようにする */
  #navi-menu-content .menu-drawer > li > a{
    gap: 16px !important;
  }
  #navi-menu-content .menu-drawer > li > a span{
    color: inherit !important;
  }

  /* 5) ホバー/タップ時の変化（完成の雰囲気を崩さない） */
  #navi-menu-content .menu-drawer > li > a:hover,
  #navi-menu-content .menu-drawer > li > a:active{
    background: rgba(255,255,255,.06) !important;
  }

  /* 6) リクルートバナー位置を“メニューの下に余白つき”で固定 */
  #navi-menu-content .menu-recruit-banner{
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;

    margin: 50px 15px 24px !important;
    padding: 23px 14px !important;

    background: #f3efe9 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    color: #111 !important;
    box-sizing: border-box !important;
  }


  /* 7) “余計な縦書き/折り返し”を抑制 */
  #navi-menu-content,
  #navi-menu-content *{
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: normal !important;
  }






  





/* =========================================================
   サイト全体：リンクを「青＋下線＋hoverで色変化」しない
   ※必要なら .entry-content a だけ等に絞れます
   ========================================================= */
a,
a:visited,
a:hover,
a:active{
  color: inherit !important;
  text-decoration: none !important;
}





/* =========================================
   フッター：リクルートボタン（追従）
   #menu-footer-recruit（SP専用HTML前提）
   ========================================= */

/* 1) 固定バー本体（台座） */
ul#menu-footer-recruit.mobile-footer-menu-buttons.mobile-menu-buttons{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;

  /* 台座：余白・並び */
  padding: 32px 14px calc(14px + env(safe-area-inset-bottom)) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;

  /* 台座：見た目 */
  background: rgba(255,255,255,0.9) !important;
  box-shadow: 0 -12px 28px rgba(0,0,0,.12) !important;
  backdrop-filter: none !important;

  list-style: none !important;
  margin: 0 !important;
}

/* 2) 上のピンク文言 */
ul#menu-footer-recruit.mobile-footer-menu-buttons.mobile-menu-buttons::before{
  content: "＼ 私たちと一緒に働きませんか？ ／";
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  white-space: nowrap;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #333;
  line-height: 1.5;
  pointer-events: none;
}

/* 3) 各ボタン（li） */
ul#menu-footer-recruit li.navi-menu-button.menu-button{
  flex: 1 1 0 !important;
  max-width: 260px !important;
  margin: 0 !important;
}

/* 4) ボタン本体（a） */
ul#menu-footer-recruit li.navi-menu-button.menu-button > a.menu-button-in{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 150%;
  max-width: 250px;  /* ← 上限 */
  aspect-ratio: 185 / 40;
  border-radius: 999px !important;
  padding: 0 60px 0 18px !important; /* 右側アイコン分 */
  text-decoration: none !important;


  letter-spacing: .02em !important;
  color: #222 !important;

  box-shadow: 0 14px 22px rgba(0,0,0,.14) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}

/*ボタンのフォントサイズ*/
.custom-menu-caption.menu-caption {
   font-size: 13px !important;
   font-weight:400;
}

/* 押した時の“押せる感” */
ul#menu-footer-recruit li.navi-menu-button.menu-button > a.menu-button-in:active{
  transform: translateY(1px);
  box-shadow: 0 10px 16px rgba(0,0,0,.12) !important;
}

/* 5) 既存アイコン（星など）を消す */
ul#menu-footer-recruit .custom-menu-icon,
ul#menu-footer-recruit .custom-menu-icon .fa{
  display: none !important;
}

/* 6) キャプション文字（中央＋ほんの少し上） */
ul#menu-footer-recruit .custom-menu-caption.menu-caption{
  display: inline-block !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  transform: translateY(1px);
  transform: translateX(5px);
}




/* =========================
   左：応募フォーム（ピンク）
   ========================= */
ul#menu-footer-recruit li.navi-menu-button.menu-button:nth-child(1) > a.menu-button-in{
  background: #F4B9B9 !important;
}

/* 封筒：SVG画像（URL指定） */
ul#menu-footer-recruit li.navi-menu-button.menu-button:nth-child(1) > a.menu-button-in::after{
  content: "" !important;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 25px;

  background: no-repeat center / contain
    url("https://doux-inc.co.jp/wp/wp-content/uploads/手紙アイコン.svg");
}


/* =========================
   右：LINEで応募（グリーン）
   ========================= */
ul#menu-footer-recruit li.navi-menu-button.menu-button:nth-child(2) > a.menu-button-in{
  background: #B9D6C2 !important;
  color: #0f2a16 !important;
}

/* LINE：SVG画像（白角丸＋影） */
ul#menu-footer-recruit li.navi-menu-button.menu-button:nth-child(2) > a.menu-button-in::after{
  content: "" !important;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);

  width: 15%;
  height: 68%;
  border-radius: 5px;
  background-color: #fff;

  box-shadow: 0 10px 16px rgba(0,0,0,.12);

  background-image: url("https://doux-inc.co.jp/wp/wp-content/uploads/アートボード-1.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 130% 130%;
}



/* =========================================================
   フッター追従（#menu-footer-recruit）
   スクロールで出し入れ：下で隠す／上で出す
   ========================================================= */

/* アニメーション */
ul#menu-footer-recruit.mobile-footer-menu-buttons.mobile-menu-buttons{
  transition: transform .28s ease, opacity .28s ease !important;
  will-change: transform, opacity;
}

/* 隠す（下にスライド） */
body.footerbar-hide ul#menu-footer-recruit.mobile-footer-menu-buttons.mobile-menu-buttons{
  transform: translateY(120%) !important;
  opacity: 0 !important;
}



/* =========================================
   Cocoon自動付与の下マージンを完全に消す
  （フッター追従ボタン対策）
   ========================================= */

/* メインコンテンツ周り */
#content,
#content-in,
#main,
.entry-content,
.article,
.article-content,
.main,
.content{
  margin-bottom: 0 !important;
}

/* モバイル固定ボタン用の自動マージンを無効化 */
.mblt-header-and-footer-mobile-buttons,
.mobile-footer-menu-buttons{
  margin-bottom: 0 !important;
}



/* 通常時：固定フッター分の余白を確保 */
body.has-footerbar{
  padding-bottom: calc(var(--footerbar-h, 96px) + env(safe-area-inset-bottom)) !important;
}









/* =========================================
   コピーライト帯：差し替え版（フッターメニューは触らない）
   ========================================= */

/* まず「元のコピーライト」だけ消す（フッターメニューは消さない） */
#footer .source-org.copyright{
  display: none !important;
}

/* もし以前に追加した「右側の小さい四角（↑）」が残ってるなら消す */
#footer [aria-label="ページ上部へ戻る"]{
  display: none !important;
}

/* バー全体（文字側はグレー） */
#copyrightBar.copyright-bar{
  position: relative !important;
  width: 100% !important;
  height: 30px !important;

  /* ← ここが「文字部分の背景」 */
  background: #f6f6f6 !important; /* お好みで #f2f2f2 など */

/*位置調整*/
  display:flex;
  align-items:center;
  justify-content:center;
  height:30px !important;


  margin: 0 !important;
  text-align: center !important;
  font-size: 9px !important;
 vertical-align: center !important;
  color: #666 !important;
  box-sizing: border-box !important;
}

/* テキスト */
#copyrightBar .copyright-bar__text{
  margin: 0 !important;
  padding: 0 !important;
}

/* 右端：TOPへ戻るボタン（白地の縦パーツ） */
#copyrightBar .copyright-bar__top{
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;

  /* バーの高さに合わせて縦いっぱい */
  height: 100% !important;
  width: 30px !important;
  min-height: 30px !important;

  background: #fff !important;
  border: 0 !important;
  border-left: 1px solid #e6e6e6 !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

/* ボタン文字（↑）は使わない。見た目を矢印にする */
#copyrightBar .copyright-bar__top{
  color: transparent !important;
  font-size: 0 !important;
}

/* ここが「三角形っぽい矢印」本体（山形/chevron up） */
#copyrightBar .copyright-bar__top::before{
  content: "" !important;
  width: 10px;
  height: 10px;

  /* 2辺で山形を作る（Illustratorの「三角っぽい」感じ） */
  border-top: 0.5px solid #666;
  border-left: 0.5px solid #666;

  transform: rotate(45deg); /* 上向きの山形 */
  display: block;
}

/* 押した時のフィードバック（任意） */
#copyrightBar .copyright-bar__top:active{
  opacity: .65 !important;
}



/* スクロール無しページだけ：追従を解除して通常表示にする */
#menu-footer-recruit.footerbar-static{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 12px 0 0 !important;
  z-index: auto !important;
}


/* 追従CTAの高さ分だけ常に下余白を確保（被り防止） */
body.has-footerbar{
  padding-bottom: calc(var(--footerbar-h, 96px) + env(safe-area-inset-bottom)) !important;
}

/* 最下部：余白を「フッター実寸」と同じに固定 */
body.has-footerbar.footerbar-at-bottom {
  padding-bottom: var(--footerbar-h) !important;
}



}



/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/



}

@media (max-width: 834px){
  body.has-footerbar{
    padding-bottom: calc(var(--footerbar-h, 96px) + env(safe-area-inset-bottom)) !important;
  }
}



@media screen and (min-width: 1024px){
  /* ここにPCだけのCSSを書く */
  .copyright-bar {
  display: none;
}

/* =========================
   記事ページ PC幅 900px
   ========================= */


  body.single #main.main{
    max-width: 900px;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important; /* 念のため */
  }

/* =========================
   カテゴリーページ（archive）PC：幅900 & 中央寄せ
   ========================= */

  body.archive #main.main,
  body.category #main.main{
    max-width: 900px;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  /* フッター コピーライト全体を白に */
#footer .source-org,
#footer .source-org *{
  color: #fff !important;
}

}




@media screen and (min-width: 835px){

  /* 外側ラッパーを透明化 */
  .go-to-top{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 実際のボタン本体 */
  .go-to-top-button{
    background: #EFEDE9 !important;
    color: #C7B6A6 !important;


    width: 48px !important;
    height: 48px !important;

    border-radius: 50% !important;
    border: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: 0 6px 16px rgba(0,0,0,.15) !important;
  }

  /* アイコン */
  .go-to-top-button i,
  .go-to-top-button svg{
    color: #fff !important;
  }

  /* フッター全体の文字色を白に */
#footer,
#footer a,
#footer .navi-footer,
#footer .footer-bottom-content,
#footer .source-org.copyright{
  color: #fff !important;
}

/* リンクのホバー時も白のまま */
#footer a:hover{
  color: #fff !important;
  opacity: .8; /* お好みで */
}

}