@import url("/assets/shared/css/forms.css");
@import url("/assets/shared/css/service-footer.css");

.noabase-language-menu{position:relative;flex:none}
.noabase-language-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:5px;border:1px solid transparent;border-radius:6px;cursor:pointer;list-style:none;color:inherit}
.noabase-language-toggle::-webkit-details-marker{display:none}
.noabase-language-toggle svg{width:20px;height:20px;flex:none}
.noabase-language-toggle:hover{background:#f3f4f6}
.noabase-language-toggle:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.noabase-language-options{position:absolute;right:0;top:calc(100% + 8px);z-index:1001;min-width:160px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px #0002;color:#1f2937}
.noabase-language-options a,.noabase-language-options li>span{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 12px;font:500 14px/22px system-ui,sans-serif;text-decoration:none;white-space:nowrap;color:inherit;border-radius:4px}
.noabase-language-options a:hover{background:#f3f4f6}
.noabase-language-options a:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}
.language-check{display:inline-block;width:16px;flex:none}

@font-face {
  font-family: "Noabase Brand";
  src: url("/assets/shared/fonts/NotoSansJP-ui.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
body > header.noabase-service-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 64px;
  margin: 0;
  padding: 10px 16px;
  gap: 16px;
  border: 0;
  box-shadow: none;
  background: #fff;
  color: #222b38;
}
body > header.noabase-service-header .noabase-service-brand { min-height: 0; height: auto; }
body > header.noabase-service-header .noabase-service-brand,
body > header.noabase-service-header .noabase-service-brand :is(a, span) {
  font: 650 23px/1.5 "Noabase Brand", sans-serif;
  font-synthesis: none;
  letter-spacing: -.04em;
  color: #222b38;
  text-decoration: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}
body > header.noabase-service-header .noabase-service-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin: 0 0 0 auto;
  padding: 0;
  gap: 8px;
}
body > header.noabase-service-header :is(.noabase-services-link, #services, #home-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  gap: 6px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #222b38;
  font: 600 13px/20px "Noabase Brand", sans-serif;
  font-synthesis: none;
  letter-spacing: normal;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
}
body > header.noabase-service-header :is(.noabase-services-link, #services, #home-link) svg { flex: 0 0 20px; width: 20px; height: 20px; }
body > header.noabase-service-header :is(.noabase-services-link, #services, #home-link):hover { background: #f0f2f5; color: #222b38; text-decoration: none; }
body > header.noabase-service-header :is(#feedback-open, #noabase-policy-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin: 0;
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #222b38;
  box-shadow: none;
  cursor: pointer;
}
body > header.noabase-service-header :is(#feedback-open, #noabase-policy-toggle) svg { width: 20px; height: 20px; }
body > header.noabase-service-header :is(#feedback-open, #noabase-policy-toggle):hover { background: #f0f2f5; }
body > header.noabase-service-header :is(a, button):focus-visible { outline: 2px solid #4978b8; outline-offset: 2px; }
.noabase-service-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 8px 16px; background: #fff; }
@media (max-width: 700px) {
  /* スマホでも1段に収める。長いサービス名は省略記号で切り、右はアイコンだけにする。 */
  body > header.noabase-service-header { flex-wrap: nowrap; min-height: 56px; padding: 8px 16px; gap: 8px; }
  body > header.noabase-service-header .noabase-service-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* overflow で切ると中のリンクのフォーカス枠も切れるので、枠の分だけ内側に余白を取る。 */
  body > header.noabase-service-header .noabase-service-brand { padding: 4px; margin: -4px; }
  body > header.noabase-service-header .noabase-service-actions { gap: 4px; }
  body > header.noabase-service-header :is(.noabase-services-link, #services, #home-link) { width: 32px; padding: 6px; }
  body > header.noabase-service-header .noabase-services-label { display: none; }
  body > header.noabase-service-header #feedback-open.noabase-feedback-in-menu { display: none; }
  body > header.noabase-service-header .noabase-service-brand,
  body > header.noabase-service-header .noabase-service-brand :is(a, span) { font-size: 18px; }
}

.feedback-privacy { font-size: 12px; line-height: 1.6; }

body > header.noabase-service-header { z-index: 1000; }
.noabase-service-actions { position: relative; }
.noabase-policy-menu { display: flex; align-items: center; }
body > header.noabase-service-header #noabase-policy-links {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 16px #2021241f;
}
body > header.noabase-service-header #noabase-policy-links[hidden] { display: none; }
body > header.noabase-service-header #noabase-policy-links :is(a, .noabase-menu-feedback) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: 11px 12px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #222b38;
  font: 400 13px/22px Roboto, "Noto Sans JP", system-ui, sans-serif;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
}
body > header.noabase-service-header #noabase-policy-links :is(a, .noabase-menu-feedback):hover { background: #f0f2f5; }
body > header.noabase-service-header #noabase-policy-links .noabase-menu-feedback { display: none; cursor: pointer; }
@media (max-width: 700px) {
  body > header.noabase-service-header #noabase-policy-links .noabase-menu-feedback { display: block; }
}