@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
}
:root {
  --floating-banner-height: 3.6875rem;
}

.l-floatingBannerMount {
  display: contents;
}

body:has([data-floating-banner]) {
  -webkit-padding-after: var(--floating-banner-height);
          padding-block-end: var(--floating-banner-height);
}
@media screen and (min-width: 751px) {
  body:has([data-floating-banner]) {
    -webkit-padding-after: 0;
            padding-block-end: 0;
  }
}

.l-floatingBanner,
.l-floatingBanner * {
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
}

.l-floatingBanner__trigger,
.l-floatingBanner__close,
.l-floatingBanner__mapLink {
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  font: inherit;
}

.l-floatingBanner {
  bottom: 0;
  display: grid;
  left: 0;
  position: fixed;
  right: 0;
  transition: transform 0.4s ease, visibility 0s;
  z-index: var(--z-index-floating, 50);
}
@media screen and (min-width: 751px) {
  .l-floatingBanner {
    --panel-width: 17.0625rem;
    align-items: flex-start;
    bottom: auto;
    display: flex;
    left: auto;
    top: 50%;
    transform: translate(var(--panel-width), -50%);
  }
  .l-floatingBanner[data-floating-banner-open=true] {
    transform: translate(0, -50%);
  }
}
:root:has([data-floating-banner-hide-area]) .l-floatingBanner:not([data-floating-banner-visible=true]) {
  transform: translateY(100%);
  transition: transform 0.4s ease, visibility 0s 0.4s;
  visibility: hidden;
}
@media screen and (min-width: 751px) {
  :root:has([data-floating-banner-hide-area]) .l-floatingBanner:not([data-floating-banner-visible=true]) {
    transform: translate(100%, -50%);
  }
}

