/* xCARE コーポレートサイト 共通スタイル

   本文の見た目は各ページの HTML に直接書かれている。
   ここに置くのは「全ページ共通のこと」と「画面幅が狭いときの調整」だけ。

   r- で始まるクラスはビルド時に自動で付く目印。
   何を意味するかは build.py と同じ階層の export 手順を参照。
     r-pad   左右に 64px の余白を持つ帯
     r-gcol  固定幅 + 可変の2カラム
     r-g2/3/4/6  等分のグリッド
     r-fs-xl/l/m 大きい文字
     r-frow  横並びで間隔の広い列
     r-fixw  幅を px で決めている画像枠
*/

:root{
  --navy:#0A3A66; --ink:#082746; --mid:#146BB8;
  --txt:#333333; --mute:#8B9399; --line:#E0E7EC; --light:#F5F7FA;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--txt);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-feature-settings:"palt" 1; line-height:1.8;
  overflow-x:hidden;
}
img{max-width:100%; height:auto}
a{color:inherit; transition:opacity .15s ease, background-color .15s ease, border-color .15s ease}
/* 透過を強くすると下地が透けるので、ごく浅くする */
a:hover{opacity:.88}
/* 面を持つもの（ボタン・カード・写真）は透過ではなく明るさで反応させる */
a:has(> img):hover,
a[style*="background"]:hover,
a[style*="border: 1px solid"]:hover{opacity:1; filter:brightness(1.08)}
a[style*="background: #ffffff"]:hover{opacity:1; filter:brightness(.97)}
/* 一覧の行はうっすら背景を敷く */
a[style*="grid-template-columns: 152px"]:hover{opacity:1; background:#F5F7FA}
body > div{margin-inline:auto}
.count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  /* 動きを止め、最後の状態を見せる。
     うっすら敷いてある方眼まで濃くならないよう、動く要素だけを対象にする */
  .dcfig *{animation:none !important}
  .dcfig [class$="f"], .dcfig [class$="p"]{opacity:1 !important}
  .dcfig [class$="d"]{stroke-dashoffset:0 !important}
}
/* 保険。何かの理由でアニメーションが走らなかったときも、
   6秒後には最後の状態を見せる（site.js が done を付ける）。
   外側の輪だけは繰り返しの動きなので触らない */
.dcfig.done [class$="f"], .dcfig.done [class$="p"]{opacity:1 !important}
.dcfig.done [class$="d"]{stroke-dashoffset:0 !important}

/* 長い見出しの折り返し位置。PC では出さない（スマホの段で出す） */
.sp-br{display:none}

/* ── タブレット ───────────────────────────────────── */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr !important; gap:44px !important; padding-left:32px !important; padding-right:32px !important}
  .hero-h1{font-size:48px !important}
  .r-pad{padding-left:32px !important; padding-right:32px !important}
  .r-gcol{grid-template-columns:1fr !important; gap:28px !important}
  .r-g6{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .r-g4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .r-fixw{width:100% !important; max-width:340px !important}

  /* ただし「小さな記号＋文章」の組みは、横並びのままのほうが締まる */
  a.r-gcol[style*=": 44px minmax"]{
    grid-template-columns:44px minmax(0,1fr) 14px !important; gap:14px !important; padding:18px !important;
  }
  a.r-gcol[style*=": 124px minmax"]{grid-template-columns:104px minmax(0,1fr) !important; gap:14px !important}
  a.r-gcol[style*=": 124px minmax"] > *:nth-child(1){width:100% !important; height:59px !important}
  div.r-gcol[style*=": 40px minmax"]{grid-template-columns:36px minmax(0,1fr) !important; gap:14px !important}

  /* お知らせの一覧。サムネを左に置き、右に日付・タグ・見出しを積む */
  a.r-gcol[style*=": 152px 110px"]{
    grid-template-columns:104px auto minmax(0,1fr) !important;
    gap:6px 12px !important; align-items:start !important; padding:18px 0 !important;
  }
  a.r-gcol[style*=": 152px 110px"] > *:nth-child(1){
    grid-column:1; grid-row:1 / span 2; width:104px !important; height:60px !important;
  }
  a.r-gcol[style*=": 152px 110px"] > *:nth-child(2){grid-column:2; grid-row:1; font-size:12px !important}
  a.r-gcol[style*=": 152px 110px"] > *:nth-child(3){
    grid-column:3; grid-row:1; justify-self:start !important; padding:2px 8px !important; font-size:10px !important;
  }
  a.r-gcol[style*=": 152px 110px"] > *:nth-child(4){grid-column:2 / span 2; grid-row:2; font-size:14px !important}
  a.r-gcol[style*=": 152px 110px"] > *:nth-child(5){display:none !important}
}

