@charset "UTF-8";
/* ======================================================
//  MARK: Universal
// ====================================================== */
*,
::before,
::after {
  /*
  * Includes `padding` and `border` in the element's specified dimensions.
  * It is highly recommended to set `box-sizing: border-box;` by default, as it makes styling much easier, especially when specifying `width: 100%;`.
  */
  box-sizing: border-box;
}

:where(body) {
  /*
  * When creating a sticky footer, a minimum height is often required.
  * Setting the `min-block-size` to the dynamic viewport height ensures enough space for the footer.
  */
  min-block-size: 100dvb;
  /* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
  margin: unset;
}

/* ======================================================
// MARK: Sections
// ------------------------------------------------------ */
:where(:is(h1, h2, h3, h4, h5, h6):lang(en)) {
  /* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */
  text-wrap: pretty;
}

:where(h1) {
  /*
  * Adjusts user agent (UA) styles for `h1` elements within sectioning content.
  * This addresses DevTools warnings that appear when `h1` elements nested within sectioning content lack `font-size` and `margin` properties.
  * @see https://html.spec.whatwg.org/#sections-and-headings
  */
  margin-block: 0;
  font-size: 2em;
}

:where(h2, h3, h4, h5, h6) {
  /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;
}

:where(search) {
  /*
  * The `<search>` element is supported from Safari 17.
  * This prevents it from being displayed as an inline element in unsupported environments.
  */
  display: block flow;
}

/* ======================================================
//  MARK: Grouping content
// ====================================================== */
:where(p, blockquote, figure, pre, address, ul, ol, dl, menu) {
  /* The `margin-block` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-block: unset;
}

:where(blockquote, figure) {
  /* The `margin-inline` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-inline: unset;
}

:where(p:lang(en)) {
  /*
  * In English, a single word on the last line is called a "widow" or "orphan" and is considered something to avoid as it makes the text harder to read.
  * Therefore, when lang="en", this prevents the last line from ending with a single word.
  */
  text-wrap: pretty;
}

:where(address:lang(ja)) {
  /* Italic style is not common in Japanese, so the `font-style` is reset. */
  font-style: unset;
}

:where(ul, ol, menu) {
  /* The `padding-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  padding-inline-start: unset;
  /*
  * In Safari, using `list-style: none` prevents screen readers from announcing lists.
  * `list-style-type: ""` is used to hide markers without affecting accessibility.
  * @see https://matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics
  */
  list-style-type: "";
}

:where(dd) {
  /* The `margin-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
  margin-inline-start: unset;
}

/* ======================================================
//  MARK: Links
// ====================================================== */
:where(a) {
  /*
  * The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance.
  * In Firefox on iOS, the user agent stylesheet’s text color is applied even when the text is not a link.
  * @see https://github.com/darkreader/darkreader/issues/9836
  */
  color: unset;
}

:where(a:any-link) {
  /*
  * While link underlines can be useful, they are often obstructive.
  * They are disabled by default.
  * If needed, restore them using `text-decoration-line: revert;`.
  */
  text-decoration-line: unset;
  /* Set the underline thickness to the font's default thickness. */
  text-decoration-thickness: from-font;
  /* Set the underline inset to `auto` and separate only the horizontal lines when underlines are consecutive. */
  text-decoration-inset: auto;
}

/* ======================================================
//  MARK: Embedded content
// ====================================================== */
:where(img, svg, picture, video, audio, canvas, model, iframe, embed, object) {
  /* Prevents overflow by setting the maximum width to `100%`. */
  max-inline-size: 100%;
  width: 100%;
  height: auto;
  /* Prevents extra space from appearing at the bottom of the element. */
  vertical-align: bottom;
}

:where(img, svg, picture, video, canvas, model, iframe, embed, object) {
  /*
  * Automatically adjust block size based on content.
  * Exclude the <audio> element as it disappears when block-size is auto.
  * @see https://github.com/tak-dcxi/kiso.css/issues/5
  */
  block-size: auto;
}

:where(iframe) {
  /* The `border` specified in the UA stylesheet is often unnecessary, so it is reset. */
  border: unset;
}

html {
  font-size: min(calc(16 / 1388 * 100vw), 16px);
}
@media (width <= 767px) {
  html {
    font-size: max(calc(16 / 375 * 100vw), 16px);
  }
}

:root {
  --color-brightest: #fff;
  --color-contrast: #fffcd2;
  --color-base: #312f49;
  --color-main: #0093b8;
  --color-accent: #f7ff86;
  --color-primary: #000;
  --color-secondary: #5cc6de;
  --color-link: #42b6d1;
  --color-inactive: #d9d9d9;
  --z-index-loading: 9999;
  --z-index-loading-bg: 9998;
  --z-index-burger: 9100;
  --z-index-header: 9000;
  --z-index-on: 2;
  --breakpoint-md: 768px;
  --breakpoint-sm: 767px;
  --font-base-offset-top: 0.07em;
  --font-family-base: "Noto Sans JP", sans-serif;
  --font-family-en: "Funnel Sans", sans-serif;
  --font-size-base: 20px;
  --font-weight-base: 500;
  --inner-max-width: 100%;
  --inner-padding-inline: 40px;
  --letter-spacing-base: 0;
  --line-height-base: 1.5;
  --to-rem: calc(tan(atan2(1px, 16px)) * 1rem);
  --transition-dulation: 0.5s;
  --viewport-width: 1388px;
}
@media (width >= 768px) {
  :root {
    --inner-max-width: 1388px;
  }
}
@media (width <= 767px) {
  :root {
    --font-size-base: 15px;
    --inner-padding-inline: 12px;
    --viewport-width: 375px;
  }
}

/* =======================================================
l-all__wrapper
======================================================= */
.l-all__wrapper {
  --_margin-top: calc(-100 * var(--to-rem));
  --_padding-bottom: calc(210 * var(--to-rem));
  min-height: 100dvh;
  padding-bottom: var(--_padding-bottom);
  margin-top: var(--_margin-top);
  font-family: var(--font-family-base);
  font-size: calc(tan(atan2(var(--font-size-base), 1px)) * var(--to-rem));
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  color: var(--color-base);
  letter-spacing: var(--letter-spacing-base);
  background-color: var(--color-brightest);
  background-image: url("/bc/images/net-s_jcb_card/cp5_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-size-adjust: initial;
}
@media (width <= 767px) {
  .l-all__wrapper {
    --_margin-top: calc(0 * var(--to-rem));
    --_padding-bottom: calc(67 * var(--to-rem));
    background-image: url("/bc/images/net-s_jcb_card/cp5_bg-sm.png");
  }
}
.l-all__wrapper a {
  transition-timing-function: ease;
  transition-duration: var(--transition-duration);
}
.l-all__wrapper figure {
  display: flex;
}
.l-all__wrapper picture {
  display: flex;
}

/* =======================================================
inner
======================================================= */
.l-inner {
  padding-inline: calc(tan(atan2(var(--inner-padding-inline), 1px)) * var(--to-rem));
  margin-inline: auto;
}
@media (width >= 768px) {
  .l-inner {
    max-width: calc(tan(atan2(var(--inner-max-width), 1px)) * var(--to-rem));
  }
}

/* =======================================================
bullet
======================================================= */
.u-bullet__list {
  --_gap: 1lh;
  display: block grid;
  gap: var(--_gap);
}
.u-bullet__item {
  padding-left: 1em;
  text-indent: -1em;
}
@media (width <= 767px) {
  .u-bullet__item {
    --_padding-inline-end: calc(20 * var(--to-rem));
    padding-inline-end: var(--_padding-inline-end);
    line-height: calc(24/15);
  }
}
.u-bullet__item::before {
  content: "・";
}
.u-bullet__item a {
  text-decoration: underline;
}

/* =======================================================
u-only
======================================================= */
@media (width <= 767px) {
  .u-md {
    display: none;
  }
}

@media (width >= 768px) {
  .u-sm {
    display: none;
  }
}

/* =======================================================
btn
======================================================= */
.c-btn {
  --_border-radius: calc(infinity * 1px);
  --_font-size: calc(32 * var(--to-rem));
  --_padding-block: calc(42 * var(--to-rem));
  --_padding-inline: calc(65 * var(--to-rem));
  display: block grid;
  place-content: center;
  width: fit-content;
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
  margin-inline: auto;
  font-size: var(--_font-size);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(0deg, var(--color-accent) 0%, var(--color-accent) 100%), var(--color-inactive);
  border-radius: var(--_border-radius);
}
.c-btn:focus-visible {
  --_color: var(--color-accent);
  color: var(--_color);
  background: var(--color-base);
}
@media (any-hover: hover) {
  .c-btn:hover {
    --_color: var(--color-accent);
    color: var(--_color);
    background: var(--color-base);
  }
}
@media (width <= 767px) {
  .c-btn {
    --_font-size: calc(18 * var(--to-rem));
    --_padding-block: calc(15 * var(--to-rem));
    --_padding-inline: calc(44 * var(--to-rem));
    line-height: calc(24/18);
    text-align: center;
  }
}

/* =======================================================
hgroup
======================================================= */
.c-hgroup {
  --_margin-bottom: calc(70 * var(--to-rem));
  --_min-width: calc(380 * var(--to-rem));
  width: fit-content;
  min-width: var(--_min-width);
  margin-inline: auto;
  margin-bottom: var(--_margin-bottom);
}
@media (width <= 767px) {
  .c-hgroup {
    --_margin-bottom: calc(26 * var(--to-rem));
    --_min-width: calc(238 * var(--to-rem));
  }
}
.c-hgroup h2 {
  --_font-size: calc(39 * var(--to-rem));
  --_margin-bottom: calc(24 * var(--to-rem));
  margin-bottom: var(--_margin-bottom);
  font-family: var(--font-family-en);
  font-size: var(--_font-size);
  font-weight: 800;
  line-height: calc(49/39);
  text-align: center;
  text-transform: uppercase;
}
@media (width <= 767px) {
  .c-hgroup h2 {
    --_color: var(--color-secondary);
    --_font-size: calc(18 * var(--to-rem));
    --_margin-bottom: calc(6 * var(--to-rem));
    color: var(--_color);
  }
}
.c-hgroup p {
  --_font-size: calc(32 * var(--to-rem));
  --_padding-block: calc(20 * var(--to-rem));
  padding-block: var(--_padding-block);
  font-size: var(--_font-size);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
}
@media (width <= 767px) {
  .c-hgroup p {
    --_border-color: var(--color-inactive);
    --_font-size: calc(18 * var(--to-rem));
    --_padding-block: calc(2 * var(--to-rem)) calc(6 * var(--to-rem));
    --_padding-inline: calc(30 * var(--to-rem));
    padding-inline: var(--_padding-inline);
    line-height: calc(26/18);
    border-color: var(--_border-color);
  }
}

/* =======================================================
section
======================================================= */
.c-section {
  --_background-color: var(--color-brightest);
  --_border-radius: 20px;
  --_max-width: calc(1200 * var(--to-rem));
  --_padding-block: calc(72 * var(--to-rem)) calc(80 * var(--to-rem));
  max-width: var(--_max-width);
  padding-block: var(--_padding-block);
  margin-inline: auto;
  background-color: var(--_background-color);
  border-radius: var(--_border-radius);
}
@media (width <= 767px) {
  .c-section {
    --_max-width: calc(351 * var(--to-rem));
    --_padding-block: calc(30 * var(--to-rem)) calc(34 * var(--to-rem));
    --inner-padding-inline: 6px;
    max-width: var(--_max-width);
  }
}