.l-floatingBanner__trigger {
  align-items: center;
  background: var(--color-main, #00509a);
  border: 0;
  color: var(--color-white, #fff);
  cursor: pointer;
  display: flex;
  grid-row: 2;
  height: var(--floating-banner-height);
  justify-content: center;
  position: relative;
  transition: background 0.3s ease;
}
@media (any-hover: hover) {
  .l-floatingBanner__trigger:hover {
    background: var(--color-main-hover, #2879c4);
  }
  .l-floatingBanner__trigger:focus-visible {
    background: var(--color-main-hover, #2879c4);
  }
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__trigger {
    border: 0.0625rem solid var(--color-white, #fff);
    border-radius: 0.5rem 0 0 0.5rem;
    border-right: 0;
    display: grid;
    flex-shrink: 0;
    gap: 0.4375rem;
    height: auto;
    justify-items: center;
    padding-block: 1.5rem 1.8125rem;
    width: 4.0625rem;
  }
}

.l-floatingBanner__triggerText {
  font-size: 1rem;
  line-height: 1;
}
[data-floating-banner-open=true] .l-floatingBanner__triggerText {
  display: none;
}
@media screen and (min-width: 751px) {
  [data-floating-banner-open=true] .l-floatingBanner__triggerText {
    display: block;
  }
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__triggerText {
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    writing-mode: vertical-rl;
  }
}

.l-floatingBanner__triggerCloseText {
  display: none;
  font-size: 1rem;
  line-height: 1;
}
[data-floating-banner-open=true] .l-floatingBanner__triggerCloseText {
  display: block;
}
@media screen and (min-width: 751px) {
  [data-floating-banner-open=true] .l-floatingBanner__triggerCloseText {
    display: none;
  }
}

.l-floatingBanner__triggerIcon {
  height: auto;
  left: 1.5rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.875rem;
}
[data-floating-banner-open=true] .l-floatingBanner__triggerIcon {
  display: none;
}
@media screen and (min-width: 751px) {
  [data-floating-banner-open=true] .l-floatingBanner__triggerIcon {
    display: block;
  }
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__triggerIcon {
    position: static;
    transform: none;
    width: 1.6875rem;
  }
}

.l-floatingBanner__toggleIcon {
  --toggle-icon-size: 1.6875rem;
  border: 0.0625rem solid currentcolor;
  border-radius: 50%;
  height: var(--toggle-icon-size);
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: var(--toggle-icon-size);
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__toggleIcon {
    display: none;
  }
}
.l-floatingBanner__toggleIcon::before, .l-floatingBanner__toggleIcon::after {
  background: currentcolor;
  content: "";
  height: 0.0625rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.9375rem;
}
.l-floatingBanner__toggleIcon::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(90deg);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: visible;
}
[data-floating-banner-open=true] .l-floatingBanner__toggleIcon::after {
  opacity: 0;
  visibility: hidden;
}

.l-floatingBanner__panel {
  align-content: end;
  color: var(--color-main, #00509a);
  display: grid;
  grid-row: 1;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
[data-floating-banner-open=true] .l-floatingBanner__panel {
  grid-template-rows: 1fr;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__panel {
    display: block;
    width: var(--panel-width);
  }
}

.l-floatingBanner__panelInner {
  background: var(--color-pale-blue, #bfdeff);
  border-radius: 0.5rem 0.5rem 0 0;
  min-height: 0;
  overflow: hidden;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__panelInner {
    border-radius: 0 0 0 0.5rem;
  }
}

.l-floatingBanner__panelBody {
  display: grid;
  gap: 1rem;
  max-height: calc(100dvh - var(--floating-banner-height));
  overflow-y: auto;
  padding: 1rem;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__panelBody {
    gap: 1.5rem;
    max-height: calc(100dvh - 2rem);
    padding: 2rem 1.5rem;
  }
}

.l-floatingBanner__title {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  text-align: center;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__title {
    font-size: 1rem;
    line-height: 1.15;
    text-align: start;
  }
}

@media screen and (min-width: 751px) {
  .l-floatingBanner__panelBody:has(.l-floatingBanner__product) .l-floatingBanner__title {
    -webkit-border-after: 0.0625rem solid var(--color-main, #00509a);
            border-block-end: 0.0625rem solid var(--color-main, #00509a);
    line-height: 1.25rem;
    -webkit-padding-after: 1rem;
            padding-block-end: 1rem;
  }
}

.l-floatingBanner__product {
  --floating-banner-package-width: 5.3125rem;
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__product {
    --floating-banner-logo-width: var(--floating-banner-logo-width-md);
    --floating-banner-package-width: 6.0625rem;
    justify-content: flex-start;
  }
}

.l-floatingBanner__productPackage {
  flex-shrink: 0;
  height: auto;
  width: var(--floating-banner-package-width);
}

.l-floatingBanner__productBody {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  min-width: 0;
}

.l-floatingBanner__productLogo {
  height: auto;
  max-width: 100%;
  width: var(--floating-banner-logo-width);
}

.l-floatingBanner__productClass {
  align-items: center;
  border: 0.0625rem solid var(--color-black, #000);
  color: var(--color-body, #191919);
  display: flex;
  font-size: 0.625rem;
  height: 1.125rem;
  justify-content: center;
  line-height: 1;
  padding-inline: 0.25rem;
}

.l-floatingBanner__list {
  display: grid;
  gap: 0.375rem;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__list {
    gap: 0.625rem;
    grid-template-columns: none;
  }
}

.l-floatingBanner__link {
  align-items: center;
  background: var(--color-white, #fff);
  border: 0.0625rem solid var(--color-main, #00509a);
  border-radius: 0.25rem;
  column-gap: 0.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 3.125rem;
  padding-inline: 0.6875rem 0.9375rem;
  transition: background 0.3s ease;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__link {
    display: flex;
    justify-content: center;
    padding-inline: 0.5rem;
  }
}
.l-floatingBanner__link:link, .l-floatingBanner__link:visited, .l-floatingBanner__link:hover, .l-floatingBanner__link:active {
  color: var(--color-main, #00509a);
}
@media (any-hover: hover) {
  .l-floatingBanner__link:hover {
    background: var(--color-pale-blue03, #e9f5ff);
  }
  .l-floatingBanner__link:focus-visible {
    background: var(--color-pale-blue03, #e9f5ff);
  }
}

.l-floatingBanner__link:hover img {
  opacity: 1;
}

.l-floatingBanner__logo {
  max-width: 100%;
  width: 5.5rem;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__logo {
    flex-shrink: 0;
    width: 7.375rem;
  }
}

.l-floatingBanner__logo img {
  height: auto;
  width: 100%;
}

.l-floatingBanner__linkText {
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__linkText {
    font-size: 0.75rem;
  }
}

.l-floatingBanner__external {
  flex-shrink: 0;
  height: auto;
  width: 0.5rem;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__external {
    width: 0.625rem;
  }
}

.l-floatingBanner__mapLink {
  display: flex;
  gap: 0.375rem;
  justify-content: center;
  padding-inline: 0.75rem;
  width: 100%;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__mapLink {
    padding-inline: 0.5rem;
  }
}

.l-floatingBanner__mapIcon {
  flex-shrink: 0;
  height: auto;
  width: 0.75rem;
}

.l-floatingBanner__mapText {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__mapText {
    font-size: 0.875rem;
  }
}

.l-floatingBanner__mapExternal {
  flex-shrink: 0;
  height: auto;
  width: 0.625rem;
}

.l-floatingBanner__close {
  align-items: center;
  background: none;
  border: 0.0625rem solid var(--color-main, #00509a);
  border-radius: 0.25rem;
  color: var(--color-main, #00509a);
  cursor: pointer;
  display: none;
  font-size: 0.75rem;
  justify-content: center;
  line-height: 1;
  min-height: 2rem;
  padding: 0.8125rem 0;
  position: relative;
  transition: background 0.3s ease;
  width: 100%;
}
@media screen and (min-width: 751px) {
  .l-floatingBanner__close {
    display: flex;
  }
}
@media (any-hover: hover) {
  .l-floatingBanner__close:hover {
    background: var(--color-white, #fff);
  }
  .l-floatingBanner__close:focus-visible {
    background: var(--color-white, #fff);
  }
}

.l-floatingBanner__closeIcon {
  height: 0.4375rem;
  position: relative;
  width: 0.6875rem;
  left: 0.75rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.l-floatingBanner__closeIcon::before, .l-floatingBanner__closeIcon::after {
  background: currentcolor;
  content: "";
  height: 0.0625rem;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 0.8149003007rem;
}
.l-floatingBanner__closeIcon::before {
  transform: translate(-50%, -50%) rotate(32.4711922908deg);
}
.l-floatingBanner__closeIcon::after {
  transform: translate(-50%, -50%) rotate(-32.4711922908deg);
}