/* タブレットの幅では、サムネをもう少し大きく取れる */
@media (min-width:761px) and (max-width:1100px){
  a.r-gcol[style*=": 152px 110px"]{grid-template-columns:152px auto minmax(0,1fr) !important; gap:10px 22px !important}
  a.r-gcol[style*=": 152px 110px"] > *:nth-child(1){width:152px !important; height:88px !important}
  a.r-gcol[style*=": 124px minmax"]{grid-template-columns:124px minmax(0,1fr) !important; gap:18px !important}
  a.r-gcol[style*=": 124px minmax"] > *:nth-child(1){height:70px !important}
}

/* ── スマートフォン ────────────────────────────────── */
@media (max-width:760px){
  /* 余白。左右は 20px、上下は PC の約半分に詰める */
  .r-pad{padding-left:20px !important; padding-right:20px !important}
  .r-pad[style*="padding: 120px"],
  .r-pad[style*="padding: 104px"],
  .r-pad[style*="padding: 96px"],
  .r-pad[style*="padding: 88px"],
  .r-pad[style*="padding: 80px"]{padding-top:52px !important; padding-bottom:52px !important}

  /* 段組み。文章は1列、記号や数字が並ぶものは2〜3列のまま畳む */
  .r-gcol, .r-g2{grid-template-columns:1fr !important; gap:20px !important}


  .r-g4{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:24px 16px !important}
  /* 記号と数字だけの並びは2列のまま。文章が入るものは1列に */
  .dcfig.r-g3{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:28px 16px !important}
  .r-g3:not(.dcfig){grid-template-columns:1fr !important; gap:20px !important}
  .r-g6{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:18px 12px !important}
  .r-frow{flex-direction:column !important; gap:18px !important; align-items:flex-start !important}
  /* 幅を px で決めている枠。元の縦横比のまま画面幅いっぱいに */
  .r-fixw{width:100% !important; max-width:none !important; height:auto !important}
  /* ただし人物写真は縦長なので、画面いっぱいだと大きすぎる */
  .r-fixw[style*="width: 200px"], .r-fixw[style*="width: 260px"]{max-width:190px !important}
  .r-fs-xl{font-size:30px !important; line-height:1.5 !important}
  .r-fs-l{font-size:23px !important; line-height:1.6 !important}
  .r-fs-m{font-size:19px !important; line-height:1.7 !important}

  /* ヘッダー：ロゴと JA/EN とメニューボタンだけ残す */
  .site-nav{display:none !important}
  .site-header{padding:0 20px !important; height:64px !important}
  .site-header > a img{height:28px !important}

  /* ヒーロー：1カラムにして文字を縮める */
  .hero-grid{grid-template-columns:1fr !important; gap:28px !important; padding:40px 20px 48px !important}
  .hero-h1{font-size:34px !important; letter-spacing:0.02em !important}
  .hero-cta{flex-direction:column !important; align-items:stretch !important; gap:12px !important}
  .hero-cta > *{justify-content:center !important}

  /* flex/grid の子は既定で縮まないので、縮めるようにする
     （これが無いと中の図や長い行が親を押し広げ、ページ全体が横に伸びる） */
  body > div div, body > div section, body > div a{min-width:0}

  /* ページ見出しの帯。上下を詰める */
  [class~="r-pad"][style*="padding: 80px 64px 64px"]{padding-top:36px !important; padding-bottom:36px !important}

  /* 数字で見る xCARE。円を小さくして2列に収める */
  .r-g3 [style*="width: 124px"]{width:86px !important; height:86px !important}
  .r-g3 [style*="width: 124px"] > svg{width:86px !important; height:86px !important}
  .r-g3 > div{gap:14px !important}

  /* ロゴの列。縦横が違っても同じ高さの枠に収める */
  .r-g6 > div, .r-g4 > div{height:40px !important}
  .r-g6 img, .r-g4 img{max-height:26px !important; max-width:100% !important; object-fit:contain}

  /* 対応領域のような記号つきの行。文字を少し詰めて2列でも折れないように */
  .r-g4 [style*="font-size: 14px"]{font-size:13px !important}
  .r-g4 > div{padding:10px 0 !important}

  /* 表組みのように左右に並ぶ行を縦に */
  [style*="grid-template-columns: 220px"]{grid-template-columns:1fr !important; gap:4px !important}

  /* 段落の行間。スマホは少し詰めたほうが読みやすい */
  [style*="line-height: 2.2"]{line-height:2 !important}

  /* 記事の表紙と、トップのお知らせカードの写真。
     PC の枠（横長）のまま縮めると写真の真ん中だけになり、
     文字入りの表紙やロゴが切れる。スマホでは 16:9 の枠に収めて切らない */
  [style*="height: 380px"][style*="overflow: hidden"],
  [style*="height: 150px"][style*="overflow: hidden"]{height:auto !important; aspect-ratio:16/9}
  [style*="height: 380px"][style*="overflow: hidden"] > img,
  [style*="height: 150px"][style*="overflow: hidden"] > img{object-fit:contain !important}
  [style*="height: 380px"][style*="overflow: hidden"],
  [style*="height: 150px"][style*="overflow: hidden"]{background:#fff !important}

  /* 対応領域。英語は語が長く2列に収まらないので、英語版だけ1列に */
  body.en .r-g4[style*="gap: 0 32px"]{grid-template-columns:1fr !important; gap:0 !important}
  body.en .r-g4[style*="gap: 0 32px"] > div{padding:9px 0 !important}

  /* 英語版の数字。単位が長いので数字の下の行に置く（「4th year」だけは横に） */
  body.en .dcfig.r-g3 .count + span:not(.unit-ord){display:block; margin:4px 0 0 !important}

  /* 長い見出しの折り返し位置（build.py が入れる） */
  .sp-br{display:inline}

  /* フッター。社名を上に置き、リンクは2列に畳む */
  div.r-gcol[style*="minmax(0, 1fr) 200px 220px 240px"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:30px 20px !important;
  }
  div.r-gcol[style*="minmax(0, 1fr) 200px 220px 240px"] > *:nth-child(1){grid-column:1 / -1}
  div.r-gcol[style*="minmax(0, 1fr) 200px 220px 240px"] > *:nth-child(2){grid-column:1; grid-row:2 / span 2}
  div.r-gcol[style*="minmax(0, 1fr) 200px 220px 240px"] > *:nth-child(3){grid-column:2; grid-row:2}
  div.r-gcol[style*="minmax(0, 1fr) 200px 220px 240px"] > *:nth-child(4){grid-column:2; grid-row:3}
  .r-pad.r-frow[style*="background: #082746"]{padding:48px 20px 32px !important; gap:32px !important}
  /* 著作権表示。横に並べると詰まって読めないので縦に */
  [style*="justify-content: space-between"][style*="border-top: 1px solid rgba(255,255,255,0.15)"]{
    flex-direction:column !important; gap:6px !important;
  }
}

/* ── 図版の出し分け ────────────────────────────────
   図は PC 用が横 880〜900px、スマホ用が縦長。
   同じ中身を2つ置いて、画面の幅で見せるほうを切り替える。 */
.dcfig-sp{display:none !important}
@media (max-width:760px){
  .dcfig-pc{display:none !important}
  .dcfig-sp{display:block !important}
  /* スマホ用の図は枠に収まるので、横スクロールは要らない */
  .dcfig-sp{overflow:visible !important}
  /* 念のため、収まらない図が残っていたときだけ横に動かせるように */
  .dcfig:not(.r-g3):not(.dcfig-sp){
    max-width:100% !important; overflow-x:auto !important; overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
  }
  .fig-scroll{
    display:flex; align-items:center; gap:6px;
    font-size:11px; color:var(--mute); letter-spacing:.04em;
    margin:8px 2px 0;
  }
  .fig-scroll::before{content:""; width:14px; height:1px; background:currentColor}
}
@media (min-width:761px){ .fig-scroll{display:none} }

/* ── スマホのメニュー ──────────────────────────────
   横幅が狭いとヘッダーの項目が畳まれるので、ボタンから開くパネルを出す。 */
.menu-btn{display:none}
@media (max-width:1000px){
  .menu-btn{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:40px; height:40px; padding:0 8px; margin-left:4px;
    background:none; border:0; cursor:pointer; flex:none;
  }
  .menu-btn span{display:block; height:1.5px; background:var(--ink); border-radius:2px}
  .menu-btn span:nth-child(2){width:80%}
  .site-header.on-photo .menu-btn span{background:#fff}
  .sticky-bar .menu-btn span{background:var(--ink)}
}
html.menu-open, html.menu-open body{overflow:hidden}
.menu-panel{
  position:fixed; inset:0; z-index:200; outline:none;
  background:#fff; overflow-y:auto;
  animation:menuIn .18s ease;
}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.menu-inner{padding:84px 24px 40px; display:flex; flex-direction:column; gap:28px}
.menu-list{display:flex; flex-direction:column}
.menu-list a{
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 2px; font-size:16px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line); text-decoration:none;
}
.menu-list a svg{opacity:.5}
/* 今いるページ。左に細い線を引いて示す */
.menu-list a.is-current{color:var(--navy); font-weight:700; padding-left:14px; position:relative}
.menu-list a.is-current::before{
  content:""; position:absolute; left:0; top:20px; bottom:20px; width:2px; background:var(--navy);
}
.menu-cta{display:flex; flex-direction:column; gap:12px; margin-top:4px}
.menu-cta a{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; border:1px solid var(--navy); border-radius:2px;
  font-size:14px; font-weight:500; color:var(--navy); text-decoration:none;
}
.menu-cta a.is-fill{background:var(--navy); color:#fff; border-color:var(--navy)}
.menu-logo{position:absolute; top:22px; left:24px}
.menu-logo img{height:26px; width:auto; display:block}
.menu-close{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px; padding:0; background:none; border:0; cursor:pointer;
}
.menu-close span{
  position:absolute; left:12px; top:21px; width:20px; height:1.5px;
  background:var(--ink); border-radius:2px; display:block;
}
.menu-close span:first-child{transform:rotate(45deg)}
.menu-close span:last-child{transform:rotate(-45deg)}
@media (prefers-reduced-motion: reduce){ .menu-panel{animation:none} }

/* ── HubSpot のお問い合わせフォーム ─────────────────────
   ページ内に直接描かれるので、サイトの見た目に合わせる。
   クラス名は HubSpot が付けるもの（変更はできない）。 */
.hs-form-frame, #hs-form-target{width:100%}
/* HubSpot は fieldset に max-width:500px を入れるので外す */
form.hs-form{width:100%}
.hs-form fieldset{max-width:none !important; width:100% !important}
.hs-form fieldset .hs-form-field{width:100% !important; float:none !important; padding:0 !important}
.hs-form fieldset.form-columns-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px}
.hs-form fieldset.form-columns-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 20px}
.hs-form-field .input{width:100%; margin:0 !important}
@media (max-width:760px){
  .hs-form fieldset.form-columns-2, .hs-form fieldset.form-columns-3{grid-template-columns:1fr}
}
.hs-form-field{margin-bottom:22px}
.hs-form-field > label{
  display:block; font-size:13px; font-weight:500; color:var(--ink); margin-bottom:10px; line-height:1.6;
}
.hs-form-field > label strong{font-weight:500}
.hs-form-required{color:#C0392B; margin-left:4px}
.hs-field-desc{font-size:12px; color:var(--mute); margin:-4px 0 8px}
.hs-input{
  width:100% !important; box-sizing:border-box;
  height:48px; padding:0 16px;
  border:1px solid var(--line); border-radius:2px; background:#fff;
  font-family:inherit; font-size:14px; color:var(--txt);
}
textarea.hs-input{height:132px; padding:14px 16px; line-height:1.9; resize:vertical}
select.hs-input{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.hs-input:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(10,58,102,.09)}
.hs-input::placeholder{color:#B6BEC5}
.hs-form-booleancheckbox-display, .hs-form-checkbox-display{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.8}
.hs-form-booleancheckbox-display input, .hs-form-checkbox-display input{margin-top:5px}
.hs_submit{margin-top:8px}
.hs-button{
  width:100%; height:56px; border:none; border-radius:2px;
  background:var(--navy); color:#fff; font-family:inherit; font-size:15px; font-weight:700;
  letter-spacing:.04em; cursor:pointer; transition:background-color .15s ease;
}
.hs-button:hover{background:var(--ink)}
.hs-error-msg, .hs-error-msgs label{color:#C0392B; font-size:12px; line-height:1.7}
.hs-error-msgs{list-style:none; padding:0; margin:8px 0 0}
.submitted-message{
  padding:28px 30px; background:#fff; border-left:3px solid var(--navy); border-radius:2px;
  font-size:15px; line-height:2; color:var(--txt);
}
.legal-consent-container{font-size:12px; line-height:1.9; color:var(--mute); margin-top:4px}
.grecaptcha-badge{z-index:5}
@media (max-width:760px){
  .hs-input{height:46px; font-size:16px}   /* iOS で拡大されないよう 16px */
  textarea.hs-input{font-size:16px}
}

/* ヘッダーのメニュー。リンクだと分かるようにホバーで下線と色を出す */
.site-nav a{position:relative; padding-bottom:4px}
.site-nav a:hover{opacity:1; color:var(--navy) !important}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--navy); transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease;
}
.site-nav a:hover::after{transform:scaleX(1)}
/* 今いるページの項目は下線が出たままなので、二重にしない */
.site-nav a[style*="border-bottom"]::after{display:none}

/* 本文中のテキストリンクも、乗せたら分かるようにする */
.site-actions a:hover{opacity:1; filter:brightness(1.1)}

/* 英語版は DM Sans。角が立ちすぎず、字面が締まって見える */
body.en{
  font-family:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  letter-spacing:.004em;
}
body.en h1, body.en h2{letter-spacing:-.012em !important}
/* 英語は日本語より字面が大きく見えるので、見出しを少し詰める */
body.en .hero-h1{font-size:58px !important; line-height:1.25 !important}
@media (max-width:760px){
  body.en .hero-h1{font-size:32px !important}
}

/* パンくず。リンクの段だけ、乗せたら下線が出る */
[style*="font-size: 12px"][style*="color: #8B9399"] a:hover{
  opacity:1; color:var(--navy) !important; text-decoration:underline !important; text-underline-offset:3px;
}

/* 言語の切り替え。押せる側だけ反応させる */
.site-actions a[title*="English"]:hover,
.site-actions a[title*="日本語"]:hover{opacity:1; filter:brightness(1.12)}
@media (max-width:760px){
  /* 狭い画面では「日本語 / English」の文字が長いので少し詰める */
  .site-actions span[aria-current], .site-actions a[title*="English"], .site-actions a[title*="日本語"]{
    font-size:10px !important; min-width:0 !important; padding:0 6px !important;
  }
}

/* ヘッダーの出し入れ。上にスクロールしたときだけ、画面上部に出てくる控え。
   もとのヘッダー（高さ 84px）と同じ見え方にそろえる */
.sticky-bar{
  position:fixed; top:-96px; left:0; right:0; z-index:60;
  display:flex !important; align-items:center; justify-content:space-between;
  gap:24px;
  height:84px; padding:0 64px;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 16px rgba(8,39,70,.05);
  transition:top .26s ease;
}
.sticky-bar.is-shown{top:0}
/* 中の並びを元のヘッダーとそろえる */
.sticky-bar > div{display:flex; align-items:center}
.sticky-bar .site-nav{gap:36px}
.sticky-bar .site-actions{gap:12px}
.sticky-bar > a img, .sticky-bar > div > a:first-child img{height:34px !important; width:auto; display:block}
@media (max-width:1100px){
  .sticky-bar{padding:0 32px; gap:16px}
  .sticky-bar .site-nav{gap:22px}
}
@media (max-width:760px){
  .sticky-bar{height:62px; top:-74px; padding:0 20px}
  .sticky-bar .site-nav{display:none !important}
  .sticky-bar > a img, .sticky-bar > div > a:first-child img{height:26px !important}
}
@media (prefers-reduced-motion: reduce){ .sticky-bar{transition:none} }

/* フォームが出るまでの仮表示。入力欄の形だけ先に見せて、画面の飛び跳ねを防ぐ */
.hs-form-loading{
  display:flex; flex-direction:column; gap:22px; padding-top:4px;
}
.hs-form-loading::before, .hs-form-loading::after{
  content:""; display:block; border-radius:2px;
  background:linear-gradient(90deg,#EEF1F5 25%,#F6F8FA 37%,#EEF1F5 63%);
  background-size:400% 100%;
  animation:hs-shimmer 1.4s ease infinite;
}
.hs-form-loading::before{height:48px}
.hs-form-loading::after{height:48px}
@keyframes hs-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion: reduce){
  .hs-form-loading::before, .hs-form-loading::after{animation:none}
}

/* ── 画面幅ごとの余白 ───────────────────────────────
   背景の帯は画面いっぱいに広げ、中身だけ 1440px で中央に置く。
   1440px を超えるモニターで両側が白く余るのを防ぐ。 */
body > div{max-width:none !important; width:100% !important}

body > div > div{
  --page: 1440px;
  --gutter: max(64px, calc((100% - var(--page)) / 2 + 64px));
}
body > div > div.r-pad{
  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}
.hero-grid{
  padding-left:var(--gutter) !important;
  padding-right:var(--gutter) !important;
}
.site-header, .sticky-bar{
  padding-left:max(64px, calc((100% - 1440px) / 2 + 64px)) !important;
  padding-right:max(64px, calc((100% - 1440px) / 2 + 64px)) !important;
}

/* 1200px 以下: メニューの間隔を詰めて、折り返さないようにする */
@media (max-width:1200px){
  body > div > div{--gutter:32px}
  .site-header, .sticky-bar{padding-left:32px !important; padding-right:32px !important}
  .site-nav{gap:20px !important}
  .site-nav a{font-size:13px !important; white-space:nowrap}
  .site-actions{gap:8px !important}
  .site-actions a[href*="xcareplatform"]{font-size:12px !important; padding:0 12px !important; white-space:nowrap}
}
/* 1000px 以下: メニューを隠し、ロゴとボタンだけにする */
@media (max-width:1000px){
  .site-nav{display:none !important}
}
/* スマートフォン。ボタンが並びきらないので、ロゴと言語だけ残す */
@media (max-width:760px){
  body > div > div{--gutter:20px}
  .site-header, .sticky-bar{
    padding-left:20px !important; padding-right:20px !important;
    height:58px !important; gap:8px !important;
  }
  .site-header img, .sticky-bar img{height:22px !important}
  /* 2つのボタンは入らないので隠す。行き先はフッターとページ内にある。
     言語の切り替えは残す */
  /* xcareplatform へ向かう a（2つのボタン）だけを隠す。
     JA / EN は div の中の a なので、直下の a に限定する */
  .site-header > .site-actions > a,
  .sticky-bar > .site-actions > a{display:none !important}
  .site-actions{gap:0 !important; margin-left:auto}
  .site-actions > div{margin-left:0 !important}
}
/* 900〜760px: ボタンを小さくして並べる */
@media (max-width:900px) and (min-width:761px){
  .site-actions a[href*="xcareplatform"]{font-size:11px !important; padding:0 10px !important; height:34px !important}
  .site-header, .sticky-bar{height:64px !important}
}