@charset "UTF-8";
@import url(reset.css);
/* @import url(root.css); */

:root {
  /* アクセントカラー */
  --c-accent-corporate: #0099b3;
  --c-accent-primary: #008299;
  --c-accent-primary-op30: rgba(0, 130, 153, 0.3);
  --c-accent-primary-soft: #68b0ba;
  --c-accent-primary-strong: #015a6a;
  --c-accent-secondary-pale: #e7f6fa;
  --c-accent-secondary-light: #dfeff3;
  --c-accent-primary-op50: rgba(0, 130, 153, 0.5);
  --c-accent-back: #f0f9f9;
  --c-accent-dark: #006680;
  /* ニュートラルカラー */
  --c-neutral-primary: #36494d;
  --c-neutral-white: #ffffff;
  --c-neutral-white-op30: rgba(255, 255, 255, 0.3);
  --c-neutral-white-op60: rgba(255, 255, 255, 0.6);
  --c-neutral-primary-op75: rgba(54, 73, 77, 0.75);
  --c-neutral-primary-op50: rgba(54, 73, 77, 0.5);
  --c-neutral-secondary: #888888;
  --c-separator: #cccccc;
  --c-card-frame: #d8d8d8;
  --c-footer-navi-back: #e5e5e5;
  --c-neutral-back: #f6f6f6;
  /* アイキャッチ・その他 */
  --c-logout: #99cc00;
  --c-money-club-back: rgba(0, 66, 85, 0.4);
  --c-money-club-text: #ffdc7c;
  --c-division-back: #fcf4cc;
  /*  通知  */
  --c-inform: #3390cb;
  --c-inform-text: #0092dc;
  --c-inform-back: #f2f6fc;
  /* 警告、注意喚起、強調 */
  --c-caution: #c77100;
  --c-caution-hover: #e9bb7f;
  --c-caution-toggle: #9b5800;
  --c-caution-back: #f9ecdb;
  --c-caution-back-2: #fcf8f5;
  /* エラー */
  --c-error: #da532c;
  --c-error-text: #bb3015;
  --c-error-back: #fbefec;
  /* カスタムカラー */
  --c-notice-primary: #a05680;
  --c-notice-secondry: #6567b0;
  --c-notice-tertiary: #4a7f45;
  /* 特定の商品を区別するための色 */
  --c-fund-all-star: #ee8800;
  --c-nisa-selection: #ff001c;
  --c-junior-nisa-selection: #9b6eff;
  --c-mutual-fund: #00cbff;
  --c-other-funds: #f5cf00;
  /* アイキャッチ */
  --c-eye-catch-primary: #e5e4fc;
  --c-eye-catch-secondry: #fcf1e4;
  --c-eye-catch-tertiary: #fce4f6;
  --c-eye-catch-orange: #fae8e4;
  --c-eye-catch-green: #d4f4ea;
  --c-eye-catch-blue: #ddf3fc;
  /* フォント */
  --fontfamily: HiraginoSans-W3, "Hiragino Sans W3", "Noto Sans CJK JP Regular",
    "Noto Sans JP", "Yu Gothic Medium", YuGothic, sans-serif;
  --fontfamily-b: HiraginoSans-W6, "Hiragino Sans W6", "Noto Sans CJK JP Bold",
    "Noto Sans JP", "Yu Gothic", YuGothic, sans-serif;
  --fontfamily-mono: AvenirNextCondensed-Regular, Roboto, "Yu Gothic Medium",
    YuGothic, monospace;
  --fontfamily-mono-b: AvenirNextCondensed-DemiBold, Roboto, "Yu Gothic",
    YuGothic, monospace;
  --fontfamily-mono-b-s: AvenirNextCondensed-Bold, Roboto, "Yu Gothic", YuGothic,
    monospace;
  /* Andoroidのフォントの見た目を確認するとき */
  /* --fontfamily: "Noto Sans CJK JP Regular", "Noto Sans JP", "Yu Gothic Medium", YuGothic, sans-serif;
  --fontfamily-b: "Noto Sans CJK JP Bold", "Noto Sans JP", "Yu Gothic", YuGothic, sans-serif;
  --fontfamily-mono: Roboto, "Yu Gothic Medium", YuGothic, monospace;
  --fontfamily-mono-b: Roboto, "Yu Gothic", YuGothic, monospace;
  --fontfamily-mono-b-s: Roboto, "Yu Gothic", YuGothic, monospace; */
  /* Windowsのフォントの見た目を確認するとき  */
  /* --fontfamily: "Yu Gothic Medium", YuGothic, sans-serif;
  --fontfamily-b: "Yu Gothic", YuGothic, sans-serif;
  --fontfamily-mono: "Yu Gothic Medium", YuGothic, monospace;
  --fontfamily-mono-b: "Yu Gothic", YuGothic, monospace;
  --fontfamily-mono-b-s: "Yu Gothic", YuGothic, monospace; */
  --font-h1: 700 36px/46px var(--fontfamily-b);
  --font-h2: 700 32px/40px var(--fontfamily-b);
  --font-h3: 700 28px/36px var(--fontfamily-b);
  --font-h4: 700 24px/30px var(--fontfamily-b);
  --font-h5: 700 20px/26px var(--fontfamily-b);
  --font-h6: 700 18px/24px var(--fontfamily-b);
  --font-body1: 300 18px/28px var(--fontfamily);
  --font-body1-b: 700 18px/28px var(--fontfamily-b);
  --font-body2: 300 16px/24px var(--fontfamily);
  --font-body2-lh: 24px;
  --font-body2-b: 700 16px/24px var(--fontfamily-b);
  --font-caption1: 300 13px/17px var(--fontfamily);
  --font-caption1-b: 700 13px/17px var(--fontfamily-b);
  --font-caption1-fs: 13px;
  --font-caption2: 300 12px/16px var(--fontfamily);
  --font-caption2-b: 700 12px/16px var(--fontfamily-b);
  --font-caption3: 300 11px/15px var(--fontfamily);
  --font-caption3-b: 700 11px/15px var(--fontfamily-b);
  --font-h1-mono: 700 38px/46px var(--fontfamily-mono-b);
  --font-h2-mono: 700 34px/40px var(--fontfamily-mono-b);
  --font-h3-mono: 700 30px/36px var(--fontfamily-mono-b);
  --font-h4-mono: 700 26px/30px var(--fontfamily-mono-b);
  --font-h5-mono: 700 21px/26px var(--fontfamily-mono-b);
  --font-h6-mono: 700 19px/24px var(--fontfamily-mono-b);
  --font-body1-mono: 300 19px/28px var(--fontfamily-mono);
  --font-body1-mono-b: 700 19px/28px var(--fontfamily-mono-b);
  --font-body2-mono: 300 17px/24px var(--fontfamily-mono);
  --font-body2-mono-b: 700 17px/24px var(--fontfamily-mono-b-s);
  --font-caption1-mono: 300 14px/17px var(--fontfamily-mono);
  --font-caption1-mono-b: 700 14px/17px var(--fontfamily-mono-b-s);
  --font-caption2-mono: 300 13px/16px var(--fontfamily-mono);
  --font-caption2-mono-b: 300 13px/16px var(--fontfamily-mono-b-s);
  --font-caption3-mono: 300 12px/15px var(--fontfamily-mono);
  --font-caption3-mono-b: 700 12px/15px var(--fontfamily-mono-b-s);
  --header-height: 72px;
  --side-margin: 20px;
  --side-margin-minus: -20px;
  --side-margin-main-compact: 20px;
  --side-margin-main-compact-minus: -20px;
  --col-margin: 10px;
  --dialog-help-max-width: 335px;
  --box-certification-width: fit-content;
  --softwareKeyboard-width: 748px;
}

@media (min-width: 768px) {
  :root {
    --font-h1: 700 44px/56px var(--fontfamily-b);
    --font-h2: 700 40px/50px var(--fontfamily-b);
    --font-h3: 700 32px/40px var(--fontfamily-b);
    --font-h4: 700 28px/36px var(--fontfamily-b);
    --font-h5: 700 24px/30px var(--fontfamily-b);
    --font-h6: 700 20px/26px var(--fontfamily-b);
    --font-body1: 300 20px/30px var(--fontfamily);
    --font-body1-b: 700 20px/30px var(--fontfamily-b);
    --font-body2: 300 18px/28px var(--fontfamily);
    --font-body2-b: 700 18px/28px var(--fontfamily-b);
    --font-body2-lh: 28px;
    --font-caption1: 300 16px/20px var(--fontfamily);
    --font-caption1-b: 700 16px/20px var(--fontfamily-b);
    --font-caption1-fs: 16px;
    --font-caption2: 300 15px/19px var(--fontfamily);
    --font-caption2-b: 700 15px/19px var(--fontfamily-b);
    --font-caption3: 300 14px/18px var(--fontfamily);
    --font-caption3-b: 700 14px/18px var(--fontfamily-b);
    --font-h1-mono: 700 46px/56px var(--fontfamily-mono-b);
    --font-h2-mono: 700 42px/50px var(--fontfamily-mono-b);
    --font-h3-mono: 700 34px/40px var(--fontfamily-mono-b);
    --font-h4-mono: 700 30px/36px var(--fontfamily-mono-b);
    --font-h5-mono: 700 26px/30px var(--fontfamily-mono-b);
    --font-h6-mono: 700 21px/26px var(--fontfamily-mono-b);
    --font-body1-mono: 300 21px/30px var(--fontfamily-mono);
    --font-body1-mono-b: 700 21px/30px var(--fontfamily-mono-b);
    --font-body2-mono: 300 19px/28px var(--fontfamily-mono);
    --font-body2-mono-b: 700 19px/28px var(--fontfamily-mono-b-s);
    --font-caption1-mono: 300 17px/20px var(--fontfamily-mono);
    --font-caption1-mono-b: 700 17px/20px var(--fontfamily-mono-b-s);
    --font-caption2-mono: 300 16px/19px var(--fontfamily-mono);
    --font-caption2-mono-b: 300 16px/19px var(--fontfamily-mono-b-s);
    --font-caption3-mono: 300 15px/18px var(--fontfamily-mono);
    --font-caption3-mono-b: 700 15px/18px var(--fontfamily-mono-b-s);
    /* 幅について */
    --header-height: 88px;
    --side-margin: max(20px, calc(50vw - 609.5px));
    --side-margin-minus: calc(-1 * var(--side-margin));
    --side-margin-main-compact: max(20px, calc(50vw - 364px));
    --side-margin-main-compact-minus: calc(
      -1 * var(--side-margin-main-compact)
    );
    --col-margin: 12px;
    --dialog-help-max-width: 748px;
    --box-certification-width: 390px;
  }
}

/* 画面内アンカー用のscroll-padding */
html {
  scroll-padding-top: 104px;
}

@media (min-width: 768px) {
  html {
    /* scroll-padding-top: 120px; */
    scroll-padding-top: 168px;
  }
}

img {
  pointer-events: none;
}

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  margin: 0;
  color: var(--c-neutral-primary);
  font: var(--font-body2);
}

div#root {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

main {
  flex: 1;
  position: relative;
  padding: 0 var(--side-margin);
}

nav + main {
  margin-top: 0px;
}

section {
  margin: 56px 0;
}

main > section:first-child {
  margin-top: 0;
}

@media (min-width: 768px) {
  .main-compact {
    padding: 0 var(--side-margin-main-compact);
  }

  main {
    margin-top: 88px;
  }

  nav + main {
    margin-top: 160px;
  }
}

header {
  height: 72px;
  padding: 12px var(--side-margin) 8px;
  position: fixed;
  top: 0px;
  z-index: 700;
  width: 100%;
  background-color: var(--c-neutral-white);
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
}

header > .inner-header {
  display: flex;
  flex-wrap: wrap;
  height: 52px;
  width: 100%;
  background-color: var(--c-neutral-white);
}

div#header_1-1 {
  display: flex;
  font: var(--font-caption3);
  font-size: 10px;
  line-height: 11px;
  flex-direction: column;
  justify-content: center;
}

div#header_1-1 > div {
  padding-top: 4px;
  color: var(--c-neutral-secondary);
}

div#header_2 {
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

div#header_2 ul {
  display: flex;
  gap: 4px;
}

div#header_2 li {
  list-style: none;
}

div#header_2 li > button {
  border: 1px solid var(--c-separator);
  border-radius: 15px;
  color: var(--c-accent-primary);
  width: 72px;
  height: 33px;
  padding: 6px 0px;
  font: var(--font-caption1-b);
  font-size: 11px;
  vertical-align: baseline;
  margin-top: 5.5px;
}

.logo-help,
.logo-logout,
.logo-menu,
.logo-cancel {
  display: block;
  width: 32px;
  height: 32px;
}

.logo-help {
  margin: 0px 6px;
  background: url("../img/icon_help_head_sp.svg") no-repeat 0 center;
}

.logo-logout {
  margin: 0px 11.5px;
  background: url("../img/icon_logout_sp.svg") no-repeat 0 center;
}

.logo-menu {
  margin: 0px 6px;
}

a[aria-expanded="false"] i.logo-menu {
  background: url("../img/icon_menu_sp.svg") no-repeat 0 center;
}

a[aria-expanded="false"] i.logo-menu + figcaption::before {
  content: "メニュー";
}

a[aria-expanded="true"] i.logo-menu {
  background: url("../img/icon_close_sp.svg") no-repeat 0 center;
}

a[aria-expanded="true"] i.logo-menu + figcaption::before {
  content: "閉じる";
}

.logo-cancel {
  margin: 0px 6px;
  background: url("../img/icon_cancel_sp.svg") no-repeat 0 center;
}

figcaption {
  display: block;
  color: var(--c-neutral-primary);
  font: var(--font-caption1-b);
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  padding-top: 4px;
}

header.header-prelogin {
  height: 56px;
  padding: 0px;
}

header.header-prelogin > .inner-header {
  height: 56px;
  padding: 6px var(--side-margin);
}

header.header-prelogin > .inner-header > div#header_1-1 {
  display: flex;
  align-items: center;
}

header.header-prelogin figure {
  display: flex;
  flex-direction: row-reverse;
  padding: 6px 0px;
}

header.header-prelogin figcaption {
  padding-top: 0px;
  display: flex;
  align-items: center;
}

.logo-top {
  display: block;
  width: 168px;
  height: 32.04px;

  background: url("../img/logo_sp.svg") no-repeat 0 center;
}

.link-back {
  width: 123px;
  height: 44px;
  padding: 10.875px 0px 10.875px 28px;
  background: url("../img/icon_left.svg") no-repeat left center;
}

.link-back > a {
  color: var(--c-accent-primary);
  font: var(--font-body2-b);
}

body.lock_scroll {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  header {
    position: relative;
  }

  .is_fixed_header header .inner-header {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    padding: 12px var(--side-margin) 8px;
    height: 72px;
  }

  .is_fixed_header header.header-prelogin .inner-header {
    height: 56px;
    padding: 6px var(--side-margin);
  }

  .is_fixed_header.is_slide_header header .inner-header {
    transition: transform 0.25s ease;
  }

  .is_fixed_header.is_slide_header.is_scrollup header .inner-header {
    transform: translateY(0);
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  }
}

@media (min-width: 768px) {
  header {
    height: 88px;
    padding: 0px;
    box-shadow: 0px 0px 16px rgba(54, 73, 77, 0.08);
  }

  header > .inner-header {
    display: flex;
    flex-wrap: wrap;
    height: 72px;
    padding: 16px var(--side-margin) 8px;
  }

  div#header_1-1 {
    display: flex;
    font-size: 11px;
    flex-direction: row;
  }

  div#header_1-1 > div {
    padding-top: 10.9px;
  }

  div#header_2 ul {
    gap: 16px;
  }

  div#header_2 li {
    list-style: none;
  }

  div#header_2 li > button {
    font-size: 16px;
    width: 113px;
  }

  div#header_2 li > button:hover {
    background-color: var(--c-accent-secondary-pale);
  }

  div#header_2 li > button:active {
    border: 1px solid var(--c-accent-secondary-light);
    background-color: var(--c-accent-secondary-light);
  }

  .logo-help,
  .logo-logout,
  .logo-menu,
  .logo-cancel {
    width: 44px;
    height: 44px;
  }

  a .logo-help {
    background: url("../img/icon_help_head_pc.svg") no-repeat 0 center;
  }

  a:hover .logo-help {
    background: url("../img/icon_help_head_hover.svg") no-repeat 0 center;
  }

  a:active .logo-help {
    background: url("../img/icon_help_head_toggle.svg") no-repeat 0 center;
  }

  a .logo-logout {
    margin: 0px 6px;
    background: url("../img/icon_logout_pc.svg") no-repeat 0 center;
  }

  a:hover .logo-logout {
    background: url("../img/icon_logout_hover.svg") no-repeat 0 center;
  }

  a:active .logo-logout {
    background: url("../img/icon_logout_toggle.svg") no-repeat 0 center;
  }

  a[aria-expanded="false"] i.logo-menu {
    background: url("../img/icon_menu_pc.svg") no-repeat 0 center;
  }

  a[aria-expanded="false"]:hover i.logo-menu {
    background: url("../img/icon_menu_hover.svg") no-repeat 0 center;
  }

  a[aria-expanded="true"] i.logo-menu {
    background: url("../img/icon_close_pc.svg") no-repeat 0 center;
  }

  a[aria-expanded="true"]:hover i.logo-menu {
    background: url("../img/icon_close_hover.svg") no-repeat 0 center;
  }

  .logo-cancel {
    background: url("../img/icon_cancel_pc.svg") no-repeat 0 center;
  }

  a:hover .logo-cancel {
    background: url("../img/icon_cancel_hover.svg") no-repeat 0 center;
  }

  a:active .logo-cancel {
    background: url("../img/icon_cancel_toggle.svg") no-repeat 0 center;
  }

  .logo-top {
    display: block;
    width: 296px;
    height: 56.45px;
    background: url("../img/logo_pc.svg") no-repeat 0 center;
  }

  figcaption {
    line-height: 17px;
  }

  header.header-prelogin {
    height: 88px;
  }

  header.header-prelogin > .inner-header {
    height: 72px;
    padding: 12px var(--side-margin) 8px;
  }

  header.header-prelogin + main {
    margin-top: 88px;
  }

  header.header-prelogin figure {
    display: block;
    padding: 0px;
  }

  header.header-prelogin figcaption {
    padding-top: 4px;
    display: flex;
    justify-content: center;
  }

  header.header-prelogin div#header_2 li > button {
    margin-top: 16px;
  }
}

.pageid {
  position: sticky;
  top: 100vh;
  width: 100%;
  padding-bottom: 16px;
  text-align: center;
}

.pageid > span {
  font: var(--font-body2-mono);
}

/* footer */
footer {
  bottom: 0;
  color: var(--c-neutral-white);
  font: var(--font-caption1);
  text-align: center;
}

footer > div {
  padding: 24px var(--side-margin) 16px;
  background-color: var(--c-accent-dark);
}

.help-link {
  padding: 8px var(--side-margin);
  background-color: var(--c-footer-navi-back);
  line-height: 17px;
  text-align: center;
}

.help-link > ul {
  display: block;
}

.help-link li {
  display: block;
  padding: 16px 0px;
}

.help-link li a {
  color: var(--c-neutral-primary);
  text-decoration: underline;
}

footer > div:last-child {
  font: var(--font-caption3);
}

@media (min-width: 768px) {
  .help-link {
    font: var(--font-body2);
    line-height: 28px;
  }

  .help-link > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .help-link li {
    position: relative;
    padding: 8px;
  }

  .help-link li::after {
    display: block;
    position: absolute;
    top: calc(50% - 0.4em);
    right: 0;
    width: 1px;
    height: 0.8em;
    background-color: var(--c-neutral-primary);
    content: "";
  }

  .help-link li:last-child:after {
    content: none;
  }

  .help-link li a {
    text-decoration: none;
  }

  .help-link li a:hover {
    text-decoration: underline;
  }
}

@media (max-width: 767.98px) {
  .hide-sp {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-pc {
    display: none !important;
  }
}

/* grid */
.flex-wrap,
.flex-wrap-2 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--col-margin);
  width: 100%;
}

@media (max-width: 767.98px) {
  .flex-pc-between > div:last-child {
    margin-top: 16px;
  }
}

@media (min-width: 768px) {
  .flex-pc-between {
    display: flex;
    gap: var(--col-margin);
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    width: 100%;
  }

  .flex-wrap,
  .flex-wrap-2 {
    flex-direction: row;
  }

  .flex-wrap-2 > div {
    width: calc((50% - 8px));
  }

  .flex-wrap-2 > div.spacer {
    flex: 1 1 auto;
    width: 40%;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--col-margin));
}

.col-sp-auto,
.col-sp-1,
.col-sp-2,
.col-sp-3,
.col-sp-4,
.col-sp-5,
.col-sp-6,
.col-sp-7,
.col-sp-8,
.col-sp-9,
.col-sp-10,
.col-sp-11,
.col-sp-12,
.col-sp-13,
.col-sp-14,
.col-sp-15,
.col-sp-16,
.col-pc-auto,
.col-pc-1,
.col-pc-2,
.col-pc-3,
.col-pc-4,
.col-pc-5,
.col-pc-6,
.col-pc-7,
.col-pc-8,
.col-pc-9,
.col-pc-10,
.col-pc-11,
.col-pc-12,
.col-pc-13,
.col-pc-14,
.col-pc-15,
.col-pc-16 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: var(--col-margin);
}

@media (max-width: 767.98px) {
  .col-sp-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .col-sp-1 {
    -webkit-flex: 0 0 6.25%;
    flex: 0 0 6.25%;
    max-width: 6.25%;
  }

  .col-sp-2 {
    -webkit-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }

  .col-sp-3 {
    -webkit-flex: 0 0 18.75%;
    flex: 0 0 18.75%;
    max-width: 18.75%;
  }

  .col-sp-4 {
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sp-5 {
    -webkit-flex: 0 0 31.25%;
    flex: 0 0 31.25%;
    max-width: 31.25%;
  }

  .col-sp-6 {
    -webkit-flex: 0 0 37.5%;
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }

  .col-sp-7 {
    -webkit-flex: 0 0 43.75%;
    flex: 0 0 43.75%;
    max-width: 43.75%;
  }

  .col-sp-8 {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sp-9 {
    -webkit-flex: 0 0 56.25%;
    flex: 0 0 56.25%;
    max-width: 56.25%;
  }

  .col-sp-10 {
    -webkit-flex: 0 0 62.5%;
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }

  .col-sp-11 {
    -webkit-flex: 0 0 68.75%;
    flex: 0 0 68.75%;
    max-width: 68.75%;
  }

  .col-sp-12 {
    -webkit-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sp-13 {
    -webkit-flex: 0 0 81.25%;
    flex: 0 0 81.25%;
    max-width: 81.25%;
  }

  .col-sp-14 {
    -webkit-flex: 0 0 87.5%;
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }

  .col-sp-15 {
    -webkit-flex: 0 0 93.75%;
    flex: 0 0 93.75%;
    max-width: 93.75%;
  }

  .col-sp-16 {
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .col-pc-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .col-pc-1 {
    -webkit-flex: 0 0 6.25%;
    flex: 0 0 6.25%;
    max-width: 6.25%;
  }

  .col-pc-2 {
    -webkit-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }

  .col-pc-3 {
    -webkit-flex: 0 0 18.75%;
    flex: 0 0 18.75%;
    max-width: 18.75%;
  }

  .col-pc-4 {
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-pc-5 {
    -webkit-flex: 0 0 31.25%;
    flex: 0 0 31.25%;
    max-width: 31.25%;
  }

  .col-pc-6 {
    -webkit-flex: 0 0 37.5%;
    flex: 0 0 37.5%;
    max-width: 37.5%;
  }

  .col-pc-7 {
    -webkit-flex: 0 0 43.75%;
    flex: 0 0 43.75%;
    max-width: 43.75%;
  }

  .col-pc-8 {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-pc-9 {
    -webkit-flex: 0 0 56.25%;
    flex: 0 0 56.25%;
    max-width: 56.25%;
  }

  .col-pc-10 {
    -webkit-flex: 0 0 62.5%;
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }

  .col-pc-11 {
    -webkit-flex: 0 0 68.75%;
    flex: 0 0 68.75%;
    max-width: 68.75%;
  }

  .col-pc-12 {
    -webkit-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-pc-13 {
    -webkit-flex: 0 0 81.25%;
    flex: 0 0 81.25%;
    max-width: 81.25%;
  }

  .col-pc-14 {
    -webkit-flex: 0 0 87.5%;
    flex: 0 0 87.5%;
    max-width: 87.5%;
  }

  .col-pc-15 {
    -webkit-flex: 0 0 93.75%;
    flex: 0 0 93.75%;
    max-width: 93.75%;
  }

  .col-pc-16 {
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-4 {
  margin-top: 4px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.mt-32 {
  margin-top: 32px !important;
}

.mt-36 {
  margin-top: 36px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-44 {
  margin-top: 44px !important;
}

.mt-56 {
  margin-top: 56px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.ml-4 {
  margin-left: 4px !important;
}

.ml-8 {
  margin-left: 8px !important;
}

.ml-12 {
  margin-left: 12px !important;
}

.ml-16 {
  margin-left: 16px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mr-8 {
  margin-right: 8px !important;
}

.mr-16 {
  margin-right: 16px !important;
}

@media (max-width: 767.98px) {
  .mt-16-sp {
    margin-top: 16px !important;
  }
}

.w-100 {
  width: 100%;
}

hr {
  margin: 24px 0;
  border-style: none;
  border-top: 1px solid var(--c-separator);
}

/* text */
h1 {
  font: var(--font-h1) !important;
}

h6 {
  font: var(--font-h6) !important;
}

.txt-body2-b {
  font: var(--font-body2-b) !important;
}

.txt-body2 {
  font: var(--font-body2) !important;
}

.txt-caption1 {
  font: var(--font-caption1) !important;
}

.txt-caption3 {
  font: var(--font-caption3) !important;
}

.txt-h4-mono {
  font: var(--font-h4-mono) !important;
}

.txt-h5-mono {
  font: var(--font-h5-mono) !important;
}

.txt-body1-mono {
  font: var(--font-body1-mono) !important;
}

.txt-body2-mono {
  font: var(--font-body2-mono) !important;
}

.txt-body2-mono-b {
  font: var(--font-body2-mono-b) !important;
}

.txt-caption1-b {
  font: var(--font-caption1-b) !important;
}

.txt-caption1-mono {
  font: var(--font-caption1-mono) !important;
}

.txt-caption1-mono-b {
  font: var(--font-caption1-mono-b) !important;
}

.txt-caption2-mono {
  font: var(--font-caption2-mono) !important;
}

.txt-caption2-mono-b {
  font: var(--font-caption2-mono-b) !important;
}

.txt-caption3-mono {
  font: var(--font-caption3-mono) !important;
}

.txt-caption3-mono-b {
  font: var(--font-caption3-mono-b) !important;
}

.txt-amount {
  font: var(--font-h4-mono);
}

.txt-unit {
  margin: 0 0 0 4px;
}

dd > span.txt-unit:first-child {
  margin: 0 4px 0 0;
}

.txt-right {
  text-align: right !important;
}

.txt-center {
  text-align: center !important;
}

.txt-caution {
  color: var(--c-caution) !important;
}

.txt-accent {
  color: var(--c-accent-primary) !important;
}

.txt-black {
  color: var(--c-neutral-primary) !important;
}

.center {
  text-align: center;
}

/* バックグラウンド */
.bg-gray {
  background-color: var(--c-neutral-back) !important;
}

/* .bg-accent {
  background-color: var(--c-accent-back) !important;
} */

.bg-caution {
  background-color: var(--c-caution) !important;
}

.no-border {
  border: none !important;
}

.border-top-none {
  border-top: none !important;
}

/* button */
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-next {
  position: relative;
  width: 100%;
  max-width: 335px;
  min-height: 52px;
  padding: 4px 14px;
  border-radius: 4px;
  font: var(--font-h6);
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.1s border 0.1s;
}

:is(
    .btn-primary,
    .btn-secondary,
    .btn-tertiary,
    .btn-next,
    .btn-caution
  ):disabled {
  opacity: 0.3;
}

.btn-primary,
.btn-accordion-primary {
  border: 2px solid var(--c-accent-primary);
  background-color: var(--c-accent-primary);
  color: var(--c-neutral-white);
}

.btn-primary:not(:disabled):hover,
.btn-accordion-primary:not(:disabled):hover {
  border: 2px solid var(--c-accent-primary-soft);
  background-color: var(--c-accent-primary-soft);
}

.btn-primary:not(:disabled):active,
.btn-accordion-primary:not(:disabled):active {
  border: 2px solid var(--c-accent-primary-strong);
  background-color: var(--c-accent-primary-strong);
}

.btn-secondary,
.btn-next {
  border: 2px solid var(--c-accent-primary);
  background-color: var(--c-neutral-white);
  color: var(--c-accent-primary);
}

.btn-next {
  padding: 4px 32px;
  background: url("../img/icon_right.svg") no-repeat right 6px center;
  background-color: var(--c-neutral-white);
}

.btn-secondary:not(:disabled):hover,
.btn-next:not(:disabled):hover {
  background-color: var(--c-accent-secondary-pale);
}

.btn-secondary:not(:disabled):active,
.btn-next:not(:disabled):active {
  border: 2px solid var(--c-accent-secondary-light);
  background-color: var(--c-accent-secondary-light);
}

.btn-tertiary {
  min-height: 44px;
  font: var(--font-body2);
  border: 1px solid var(--c-neutral-secondary);
  background-color: var(--c-neutral-white);
  text-align: left;
}

.btn-tertiary:not(:disabled):hover {
  background-color: var(--c-accent-secondary-pale);
}

.btn-tertiary:not(:disabled):active {
  border: 1px solid var(--c-accent-secondary-light);
  background-color: var(--c-accent-secondary-light);
}

.btn-secondary.link > span::after,
.btn-primary.link > span::after {
  display: inline-block;
  width: 16px;
  height: 16px;
  padding-right: 24px;
  background: url("../img/icon_tab.svg") no-repeat left 8px center;
  content: "";
}

.btn-primary.link > span::after {
  background: url("../img/icon_tab_blue.svg") no-repeat left 8px center;
}

.btn-next > small {
  display: block;
  color: var(--c-neutral-primary);
  font: var(--font-caption1);
}

.btn-caution {
  position: relative;
  width: 100%;
  max-width: 335px;
  min-height: 52px;
  padding: 4px 16px;
  border: 2px solid var(--c-caution);
  border-radius: 4px;
  background-color: var(--c-caution);
  color: var(--c-neutral-white);
  font: var(--font-h6);
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.1s border 0.1s;
}

.btn-accordion-caution {
  border: 2px solid var(--c-caution);
  background-color: var(--c-caution);
  color: var(--c-neutral-white);
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.1s border 0.1s;
}

.btn-caution:not(:disabled):hover,
.btn-accordion-caution:not(:disabled):hover {
  border: 2px solid var(--c-caution-hover);
  background-color: var(--c-caution-hover);
}

.btn-caution:not(:disabled):active,
.btn-accordion-caution:not(:disabled):active {
  border: 2px solid var(--c-caution-toggle);
  background-color: var(--c-caution-toggle);
}

.btn-accordion-caution.content-check-acception[aria-expanded="true"] {
  padding: 4px 40px 4px 16px;
  color: var(--c-caution);
  border: 2px solid var(--c-caution-back);
  background-color: var(--c-caution-back);
}

.btn-sm {
  min-height: 44px !important;
  font: var(--font-body2-b);
}

.btn-next.btn-sm {
  font: var(--font-body2);
}

@media (min-width: 768px) {
  .btn-primary,
  .btn-secondary,
  .btn-tertiary,
  .btn-next,
  .btn-caution {
    max-width: 400px;
  }

  .btn-caution,
  .btn-lg {
    min-height: 64px !important;
  }
}

.btn-primary-mini,
.btn-secondary-mini,
.btn-primary-top,
.btn-secondary-top {
  position: relative;
  height: 32px;
  padding: 1px 15px;
  border-radius: 4px;
  /* border: 1px solid var(--c-accent-corporate); */
  font: var(--font-body2-b);
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.1s border 0.1s;
}

.btn-primary-top,
.btn-secondary-top {
  height: 24px;
  font: var(--font-caption1);
}

.btn-primary-mini,
.btn-primary-top {
  border: 1px solid var(--c-accent-primary);
  background-color: var(--c-accent-primary);
  color: var(--c-neutral-white);
}

.btn-primary-mini:not(:disabled):hover,
.btn-primary-top:not(:disabled):hover {
  border: 1px solid var(--c-accent-primary-soft);
  background-color: var(--c-accent-primary-soft);
}

.btn-primary-mini:not(:disabled):active,
.btn-primary-top:not(:disabled):active {
  border: 1px solid var(--c-accent-primary-strong);
  background-color: var(--c-accent-primary-strong);
}

.btn-secondary-mini,
.btn-secondary-top,
.btn-accordion-secondary {
  border: 1px solid var(--c-accent-primary);
  background-color: var(--c-neutral-white);
  color: var(--c-accent-primary);
}

.btn-secondary-mini:not(:disabled):hover,
.btn-secondary-top:not(:disabled):hover,
.btn-accordion-secondary:not(:disabled):hover {
  background-color: var(--c-accent-secondary-pale);
}

.btn-secondary-mini:not(:disabled):active,
.btn-secondary-top:not(:disabled):active,
.btn-accordion-secondary:not(:disabled):active {
  border: 1px solid var(--c-accent-secondary-light);
  background-color: var(--c-accent-secondary-light);
}

.btn-next-noborder,
.btn-next-noborder-accent {
  width: 100%;
  max-width: 335px;
  min-height: 52px;
  padding: 4px 32px;
  border-radius: 4px;
  background: url("../img/icon_right.svg") no-repeat right 6px center;
  background-color: var(--c-neutral-white);
  border: 2px solid var(--c-neutral-white);
  font: var(--font-h6);
  color: var(--c-accent-primary);
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.1s border 0.1s;
}

.btn-next-noborder:not(:disabled):hover {
  background-color: var(--c-accent-secondary-pale);
  border: 2px solid var(--c-accent-primary);
}

.btn-next-noborder:not(:disabled):active {
  background-color: var(--c-accent-secondary-light);
  border: 2px solid var(--c-accent-secondary-light);
}

.btn-next-noborder-accent {
  min-height: 44px;
  padding: 5px 33px;
  background-color: var(--c-accent-back);
  border: 1px solid var(--c-accent-back);
  font: var(--font-body2);
  color: var(--c-accent-primary);
}

.btn-next-noborder-accent:not(:disabled):hover {
  background-color: var(--c-accent-secondary-pale);
  border: 1px solid var(--c-accent-primary);
}

.btn-next-noborder-accent:not(:disabled):active {
  background-color: var(--c-accent-secondary-light);
  border: 1px solid var(--c-accent-secondary-light);
}

@media (max-width: 767.98px) {
  .btn-next-noborder-accent {
    padding-left: 16px;
  }
}

.btn-download-caution,
.btn-download-caution-lg,
.btn-download-primary,
.btn-download-secondary {
  position: relative;
  padding: 4px 16px;
  border-radius: 4px;
  font: var(--font-body2-b);
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.1s border 0.1s;
  min-height: 44px;
}

.btn-download-caution,
.btn-download-primary,
.btn-download-secondary {
  min-width: 146px;
  min-height: 47px;
  line-height: 1;
}

.btn-download-caution-lg {
  max-width: 320px;
  width: 100%;
  display: inline-block;
}
.btn-download-caution-lg > span {
  position: relative;
  padding-right: 32px;
}

.btn-download-caution-lg > span::after {
  position: absolute;
  right: 0;
  width: 24px;
  height: 24px;
  background: url(../img/icon_download_white.svg) center center no-repeat;
  content: "";
}
.btn-download-caution-lg > span > small {
  font: var(--font-body2);
  margin-left: 8px;
}

.btn-download-caution-lg.pressed > span::after {
  background: url(../img/icon_download_caution.svg) center center no-repeat;
}

.btn-download-caution,
.btn-download-caution-lg {
  border: 1px solid var(--c-caution);
  background-color: var(--c-caution);
  color: var(--c-neutral-white);
}

.btn-download-caution.pressed,
.btn-download-caution-lg.pressed {
  color: var(--c-caution);
  background-color: var(--c-neutral-white);
}

.btn-download-caution.pressed:not(:disabled):hover,
.btn-download-caution-lg.pressed:not(:disabled):hover {
  border: 1px solid var(--c-caution);
}

.btn-download-caution:not(:disabled):hover,
.btn-download-caution-lg:not(:disabled):hover {
  border: 1px solid var(--c-caution-hover);
  background-color: var(--c-caution-hover);
}

.btn-download-caution:not(:disabled):active,
.btn-download-caution-lg:not(:disabled):active {
  border: 1px solid var(--c-caution-toggle);
  background-color: var(--c-caution-toggle);
}

.btn-download-primary {
  border: 1px solid var(--c-accent-primary);
  background-color: var(--c-accent-primary);
  color: var(--c-neutral-white);
}

.btn-download-primary.pressed {
  color: var(--c-accent-primary);
  background-color: var(--c-neutral-white);
}

.btn-download-primary:not(:disabled):hover {
  border: 1px solid var(--c-accent-primary-soft);
  background-color: var(--c-accent-primary-soft);
}

.btn-download-primary.pressed:not(:disabled):hover {
  background-color: var(--c-accent-secondary-pale);
}

.btn-download-primary:not(:disabled):active {
  border: 1px solid var(--c-accent-primary-strong);
  background-color: var(--c-accent-primary-strong);
}

.btn-download-secondary {
  border: 1px solid var(--c-accent-primary);
  background-color: var(--c-neutral-white);
  color: var(--c-accent-primary);
}

.btn-download-secondary.pressed {
  color: var(--c-accent-primary);
  background-color: var(--c-neutral-white);
}

.btn-download-secondary:not(:disabled):hover {
  background-color: var(--c-accent-secondary-pale);
}

.btn-download-secondary:not(:disabled):active {
  border: 1px solid var(--c-accent-secondary-light);
  background-color: var(--c-accent-secondary-light);
}

.btn-terms-link-caution {
  position: relative;
  padding: 4px 12px 4px 16px;
  border-radius: 4px;
  font: var(--font-body2-b);
  -webkit-user-select: none;
  user-select: none;
  min-height: 44px;
  line-height: 1;
  min-width: 124px;
  border: 2px solid var(--c-caution);
  background-color: var(--c-caution);
  color: var(--c-neutral-white);
}

.btn-terms-link-caution.pressed {
  color: var(--c-caution);
  background-color: var(--c-neutral-white);
}

.btn-terms-link-caution:not(:disabled):hover {
  border: 2px solid var(--c-caution-hover);
  background-color: var(--c-caution-hover);
}

.btn-terms-link-caution:not(:disabled):active {
  border: 2px solid var(--c-caution-toggle);
  background-color: var(--c-caution-toggle);
}

.btn-terms-link-caution > span::after {
  display: inline-block;
  width: 16px;
  height: 16px;
  padding-right: 24px;
  word-wrap: none;
  background: url(../img/icon_tab_caution_dark.svg) no-repeat left 8px center;
  content: "";
}

.btn-terms-link-caution.pressed > span::after {
  background: url(../img/icon_tab_caution_light.svg) no-repeat left 8px center;
}

.space-download {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 16px;
}

div.box-instraction > div.space-download:first-child {
  margin-top: 8px;
}

.space-download-lg {
  margin-top: 16px;
}

.space-download-lg > p {
  text-align: left;
}

.space-download-lg > div {
  margin-top: 16px;
  text-align: center;
  width: 100%;
}

@media (min-width: 768px) {
  .space-download {
    align-items: center;
  }

  div.box-instraction > div.space-download:first-child {
    margin-top: 0px;
  }

  .space-download-lg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-direction: row;
  }

  .space-download-lg > div {
    margin-top: 0px;
    min-width: 320px;
    width: fit-content;
  }
}

.btn-text,
.btn-text-toggle {
  position: relative;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 4px;
  color: var(--c-accent-primary);
  font: var(--font-body2-b);
  text-align: center;
}

:is(.btn-text, .btn-text-toggle):not(:disabled):hover {
  opacity: 50%;
}

div[aria-hidden="true"],
span[aria-hidden="true"] {
  display: none;
}

.btn-text > span {
  padding-right: 28px;
}

.space-btn {
  margin: 56px 0 24px;
  text-align: center;
}

.space-btn > :is(.btn-primary, .btn-secondary, .btn-txt) {
  margin-top: 16px;
}

.space-btn > :is(.btn-primary, .btn-secondary, .btn-txt):first-child {
  margin-top: 0px;
}

.space-btn-column {
  margin: 56px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.space-btn-step > div.space-btn-2btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 16px;
  margin-top: 0;
  align-items: stretch;
}

.space-btn-step > div.space-btn-2btn > button {
  width: 100%;
  max-width: 320px;
}

.space-btn-2btn {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  gap: 16px;
  margin-top: 56px;
  align-items: center;
}

.space-btn-between,
.space-btn-step {
  margin-top: 56px;
  text-align: center;
}

.space-btn-step > div:first-child {
  display: none;
}

.space-btn-step button {
  font: var(--font-h6);
}

.space-btn-caution {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.space-btn-caution > button.btn-secondary {
  max-width: 100%;
  margin: auto 0 16px 0;
}

.space-btn-sp > div:last-child {
  text-align: center;
  margin-top: 16px;
}

.space-btn-sp button {
  text-align: center;
}

.space-content {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.space-btn-option {
  margin-top: 24px;
  text-align: center;
}

.footer-btn {
  position: fixed;
  bottom: 0;
  width: 100vw;
  margin: 0 var(--side-margin-minus);
  padding: 16px var(--side-margin);
  box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.08);
  background-color: var(--c-neutral-white);
  z-index: 100;
}

.main-compact .footer-btn {
  margin: 0 var(--side-margin-main-compact-minus);
  padding: 16px var(--side-margin-main-compact);
}

dialog .footer-btn {
  position: static;
  width: 100%;
  margin: auto;
  padding: 16px 20px;
}

main:has(.footer-btn) + footer {
  padding-bottom: 85px;
}

main:has(.footer-btn.space-btn-comparison) + footer {
  padding-bottom: 130px;
}

@media (min-width: 768px) {
  .space-btn-2btn {
    flex-direction: row;
  }

  .space-btn-2btn > :is(.btn-primary, .btn-secondary, .btn-caution) {
    max-width: 320px;
    height: 64px;
  }

  .space-btn-step > div {
    width: 100%;
    max-width: 400px;
    text-align: left;
  }

  .space-btn-step > div + div {
    text-align: right;
  }

  .space-btn-step > div > .btn-lg {
    width: 100%;
  }

  .space-btn-between,
  .space-btn-step {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  .space-btn-step > div:first-child {
    display: block;
  }

  .space-btn-step button {
    width: 128px;
    height: 64px;
  }

  main:has(.footer-btn) + footer,
  main:has(.footer-btn.space-btn-comparison) + footer {
    padding-bottom: 97px;
  }

  .space-btn-caution {
    display: flex;
    flex-direction: row;
  }

  .space-btn-caution > button.btn-secondary {
    max-width: 335px;
  }

  .space-btn-caution > div.box-caution {
    margin: 0px 0px 0px 64px;
  }

  .space-btn-caution > div.box-caution > button {
    margin: 0px 0px 0px 64px;
    margin: 16px 0 0 auto;
  }

  .space-btn-sp {
    text-align: start;
  }

  .space-btn-sp > div:last-child {
    text-align: right;
    margin-top: 0px;
  }

  .space-content {
    gap: 16px;
  }

  .space-btn-option {
    text-align: left;
  }

  dialog .footer-btn {
    padding: 16px 40px;
  }
}

/* link  */
a.link,
a.link-line,
a.link-anchor-down,
a.link-anchor-up {
  padding: 8px 0;
  color: var(--c-accent-primary);
  font: var(--font-body2);
}

ul.space-link {
  margin: 24px 0px;
}

ul.space-link > li {
  margin-top: 24px;
  list-style: none;
}

ul.list-text ul.space-link,
ul:is(.asterisk, .asterisk-caution) ul.space-link,
ol:is(.asterisk, .asterisk-caution) ul.space-link,
:is(input + label, input, .select-wrap, .text-wrap) + ul.space-link {
  margin: 16px 0px;
}

ul.list-text ul.space-link > li,
ul:is(.asterisk, .asterisk-caution) ul.space-link > li,
ol:is(.asterisk, .asterisk-caution) ul.space-link > li,
:is(input + label, input, .select-wrap, .text-wrap) + ul.space-link > li {
  margin: 16px 0;
}

ul.space-link > li > p.txt-caption {
  padding-left: 22px;
  margin-top: 16px;
}

a.link[target="_blank"] {
  padding-right: 32px;
  background: url("../img/icon_tab.svg") no-repeat right 4px center;
}

a.link.chevron {
  padding-right: 32px;
  background: url("../img/icon_right.svg") no-repeat right center;
}

a.link-anchor-down::before {
  margin-right: 8px;
  content: url("../img/icon_down_circle.svg");
}

a.link-anchor-up::before {
  margin-right: 8px;
  content: url("../img/icon_up_circle.svg");
}

a:is(.link, .link-anchor-down, .link-anchor-up):hover {
  text-decoration: underline;
}

a.link-line {
  font: var(--font-body2-b);
  text-decoration: underline;
}

a.link-line:hover {
  text-decoration: none;
}

ul.list-link-anchor {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  width: 100%;
  list-style: none;
}

main > section:first-child > :is(ul.list-link-anchor, .subtitle2):first-child {
  margin-top: 0px;
}

main > section:first-child > ul.list-link-anchor + .subtitle2 {
  margin-top: 24px;
}

.btn-text-right {
  position: relative;
  height: 44px;
  margin-right: 32px;
  color: var(--c-accent-primary);
  font: var(--font-body2-b);
  text-align: left;
  margin-top: -8px;
}

.btn-text-right:not(:disabled):hover {
  color: var(--c-accent-primary-soft);
}

.btn-text-right::after {
  position: absolute;
  top: calc(50% - 12px);
  width: 24px;
  height: 24px;
  margin-left: 8px;
  background: url("../img/icon_right.svg") no-repeat center center;
  content: "";
}

.btn-text-right:not(:disabled):hover::after {
  background: url("../img/icon_right_hover.svg") no-repeat center center;
}

.btn-txt {
  color: var(--c-accent-primary);
  padding: 8px 16px;
  font: var(--font-body2-b);
}

.btn-txt:not(:disabled):hover {
  color: var(--c-accent-primary-soft);
}

@media (min-width: 768px) {
  ul.list-link-anchor {
    gap: 16px 24px;
  }
}

.btn-help {
  width: 32px !important;
  padding: 10px 0;
  height: 44px;
  margin: -10px 0px;
  background: url("../img/icon_help.svg") no-repeat center center;
  vertical-align: -6px;
}

.btn-help:hover {
  background: url("../img/icon_help_hover.svg") no-repeat center center;
}

.btn-help:active {
  background: url("../img/icon_help_toggle.svg") no-repeat center center;
}

/* tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.tabs > input[type="radio"] + label.btn {
  display: block;
  order: -1;
  float: left;
  padding: 8px;
  margin-right: 16px;
  border-radius: 4px 4px 0 0;
  background-color: var(--c-neutral-back);
  border: 1px solid var(--c-accent-primary);
  color: var(--c-accent-primary);
  font: var(--font-h6);
  text-align: center;
  z-index: 1;
  transition: background-color 0.1s border 0.1s;
}

.tabs > label.btn::before,
.tabs > label.btn::after {
  display: none;
}

.tabs > input[type="radio"]:not(:checked) + label.btn:hover {
  background-color: var(--c-accent-secondary-pale);
}

.tabs > input[type="radio"] + label.btn:active {
  background-color: var(--c-accent-secondary-light);
}

.tabs > input[type="radio"]:checked + label.btn {
  background-color: var(--c-neutral-white);
  border-bottom: 1px solid var(--c-neutral-white);
}

.tabs > div {
  display: none;
  width: 100vw;
  padding: 16px var(--side-margin);
  margin: -1px var(--side-margin-minus) 56px;
  border-top: 1px solid var(--c-accent-primary);
}

.main-compact .tabs > div {
  padding: 16px var(--side-margin-main-compact);
  margin: -1px var(--side-margin-main-compact-minus) 56px;
}

.tabs > input[type="radio"]:checked + label.btn + div {
  display: block;
}

/* 切り替えボタン */

.btn-accordion-primary,
.btn-accordion-secondary,
.btn-accordion-caution {
  position: relative;
  min-width: 110px;
  height: 32px;
  padding: 4px 16px;
  border-radius: 4px;
  font: var(--font-body2-b);
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.1s border 0.1s;
}

.btn-accordion-primary::after,
.btn-accordion-secondary::after,
.btn-accordion-caution::after {
  position: absolute;
  top: calc(50% - 12px);
  right: 10px;
  width: 24px;
  height: 24px;
  content: "";
  transition: transform 0.2s ease-in;
}

.btn-accordion-primary[aria-expanded="true"]::after,
.btn-accordion-caution[aria-expanded="true"]::after {
  background: url("../img/icon_up_white.svg") no-repeat center center;
}

.btn-accordion-caution.content-check-acception[aria-expanded="true"]:not(
    .completed
  )::after {
  background: url("../img/icon_uncheck_caution.svg") no-repeat center center;
}

.btn-accordion-caution.content-check-acception[aria-expanded="true"].completed::after {
  background: url("../img/icon_check_caution.svg") no-repeat center center;
}

.btn-accordion-primary[aria-expanded="false"]::after,
.btn-accordion-caution[aria-expanded="false"]::after {
  background: url("../img/icon_down_white.svg") no-repeat center center;
}

.btn-accordion-secondary::after {
  background: url("../img/icon_down.svg") no-repeat center center;
}

.btn-accordion-secondary[aria-expanded="true"]::after {
  background: url("../img/icon_up.svg") no-repeat center center;
}

.btn-accordion-primary > span::before,
.btn-accordion-secondary > span::before,
.btn-accordion-caution > span::before {
  position: absolute;
  top: 2px;
  left: 14px;
}

.accordion > button.content-open-check,
.accordion > button.content-check-acception {
  width: 100%;
  max-width: 138px;
  min-width: 138px;
  height: 44px;
  text-align: left;
}

.accordion > button.content-open-check > span::before,
.accordion > button.content-check-acception > span::before {
  position: absolute;
  top: 8px;
  left: 16px;
}

.accordion
  > button[aria-expanded="true"].content-check-acception:not(.completed)
  > span::before {
  width: 70px;
  top: 5px;
}

.btn-text-toggle {
  padding-right: 32px;
}

.btn-text-toggle.content-open {
  min-width: 96px;
}

.btn-text-toggle::after {
  position: absolute;
  top: calc(50% - 12px);
  right: 4px;
  width: 24px;
  height: 24px;
  background: url("../img/icon_down.svg") no-repeat center center;
  content: "";
}

.btn-text-toggle[aria-expanded="true"]::after {
  background: url("../img/icon_up.svg") no-repeat center center;
}

.btn-text-toggle::before {
  content: "開く";
}

.btn-text-toggle.content-open-more::before {
  content: "さらに表示";
}

.btn-text-toggle.account-details::before {
  content: "会員情報詳細";
}

.btn-text-toggle[aria-expanded="true"]::before {
  content: "閉じる";
}

@media (min-width: 768px) {
  .btn-accordion-primary > span::before,
  .btn-accordion-secondary > span::before,
  .btn-accordion-caution > span::before {
    top: 0px;
  }

  .btn-accordion-primary::after,
  .btn-accordion-secondary::after,
  .btn-accordion-caution::after {
    right: 10px;
  }

  .accordion > button.content-open-check,
  .accordion > button.content-check-acception {
    max-width: 148px;
    min-width: 148px;
  }

  .accordion > button.content-open-check > span::before,
  .accordion > button.content-check-acception > span::before {
    position: absolute;
    top: 6px;
  }

  .accordion
    > button[aria-expanded="true"].content-check-acception:not(.completed)
    > span::before {
    width: 90px;
    top: 1px;
  }

  .btn-text-toggle.content-open {
    min-width: 102px;
  }
}

/* アコーディオンの文言のクラス */
button[aria-expanded="true"].content-open > span::before {
  content: "閉じる";
}

button[aria-expanded="false"].content-open > span::before {
  content: "開く";
}

button[aria-expanded="true"].content-open-check > span::before {
  content: "閉じる";
}

button[aria-expanded="false"].content-open-check > span::before {
  content: "開いて確認";
}

button[aria-expanded="true"].content-check-acception:not(.completed)
  > span::before {
  font: var(--font-caption1-b);
  content: "全てお読み下さい";
}

button[aria-expanded="true"].content-check-acception.completed > span::before {
  content: "確認済み";
}

button[aria-expanded="false"].content-check-acception > span::before {
  content: "開いて確認";
}

/* ページャー */
ul.pager {
  display: flex;
  justify-content: space-between;
  width: 304px;
  margin: auto;
  margin-top: 16px;
}

ul.pager > li {
  list-style: none;
}

ul.pager > li > a {
  font: var(--font-h6);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--c-neutral-primary);
}

ul.pager > li > a:not(.disabled-link):hover {
  color: var(--c-accent-primary-op50);
}

ul.pager > li > a:not(.disabled-link):active {
  color: var(--c-accent-primary);
}

ul.pager:active > li > a[aria-current="page"] {
  color: var(--c-neutral-primary);
}

ul.pager > li:first-child > a,
ul.pager > li:last-child > a {
  width: 24px;
  height: 44px;
  padding: 10px 0px;
}

ul.pager > li:first-child > a {
  content: url("../img/icon_left.svg");
}

ul.pager > li:first-child > a:not(.disabled-link):hover {
  content: url("../img/icon_left_hover.svg");
}

ul.pager > li:first-child > a:not(.disabled-link):active {
  content: url("../img/icon_left.svg");
}

ul.pager > li:last-child > a {
  content: url("../img/icon_right.svg");
}

ul.pager > li:last-child > a:not(.disabled-link):hover {
  content: url("../img/icon_right_hover.svg");
}

ul.pager > li:last-child > a:not(.disabled-link):active {
  content: url("../img/icon_right.svg");
}

ul.pager > li > a[aria-current="page"] {
  pointer-events: none;
  cursor: default;
  color: var(--c-accent-primary);
}

.disabled-link {
  pointer-events: none;
  cursor: default;
}

ul.pager > li:first-child > a.disabled-link {
  content: url("../img/icon_left_hover.svg");
}

ul.pager > li:last-child > a.disabled-link {
  content: url("../img/icon_right_hover.svg");
}

ul.pager-txt {
  display: flex;
  justify-content: space-between;
  width: 272px;
  margin: auto;
  margin-top: 16px;
}

ul.pager-txt > li {
  list-style: none;
}

ul.pager-txt > li > a {
  font: var(--font-body2-b);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--c-neutral-primary);
}

ul.pager-txt > li > a:not(.disabled-link):hover {
  color: var(--c-accent-primary-op50);
}

ul.pager-txt > li > a:not(.disabled-link):active {
  color: var(--c-accent-primary);
}

ul.pager-txt > li:first-child > a,
ul.pager-txt > li:last-child > a {
  height: 44px;
  color: var(--c-accent-primary);
  white-space: nowrap;
}

ul.pager-txt > li:first-child > a::before,
ul.pager-txt > li:last-child > a::after {
  width: 24px;
  position: relative;
}

ul.pager-txt > li:first-child > a::before {
  margin-right: 4px;
  top: 4px;
  content: url("../img/icon_left.svg");
}

ul.pager-txt > li:last-child > a::after {
  margin-left: 4px;
  top: 4px;
  content: url("../img/icon_right.svg");
}

ul.pager-txt > li:first-child > a:hover::before {
  content: url("../img/icon_left_hover.svg");
}
ul.pager-txt > li:first-child > a:active::before {
  content: url("../img/icon_left.svg");
}

ul.pager-txt > li:last-child > a:hover::after {
  content: url("../img/icon_right_hover.svg");
}

ul.pager-txt > li:last-child > a:active::after {
  content: url("../img/icon_right.svg");
}

ul.pager-txt > li:first-child > a.disabled-link,
ul.pager-txt > li:last-child > a.disabled-link {
  opacity: 0.3;
}

ul.pager-txt > li:first-child > a.disabled-link::before {
  content: url("../img/icon_left_hover.svg");
}

ul.pager-txt > li:last-child > a.disabled-link::after {
  content: url("../img/icon_right_hover.svg");
}

@media (min-width: 768px) {
  ul.pager-txt {
    width: 296px;
  }

  ul.pager-txt > li:first-child > a::before {
    margin-right: 8px;
  }

  ul.pager-txt > li:last-child > a::after {
    margin-left: 8px;
  }
}

/* keyboard */
.keyboard-wrap {
  display: flex;
  flex-flow: row;
}

.keyboard-wrap > input[type="password"] {
  background-color: var(--c-neutral-white);
}

.keyboard-wrap > input[type="password"].txtmessage-error {
  background-color: var(--c-error-back);
}

.keyboard-wrap .btn-show-keyboard {
  margin-left: 12px;
}

.box-certification .keyboard-wrap {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}

.btn-show-keyboard {
  display: inline-block;
  width: 140px;
  min-width: 140px;
  height: 52px;
  padding-left: 40px;
  padding-right: 12px;
  background: url("../img/icon_keyboard.svg") no-repeat left 16px center;
  font: var(--font-caption3-b);
  text-align: left;
  background-color: var(--c-neutral-white);
  border: 1px solid var(--c-accent-primary);
}

/* .box-certification .keyboard-wrap > .btn-show-keyboard {
  width: 100%;
} */

.keybord {
  width: var(--softwareKeyboard-width);
  height: 448px;
  margin: 0;
  padding: 16px 24px 24px;
  background-color: var(--c-neutral-back);
  font: var(--font-caption2-b);
}

.keybord > div > button.btn-secondary-mini {
  min-width: 140px;
}

.keybord > div > button[aria-pressed="false"]::before {
  content: "文字を非表示";
}

.keybord > div > button[aria-pressed="true"]::before {
  content: "文字を表示";
}

.keybord > div > button.btn-close {
  height: 24px;
  padding-left: 32px;
  background: url("../img/icon_close_blue.svg") no-repeat left center;
  font: var(--font-caption3-b);
  font-size: 11px;
}

.password {
  width: 394px;
  height: 50px;
  padding: 16px 20px;
  border-radius: 4px;
  /* outline: none; */
}
button.btn-min {
  display: inline-block;
  min-width: 40px;
  min-height: 32px;
  border: 1px solid var(--c-neutral-secondary);
  border-radius: 4px;
  background-color: var(--c-neutral-white);
  color: var(--c-accent-primary);
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 0.3s;
}

button.btn-min:not(:disabled):hover {
  background-color: var(--c-accent-secondary-pale);
}

button.btn-min:active {
  background-color: var(--c-accent-secondary-light);
  border: 1px solid var(--c-accent-secondary-light);
}

.flex-center {
  display: flex;
  gap: 44px;
  justify-content: center;
}

.buttons {
  margin-top: 16px;
}
.buttons > div {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.buttons > div:first-child {
  margin-top: 0px;
}

/* 金融機関名検索 */
.search-bank-keyboard {
  margin: 24px 0px;
}

.search-bank-keyboard button.btn-min,
.search-bank-kana > div {
  font: var(--font-h5);
  min-width: 47px;
  min-height: 44px;
}

.search-bank-keyboard > div.tabs > input[type="radio"] + label.btn {
  margin-right: 10px;
  max-width: 162px;
  width: 100%;
}

.search-bank-keyboard > div.tabs > input[type="radio"] + label.btn.last {
  margin-right: 0px;
}

.search-bank-keyboard > div.tabs > div {
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.search-bank-kana,
.search-bank-alpha {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 335px;
  gap: 24px;
  margin: auto;
}

@media (min-width: 768px) {
  .search-bank-keyboard > div {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .search-bank-keyboard > .tabs > div {
    display: flex;
    border-top: none;
    width: auto;
    padding-top: 0px;
  }

  div.search-bank-keyboard > div.tabs > input[type="radio"],
  div.search-bank-keyboard > div.tabs > label.btn {
    display: none;
  }

  .search-bank-kana,
  .search-bank-alpha {
    gap: 16px;
    margin: 0;
  }

  .search-bank-kana {
    width: 614px;
    height: 285px;
    flex-direction: column;
    margin-right: 32px;
  }

  .search-bank-alpha {
    width: 425px;
  }
}

/* 銀行支店一覧 */
.select-view-branch > div > button.btn-tertiary {
  max-width: none;
  text-align: left;
}

/* 金融機関一覧 */
.select-view-bank {
  margin: 16px 0;
  gap: 16px 32px;
}

.select-view-bank > div > button.btn-tertiary {
  max-width: none;
  height: 100%;
}

@media (min-width: 768px) {
  .select-view-bank > div {
    max-width: calc((100% - 64px) / 3);
    width: 100%;
  }
}

/* アコーディオン */
.accordion > div {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.accordion > div[aria-hidden="false"] {
  max-height: 100%;
  padding: 0px 16px 16px;
}

.accordion > button.btn-text {
  width: 100%;
  max-width: 100%;
  height: 66px;
  text-align: center;
  border-radius: 0px;
  border-top: 2px solid var(--c-card-frame);
}

.accordion[aria-expanded="true"] > button.btn-text {
  border-bottom: 2px solid var(--c-card-frame);
}

div.accordion[aria-expanded="false"] > button.btn-text > span {
  background: url("../img/icon_down.svg") no-repeat right center;
}

div.accordion[aria-expanded="true"] > button.btn-text > span {
  background: url("../img/icon_up.svg") no-repeat right center;
}

div.accordion > button.btn-text > span::before {
  font: var(--font-body2-b);
}

div.accordion[aria-expanded="false"] > button.btn-text > span::before {
  content: "詳細を見る";
}

div.accordion[aria-expanded="true"] > button.btn-text > span::before {
  content: "閉じる";
}

.accordion > .btn-accordion,
.accordion > .btn-accordion-secondary {
  width: 110px;
  height: 32px;
  text-align: left;
}

/* ここまでボタン */

/* checkbox */
input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
  transform: scale(0.1);
  appearance: none;
}

input[type="checkbox"] + label {
  display: inline-table;
  position: relative;
  min-height: 44px;
  padding: 10px 8px 10px 40px;
  font: var(--font-body2);
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 4px;
}

input[type="checkbox"] + label::before,
input[type="checkbox"] + label::after {
  display: block;
  position: absolute;
  content: "";
}

input[type="checkbox"] + label:before {
  top: calc(50% - 12px);
  left: 0px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-neutral-secondary);
  border-radius: 4px;
  background-color: var(--c-neutral-white);
}

input[type="checkbox"]:checked + label::before {
  border: 1px solid var(--c-accent-primary);
  background-color: var(--c-accent-primary);
  transition: background-color 0.1s ease-in;
}

input[type="checkbox"] + label:after {
  opacity: 0;
  top: calc(50% - 5px);
  left: 4px;
  transform: rotate(-45deg);
  width: 13px;
  height: 7px;
  border-bottom: 2px solid var(--c-neutral-white);
  border-left: 2px solid var(--c-neutral-white);
  transition: opacity 0.2s step-end;
}

input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

input[type="checkbox"]
  + label:is(.btn-checkbox, .btn-checkbox-notice, .btn-checkbox-caution) {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px 13px 56px;
  border: 1px solid var(--c-neutral-secondary);
  background-color: var(--c-neutral-white);
  color: var(--c-neutral-primary);
}

input[type="checkbox"] + label.btn-checkbox-notice {
  border: 1px solid var(--c-accent-primary);
}

input[type="checkbox"] + label.btn-checkbox-caution {
  font: var(--font-body2-b);
}

input[type="checkbox"] + label.btn-checkbox-caution::before {
  border: 1px solid var(--c-neutral-white);
}

input[type="checkbox"]
  + label:is(.btn-checkbox.checkbox-star, .btn-checkbox-accent) {
  width: 142px;
  min-height: 44px;
  padding: 10px 16px 8px 56px;
}

input[type="checkbox"]
  + label:is(.btn-checkbox, .btn-checkbox-notice, .btn-checkbox-caution)
  + input
  + label,
p
  + input[type="checkbox"]
  + label:is(.btn-checkbox, .btn-checkbox-notice, .btn-checkbox-caution) {
  margin-top: 16px;
}

input[type="checkbox"]
  + label:is(
    .btn-checkbox,
    .btn-checkbox-notice,
    .btn-checkbox-caution,
    .btn-checkbox-accent
  )::before {
  left: 16px;
}

input[type="checkbox"]
  + label:is(
    .btn-checkbox,
    .btn-checkbox-notice,
    .btn-checkbox-caution,
    .btn-checkbox-accent
  )::after {
  left: 22px;
}

input[type="checkbox"] + label.btn-checkbox-accent {
  color: var(--c-neutral-white);
  border: 1px solid var(--c-accent-primary);
  background-color: var(--c-accent-primary);
}

input[type="checkbox"]:checked + label.btn-checkbox {
  border: 1px solid var(--c-accent-primary);
  background-color: var(--c-accent-secondary-light);
}

input[type="checkbox"] + label.btn-checkbox-caution {
  border: 1px solid var(--c-caution);
  background-color: var(--c-caution);
  color: var(--c-neutral-white);
}

.center > input[type="checkbox"] + label.btn-checkbox-caution {
  margin-top: 8px;
}

input[type="checkbox"]:checked
  + label:is(
    .btn-checkbox-notice,
    .btn-checkbox-caution,
    .btn-checkbox-accent
  ) {
  border: 1px solid var(--c-caution);
  background-color: var(--c-caution-back);
  color: var(--c-neutral-primary);
}

input[type="checkbox"]:checked
  + label:is(
    .btn-checkbox-notice,
    .btn-checkbox-caution,
    .btn-checkbox-accent
  )::before {
  border: 1px solid var(--c-caution);
  background-color: var(--c-caution);
}

input[type="checkbox"] + label.checkbox-star::before {
  content: url("../img/icon_star.svg");
  border: none;
}

input[type="checkbox"] + label.checkbox-star:after {
  border: none;
}

input[type="checkbox"]:checked + label.checkbox-star::before {
  border: none;
  content: url("../img/icon_star_checked.svg");
  background-color: var(--c-accent-secondary-light);
  transition: background-color 0s ease-in;
}

input[type="checkbox"] + label.btn-checkbox.checkbox-star {
  border: 1px solid var(--c-accent-primary);
  background-color: var(--c-neutral-white);
  color: var(--c-neutral-primary);
}

input[type="checkbox"]:checked + label.checkbox-star {
  background-color: var(--c-accent-secondary-light);
}

input[type="checkbox"]:disabled + label {
  border: 1px solid var(--c-separator);
  background-color: var(--c-separator);
  color: var(--c-neutral-primary);
  opacity: 0.3;
  cursor: default;
}

input[type="checkbox"]:disabled + label.btn-checkbox-caution {
  border: 1px solid var(--c-caution);
  background-color: var(--c-caution);
  color: var(--c-neutral-white);
}

@media (min-width: 768px) {
  input[type="checkbox"]
    + label:is(.btn-checkbox, .btn-checkbox-notice, .btn-checkbox-caution) {
    padding: 11px 16px 11px 56px;
  }

  input[type="checkbox"]:not(:disabled)
    + label:is(.btn-checkbox, .btn-checkbox-notice):hover {
    background-color: var(--c-accent-secondary-pale);
  }

  input[type="checkbox"]:not(:disabled) + label.btn-checkbox-caution:hover,
  input[type="checkbox"]:checked:not(:disabled)
    + label:is(.btn-checkbox-notice, .btn-checkbox-accent):hover {
    background-color: var(--c-caution-hover);
    border: 1px solid var(--c-caution);
  }

  input[type="checkbox"]:not(:disabled) + label.btn-checkbox-accent:hover {
    background-color: var(--c-accent-primary-soft);
    border: 1px solid var(--c-accent-primary-soft);
  }

  input[type="checkbox"]
    + label:is(.btn-checkbox.checkbox-star, .btn-checkbox-accent) {
    padding: 7px 16px 7px 56px;
    width: 110px;
  }

  input[type="checkbox"] + label.checkbox-star:hover::before {
    border: none;
    content: url("../img/icon_star_hover.svg");
    background-color: var(--c-accent-secondary-pale);
  }

  input[type="checkbox"]:checked + label.checkbox-star:hover::before {
    content: url("../img/icon_star_checked.svg");
    background-color: var(--c-accent-secondary-pale);
  }
}

/* radio */
input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
  transform: scale(0.1);
  appearance: none;
}

input[type="radio"] + label {
  display: inline-block;
  position: relative;
  padding: 10px 8px 10px 36px;
  font: var(--font-body2);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  text-align: left;
}

input[type="radio"] + label + input + label,
p + input[type="radio"] + label {
  margin-top: 16px;
}

input[type="radio"] + label:before,
input[type="radio"] + label:after {
  display: block;
  position: absolute;
  content: "";
}

input[type="radio"] + label:before {
  top: calc(50% - 12px);
  left: 0px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-neutral-secondary);
  border-radius: 24px;
  background-color: var(--c-neutral-white);
}

input[type="radio"]:disabled + label:before {
  background-color: var(--c-separator);
}

input[type="radio"] + label:after {
  opacity: 0;
  top: calc(50% - 4px);
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: var(--c-neutral-white);
}

input[type="radio"]:focus:not(:focus-visible) + label {
  outline: none;
}

input[type="radio"]:focus-visible + label {
  outline: auto;
}

input[type="radio"]:checked + label:before {
  border: 1px solid var(--c-accent-primary);
  background-color: var(--c-accent-primary);
  transition: background-color 0.1s ease-in;
}

input[type="radio"]:checked + label:after {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

input[type="radio"]:checked + label,
input[type="radio"]:disabled + label {
  cursor: default;
}

input[type="radio"]
  + label:is(.btn-radio, .btn-radio-notice, .btn-radio-accent) {
  display: inline-block;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px 13px 56px;
  border: 1px solid var(--c-neutral-secondary);
  border-radius: 4px;
  background-color: var(--c-neutral-white);
  color: var(--c-neutral-primary);
  vertical-align: middle;
}

input[type="radio"] + label:is(.btn-radio-notice, .btn-radio-accent) {
  padding: 9px 16px 9px 56px;
  min-height: 44px;
  width: 142px;
}

input[type="radio"] + label.btn-radio-accent {
  background-color: var(--c-accent-primary);
  color: var(--c-neutral-white);
}

input[type="radio"]
  + label:is(.btn-radio, .btn-radio-notice, .btn-radio-accent):before {
  /* top: calc(50% - 12px); */
  left: 16px;
}

input[type="radio"]
  + label:is(.btn-radio, .btn-radio-notice, .btn-radio-accent):after {
  /* top: calc(50% - 11px); */
  left: 24px;
}

input[type="radio"]:checked + label:is(.btn-radio, .btn-radio-notice) {
  border: 1px solid var(--c-accent-secondary-light);
  background-color: var(--c-accent-secondary-light);
  outline-offset: 4px;
}

input[type="radio"]:disabled
  + label:is(.btn-radio, .btn-radio-notice, .btn-radio-accent) {
  opacity: 0.3;
}

input[type="radio"]:disabled + label.btn-radio-accent {
  color: var(--c-neutral-primary);
  background-color: var(--c-separator);
  border: 1px solid var(--c-separator);
}

input[type="radio"] + label.btn-radio-notice {
  border: 1px solid var(--c-accent-primary);
}

input[type="radio"]:checked + label.btn-radio-notice {
  border: 1px solid var(--c-caution-back);
  background-color: var(--c-caution-back);
}

input[type="radio"]:checked + label.btn-radio-accent {
  border: 1px solid var(--c-caution);
  background-color: var(--c-caution-back);
}

input[type="radio"]:checked + label.btn-radio-accent {
  color: var(--c-neutral-primary);
}

input[type="radio"]:checked
  + label:is(.btn-radio-notice, .btn-radio-accent)::before {
  border: 1px solid var(--c-caution);
  background-color: var(--c-caution);
}

input[type="radio"] + label.btn-radio.space-content {
  align-items: center;
}

input[type="radio"] + label.btn-radio > span.attribute > span {
  font: var(--font-caption1);
  margin-right: 16px;
}

input[type="radio"] + label.btn-radio > span.attribute > span:last-child {
  font: var(--font-caption1-b);
  margin-right: 0px;
}

@media (min-width: 768px) {
  input[type="radio"] + label:is(.btn-radio) {
    padding: 11px 16px 11px 56px;
  }

  input[type="radio"] + label:is(.btn-radio-accent, .btn-radio-notice) {
    padding: 7px 16px 7px 56px;
    width: fit-content;
  }

  input[type="radio"]:not(:disabled):not(:checked)
    + label:is(.btn-radio):hover {
    background-color: var(--c-accent-secondary-pale);
  }

  input[type="radio"]:not(:disabled):not(:checked)
    + label:is(.btn-radio-notice):hover {
    background-color: var(--c-accent-secondary-pale);
  }

  input[type="radio"]:not(:disabled):not(:checked)
    + label:is(.btn-radio-accent):hover {
    background-color: var(--c-accent-primary-soft);
  }
}

input[type="radio"] + label.risk-category:is(.btn-radio, .btn-radio-notice) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label-space-between {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;
}

@media (min-width: 768px) {
  .label-space-between {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.label-definition > span:first-child {
  font: var(--font-caption1);
  margin-right: 8px;
}

.label-definition > span:last-child {
  font: var(--font-body2-b);
}

.btn-radio.space-content {
  flex-wrap: wrap;
  gap: 8px;
}

.accordion-radio {
  margin-bottom: 16px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0s ease-out;
}

input[type="radio"]:checked + label + .accordion-radio {
  max-height: 100%;
}

/* select */
.select-wrap {
  position: relative;
  width: 100%;
  height: 52px;
  margin-right: 8px;
  border: 1px solid var(--c-neutral-secondary);
  border-radius: 4px;
  background-color: var(--c-neutral-white);
}

.select-wrap::after {
  position: absolute;
  top: -4px;
  right: 14px;
  bottom: 0;
  z-index: 1;
  transform: rotate(45deg);
  width: 10px;
  height: 10px;
  margin: auto;
  border-right: 2px solid var(--c-accent-primary);
  border-bottom: 2px solid var(--c-accent-primary);
  border-radius: 1px;
  vertical-align: middle;
  content: "";
  pointer-events: none;
}

.select-wrap > select {
  width: 100%;
  height: 100%;
  padding: 0 24px 0 12px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--c-neutral-primary);
  font: var(--font-body2);
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

p + .select-wrap {
  margin-top: 16px;
}

/* text */
input::placeholder {
  color: var(--c-neutral-primary-op50);
}

input[type="text"],
input[type="password"] {
  width: 100%;
  height: 52px;
  padding: 0px 12px;
  border: 1px solid var(--c-neutral-secondary);
  border-radius: 4px;
  font: var(--font-body2);
}

.text-wrap {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
}

.text-wrap > span {
  font: var(--font-body2-b);
  white-space: nowrap;
}

input.txtmessage-error {
  background-color: var(--c-error-back);
}

input + span {
  margin: 0 8px;
}

input + span:last-child {
  margin: 0 0 0 8px;
}

.text-wrap > input + span {
  margin: 0;
}

.text-date {
  flex-wrap: wrap;
  gap: 16px;
}

.text-date input[type="text"] {
  text-align: right;
}

.one-pass {
  display: flex;
  align-items: center;
}

.auth-postcard {
  width: 100%;
  margin-top: 32px;
}

.auth-postcard > div {
  margin-top: 16px;
  display: flex;
  align-items: center;
}
.auth-postcard > div > span {
  margin-right: 8px;
}

.auth-postcard > div > input + span {
  margin: 0px 8px;
}

.auth-postcard > div > input[type="text"] {
  width: 125px;
}

@media (min-width: 768px) {
  input[type="text"],
  input[type="password"] {
    padding: 0px 16px;
  }

  .auth-postcard > div > input[type="text"] {
    width: 100%;
  }
}

/* title */
.page-title {
  margin: 0 var(--side-margin-minus);
  padding: 16px var(--side-margin);
  background-color: var(--c-accent-dark);
  color: var(--c-neutral-white);
  font: var(--font-h5);
}

.main-compact .page-title {
  margin: 0 calc(-1 * max(20px, calc(50vw - 364px)));
}

.page-title ul {
  list-style-type: none;
  margin-bottom: 4px;
  font: var(--font-caption1);
}

.page-title ul > li:not(:last-child) {
  display: none;
}

.page-title ul > li {
  position: relative;
  padding-right: 25px;
}

.page-title > ul > li:first-child {
  font: var(--font-caption1);
}

.page-title ul > li::after {
  position: absolute;
  top: 0;
  right: 8px;
  font: var(--font-caption1);
  content: ">";
}

.page-title ul > li:last-child {
  padding-right: 0;
}

.page-title ul > li:last-child::after {
  content: "";
}

.page-title ul > li > a {
  font: var(--font-caption1);
  color: var(--c-neutral-white);
}

.page-title ul > li > a:hover {
  text-decoration: underline;
}

.page-title > p {
  font: var(--font-caption1);
  margin-bottom: 4px;
}

.title-sign {
  margin: 24px 0;
  font: var(--font-h5);
}

.page-title + p {
  margin-top: 24px;
}

nav + main :is(.page-title, .top-menu) {
  margin-top: -24px;
}

.page-title .btn-help {
  background: url("../img/icon_help_white.svg") no-repeat center center;
}

.page-title .btn-help:hover {
  background: url("../img/icon_help_white_hover.svg") no-repeat center center;
}

.page-title .btn-help:active {
  background: url("../img/icon_help_white_toggle.svg") no-repeat center center;
}

.page-title.account-info div.account-number {
  font: var(--font-body1);
  white-space: nowrap;
  margin-top: 4px;
  margin-bottom: 16px;
}
.page-title.account-info div.account-number > span {
  font: var(--font-body1-mono-b);
  margin-left: 4px;
}
.page-title.account-info > div:last-child {
  display: flex;
  justify-content: space-between;
}
.page-title.account-info > div:first-child > div:last-child > div:last-child {
  font: var(--font-caption1);
  margin-top: 8px;
}
.page-title.account-info button {
  max-width: 160px;
}

.page-title.account-info > div:last-child > div:first-child {
  width: 100%;
}
.page-title.account-info > div:last-child > div:first-child > div:last-child {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
}

.page-title.account-info > div:first-child > div:last-child {
  display: block;
}
.page-title.account-info .balance {
  max-width: 100%;
}
.page-title.account-info .balance > div {
  font: var(--font-body2);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--c-neutral-white);
  align-items: baseline;
}
.page-title.account-info .balance > div:last-child {
  border-bottom: none;
  margin-top: 8px;
}
.page-title.account-info .balance > div > div:last-child {
  font: var(--font-h1-mono);
}
.page-title.account-info .balance > div > div:last-child > span {
  font: var(--font-body2);
  margin-left: 4px;
}
.page-title.account-info .balance > div:last-child > div:last-child {
  font: var(--font-body2-mono-b);
}
.page-title.account-info .balance > div:last-child > div:last-child > span {
  font: var(--font-body2);
  margin-left: 4px;
}
@media (min-width: 768px) {
  .page-title ul {
    display: flex;
    font: var(--font-caption1-b);
  }
  .page-title ul > li:not(:last-child) {
    display: list-item;
  }
  .page-title .btn-help {
    background: url("../img/icon_help_white.svg") no-repeat center center;
  }
  .page-title.account-info > div:first-child > div:last-child {
    display: flex;
    justify-content: space-between;
  }
  .page-title.account-info > div:first-child > div:last-child > div:last-child {
    margin-top: 0px;
  }
  .page-title.account-info button {
    width: 197px;
    max-width: 197px;
  }
  .page-title.account-info > div:last-child > div:first-child > div:last-child {
    justify-content: left;
  }
  .page-title.account-info > div:last-child > div:first-child > div:last-child {
    margin-top: 0px;
  }
  .page-title.account-info .balance {
    flex: 0 0 43.75%;
    max-width: 43.75%;
    margin-top: auto;
  }
}

.subtitle {
  margin: 24px 0 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--c-accent-primary);
  font: var(--font-h6);
}

.subtitle2.first {
  margin-top: -24px;
}

.subtitle.accordion {
  margin-top: 16px;
}

.subtitle.first {
  margin-top: -32px;
}

.subtitle.accordion + div[aria-hidden] > dl.table:first-child {
  margin-top: -16px;
}

.subtitle + .box-gray {
  margin-top: 16px;
}

.subtitle-qa {
  margin: 16px 0px;
  padding: 16px 20px 16px 0px;
  background-color: var(--c-neutral-back);
  font: var(--font-body2-b);
}

.subtitle + table {
  margin-top: -16px;
}

div.subtitle.accordion,
.subtitle:has(button.btn-secondary),
.subtitle:has(button.btn-text-right) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* .subtitle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
} */

.subtitle:has(button.btn-text-right) > p {
  padding-top: 14px;
}

.subtitle > button.btn-text-right {
  margin-top: 0px;
  margin-bottom: -6px;
}

.subtitle > button.btn-secondary {
  width: auto;
  max-width: 140px;
  min-height: 32px;
}

.subtitle2 {
  margin: 32px 0 16px;
  font: var(--font-body2-b);
}

.subtitle + .subtitle2 {
  margin-top: 16px;
}

.subtitle2 + p {
  margin-top: 16px;
}

.subtitle2:has(button) {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.subtitle2.space-btn-help {
  display: block;
}

.subtitle2:has(button) > p {
  display: flex;
  align-items: center;
}

.subtitle2.dialog {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
}

.subtitle2.dialog > p {
  padding-top: 4px;
}

hr + .subtitle2 {
  margin-top: 16px;
}

.subtitle2.subtitle-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.subtitle2.subtitle-date > .subtitle-caption {
  margin: 0px;
}

.subtitle-caption {
  margin: 16px 0;
  color: var(--c-neutral-primary);
  font: var(--font-caption2);
  text-align: right;
}

:not(.subtitle, .subtitle2) + .subtitle-caption {
  margin-top: 24px;
}

.subtitle-caption + .subtitle2 {
  margin-top: 16px;
}

p.task-title {
  font: var(--font-caption1-b);
  margin: 16px 0;
}

p.task-caption {
  font: var(--font-caption1);
  margin: 16px 0;
}

@media (min-width: 768px) {
  .subtitle > button.btn-secondary {
    width: 140px;
    min-height: 32px;
  }
}

/* 注意事項 */
.box-notice {
  margin: 24px var(--side-margin-minus);
  padding: 24px var(--side-margin);
  background-color: var(--c-neutral-back);
  font: var(--font-body2);
}

.box-notice > dt {
  margin-bottom: 24px;
  color: var(--c-caution);
  font: var(--font-body1-b);
  text-align: center;
}

.box-notice > dd > ul.list-text:last-child,
.box-notice > div[aria-hidden] > ul.list-text:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .box-notice {
    margin: 24px 0;
    padding: 24px;
  }

  .box-notice > dt {
    margin-bottom: 16px;
  }
}

.asterisk,
.asterisk-caution {
  margin-top: 16px;
  position: relative;
  padding-left: calc(1em + 4px);
  font: var(--font-caption1);
}

.asterisk-caution {
  color: var(--c-caution);
}

:not(ul, ol).asterisk::before,
:not(ul, ol).asterisk-caution::before {
  position: absolute;
  left: 0px;
  color: var(--c-neutral-primary);
  font: var(--font-caption1-b);
  content: "＊";
}

.asterisk-caution:before {
  color: var(--c-caution) !important;
}

.txt-asterisk,
.txt-asterisk-caution {
  margin: 0px 4px;
  color: var(--c-neutral-primary);
  font: var(--font-caption1-b);
  white-space: nowrap;
}

.txt-asterisk-caution {
  color: var(--c-caution);
}

.txt-asterisk::before,
.txt-asterisk-caution::before {
  content: "＊";
}

.num-increment {
  counter-increment: num;
}

.asterisk-num,
.asterisk-caution-num {
  position: relative;
  margin-top: 16px;
  /* padding-left: 28px; */
  padding-left: calc(var(--font-caption1-fs) * 2 + 4px);
  font: var(--font-caption1);
  counter-increment: num;
  list-style-type: none;
}

.asterisk-num::before,
.asterisk-caution-num::before {
  position: absolute;
  left: 0px;
  color: var(--c-neutral-primary);
  font: var(--font-caption1-b);
  content: "＊" counter(num);
}

.asterisk-caution-num,
.asterisk-caution-num::before {
  color: var(--c-caution);
}

:is([class^="card-"], .card) + [class^="asterisk"] {
  margin-top: 24px;
}

:is(.asterisk, .asterisk-num, .asterisk-caution, .asterisk-caution-num):has(
    > a.link:first-child
  )::before {
  line-height: var(--font-body2-lh);
}

/* num のリセット */
.counterreset-num {
  counter-reset: num;
}

:is(ul, ol).asterisk,
:is(ul, ol).asterisk-caution {
  font: var(--font-caption1);
  list-style-type: none;
  padding-left: 0;
}

:is(ul, ol).asterisk-caution {
  color: var(--c-caution);
}

:is(ul, ol).asterisk > li,
:is(ul, ol).asterisk-caution > li {
  position: relative;
  margin: 16px 0 0;
}

ul.asterisk > li,
ul.asterisk-caution > li {
  padding-left: calc(1em + 4px);
}

ul.asterisk > li::before,
ul.asterisk-caution > li::before {
  position: absolute;
  left: 0;
  font: var(--font-caption1-b);
  content: "＊";
}

ol.asterisk,
ol.asterisk-caution {
  counter-reset: num;
}

ol.asterisk > li,
ol.asterisk-caution > li {
  padding-left: calc(var(--font-caption1-fs) * 2 + 4px);
}

ol.asterisk > li::before,
ol.asterisk-caution > li::before {
  position: absolute;
  left: 0;
  font: var(--font-caption1-b);
  counter-increment: num;
  content: "＊" counter(num);
}

:is(ul, ol):is(.asterisk, .asterisk-caution)
  > li:has(> a.link:first-child)::before {
  line-height: 24px;
}

@media (min-width: 768px) {
  :is(ul, ol):is(.asterisk, .asterisk-caution)
    > li:has(> a.link:first-child)::before {
    line-height: 28px;
  }
}

.attention {
  position: relative;
  padding-left: calc(1em + 4px);
  font: var(--font-caption1);
}

.attention:before {
  position: absolute;
  left: 0px;
  content: "※";
}

div.box-search-conditions {
  margin: 16px 0px;
  padding: 16px 20px;
  width: 100%;
  border: 1px solid var(--c-separator);
  background-color: var(--c-neutral-white);
}

ul.list-text {
  list-style-type: none;
}

:is(ul.list-text, ol:not(.asterisk, .asterisk-caution)) {
  margin: 24px 0px;
}

:is(ul.list-text, ol:not(.asterisk, .asterisk-caution)) > li {
  position: relative;
  margin-top: 24px;
}

ul.list-text > li > :is(ul.list-text, ol) {
  margin: 16px 0;
  font: var(--font-caption1);
}

ul.list-text > li > :is(ul.list-text, ol) > li {
  margin-top: 16px;
}

.flex-pc-between + div > ul.list-text {
  margin-top: 16px;
}

ul.list-text > li {
  padding-left: calc(1em + 4px);
}

ul.list-text > li::before {
  position: absolute;
  left: 0;
  content: "・";
}

ul.list-text > li.txt-caution::before {
  color: var(--c-caution);
}

ul.space-caption {
  text-align: left;
  margin: 16px 0;
}

ul.space-caption > li {
  margin-top: 16px;
  list-style: none;
}

ol {
  padding-left: 22px;
}

ol > li {
  padding-left: 4px;
}

ol.list-alpha {
  list-style-type: lower-latin;
}

/* 気づき */
.done {
  margin-top: 24px;
  margin-bottom: 56px;
  text-align: center;
}

.done::before {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  background-image: url("../img/icon_done_pc.svg");
}

.done > div {
  color: var(--c-accent-primary);
  font: var(--font-body2-b);
}

.done > ul.list-text,
.done > ul.list-text > li {
  margin-top: 16px;
}

.done > ul.list-text {
  text-align: left;
}

/* eye-catch */
.eye-catch-purple,
.eye-catch-cream,
.eye-catch-pink,
.eye-catch-orange,
.eye-catch-yellow,
.eye-catch-green,
.eye-catch-blue,
.eye-catch-black {
  padding: 4px 16px;
  font: var(--font-caption1);
  white-space: nowrap;
}

.eye-catch-purple {
  background-color: var(--c-eye-catch-primary);
}

.eye-catch-cream {
  background-color: var(--c-eye-catch-secondry);
}

.eye-catch-pink {
  background-color: var(--c-eye-catch-tertiary);
}

.eye-catch-orange {
  background-color: var(--c-eye-catch-orange);
}

.eye-catch-yellow {
  background-color: var(--c-division-back);
}

.eye-catch-green {
  background-color: var(--c-eye-catch-green);
}

.eye-catch-blue {
  background-color: var(--c-eye-catch-blue);
}

.eye-catch-black {
  background-color: var(--c-footer-navi-back);
}

.risk-category-primary,
.risk-category-secondary,
.risk-category-tertiary {
  vertical-align: middle;
  height: 24px;
  width: 100%;
  max-width: 120px;
}

.risk-category-primary {
  content: url(../img/icon_risk_category_primary.svg);
}

.risk-category-secondary {
  content: url(../img/icon_risk_category_secondary.svg);
}

.risk-category-tertiary {
  content: url(../img/icon_risk_category_tertiary.svg);
}

/* インジケーター */
div.progress-top {
  display: flex;
  justify-content: center;
  padding-bottom: 42px;
}

div.progress-top + section {
  margin-top: 2px;
}

ul.progress {
  display: flex;
  justify-content: space-between;
  list-style: none;
  width: 728px;
  height: 2px;
  padding-top: 0px;
}

ul.progress > li {
  width: 100%;
  height: 2px;
  background-color: var(--c-accent-corporate);
  color: var(--c-neutral-primary);
  font: var(--font-caption2);
  text-align: center;
  content: "";
  display: flex;
  justify-content: center;
}

ul.progress > li:first-child {
  border-radius: 3px 0 0 3px;
}

ul.progress > li:last-child {
  border-radius: 0 3px 3px 0;
}

ul.progress > li.progress-step {
  color: var(--c-accent-primary);
}

ul.progress > li.progress-step ~ li {
  background-color: var(--c-separator);
  color: var(--c-separator);
}

ul.progress > li > div {
  margin-top: 10px;
  width: 56px;
  text-align: center;
}

@media (min-width: 768px) {
  div.progress-top {
    padding-bottom: 48px;
  }

  ul.progress {
    height: 6px;
    padding-top: 16px;
  }

  ul.progress > li {
    height: 6px;
  }

  ul.progress > li > div {
    width: 60px;
  }
}

.title-error,
.title-warning,
.title-inform {
  position: relative;
  padding-left: 32px;
  font: var(--font-h6);
}

.title-error::before,
.title-warning::before,
.title-inform::before {
  position: absolute;
  left: 0px;
}

.title-error {
  color: var(--c-error-text);
}

.title-error::before {
  content: url("../img/icon_error.svg");
}

.title-warning {
  color: var(--c-caution);
}

.title-warning::before {
  content: url("../img/icon_warning.svg");
}

.title-inform {
  color: var(--c-inform);
}

.title-inform::before {
  content: url("../img/icon_inform.svg");
}

@media (min-width: 768px) {
  .title-error::before,
  .title-warning::before,
  .title-inform::before {
    top: 1px;
  }
}

/* table */
dl.table {
  border-top: 1px solid var(--c-separator);
  font: var(--font-body2);
}

p + dl.table {
  margin-top: 16px;
}

ul.list-text + dl.table {
  margin-top: 24px;
}

dl.table > div {
  display: flex;
  gap: var(--col-margin);
  justify-content: space-between;
  border-bottom: 1px solid var(--c-separator);
}

dl.table > div.table-2line {
  display: block;
}

dl.table > div > :is(dt, dd) {
  width: 50%;
  padding: 16px 8px;
}

dl.table > div > :is(dt, dd) > ul:last-child,
dl.table > div > :is(dt, dd) > ul:last-child > li:last-child,
dl.table > div > :is(dt, dd) > ul:last-child > li:last-child ul:last-child {
  margin-bottom: 0;
}

dl.table > div > dd {
  font: var(--font-body2-b);
  text-align: right;
}

dl.table > div.table-2line > dt {
  width: 100%;
  padding-bottom: 0px;
}

dl.table > div.table-2line > dd {
  width: 100%;
  padding-top: 8px;
}

.subtitle + dl.table {
  margin-top: -16px;
  border-top: none;
}

dl.table .table-indent {
  border-bottom: none;
}

div > dd > span.base-data,
div > dd > span.data {
  display: inline-block;
}

div > dd > span.data {
  margin-left: 4px;
}

div > dd > span.base-data {
  display: inline-block;
  margin-left: 12px;
  font: var(--font-caption1);
}

dl.table > .table-input {
  display: block;
}

dl.table > .table-input > dt {
  width: 100%;
}

dl.table > .table-input > dd {
  width: 100%;
  padding-top: 0px;
  padding-right: 0;
  padding-bottom: 16px;
  text-align: left;
}

dl.table > .table-input > dd > .table-2btn {
  display: flex;
  gap: 16px;
  flex-flow: column;
  align-items: center;
}

div.month-amount {
  display: flex;
  flex-direction: column;
}

.table-with-link + div.table-notitle > dt {
  width: 0%;
  padding: 0px;
}

.table-with-link + div.table-notitle > dd {
  width: 100%;
}

@media (min-width: 768px) {
  div.month-amount {
    flex-direction: row;
  }

  div.month-amount > dt {
    width: 48px;
    margin-right: 16px;
  }
}

dl.table ul {
  font: var(--font-caption1);
  margin-top: 16px;
}

dl.table ul > li {
  margin-top: 16px;
  text-align: left;
}

.subtitle2 + dl.table {
  margin-top: -8px;
}

@media (min-width: 768px) {
  dl.table-txt-right > div {
    justify-content: start;
  }

  dl.table > div.table-2line {
    display: flex;
    gap: var(--col-margin);
  }

  dl.table > div > :is(dt, dd) {
    padding: 8px 16px;
  }

  dl.table > div > dt,
  dl.table > div.table-2line > dt {
    width: calc((100% + 12px) * 0.25 - 12px);
  }

  dl.table > div > dd,
  dl.table > div.table-2line > dd {
    width: calc((100% + 12px) * 0.75 - 12px);
    font: var(--font-body2-b);
    text-align: left;
  }

  dl.table > div.table-2line > dt {
    padding-bottom: 8px;
  }

  dl.table > .table-input {
    display: flex;
  }

  dl.table-txt-right > div > dd,
  dl.table-txt-right > div.table-input > dd {
    width: calc((100% + 12px) * 0.25 - 12px);
    text-align: right;
  }

  dl.table > .table-input > dt {
    width: calc((100% + 12px) * 0.25 - 12px);
  }

  dl.table > .table-input > dd {
    width: calc((100% + 12px) * 0.75 - 12px);
    padding: 8px 16px;
  }

  dl.table > .table-input > dd > .table-2btn {
    flex-flow: nowrap;
  }

  dl.table > .table-with-link > dd {
    display: flex;
    justify-content: space-between;
  }

  dl.table.wrap-pc {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
  }

  dl.table.wrap-pc > div {
    width: calc(50% - 6px);
  }

  dl.table.wrap-pc > div > dt {
    width: 50%;
  }

  dl.table.wrap-pc > div > dd {
    width: 50%;
    text-align: right;
  }
}

dl.table + dl.table {
  margin-top: 24px;
}

.table-white {
  margin: 24px 0;
}

@media (max-width: 767.98px) {
  div.table-white {
    border-top: 1px solid var(--c-separator);
  }

  div.table-white dl.table {
    border-top: none;
  }
}

.table-accent {
  margin: 24px 0;
  background-color: var(--c-accent-back);
}

.subtitle + div.table-accent {
  margin-top: 0;
}

div.table-accent dl.table {
  border-top: none;
}

div.table-accent dl.table > div {
  border-bottom: none;
}

@media (min-width: 768px) {
  .row dl.table > div > :is(dt, dd) {
    flex: 0 1 50%;
    width: 50%;
    max-width: 50%;
  }
}

/* table */
table:is(.table-2, .table-4) {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

table:is(.table-2, .table-4) :is(thead, tbody) {
  width: 100%;
}

table:is(.table-2, .table-4) tr {
  width: 100%;
  border-bottom: 1px solid var(--c-separator);
  vertical-align: top;
}

table:is(.table-2, .table-4) th {
  background-color: var(--c-accent-back);
  font: var(--font-body2);
  text-align: left;
}

table:is(.table-2, .table-4) tr.thead > th {
  background-color: var(--c-accent-secondary-light);
}

table:is(.table-2, .table-4) td {
  background-color: var(--c-neutral-white);
  font: var(--font-body2-b);
  text-align: right;
}

table:is(.table-2, .table-4) tr.thead > td {
  background-color: var(--c-accent-back);
  font: var(--font-body2);
}

table.table-2 :is(th, td) {
  padding: 16px 12px;
}

table.table-2 th {
  padding-left: 8px;
}

table.table-2 td {
  padding-right: 8px;
}

table.table-4 :is(th, td) {
  padding: 8px 22px;
}

table.table-4 th {
  padding-left: 16px;
}

table.table-4 td:last-child {
  padding-right: 16px;
}

/* table-3 */
dl.table-3 {
  border-top: 1px solid var(--c-separator);
  font: var(--font-body2);
}

dl.table-3 > div {
  border-bottom: 1px solid var(--c-separator);
}

dl.table-3 > div > dt {
  padding: 16px 8px 8px;
}

dl.table-3 > div > dd {
  padding: 8px 8px 16px;
}

dl.table-3 > div > dt {
  font: var(--font-body2-b);
}

dl.table-3 > div > dd > dl > div:last-child {
  margin-top: 32px;
}

dl.table-3 > div > dd > dl > div > dt {
  margin-bottom: 16px;
}

dl.table-3 dd > div > p {
  margin-top: 32px;
  margin-bottom: 16px;
}

dl.table-3 dd > div:first-child > p {
  margin-top: 24px;
}

dl.table-3 ul.list-text {
  margin: 16px 0 0;
  font: var(--font-caption1);
}

dl.table-3 ul.list-text > li {
  margin: 16px 0 0;
}

dl.table-3 > div > dd > dl .form-price:last-child {
  margin-bottom: 0;
}

dl.table-3.no-subtitle dl > div:first-child,
dl.table-3.no-subtitle dl > div:last-child > dt {
  display: none;
}

dl.table-3.no-subtitle dl > div:last-child {
  margin-top: 0px;
}

@media (min-width: 768px) {
  dl.table-3 > div > dt {
    padding: 8px 16px 12px;
  }

  dl.table-3 > div > dd {
    padding: 12px 16px 8px;
  }

  dl.table-3 > div > dd > dl {
    display: flex;
    gap: 44px;
  }

  dl.table-3 > div > dd > dl > div {
    width: 50%;
    margin-top: 0 !important;
  }

  dl.table-3.no-subtitle dl > div:first-child,
  dl.table-3.no-subtitle dl > div:last-child > dt {
    display: block;
  }

  dl.table-3.no-subtitle dl > div:last-child {
    margin-top: 32px;
  }
}

table.table-3 {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: 1px solid var(--c-separator);
}

table.table-3 tr {
  width: 100%;
  border-bottom: 1px solid var(--c-separator);
  vertical-align: top;
}

table.table-3 th {
  padding: 8px 22px;
  background-color: var(--c-accent-back);
  font: var(--font-body2);
  text-align: left;
}

table.table-3 th:not(:first-child) {
  text-align: right;
}

table.table-3 tr > th:first-child {
  width: 25%;
  padding-left: 16px;
}

table.table-3 tr.thead > th:first-child {
  background-color: var(--c-accent-secondary-light);
}

table.table-3 td {
  width: 37.5%;
  padding: 8px 22px;
  background-color: var(--c-neutral-white);
  font: var(--font-body2-b);
  text-align: right;
}

table.table-3 tr > :is(th, td):last-child {
  padding-right: 16px;
}

/* transaction-table */
.transaction {
  margin: 24px 0;
  border-top: 1px solid var(--c-separator);
  font: var(--font-body2);
}

.transaction > div {
  display: flex;
  padding: 16px 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--c-separator);
}

.transaction-expense,
.transaction-income,
.transaction-balance {
  text-align: right;
}

@media (max-width: 767.98px) {
  .transaction > div.transaction-header {
    display: none;
  }

  .transaction-date {
    width: 80px;
    order: -1;
    font: var(--font-caption1-mono);
  }

  .transaction-overview {
    width: 100%;
    order: -2;
    margin-bottom: 8px;
  }

  .transaction-in > .transaction-overview {
    padding-left: 20px;
    background: url("../img/icon_triangle.svg") no-repeat left center;
  }

  .transaction-out > .transaction-overview {
    padding-left: 20px;
    background: url("../img/icon_triangle_down.svg") no-repeat left center;
  }

  .transaction-expense,
  .transaction-income {
    width: calc(100% - 80px);
    font: var(--font-body2-b);
  }

  .transaction-in > .transaction-expense,
  .transaction-out > .transaction-income {
    display: none;
  }

  .transaction-expense > .txt-amount::before {
    content: "-";
  }

  .transaction-balance {
    width: 100%;
    margin-top: 8px;
    font: var(--font-caption1);
  }

  .transaction-balance > span:first-child {
    margin-right: 8px;
  }

  .transaction-balance > .txt-amount {
    font: var(--font-caption1-mono);
  }
}

@media (min-width: 768px) {
  .transaction {
    display: table;
    width: 100%;
  }

  .transaction > div {
    display: table-row;
    font: var(--font-body2-b);
  }

  .transaction > div > div {
    display: table-cell;
    padding: 8px 16px;
    border-bottom: 1px solid var(--c-separator);
  }

  .transaction > div > div .txt-amount {
    font: var(--font-body2-mono-b);
  }

  .transaction > div.transaction-header {
    display: table-row;
    background-color: var(--c-accent-back);
  }

  .transaction > div.transaction-header > div {
    font: var(--font-body2);
  }

  .transaction-date {
    font: var(--font-body2-mono-b);
  }

  .transaction-balance > span:first-child {
    display: none;
  }
}

dl.table-check {
  font: var(--font-body2);
}

dl.table-check > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--col-margin);
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

dl.table-check > div > :is(dt, dd) {
  width: 100%;
  min-height: 48px;
  padding: 8px 8px;
}

dl.table-check > div > dt {
  font: var(--font-body2);
}

dl.table-check > div > dd {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font: var(--font-body2-b);
}

dl.table-check > div > dd > label {
  max-width: 335px;
}

dl.table-check > div > dd > button {
  margin-bottom: 16px;
}

dl.table-check > div > dd > button:last-child {
  margin-bottom: 0px;
}

.subtitle + dl.table-check {
  border-top: none;
}

@media (min-width: 768px) {
  dl.table-check {
    border-top: 1px solid var(--c-separator);
    font: var(--font-body2);
  }

  dl.table-check > div {
    display: flex;
    gap: var(--col-margin);
    justify-content: space-between;
    margin-top: 0px;
    border-bottom: 1px solid var(--c-separator);
  }

  dl.table-check > div > dt {
    flex: 0 0 60%;
    max-width: 62.5%;
  }

  dl.table-check > div > dd {
    flex: 0 1 35%;
    align-items: end;
    max-width: 37.5%;
    font: var(--font-body2-b);
  }

  dl.table-check > div > dd > label {
    max-width: 400px;
    height: 52px;
  }

  dl.table-check > div > :is(dt, dd) {
    padding: 16px 0px;
    width: 50%;
  }

  dl.table-check > div > p {
    flex: 0 2 100%;
    width: 100%;
    padding-bottom: 16px;
  }

  .subtitle + dl.table-check {
    margin-top: -16px;
    border-top: none;
  }
}

div.table-accordion {
  border-top: 1px solid var(--c-separator);
}

div.table-accordion > button.btn-text {
  padding: 16px 0;
  width: 100%;
  border-radius: 0px;
}

div.table-accordion > button[aria-expanded="false"] {
  border-bottom: 1px solid var(--c-separator);
}

div.table-accordion > button.btn-text[aria-expanded="false"] > span {
  background: url("../img/icon_down.svg") no-repeat right center;
}

div.table-accordion > button.btn-text[aria-expanded="true"] > span {
  background: url("../img/icon_up.svg") no-repeat right center;
}

div.table-accordion > button.btn-text > span::before {
  font: var(--font-body2-b);
}

div.table-accordion > div {
  border-top: 1px solid var(--c-separator);
}

div.table-accordion > button.btn-text[aria-expanded="false"] > span::before {
  content: "詳細を見る";
}

div.table-accordion > button.btn-text[aria-expanded="true"] > span::before {
  content: "閉じる";
}

/* card */
.card {
  width: 100%;
  margin-top: 16px;
  font: var(--font-caption1);
}

.card hr {
  margin: 16px 0px;
}

.card > div:first-child {
  width: 100%;
  border: 2px solid var(--c-card-frame);
}

.card > div:first-child > :is(div, dl) {
  margin: 16px;
}

.card > div:first-child > div.card-accordion:last-child {
  margin: 16px 0 0;
}

.card > div:first-child > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card .reference-date {
  font: var(--font-caption1);
  text-align: right;
}

@media (min-width: 768px) {
  .card > div:first-child {
    width: 100%;
  }

  .card > div:first-child > div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
  }
}

.card-title {
  font: var(--font-body2-b);
}

div.card-accordion > div {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

div.card-accordion > button + div,
div.card-accordion > div[aria-hidden="false"] + button {
  border-top: 1px solid var(--c-card-frame);
}

div.card-accordion > div[aria-hidden="false"] {
  max-height: 100%;
  padding: 0 16px 16px;
}

div.card-accordion > button.btn-text {
  width: 100%;
  max-width: 100%;
  height: 66px;
  text-align: center;
  border-radius: 0px;
}

div.card-accordion > button.btn-text[aria-expanded="false"] > span {
  background: url("../img/icon_down.svg") no-repeat right center;
}

div.card-accordion > button.btn-text[aria-expanded="true"] > span {
  background: url("../img/icon_up.svg") no-repeat right center;
}

div.card-accordion > button.btn-text > span::before {
  font: var(--font-body2-b);
}

div.card-accordion > button.btn-text[aria-expanded="false"] > span::before {
  content: "詳細を見る";
}

div.card-accordion > button.btn-text[aria-expanded="true"] > span::before {
  content: "閉じる";
}

div.card-accordion.view-all-products > button.btn-text {
  background-color: var(--c-accent-back);
}

div.card-accordion.view-all-products
  > button.btn-text[aria-expanded="false"]
  > span::before {
  content: "契約を全て表示する";
}

div.card-accordion.view-all-products
  > button.btn-text[aria-expanded="true"]
  > span::before {
  content: "表示件数を最小化する";
}

div.card-accordion > div > div.account-usage-status {
  margin: 0 -16px -16px;
}

div.card-accordion > div > p.card-title {
  margin-top: 16px;
}

/* card-breakdown */
div.card-btn > div:first-child div.card-breakdown {
  padding: 0 16px;
  margin: 16px 0 0;
  border-top: 1px solid var(--c-card-frame);
}

div.card-btn > div:first-child div.card-breakdown + div.card-breakdown,
div.card-btn
  > div:first-child
  > div.card-accordion.card-breakdown
  > div
  > div.card-breakdown {
  margin: 0;
}

div.card-btn
  > div:first-child
  > div.card-accordion.card-breakdown
  > div
  > div.card-breakdown:first-child {
  border-top: none;
}

div.card-breakdown .card-title {
  font: var(--font-caption1-b);
}

div.card-breakdown > :is(div, dl) {
  margin: 16px 0;
}

div.card-breakdown .txt-amount {
  font: var(--font-h4-mono);
}

div.card-breakdown > div.card-accordion {
  margin: 16px 0 0;
  border-top: 1px solid var(--c-card-frame);
}

div.card-breakdown > div.card-accordion > div[aria-hidden="false"] {
  padding: 0 0 16px;
}

div.card-btn > div:first-child > div.card-accordion.card-breakdown {
  padding: 0;
}

div.card-btn > div:first-child > div.card-accordion.card-breakdown > div {
  margin: 0px;
  padding: 0px;
}

div.card-caption {
  font: var(--font-caption1);
  text-align: right;
}

:is(dl, span).attribute {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
}

dl.attribute > dt {
  font: var(--font-caption1);
}

dl.attribute > dd {
  padding-left: 16px;
  font: var(--font-caption1-b);
}

dl.attribute-start {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: var(--font-caption1);
  margin-top: 8px;
}

span.attribute {
  margin-top: 0px;
}

@media (min-width: 768px) {
  dl.table-noline > div {
    margin-top: 16px;
  }

  dl.attribute {
    display: flex;
    justify-content: end;
    align-items: baseline;
    margin-top: 16px;
  }

  dl.attribute-start {
    justify-content: start;
  }

  dl.attribute-start > dt {
    width: 80px;
    margin-right: 16px;
  }
}

.attribute.amount-lerge > dd > .txt-amount {
  font: var(--font-h2-mono);
}

.attribute.amount-lerge > dd > .txt-unit {
  font: var(--font-body2-b);
}

.attribute.amount-lerge > dt {
  font: var(--font-body2);
}

.attribute.amount-medium > dd > .txt-amount {
  font: var(--font-h4-mono);
}

.attribute.amount-medium > dd > .txt-unit {
  font: var(--font-body2-b);
}

.attribute.amount-medium > dt {
  font: var(--font-caption1);
}

.attribute.amount-small > dd > .txt-amount {
  font: var(--font-caption1-mono-b);
}

.attribute.amount-small > dd > .txt-unit {
  font: var(--font-caption1-b);
}

.attribute.amount-small > dt {
  font: var(--font-caption1);
}

@media (min-width: 768px) {
  .txt-amount {
    font: var(--font-h1-mono);
  }

  .attribute.amount-lerge > dd > .txt-amount {
    font: var(--font-h1-mono);
  }
}

.card-radio {
  width: 100%;
  margin-top: 16px;
}

.card-radio hr {
  margin: 16px 0px;
}

.card-radio > div:first-child {
  width: 100%;
  padding: 16px;
  border: 2px solid var(--c-card-frame);
}

.card-radio > div:first-child > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-radio .reference-date {
  font: var(--font-caption1);
  text-align: right;
}

.card-radio-btn {
  text-align: right;
}

@media (min-width: 768px) {
  .card-radio > div:first-child {
    width: 100%;
  }

  .card-radio > div:first-child > div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.card-btn,
.card-btn-center-border {
  width: 100%;
  margin: 16px 0;
  border: 2px solid var(--c-card-frame);
  background-color: var(--c-neutral-white);
  font: var(--font-caption1);
}

.card-btn-center-border > .card-btn {
  margin: 0;
  border: none;
}

.card-btn-center-border > hr {
  margin: 0;
}

.card-btn > .vertical-between {
  display: flex;
  flex-flow: column;
}

.card-btn > .vertical-between > div:first-child {
  flex: 1;
}

.card-btn > div:first-child {
  width: 100%;
  padding: 0px;
  background-color: var(--c-neutral-white);
}

.card-btn > div:first-child {
  border-bottom: 1px solid var(--c-card-frame);
}

.card-btn.white > div:first-child {
  border-bottom: 1px solid var(--c-neutral-white);
}

.card-btn > div:first-child > :is(div, dl) {
  margin: 16px;
}

@media (min-width: 768px) {
  .card-btn,
  .card-btn-center-border {
    background-color: var(--c-accent-back);
  }
}

.card-btn > div:first-child > div:first-child {
  display: flex;
  flex-direction: column;
  background-color: var(--c-neutral-white);
  gap: 16px;
}

.card-btn > div:first-child > hr {
  margin: 16px 0 0;
  border-top: 1px solid var(--c-card-frame);
}

.card-btn > div:last-child {
  display: block;
  width: 100%;
  padding: 16px;
  margin: auto;
  background-color: var(--c-accent-back);
}

.card-btn > div:last-child > p {
  font: var(--font-caption2-b);
  width: 100%;
  text-align: center;
  color: var(--c-neutral-secondary);
}

.card-btn > div:last-child > p.txt-caution {
  font: var(--font-body2-b);
}

.card-btn > div:last-child > :first-child {
  margin-top: 0;
}

.card-btn > div:last-child > :last-child {
  margin-bottom: 0;
}

.card-btn > div:last-child > button {
  display: block;
}

.card-btn > div:last-child > * {
  margin: 16px auto;
}

.card-btn > div:last-child > a {
  display: block;
  width: fit-content;
}

.card-btn > div:last-child dl {
  width: 100%;
  text-align: center;
}

.card-btn > div:last-child dl:last-child button {
  margin-bottom: 0px;
}

.card-btn > div.bg-gray:last-child {
  display: none;
}

main > section:first-child > p + .card-wide {
  margin-top: 24px;
}

.subtitle-hasbtn + .card-btn {
  margin-top: 0;
}

.card-btn > div > div > div > p > img {
  display: inline;
  margin-left: 8px;
  vertical-align: sub;
}

@media (min-width: 768px) {
  .card-btn > div:first-child {
    border-bottom: none;
    border-right: 1px solid var(--c-card-frame);
  }

  .card-btn.white > div:first-child {
    border-right: 1px solid var(--c-neutral-white);
  }

  .card-btn > div:first-child > dl.table-noline {
    margin-top: -16px;
  }

  div.account-usage-status > div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 768px) {
  .card-btn {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .card-btn > div:first-child {
    width: calc(75% + 6px);
  }

  .card-btn > div:first-child > div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .card-btn > div:last-child {
    justify-content: center;
    width: calc(25% - 6px);
  }

  .card-btn > div:last-child > button {
    max-width: 100%;
  }

  .card-wide > div:first-child {
    width: calc(62.5% + 6px);
  }

  .card-wide > div:last-child {
    width: calc(37.5% - 6px);
  }

  .card-btn-center-border {
    display: flex;
    flex-flow: column;
    width: 100%;
    background: linear-gradient(
      90deg,
      var(--c-neutral-white) 0%,
      var(--c-neutral-white) 90%,
      var(--c-accent-back) 90%,
      var(--c-accent-back) 100%
    );
  }

  .card-btn-center-border > hr {
    margin: 0 16px;
  }

  div.card-btn-parallel {
    max-width: none;
  }

  .card-btn > div.bg-gray:last-child {
    margin: 0;
    display: block;
  }
}

.card-btn.white {
  border: 2px solid var(--c-neutral-white);
}

.card-btn.white > div:first-child {
  padding: 0;
}

.card-btn.white > div:last-child {
  padding: 8px 16px;
  background-color: var(--c-neutral-white);
}

.card-btn-parallel {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 335px;
  justify-content: center;
  align-items: center;
}

div.card > div:first-child > div.card-accordion,
div.card-btn > div:first-child > div.card-accordion {
  margin: 0;
  border-top: 1px solid var(--c-card-frame);
}

div.account-usage-status > :is(div, dl, p) {
  margin: 16px;
}

div.account-usage-status > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

div.account-usage-status > table:is(.table-2, .table-4) {
  border-top: 1px solid var(--c-separator);
}

div.account-usage-status
  > table:is(.table-2, .table-4)
  > tbody
  > tr:last-child {
  border-bottom: none;
}

.card-account {
  display: flex;
  flex-wrap: wrap;
  margin-top: -16px;
  margin-left: calc(-1 * var(--col-margin));
}

/* form */
.form-price {
  max-height: 0;
  margin-bottom: 16px;
  padding: 0 8px;
  overflow: hidden;
  background-color: var(--c-neutral-back);
  transition: max-height 0.2s ease-in;
}

input[type="radio"]:checked + label + .form-price {
  max-height: 100%;
}

.form-price > div:first-child {
  margin-top: 16px;
}

.form-price > div:last-child {
  margin-bottom: 16px;
}

.form-price button {
  width: 107px;
  margin-right: 16px;
}

@media (min-width: 768px) {
  .form-price {
    padding: 0 16px;
  }

  .form-price > div > div.text-wrap {
    width: 100%;
  }

  .form-price > div > div:last-child {
    width: 172px;
  }

  .form-price button {
    width: 172px;
    margin-right: 0;
  }

  .form-price button + button {
    margin-top: 16px;
  }
}

.separate-pc > div {
  margin-top: 24px;
}

.border-bottom {
  border-bottom: 1px solid var(--c-card-frame);
}

@media (min-width: 768px) {
  .separate-pc {
    display: flex;
  }

  .separate-pc > div:first-child {
    width: 50%;
    padding-right: 24px;
  }

  .separate-pc > div:last-child {
    width: 50%;
    padding-left: 23px;
    border-left: 1px solid var(--c-separator);
  }
}

dl.table-noline > div {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

dl.table-noline > div > dt {
  font: var(--font-caption1);
}

:is(.card, .card-btn, .card-radio, .card-inactive, .card-risk-compare)
  > div:first-child
  > dl.table-noline
  > div
  > dt,
:is(.card, .card-btn, .card-radio, .card-inactive, .card-risk-compare)
  > div:first-child
  > dl.table-noline
  > div.table-noline-category
  dl.table-noline
  > div
  > dt {
  font: var(--font-body2);
}

dl.table-noline > div > dd {
  font: var(--font-caption1-b);
  text-align: right;
}

:is(.card, .card-btn, .card-radio, .card-inactive, .card-risk-compare)
  > div:first-child
  > dl.table-noline
  > div
  > dd,
:is(.card, .card-btn, .card-radio, .card-inactive, .card-risk-compare)
  > div:first-child
  > dl.table-noline
  > div.table-noline-category
  dl.table-noline
  > div
  > dd {
  font: var(--font-body2-b);
}

dl.table-noline > div.multi {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 50% 50%;
  row-gap: 8px;
}

dl.table-noline > div.multi > dt {
  grid-column: 1;
  word-wrap: break-word;
}

dl.table-noline > div.multi > dd {
  grid-column: 2;
  word-wrap: break-word;
}

dl.table-noline.dd-container > div:first-child {
  margin-top: 0px;
}

@media (min-width: 768px) {
  dl.table-noline.wrap-pc {
    display: flex;
    flex-wrap: wrap;
  }

  dl.table-noline.wrap-pc > div {
    width: 50%;
    padding-right: 0;
    padding-left: 16px;
    margin-top: 16px;
  }

  dl.table-noline.wrap-pc > div:nth-child(odd) {
    padding-right: 16px;
    padding-left: 0;
    border-right: 1px solid var(--c-separator);
  }
}

.card-inactive {
  margin: 16px 0;
  border: 2px solid var(--c-card-frame);
  background-color: var(--c-neutral-back);
}

.card-inactive > div:first-child {
  border-bottom: 1px solid var(--c-neutral-back);
}

.card-inactive > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background-color: var(--c-accent-back);
}

.card-inactive > div:last-child > a {
  display: block;
  width: fit-content;
}

.card-inactive > div:first-child > :is(div, dl) {
  margin: 16px;
}

.card-inactive > div:first-child > div > .card-title + p {
  margin-top: 8px;
}

.card-inactive > div:last-child > :first-child {
  display: block;
  margin: 0 auto;
}

.card-inactive > div:last-child > :not(:first-child) {
  margin-top: 16px;
}

@media (min-width: 768px) {
  .card-inactive {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .card-inactive > div:first-child {
    border-bottom: none;
    border-right: 1px solid var(--c-neutral-back);
  }

  .card-inactive > div:last-child {
    justify-content: center;
  }

  .card-inactive > div:last-child > button {
    max-width: 100%;
  }
}

.card-inactive + ul.list-text {
  margin-top: 0px;
}

.card-inactive + .space-caption {
  margin-top: 0;
}

/* リスク選択比較 */
.card-risk-compare {
  margin: 24px 0;
  border: 2px solid var(--c-card-frame);
}

.card-risk-compare > .risk-compare {
  padding: 16px;
  background-color: var(--c-accent-back);
}

div.card-risk-compare > div.card-accordion > div[aria-hidden] {
  padding: 0;
}

.card-risk-compare dl.table > div > :is(dt, dd) {
  padding: 16px;
}

.card-risk-compare > .card-accordion > div[aria-hidden] > dl.table,
.card-risk-compare
  > .card-accordion
  > div[aria-hidden]
  > dl.table
  > div:last-child {
  border: none;
}

.risk-compare > div {
  background-color: var(--c-accent-back);
  flex-direction: row;
  display: flex;
}

.risk-compare > div > div {
  flex-direction: column;
  display: flex;
}

.risk-compare > div > div:nth-child(even) {
  flex-direction: column-reverse;
}

.risk-compare > div > div > p {
  margin-bottom: 16px;
}

.icon-triangle_right {
  height: 24px;
  width: 24px;
  margin: 0px 8px;
  content: url("../img/icon_triangle_right.svg");
}

/* 投信自動購入の購入、比較の選択カード */
.card > div > div.space-btn-compare-buy {
  margin: 0px;
  border-top: 1px solid var(--c-separator);
}

.card > div > dl.table-noline.wrap-pc > div > dd.lineup-icons {
  flex-wrap: wrap;
}

.space-btn-compare-buy > div {
  padding: 16px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.space-btn-compare-buy
  > div
  > input:is([type="checkbox"], [type="radio"])
  + label:is(.checkbox-star, .btn-checkbox-accent, .btn-radio-accent) {
  margin-top: 0px;
}

@media (min-width: 768px) {
  .space-btn-compare-buy > div {
    justify-content: flex-end;
  }
}

/* タイル */
.box-tile {
  margin-top: 24px;
  padding: 16px;
  background-color: var(--c-neutral-back);
}

div.subtitle + .box-tile {
  margin-top: 16px;
}

.box-tile + .box-tile {
  margin-top: 24px;
}

.box-tile-title {
  display: flex;
  align-items: center;
  font: var(--font-body2-b);
}

.box-tile-title > button {
  margin-left: auto;
}

.box-tile-title + div {
  margin-top: 16px;
}

.box-tile > hr {
  margin: 16px 0;
}

.box-tile > div > p {
  margin-top: 16px;
  font: var(--font-caption1);
}

.box-tile > div > hr {
  margin: 16px 0;
}

.box-tile > div[aria-hidden] > ul.list-text:last-child {
  margin-bottom: 0;
}

/* 検索 */
.box-gray {
  margin-top: 24px;
  padding: 16px;
  background-color: var(--c-neutral-back);
}

.box-gray + .box-gray {
  margin-top: 16px;
}

.box-gray > .box-white {
  margin: auto;
  border-top: 2px solid var(--c-accent-primary);
  padding: 16px;
}

.box-gray > .box-white > div {
  margin-top: 16px;
}

.box-gray > .box-white > div:first-child {
  font: var(--font-body2-b);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-separator);
  text-align: center;
  margin-top: 0px;
}

.box-gray > .box-white > div:last-child {
  text-align: center;
}

.box-gray-title {
  display: flex;
  align-items: center;
  /* margin-bottom: 16px; */
  font: var(--font-body2-b);
}

.box-gray-title > button {
  /* height: 44px; */
  margin-left: auto;
}

.box-gray-title + div {
  margin-top: 16px;
}

.box-gray > hr {
  margin: 16px 0;
}

.box-gray > div > p {
  margin-top: 16px;
  font: var(--font-caption1);
}

.box-gray > div > hr {
  margin: 16px 0;
}

.box-gray.box-change-number {
  display: flex;
  flex-direction: column;
}

.box-gray.box-change-number > div {
  margin-bottom: 16px;
}

.box-gray.box-change-number > div > div:first-child {
  display: flex;
  margin-bottom: 8px;
}

.box-gray.box-change-number .box-change-number-title {
  font: var(--font-body2-b);
  padding-top: 18px;
}

.box-gray.box-change-number > div:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-gray.box-change-number button {
  height: 52px;
  width: 400px;
}

.box-gray .space-btn-2btn {
  margin-top: 32px;
}

.box-gray .space-btn-2btn > hr {
  width: 100%;
  margin: 0;
}

.box-gray .space-btn-2btn > :is(.btn-primary, .btn-secondary, .btn-caution) {
  height: 52px;
}

.box-gray > ul.list-text:last-child {
  margin-bottom: 0;
}

p + .box-gray,
.txt-line + .box-gray {
  margin-top: 16px;
}

.box-gray .space-btn:last-child {
  margin: 16px 0 0;
}

@media (min-width: 768px) {
  .box-gray .space-btn-2btn {
    margin-top: 16px;
  }
}

.box-notice > p:first-child {
  margin-bottom: 24px;
  color: var(--c-caution);
  font: var(--font-body1-b);
  text-align: center;
}

.box-notice > .space-btn {
  margin: 24px 0 0;
}

/* トップメニュー */
.top-menu {
  margin: 0 var(--side-margin-minus) 24px;
  padding: 24px var(--side-margin);
  background-color: var(--c-accent-dark);
  color: var(--c-neutral-white);
}

.main-compact .top-menu {
  margin: 0 var(--side-margin-main-compact-minus) 24px;
  padding: 24px var(--side-margin-main-compact);
}

.top-account > div:first-child {
  display: flex;
  justify-content: space-between;
}

.top-account > div:first-child > div:first-child > div:first-child {
  font: var(--font-body1);
  white-space: nowrap;
}

.top-account > div:first-child > div:first-child > div:first-child > span {
  font: var(--font-body1-mono-b);
  margin-left: 4px;
}

.top-account > div:first-child > div:first-child > div:last-child {
  margin-top: 8px;
  font: var(--font-caption3);
}

.top-account > div:first-child > div:first-child > div:last-child span {
  font: var(--font-caption1-b);
  margin-left: 8px;
}

.top-account > div:first-child > div:last-child > div > a {
  padding: 8px 6px 4px 36px;
  font: var(--font-caption1);
  color: var(--c-neutral-white);
  background: url(../img/icon_notice.svg) no-repeat left center;
}

.top-account > div:first-child > div:last-child > div > a:hover {
  text-decoration: underline;
}

.top-account > div:last-child {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: space-between;
}

.top-account > div:last-child > div:last-child {
  width: 100%;
}

.top-account dl.attribute {
  flex-wrap: wrap;
}

.top-account dl.attribute .txt-amount {
  font: var(--font-h2-mono);
}

@media (min-width: 768px) {
  .top-menu {
    padding-bottom: 24px;
  }

  .top-account {
    display: flex;
    justify-content: space-between;
  }

  .top-account > div:first-child {
    display: block;
  }

  .top-account > div:first-child > div:last-child > div {
    margin-top: 14px;
  }

  .top-account > div:last-child {
    padding-left: 8px;
  }

  .top-account > div:last-child > div:first-child {
    margin: -2px 0;
  }

  .top-account dl.attribute {
    margin-top: 22px;
  }

  .top-account dl.attribute .txt-amount {
    font: var(--font-h1-mono);
  }
}

.top-benefits {
  background-color: var(--c-accent-primary);
  font: var(--font-caption3);
  text-align: center;
  padding-bottom: 6px;
}

.top-benefits > a > div {
  padding: 3px;
  border-bottom: 2px solid var(--c-accent-dark);
}
.top-benefits > a > ul {
  display: flex;
  margin-top: 6px;
  background-color: var(--c-accent-dark);
  gap: 1px;
  list-style-type: none;
}

.top-benefits > a > ul > li {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 68px;
}

.top-benefits > a > ul {
  min-width: 66px;
}

.top-benefits > a > ul > li,
.top-benefits > a > div {
  display: block;
  width: 100%;
  flex-grow: 1;
  background-color: var(--c-accent-primary);
  padding: 6px 0px;
  margin: -6px 0;
  text-align: center;
  font: var(--font-caption3);
  color: var(--c-neutral-white);
}

.top-benefits > a > div {
  margin: 0px;
}

.top-benefits > a:hover > ul > li,
.top-benefits > a:hover > div {
  background-color: var(--c-accent-primary-soft);
}

.top-benefits > a:active > ul > li,
.top-benefits > a:active > div {
  background-color: var(--c-accent-primary-strong);
}

.top-benefits > a > ul > li > span {
  display: block;
  font: var(--font-body2-b);
  word-break: keep-all;
}

.top-benefits > a > ul > li small {
  margin-left: 4px;
}

.top-benefits a > div > i {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background: url("../img/icon_tab_blue.svg") no-repeat center center;
  vertical-align: bottom;
}

.top-benefits > a > ul > li:first-child > span {
  padding: 0 10px;
}

.top-benefits > a > ul > li:last-child > span {
  padding: 0 2px;
}

.subtitle-hasbtn {
  margin: 32px 0 16px;
}

.subtitle-hasbtn > .subtitle2 {
  align-items: center;
  margin-bottom: 8px;
}

.subtitle-hasbtn > .subtitle-caption {
  margin: 0;
}

@media (min-width: 768px) {
  .subtitle-hasbtn {
    display: flex;
    align-items: baseline;
  }

  .subtitle-hasbtn > .subtitle2 {
    margin: 0;
  }

  .subtitle-hasbtn > .subtitle2 > button {
    margin-left: 16px;
  }

  .subtitle-hasbtn > .subtitle-caption {
    margin-left: auto;
  }
}

nav.burger-menu {
  position: fixed;
  top: 72px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 72px);
  padding: 0 var(--side-margin) 56px;
  background-color: var(--c-neutral-white);
  color: var(--c-neutral-primary);
  z-index: 600;
  overflow-y: scroll;
  transform: translateX(100%);
  /* ChromeのCSS transition がページロード時に動いてしまう問題のためcommon.jsのcreateHamburgerMenuにて設定している。
   transition: transform 0.3s ease-in-out; */
}

nav.burger-menu[aria-hidden="false"] {
  transform: translateX(0);
}

nav.burger-menu ul.links-list > li > a {
  padding-right: 40px;
  font: var(--font-body2);
}

nav.burger-menu .space-btn {
  margin: 8px 0;
}

nav.burger-menu > div.pageid {
  margin-top: 56px;
}

div.burger-menu-title {
  height: 66px;
  padding: 32px var(--side-margin) 10px;
  margin: 0 var(--side-margin-minus);
  background-color: var(--c-footer-navi-back);
  font: var(--font-body2-b);
}

div.burger-menu-title + :is(dl.table, ul.links-list) {
  border-top: none;
}

div.burger-menu-title > :is(.asterisk, .asterisk-caution) {
  margin-left: 8px;
}

div.burger-menu-title > :is(.asterisk, .asterisk-caution)::before {
  bottom: -1px;
}

@media (min-width: 768px) {
  div.burger-menu-title > :is(.asterisk, .asterisk-caution)::before {
    bottom: 0px;
  }
}

nav.head-menu {
  min-height: 40px;
  height: 40px;
  margin-bottom: 24px;
  margin-top: 4px;
  font: var(--font-caption1-b);
  font-size: 14px;
  line-height: 16px;
}

.side-scroll {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.side-scroll::-webkit-scrollbar {
  display: none;
}

.side-scroll > ul {
  align-items: flex-start;
  white-space: nowrap;
  scrollbar-width: none;
}

nav.head-menu > ul {
  display: flex;
  height: 38px;
}

nav.head-menu li {
  list-style: none;
  width: 80px;
  height: 32px;
  border-right: 1px solid var(--c-separator);
  text-align: center;
}

nav.head-menu li:last-child {
  border-right: none;
}

nav.head-menu li > a {
  display: block;
  height: 40px;
  border-bottom: 4px solid var(--c-neutral-white);
  color: var(--c-neutral-primary);
}

nav.head-menu ul:hover > li > a[aria-current="page"] {
  border-bottom: none;
}

nav.head-menu ul:hover > li > a[aria-current="page"] {
  color: var(--c-accent-primary);
}

nav.head-menu ul:hover > li > a:hover[aria-current="page"] {
  color: var(--c-accent-primary-soft);
  border-bottom: 4px solid var(--c-accent-primary-soft);
}

nav.head-menu li > a[aria-current="page"],
nav.head-menu li > a:hover {
  border-bottom: 4px solid var(--c-accent-corporate);
  color: var(--c-accent-primary) !important;
}

@media (min-width: 768px) {
  nav.head-menu {
    margin: 88px 0px 24px;
    overflow-x: visible;
    position: fixed;
    z-index: 500;
    background-color: var(--c-neutral-white);
    width: 100%;
    height: 48px;
    padding: 8px var(--side-margin) 0px;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  }

  nav.head-menu li {
    width: 154px;
  }

  nav.head-menu li:first-child {
    border-left: 1px solid var(--c-separator);
  }

  nav.head-menu li:last-child {
    border-right: 1px solid var(--c-separator);
  }

  nav.head-menu li > a {
    padding-top: 8px;
  }
}

/* message */
.message-error,
.message-warning,
.message-inform {
  margin: 24px auto;
  max-width: 748px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--c-error);
  background-color: var(--c-error-back);
}

.message-warning {
  border: 1px solid var(--c-caution);
  background-color: var(--c-caution-back-2);
}

.message-inform {
  border: 1px solid var(--c-inform);
  background-color: var(--c-inform-back);
}

:is(.message-error, .message-important) > :is(p, dt) {
  position: relative;
  padding-left: 32px;
  color: var(--c-error-text);
  font: var(--font-h6);
}

.message-error > :is(p, dt)::before {
  position: absolute;
  top: 2px;
  top: calc(min(30px, max(28px, 100%)) - 28px);
  left: 0;
  width: 24px;
  height: 24px;
  background-image: url("../img/icon_error.svg");
  content: "";
}

:is(.message-error, .message-warning, .message-inform) > dt > p {
  font: var(--font-caption2);
  color: var(--c-neutral-primary);
  margin-top: 4px;
}

.message-warning > :is(p, dt) {
  position: relative;
  padding-left: 32px;
  color: var(--c-caution);
  font: var(--font-h6);
}

.message-warning > :is(p, dt)::before {
  position: absolute;
  top: 2px;
  top: calc(min(30px, max(28px, 100%)) - 28px);
  left: 0;
  width: 24px;
  height: 24px;
  background-image: url("../img/icon_warning.svg");
  content: "";
}

.message-inform > :is(p, dt) {
  position: relative;
  padding-left: 32px;
  color: var(--c-inform-text);
  font: var(--font-h6);
}

.message-inform > :is(p, dt)::before {
  position: absolute;
  top: 2px;
  top: calc(min(30px, max(28px, 100%)) - 28px);
  left: 0;
  width: 24px;
  height: 24px;
  background-image: url("../img/icon_inform.svg");
  content: "";
}

:is(.message-error, .message-warning, .message-inform) > dd {
  margin-top: 8px;
  padding-left: 32px;
  font: var(--font-body2);
}

:is(.message-error, .message-warning, .message-inform, .message-important)
  > div:first-child {
  position: relative;
  padding-left: 32px;
}

:is(.message-error, .message-important) > div:first-child > p:first-child {
  color: var(--c-error-text);
  font: var(--font-h6);
}

.message-warning > div:first-child > p:first-child {
  color: var(--c-caution);
  font: var(--font-h6);
}

.message-inform > div:first-child > p:first-child {
  color: var(--c-inform-text);
  font: var(--font-h6);
}

:is(.message-error, .message-warning, .message-inform, .message-important)
  > div:first-child
  > p:first-child::before {
  position: absolute;
  top: calc(min(30px, max(28px, 100%)) - 28px);
  left: 0;
  width: 24px;
  height: 24px;
}

[class^="message-"] > div:last-child > ul:last-child {
  margin-bottom: 0;
}

[class^="message-"] > div:last-child > ul:first-child,
[class^="message-"] > div:last-child > ul:first-child > li:first-child {
  margin-top: 0;
}

.message-error > div:first-child > p:first-child::before,
.message-important > div:first-child > p:first-child::before {
  background-image: url("../img/icon_error.svg");
  content: "";
}

.message-warning > div:first-child > p:first-child::before {
  background-image: url("../img/icon_warning.svg");
  content: "";
}

.message-inform > div:first-child > p:first-child::before {
  background-image: url("../img/icon_inform.svg");
  content: "";
}

:is(.message-error, .message-warning, .message-inform)
  > div:first-child
  > p:not(:first-child) {
  font: var(--font-caption2);
  color: var(--c-neutral-primary);
  margin-top: 4px;
}

:is(.message-error, .message-warning, .message-inform) > div:not(:first-child) {
  margin-top: 8px;
  padding-left: 32px;
  font: var(--font-body2);
}

.message-notfound {
  background: url("../img/icon_notfound.svg") no-repeat left center;
  padding-left: 32px;
}

.message-important {
  border: 1px solid var(--c-error);
  background-color: var(--c-error-back);
  width: 100%;
  padding: 16px;
  color: var(--c-error-text);
}

.message-important > ul.list-text {
  padding-left: 32px;
  margin-top: 16px;
  margin-bottom: 0;
}

.message-important > ul.list-text > li {
  font: var(--font-caption1);
}

.message-important > ul.list-text > li:last-child {
  margin-bottom: 0;
}

.message-important > ul.list-text > li > a.link-line {
  font: var(--font-caption1);
  color: var(--c-error-text);
}

.approval_number > div:first-child {
  display: flex;
  justify-content: center;
}

.approval_number div {
  margin: 16px 0px;
}

/* links-list */
ul.links-list {
  border-top: 1px solid var(--c-separator);
}

ul.links-list > li {
  border-bottom: 1px solid var(--c-separator);
  list-style: none;
}

ul.links-list > li.no-border {
  border-bottom: none;
}

ul.links-list > li > a {
  display: block;
  padding: 16px 44px 16px 8px;
  font: var(--font-body2-b);
  color: var(--c-neutral-primary);
  background: var(--c-neutral-white) url("../img/icon_right.svg") no-repeat
    right 8px center;
}

ul.links-list > li > a[target="_blank"] {
  background-image: url(../img/icon_tab.svg);
  background-position: center right 12px;
}

ul.links-list > li > a:hover {
  background-color: var(--c-accent-secondary-pale);
}

ul.links-list > li > a:active {
  background-color: var(--c-accent-secondary-light);
}

ul.links-list > li > a > small {
  font: var(--font-caption1);
}

.subtitle + ul.links-list,
.tabs > div > ul.links-list {
  margin-top: -16px;
  border-top: none;
}

@media (min-width: 768px) {
  ul.links-list > li > a {
    padding: 8px 76px 8px 16px;
    background-position: center right 16px;
  }

  ul.links-list > li > a[target="_blank"] {
    background-position: center right 20px;
  }
}

/* table-compare */
dl.table-compare {
  border-top: 1px solid var(--c-separator);
  font: var(--font-body2);
}

dl.table + dl.table-compare {
  border-top: none;
}

dl.table-compare > div {
  border-bottom: 1px solid var(--c-separator);
}

dl.table-compare > div > dt {
  padding: 16px 8px 8px;
}

dl.table-compare > div > dd {
  padding: 8px 8px 16px;
}

dl.table-compare > div > dt {
  font: var(--font-body2-b);
}

dl.table-compare > div > dd > dl > div:last-child {
  margin-top: 32px;
}

dl.table-compare > div > dd > dl > div > dt {
  margin-bottom: 16px;
}

dl.table-compare dd > div > p {
  margin-top: 32px;
  margin-bottom: 16px;
}

dl.table-compare dd > div:first-child > p {
  margin-top: 24px;
}

dl.table-compare ul.list-text {
  margin: 16px 0 0;
  font: var(--font-caption1);
}

dl.table-compare ul.list-text > li {
  margin: 16px 0 0;
}

dl.table-compare > div > dd > dl .form-price:last-child {
  margin-bottom: 0;
}

dl.table-compare.no-subtitle dl > div:first-child,
dl.table-compare.no-subtitle dl > div:last-child > dt {
  display: none;
}

dl.table-compare.no-subtitle dl > div:last-child {
  margin-top: 0px;
}

@media (min-width: 768px) {
  dl.table-compare > div > dt {
    padding: 8px 16px 12px;
  }

  dl.table-compare > div > dd {
    padding: 12px 16px 8px;
  }

  dl.table-compare > div > dd > dl {
    display: flex;
    gap: 44px;
  }

  dl.table-compare > div > dd > dl > div {
    width: 50%;
    margin-top: 0 !important;
  }

  dl.table-compare.no-subtitle dl > div:first-child,
  dl.table-compare.no-subtitle dl > div:last-child > dt {
    display: block;
  }

  dl.table-compare.no-subtitle dl > div:last-child {
    margin-top: 32px;
  }
}

table.table-compare {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: 1px solid var(--c-separator);
}

table.table-compare tr {
  width: 100%;
  border-bottom: 1px solid var(--c-separator);
  vertical-align: top;
}

table.table-compare th {
  padding: 8px 22px;
  background-color: var(--c-accent-back);
  font: var(--font-body2);
  text-align: left;
}

table.table-compare tr > th:first-child {
  width: 25%;
  padding-left: 16px;
}

table.table-compare td {
  width: 37.5%;
  padding: 8px 22px;
  background-color: var(--c-neutral-white);
  font: var(--font-body2-b);
  text-align: left;
}

table.table-compare tr > :is(th, td):last-child {
  padding-right: 16px;
}

.box-certification {
  margin-top: 16px;
  width: var(--box-certification-width);
  padding: 16px;
  background-color: var(--c-neutral-back);
}

.box-certification > div {
  max-width: 358px;
}

.box-card-sample {
  margin-top: 16px;
  padding: 16px;
  background-color: var(--c-neutral-back);
  width: fit-content;
}

.box-card-sample-title {
  display: flex;
  align-items: center;
  font: var(--font-body2-b);
}

.box-card-sample-title > button {
  margin-left: auto;
}

.box-card-sample img {
  margin: 16px 0 0;
}

@media (max-width: 767.98px) {
  .box-card-sample > * {
    max-width: 355px;
  }
}

@media (min-width: 768px) {
  .box-card-sample > .list-card,
  .box-card-sample > .list-card > div {
    display: flex;
    flex-direction: row;
    gap: 16px 40px;
    flex-wrap: wrap;
  }

  .box-card-sample-title > button {
    display: none;
  }

  .box-card-sample > p {
    display: none;
  }
}

table.ransu,
table.ransu-old {
  width: min(355px, calc(100vw - 72px));
  border-collapse: collapse;
  margin-bottom: 16px;
}

table.ransu th {
  background-color: var(--c-accent-corporate);
  padding: 6px 16px;
  font: var(--font-body2-b);
  color: var(--c-neutral-white);
  border-right: 1px solid var(--c-neutral-white);
  border-bottom: 1px solid var(--c-accent-corporate);
}

table.ransu th:first-child {
  padding: 0;
  padding: 1px;
  border-right: 1px solid var(--c-accent-corporate);
  border-bottom: 1px solid var(--c-neutral-white);
}

table.ransu tr:first-child > th:first-child {
  font: var(--font-caption1-b);
  border-right: 1px solid var(--c-neutral-white);
}

table.ransu th:last-child {
  border-right: 1px solid var(--c-accent-corporate);
}

table.ransu tr:last-child > th:first-child {
  border-bottom: 1px solid var(--c-accent-corporate);
}

table.ransu td {
  padding: 0;
  height: 31px;
  background-color: var(--c-neutral-white);
  border-right: 1px solid var(--c-accent-corporate);
  border-bottom: 1px solid var(--c-accent-corporate);
}

table.ransu .ransu-target {
  display: block;
  height: 30px;
  background-color: var(--c-caution-back);
  font: var(--font-body2);
  border: 2px solid var(--c-caution);
}

table.ransu-old {
  table-layout: fixed;
}

table.ransu-old tr {
  border-left: 1px solid var(--c-inform);
}

table.ransu-old th {
  padding: 1px 0;
  background-color: var(--c-inform);
  color: var(--c-neutral-white);
  font: var(--font-caption1-mono-b);
  border-right: 1px solid var(--c-neutral-white);
}

table.ransu-old tr > th:first-child {
  width: 30%;
  font: var(--font-body2-b);
}

table.ransu-old tr > th:last-child {
  border-right: 1px solid var(--c-inform);
}

table.ransu-old td {
  padding: 0;
  background-color: var(--c-neutral-white);
  color: var(--c-inform);
  font: var(--font-caption1-b);
  text-align: center;
  border-bottom: 1px solid var(--c-inform);
  border-right: 1px solid var(--c-inform);
}

table.ransu-old tr > td:first-child {
  padding: 4px 0;
}

table.ransu-old .ransu-target {
  display: block;
  height: 28px;
  background-color: var(--c-caution-back);
  font: var(--font-body2);
  border: 2px solid var(--c-caution);
}

.box-certification-input {
  display: flex;
  gap: calc((100% - 90px * 3) / 2);
}

.box-certification-input > div > input {
  max-width: 90px;
}

.box-certification-input > div > div {
  text-align: center;
  margin-bottom: 16px;
  font: var(--font-body2-b);
}

.box-certification-input input.ransu-target {
  background-color: var(--c-caution-back);
}

@media (max-width: 797.98px) {
  .box-certification + .space-btn {
    margin-top: 8px;
  }
}

@media (min-width: 768px) {
  .box-certification-input {
    gap: 20px;
  }

  .box-certification-input > div > input {
    max-width: 106px;
  }
}

dialog {
  width: 355px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: var(--c-neutral-white);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

dialog.dialog-full {
  overflow: hidden;
  width: 100vw;
  height: 100%;
  max-height: calc(var(--window-inner-height) - 16px);
  max-width: none;
  border-radius: 4px;
}

dialog.dialog-full > div.dialog-container {
  display: flex;
  flex-direction: column;
  max-height: calc(var(--window-inner-height) - 16px);
  height: 100%;
}

.dialog-full .dialog-inr-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  padding: 24px 20px;
  font: var(--font-h6);
  border-bottom: 1px solid var(--c-separator);
  flex-shrink: 0;
  flex-grow: 0;
}

.dialog-full .dialog-inr-header > p {
  margin: auto 0;
}

.dialog-full .dialog-inr-header > .btn-close {
  margin: -10px 0;
  padding-right: 36px;
  min-height: 44px;
  min-width: 72px;
  background: url("../img/icon_close_sp.svg") no-repeat center right;
}

.dialog-full .dialog-inr-header > .btn-close > span {
  vertical-align: middle;
  display: inline-block;
  font: var(--font-caption3-b);
}

@media (min-width: 768px) {
  dialog.dialog-full {
    max-height: calc(var(--window-inner-height) - 80px);
  }

  .dialog-full .dialog-inr-header > .btn-close {
    padding-right: 48px;
    min-width: 93px;
    background: url("../img/icon_close_pc.svg") no-repeat center right;
  }

  .dialog-full .dialog-inr-header > .btn-close:hover {
    background: url("../img/icon_close_hover.svg") no-repeat center right;
  }

  .dialog-full .dialog-inr-header > .btn-close:active {
    background: url("../img/icon_close_toggle.svg") no-repeat center right;
  }
}

.dialog-inr-content {
  padding: 20px 0;
  height: 100%;
  flex-shrink: 1;
  flex-grow: 1;
  overflow: auto;
  overflow-y: scroll;
  scrollbar-width: none;
}

.dialog-inr-content::-webkit-scrollbar {
  display: none;
}

.dialog-full .dialog-inr-content {
  padding: 0px 20px 24px;
}

.dialog-full .dialog-inr-content > :first-child {
  margin-top: 24px;
}

.dialog-inr-content > :is(.space-btn, .space-btn-2btn) {
  margin-top: 24px;
  margin-bottom: 0px;
}

.dialog-inr-content::-webkit-scrollbar {
  display: block;
  width: 3px;
  height: 3px;
}

.dialog-inr-content::-webkit-scrollbar-track {
  background-color: var(--c-neutral-white);
}

.dialog-inr-content::-webkit-scrollbar-thumb {
  height: 30px;
  background: var(--c-separator);
}

.dialog-full .dialog-inr-footer {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--base-hairline);
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
}

@keyframes dialog-slide {
  0% {
    transform: translateY(120vh);
  }
  100% {
    transform: translateY(0);
  }
}

@media (max-width: 767.98px) {
  dialog.dialog-full {
    margin: 0;
    margin-top: 16px;
  }

  dialog.dialog-full[open] {
    animation: dialog-slide 0.25s ease-in;
  }
}

@media (min-width: 768px) {
  dialog {
    width: 450px;
  }

  dialog.dialog-full {
    max-width: min(1052px, max(758px, calc(87vw - var(--side-margin))));
  }

  .dialog-full .dialog-inr-header {
    padding: 24px 40px;
  }

  .dialog-full .dialog-inr-content {
    padding: 0 40px 24px;
  }
}

/*通知ダイアログ*/
dialog:is(.dialog-notice, .dialog-notice-big, .dialog-help) {
  max-width: 335px;
  width: 100%;
  overflow: hidden;
}

dialog:is(.dialog-notice, .dialog-notice-big, .dialog-help)
  > div.dialog-container {
  display: flex;
  flex-direction: column;
}

dialog.dialog-notice > div.dialog-container {
  max-height: 587px;
}

dialog:is(.dialog-notice-big, .dialog-help) > div.dialog-container {
  max-height: min(var(--window-inner-height) - 80px, 587px);
}

:is(.dialog-notice, .dialog-notice-big, .dialog-help) .dialog-inr-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 20px;
  font: var(--font-h6);
  border-bottom: 1px solid var(--c-separator);
  flex-shrink: 0;
  flex-grow: 0;
}

:is(.dialog-notice, .dialog-notice-big, .dialog-help) .dialog-inr-header > p {
  margin: auto 0;
}

:is(.dialog-notice, .dialog-notice-big, .dialog-help)
  .dialog-inr-header
  > .btn-close {
  margin: -10px 0;
  padding-right: 36px;
  min-height: 44px;
  min-width: 72px;
  background: url("../img/icon_close_sp.svg") no-repeat center right;
}

:is(.dialog-notice, .dialog-notice-big, .dialog-help)
  .dialog-inr-header
  > .btn-close
  > span {
  vertical-align: middle;
  display: inline-block;
  font: var(--font-caption3-b);
}

:is(.dialog-notice, .dialog-notice-big, .dialog-help) .dialog-inr-content {
  padding: 0 20px 24px;
}

:is(.dialog-notice, .dialog-notice-big, .dialog-help)
  .dialog-inr-content
  > :first-child {
  margin-top: 24px;
}

.dialog-notice .dialog-inr-content {
  overflow: hidden;
}

.dialog-notice
  .space-btn-2btn
  > button:is(.btn-primary, .btn-secondary, .btn-caution) {
  height: 52px;
}

:is(.dialog-notice-big, .dialog-help) .dialog-inr-footer {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px;
  flex-shrink: 0;
  flex-grow: 0;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
}

dialog:is(.dialog-notice, .dialog-notice-big) dl.table {
  margin: 16px -20px 24px;
}

@media (min-width: 768px) {
  dialog:is(.dialog-notice, .dialog-notice-big, .dialog-help) {
    max-width: 748px;
  }

  dialog.dialog-notice > div.dialog-container {
    max-height: 608px;
  }

  dialog:is(.dialog-notice-big, .dialog-help) > div.dialog-container {
    max-height: min(var(--window-inner-height) - 200px, 608px);
  }

  :is(.dialog-notice, .dialog-notice-big, .dialog-help) .dialog-inr-header {
    padding: 24px 40px;
  }

  :is(.dialog-notice, .dialog-notice-big, .dialog-help)
    .dialog-inr-header
    > .btn-close {
    padding-right: 48px;
    min-width: 93px;
    background: url("../img/icon_close_pc.svg") no-repeat center right;
  }

  :is(.dialog-notice, .dialog-notice-big, .dialog-help)
    .dialog-inr-header
    > .btn-close:hover {
    background: url("../img/icon_close_hover.svg") no-repeat center right;
  }

  :is(.dialog-notice, .dialog-notice-big, .dialog-help)
    .dialog-inr-header
    > .btn-close:active {
    background: url("../img/icon_close_toggle.svg") no-repeat center right;
  }

  :is(.dialog-notice, .dialog-notice-big, .dialog-help) .dialog-inr-content {
    padding: 0 40px 24px;
  }

  :is(.dialog-notice-big, .dialog-help) .dialog-inr-footer {
    padding: 16px 40px;
    flex-direction: row;
  }

  dialog:is(.dialog-notice, .dialog-notice-big) dl.table {
    margin: 16px 0px 24px;
  }
}

@media (max-width: 767.98px) {
  dialog:is(.dialog-notice, .dialog-notice-big) dl.table > div {
    padding: 0 20px;
  }

  dialog:is(.dialog-notice, .dialog-notice-big) dl.table > div > :is(dd, dt) {
    padding: 16px 0px;
  }
}

/* icon */
.icon-circle-one::before,
.icon-circle-two::before,
.icon-circle-three::before,
.icon-circle-four::before,
.icon-circle-five::before,
.icon-circle-six::before,
.icon-circle-seven::before,
.icon-circle-eight::before,
.icon-circle-nine::before,
.icon-circle-ten::before {
  margin-right: 8px;
}
.icon-circle-one::before {
  content: url(../img/icon_circle_one.svg);
}

.icon-circle-two::before {
  content: url(../img/icon_circle_two.svg);
}

.icon-circle-three::before {
  content: url(../img/icon_circle_three.svg);
}

.icon-circle-four::before {
  content: url(../img/icon_circle_four.svg);
}

.icon-circle-five::before {
  content: url(../img/icon_circle_five.svg);
}

.icon-circle-six::before {
  content: url(../img/icon_circle_six.svg);
}

.icon-circle-seven::before {
  content: url(../img/icon_circle_seven.svg);
}

.icon-circle-eight::before {
  content: url(../img/icon_circle_eight.svg);
}

.icon-circle-nine::before {
  content: url(../img/icon_circle_nine.svg);
}

.icon-circle-ten::before {
  content: url(../img/icon_circle_ten.svg);
}

.icon-change-number::before {
  content: url("../img/icon_change_number.svg");
}

.icon-required::after {
  content: url("../img/icon_required.svg");
  margin-left: 8px;
  vertical-align: middle;
}

/* ラインナップ */
span:is(
    .allstar,
    .beginner,
    .netbank,
    .nisa,
    .t_nisa,
    .junior,
    .workplace-it,
    .growup-investment,
    .other-fund
  ) {
  position: relative;
  display: block;
  padding-left: 32px;
}

span:is(
    .allstar,
    .beginner,
    .netbank,
    .nisa,
    .t_nisa,
    .junior,
    .workplace-it,
    .growup-investment,
    .other-fund
  )::before {
  position: absolute;
  left: 0;
  width: 24px;
  height: 24px;
  content: "";
}

.allstar::before {
  background-image: url("../img/icon_allstar.svg");
}

.beginner::before {
  background-image: url("../img/icon_beginner.svg");
}

.netbank::before {
  background-image: url("../img/icon_netbank.svg");
}

.nisa::before {
  background-image: url("../img/icon_nisa.svg");
}

.t_nisa::before {
  background-image: url("../img/icon_t_nisa.svg");
}

.junior::before {
  background-image: url("../img/icon_junior.svg");
}

.workplace-it::before {
  background-image: url("../img/icon_workplace_it.svg");
}

.growup-investment::before {
  background-image: url("../img/icon_growup_investment.svg");
}

.other-fund::before {
  background-image: url("../img/icon_other_fund.svg");
  background-size: 24px 24px;
}

.lineup-icons {
  display: flex;
  gap: 8px;
}

.box-caution {
  margin: 0px var(--side-margin-minus) 0px;
  padding: 24px;
  background-color: var(--c-caution-back);
}

.box-caution-title {
  font: var(--font-h6);
  margin-bottom: 24px;
}

.box-caution > button.btn-caution {
  max-width: 100%;
  margin-top: 16px;
}

.box-caution > div.space-btn-2btn {
  margin-top: 24px;
}

.box-accent {
  padding: 12px;
  background-color: var(--c-accent-back);
}

.box-accent > .btn-next,
.box-accent > .btn-secondary {
  border: none;
}

.box-accent > ul {
  list-style-type: none;
  font: var(--font-body2);
}

.box-accent > ul > li {
  position: relative;
  margin-top: 16px;
  padding-left: calc(1em + 4px);
}

.box-accent > ul > li:first-child {
  margin-top: 0px;
}

.box-accent > ul > li::before {
  position: absolute;
  left: 0;
  content: "・";
}

.box-white {
  background-color: var(--c-neutral-white);
}

dl.box-search-input {
  margin-top: 16px;
}

dl.box-search-input > div {
  margin-top: 24px;
}

dl.box-search-input > div:first-child {
  margin-top: 16px;
}

dl.box-search-input > div > dt {
  margin-bottom: 16px;
}

dl.box-search-input > div.txt-caption1 {
  margin-top: 16px;
}

div.box-banner {
  background-color: var(--c-neutral-back);
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0px var(--side-margin-minus) 0px;
  flex-direction: column;
}

@media (min-width: 768px) {
  .box-gray.box-change-number {
    justify-content: space-between;
    flex-direction: row;
  }

  .box-gray.box-change-number > div:first-child {
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }
  .box-gray.box-change-number > div:last-child {
    flex: 0 0 37.5%;
    max-width: 37.5%;
    text-align: right;
    justify-content: right;
  }

  .box-gray.box-change-number button {
    margin-left: 16px;
  }

  .box-caution {
    padding: 16px;
    margin: 0px;
  }

  .box-caution > button.btn-caution {
    display: block;
    max-width: 335px;
    margin: 16px auto 0px;
  }

  dl.box-search-input > div {
    display: flex;
    margin-top: 32px;
    margin-left: calc(-1 * var(--col-margin));
  }

  dl.box-search-input > div > dt {
    width: 25%;
    padding-left: var(--col-margin);
  }

  dl.box-search-input > div > dd {
    width: 75%;
    padding-left: var(--col-margin);
  }

  dl.box-search-input > div > dd ul:last-child,
  dl.box-search-input > div > dd ul:last-child > li:last-child {
    margin-bottom: 0px;
  }

  div.box-banner {
    gap: 24px;
    margin: 0px;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
  }
}

.box-lineup {
  display: flex;
  flex-flow: column;
  gap: 16px 24px;
  width: 100%;
}

dialog .box-lineup {
  flex-flow: column;
}

@media (max-width: 767.98px) {
  div.box-gray-title:has(button.btn-text-toggle)
    + div[aria-hidden]:has(.box-lineup) {
    margin-top: 8px;
  }
}

@media (min-width: 768px) {
  .box-lineup {
    flex-flow: row;
    flex-wrap: wrap;
  }
}

.txt-search {
  display: flex;
  flex-flow: column;
  gap: 16px;
  align-items: center;
}

.search-narrow {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  flex-flow: column;
}

.search-narrow > div,
.search-narrow > div > div:first-child {
  display: flex;
  gap: 16px;
}

.search-narrow > div {
  flex-flow: column;
  width: 100%;
}

.search-narrow > div:last-child {
  align-items: center;
}

.search-narrow > div > div:last-child {
  text-align: center;
}

.search-narrow > div > div:first-child {
  flex-wrap: wrap;
  width: 100%;
}

.search-narrow > div > div > input[type="radio"] + label {
  width: 128px;
}

.search-narrow > div > div > label + input + label {
  margin-top: 0px;
}

.search-narrow > div > div > button {
  width: 100%;
}

.search-narrow > div > .btn-secondary {
  width: 100%;
}

@media (min-width: 768px) {
  .txt-search {
    flex-flow: row;
  }

  .search-narrow {
    flex-flow: nowrap;
    justify-content: space-between;
  }

  .search-narrow > div {
    flex-flow: nowrap;
    width: auto;
  }

  .search-narrow > div > div:first-child {
    flex-wrap: wrap;
    width: auto;
  }

  /* .search-narrow > div > div:last-child {
    margin-right: -16px;
  } */

  .search-narrow > div:last-child {
    padding-left: 16px;
    border-left: 1px solid var(--c-separator);
    margin-left: auto;
    align-items: baseline;
  }

  .search-narrow > div > div > button {
    width: 128px;
  }

  .search-narrow > div > .btn-secondary {
    height: 52px;
    width: 187px;
  }
}

/* div[aria-expanded="true"] > button.btn-accordion::after {
  transform: rotateX(180deg);
} */

div.btn-right {
  text-align: right;
}

/* ログイン回り */
.box-login > div {
  width: 100%;
}

.box-login label,
label.login-input {
  display: inline-block;
  padding: 8px 0;
  font: var(--font-body2-b);
  cursor: default;
}

div.box-login {
  background-color: var(--c-accent-back);
  border-radius: 4px;
  padding: 8px 16px 16px;
  margin: 24px 0;
}

div.box-login > div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

div.box-login > div > div {
  width: 100%;
}

div.box-login > div > div.shop-num {
  min-width: 119px;
  max-width: 140px;
  margin-right: 10px;
}

div.box-login > div > div.account-num {
  min-width: 174px;
  max-width: 596px;
  width: 100%;
}

div.box-login > div:last-child {
  display: block;
}

div.box-login > div:last-child > div {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-neutral-primary-op50);
  margin-bottom: 16px;
}

div.box-login > div:last-child > ul {
  margin-bottom: 0px;
}

div.box-login > div:last-child > ul a {
  font: var(--font-body2-b);
}

div.box-login > .txt-line {
  margin: 16px 0px 0px;
}

div.box-login > div.txt-line > p {
  font: var(--font-caption1-b);
}

div.account-num > label > small {
  font: var(--font-caption3-b);
}

.txt-line {
  display: flex;
  align-items: center;
  margin: 16px 0px;
}

.txt-line::before,
.txt-line::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: var(--c-neutral-primary-op50);
}

.txt-line::before {
  margin-right: 8px;
}

.txt-line::after {
  margin-left: 8px;
}

div.box-accent.accordion {
  padding: 16px;
  display: flex;
  justify-content: space-between;
}

ul.txt-caption {
  position: relative;
  margin-top: 16px;
  list-style-type: none;
  font: var(--font-caption1);
}

ul.txt-caption > li {
  margin-top: 16px;
  padding-left: calc(1em + 4px);
}

ul.txt-caption > li::before {
  position: absolute;
  left: 0;
  content: "・";
}

p.txt-error-caption {
  margin-top: 8px;
  font: var(--font-caption1);
}

p.txt-error-caption {
  color: var(--c-error-text);
}

.answer-result > p {
  margin-top: 16px;
}

.answer-result > p:not(.txt-caution) {
  opacity: 0.5;
  color: var(--c-neutral-primary);
}

.answer-result + hr {
  margin: 16px 0;
}

.answer-result + hr + .subtitle2 {
  margin: 16px 0;
}

.answer-result > p.txt-caution {
  font: var(--font-body2-b);
  color: var(--c-caution);
}

div.table-noline-category > dd > dl > div:first-child {
  margin-top: 0;
}

@media (min-width: 768px) {
  dl.table-noline > div.table-noline-category > dd > dl.table-noline > div {
    justify-content: end;
  }
}

@media (max-width: 767.98px) {
  dl.table-noline > div.table-noline-category {
    flex-direction: column;
    gap: 16px;
    border-style: none;
  }
}

dl.table-noline > div > dt {
  margin-right: 16px;
}

hr + div.topics-button-list {
  margin-top: -24px;
}

.subtitle + div.topics-button-list {
  margin-top: -16px;
}

.box-gray div.topics-button-list {
  margin-bottom: 0;
}

div.topics-button-list {
  margin-bottom: 16px;
}

div.topics-button-list > div {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  border-bottom: 1px solid var(--c-separator);
  gap: 16px;
  padding: 16px 0;
}

div.topics-button-list > div:last-child {
  border-bottom: none;
  padding-bottom: 0px;
}

div.topics-button-list > div > div:nth-child(even) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

div.topics-button-list > div > div.btn-middle:nth-child(even) {
  justify-content: center;
}

div.topics-button-list .subtitle2 {
  margin-top: 0px;
}

div.topics-button-list :is(.btn-primary-mini, .btn-secondary-mini) {
  height: auto;
}

.box-gray > div.topics-button-list > div {
  padding: 0 0;
}

.box-gray > div.topics-button-list > div > div > div.box-gray-title + p {
  margin-top: 8px;
}

div.topics-button-list > div.no-border {
  border-bottom: none;
}

@media (min-width: 768px) {
  div.topics-button-list > div {
    flex-direction: row;
    justify-content: space-between;
  }

  div.topics-button-list > div > div:nth-child(odd) {
    -webkit-flex: 0 0 62.5%;
    flex: 0 0 62.5%;
    max-width: 62.5%;
  }

  div.topics-button-list > div > div:nth-child(even) {
    align-items: end;
    flex: 0 0 37.5%;
    max-width: calc(37.5% - 16px);
  }

  div.topics-button-list.topics-wide > div > div:nth-child(odd) {
    -webkit-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  div.topics-button-list.topics-wide > div > div:nth-child(even) {
    flex: 0 0 25%;
    max-width: calc(25% - 16px);
  }

  div.topics-button-list .card-btn-parallel {
    justify-content: right;
  }

  div.topics-button-list .card-btn-parallel > .btn-next {
    width: 192px;
  }
}

div.topics-button-list
  > div
  > div:nth-child(odd)
  > p:not(.subtitle2, :first-child) {
  margin-top: 16px;
}

.topics-title {
  font: var(--font-body2-b);
}

.unit-pc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-unit {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

@media (min-width: 768px) {
  .unit-pc {
    flex-direction: row;
    gap: 0;
  }

  .input-unit {
    min-width: 294px;
  }

  .input-unit > span {
    margin-right: 8px;
  }
}

.box-instraction {
  padding: 8px 8px 16px;
  background-color: var(--c-accent-back);
}

.box-instraction > .accordion {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.box-instraction > .accordion > p {
  margin: auto 0;
}

.box-instraction-inner {
  background-color: var(--c-neutral-white);
  padding: 16px;
}

.box-instraction-inner + div,
div[aria-hidden] > .box-instraction-inner {
  margin-top: 16px;
}

.box-instraction-inner > :first-child,
.box-instraction-inner > ul:first-child > li:first-child {
  margin-top: 0;
}

.box-instraction-inner > ul.list-text:last-child {
  margin-bottom: 0;
}

.box-instraction-inner > p:not(:first-child),
div[aria-hidden] > .box-instraction-inner > p:not(:first-child) {
  margin-top: 24px;
}

.box-instraction > hr {
  margin: 16px 0;
}

.box-instraction-inner + div {
  text-align: center;
}

.box-instraction > .box-instraction-inner > div.space-btn > button {
  margin: 0;
}

.box-instraction-inner + div > input[type="checkbox"] + label {
  max-width: 335px;
}

.box-instraction + .box-instraction {
  margin-top: 16px;
}

.box-instraction > div[aria-hidden] > .box-instraction-scroll-area {
  max-height: 374px;
  margin-top: 16px;
  padding: 16px;
  overflow: auto;
  background-color: var(--c-neutral-white);
}

.space-terms > .box-instraction {
  padding: 16px 8px;
  gap: 16px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.space-terms > .box-instraction + p {
  margin: 16px 0;
}

.space-terms > div > input + label {
  max-width: 335px;
}

@media (max-width: 767.98px) {
  .box-instraction > .accordion[aria-expanded="false"] {
    margin-top: 8px;
  }

  .box-instraction > .accordion[aria-expanded="true"] {
    margin-top: 8px;
  }
  .box-instraction > .accordion[aria-expanded="true"] + div:last-child {
    margin-bottom: -8px;
  }
}

@media (min-width: 768px) {
  .box-instraction {
    padding: 16px;
  }

  .space-terms > .box-instraction {
    align-items: center;
  }

  .space-terms > div > input + label,
  .box-instraction-inner + div > input[type="checkbox"] + label {
    max-width: 400px;
  }

  .box-instraction-scroll-area::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  .box-instraction-scroll-area::-webkit-scrollbar-track {
    background-color: var(--c-neutral-white);
  }

  .box-instraction-scroll-area::-webkit-scrollbar-thumb {
    height: 30px;
    background: var(--c-separator);
  }
}

.sign-up-flow > div.box-gray {
  margin-top: 0;
}

.flex-wrap-2.sign-up-flow {
  margin-top: 16px;
}

:is(input + label, input) + hr {
  margin: 16px 0;
}

.space-btn-comparison {
  text-align: center;
}

.space-btn-comparison > div:first-child {
  display: none;
}

.space-btn-comparison button {
  font: var(--font-h6);
}

.space-btn-comparison > div:last-child {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.space-btn-comparison > .space-selection {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767.98px) {
  .space-btn-comparison > div:last-child > button {
    width: 160px;
  }
}

@media (min-width: 768px) {
  .space-btn-comparison {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
  }

  .space-btn-comparison > div:first-child {
    display: block;
    text-align: start;
  }

  .space-btn-comparison > div:last-child {
    justify-content: end;
    margin-top: 0;
  }

  .space-btn-comparison button {
    width: 128px;
    height: 64px;
  }
}

.space-btn-dialog-search {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 16px;
  align-items: center;
}

.space-btn-dialog-search > button {
  max-width: 320px;
}

.space-selection > div > span.count {
  color: var(--c-neutral-primary);
  opacity: 0.5;
  padding-left: 8px;
  font: var(--font-h4-mono);
}

.space-selection > div > span.count.txt-accent {
  color: var(--c-accent-primary);
  opacity: 1;
}

.space-selection > div {
  font: var(--font-caption2-b);
  padding-right: 0;
  padding-left: 24px;
}

.space-selection > div:nth-child(odd) {
  padding-right: 24px;
  padding-left: 0;
  border-right: 1px solid var(--c-separator);
}