@charset "UTF-8";
:root {
  --font-family-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-family-jp-inter: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-family-en: "Times New Roman", serif;
  --color-default: #222222;
  --color-base: #fff;
  --color-theme: #540cff;
  --color-link: #0050e6;
  --color-light-purple: rgba(84, 12, 255, 0.1);
  --color-visited-link: #757575;
  --color-gray: #757575;
  --color-light-gray: #f9f9f9;
  --color-light-gray02: #eeeeec;
  --color-light-gray03: #fafafa;
  --color-light-gray04: #fefefe;
  --color-dark-gray: #666;
  --color-red: #e50121;
  --color-navy: #0a2449;
  --color-line-gray: #efefef;
  --color-line-gray02: #f1f1f1;
  --color-line-gray03: #d9d9d9;
  --color-line-dark-gray: #333;
  --header-height: 132px;
  --container-width: 1440px;
  --min-container-width: 1360px;
  --contents-width: calc(100% - 337px);
  --min-contents-width: 812px;
  --sidebar-width: 300px;
  --grid-columns: 12;
  --grid-gap: 32px;
  --z-index-utility: 100;
  --z-index-overlay: 3000;
  --z-index-header: 4000;
  --z-index-anker-ad: 5000;
  --z-index-bp-privacy: 6000;
  --z-index-menu: 8000;
  --z-index-modal: 9999;
  --z-index-global-navi: 10000;
}

body[data-page=top] {
  --min-container-width: 1360px;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*****************************************************
  Foundation
*****************************************************/
/* =================================================
  Base
================================================= */
html {
  height: 100%;
  color: var(--color-default);
  font: 500 18px/1.5 var(--font-family-jp);
  font-feature-settings: "clig" off, "liga" off;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;
}

body {
  min-width: var(--min-container-width);
  background: var(--color-light-gray);
  word-wrap: break-word;
  word-break: break-word;
}
body.is-open {
  overflow: hidden;
}
body.is-open .l-header_overlay {
  display: block;
}
body[data-page=imageViewer] {
  min-width: inherit;
  background-color: var(--color-light-gray);
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}
*,
::before,
::after {
  box-sizing: border-box;
}

ul, ol, li, dd {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

em {
  font-style: normal;
}

p, figure {
  margin: 0;
}

sub {
  bottom: -0.1em;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

b, strong {
  font-weight: 700;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

input[type=search] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
}
input[type=search]:focus {
  outline: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: color 0.2s linear, background 0.2s linear;
}

select {
  white-space: nowrap;
}

:where(a) {
  color: var(--color-red);
}
:where(a):visited {
  color: var(--color-visited-link);
}
@media (hover: hover) and (pointer: fine) {
  :where(a):hover {
    text-decoration: none;
  }
}

/* -----------------------------------------------
  Web Font
----------------------------------------------- */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 300;
  src: url("/font/onb/2024/NotoSansJP-Light.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("/font/onb/2024/NotoSansJP-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  src: url("/font/onb/2024/NotoSansJP-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("/font/onb/2024/NotoSansJP-Bold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: url("/font/onb/2024/Inter-Light.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("/font/onb/2024/Inter-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("/font/onb/2024/Inter-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("/font/onb/2024/Inter-Bold.ttf") format("truetype");
  font-display: swap;
}

/*****************************************************
  Layout
*****************************************************/
/* =================================================
  Frame
================================================= */
.l-wrapper {
  position: relative;
  min-width: var(--min-container-width);
}

.l-content {
  max-width: var(--container-width);
  margin: 0 auto;
}
.l-content_footer {
  margin-top: 40px;
}
.l-content_footer_section + .l-content_footer_section {
  margin-top: 40px;
}

.l-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1320px;
  padding-top: 24px;
  margin: 0 auto;
}
.l-main.-lg {
  max-width: var(--container-width);
}
.l-main.-simple {
  max-width: 100%;
  padding-top: 0;
}
.l-main_primary {
  width: var(--contents-width);
}
.l-main_primary.-full {
  width: 100%;
}
.l-main_primary.-full .l-content_footer {
  max-width: 983px;
  margin: 40px auto 0;
}

.l-main_secondary {
  width: var(--sidebar-width);
}
@media screen and (max-width: 767px) {
  .l-main.-simple {
    padding-top: 42px;
  }
}

/*
@media screen and (max-width: 1380px) {
  body[data-page=top] .l-main_primary {
    width: 475px;
  }
}
@media screen and (max-width: 1380px) {
  body[data-page=top] .l-content {
    width: 812px;
  }
}
*/
body[data-page=top] .l-content_footer {
  margin-top: 32px;
}
body[data-page=top] .l-content_footer_section + body[data-page=top] .l-content_footer_section {
  margin-top: 48px;
}

body[data-page=imageViewer] .l-wrapper {
  min-width: inherit;
}
body[data-page=imageViewer] .l-content {
  min-width: inherit;
}

/* =================================================
  .l-header
================================================= */
.l-header {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  background: var(--color-base);
  transition: all 0.2s ease-out;
  z-index: 110;
  border-bottom: 1px solid var(--color-line-gray);
}
.l-header_container {
  position: relative;
  max-width: var(--container-width);
  min-width: var(--min-container-width);
  margin: 0 auto;
  z-index: 1;
}
.l-header_block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--header-width);
  min-width: var(--top-width);
  height: 60px;
  padding: 8px 32px;
  margin: 0 auto;
}
.l-header_block_item {
  display: flex;
  align-items: center;
  flex: 1;
}
.l-header_block_item.-logo {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 173px;
}
.l-header_search {
  position: relative;
  display: flex;
  align-items: center;
  width: 280px;
  height: 44px;
  margin-left: 24px;
}
.l-header_search_textField {
  width: 280px;
  height: 44px;
  padding: 11px 36px 11px 12px;
  background-color: var(--color-light-gray);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
}
.l-header_search_textField::-moz-placeholder {
  color: var(--color-gray);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.l-header_search_textField::placeholder {
  color: var(--color-gray);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.l-header_search_submitBtn {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  background: transparent url(/images/onb/2024/ico_search.svg) center center no-repeat;
  vertical-align: top;
}
.l-header_search_inbox {
  position: absolute;
  bottom: 0;
  left: 0;
}
.l-header_siteLogo {
  margin: 0 auto;
}
.l-header_siteLogo_image {
  margin: 0;
}
.l-header_siteLogo_image img {
  display: block;
  transition: all 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .l-header_siteLogo_image a:hover img {
    opacity: 0.5;
  }
}
.l-header_loginBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.l-header_loginBox_item + .l-header_loginBox_item {
  margin-left: 28px;
}
.l-header_loginBox_item.-menu + .l-header_loginBox_item {
  margin-left: 32px;
}
.l-header_loginBox_item_link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .l-header_loginBox_item_link:hover {
    background-color: rgba(84, 12, 255, 0.1);
  }
}
.l-header_loginBox_item_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .l-header_loginBox_item_btn:hover {
    background-color: rgba(84, 12, 255, 0.1);
  }
}
.l-header_loginBox_item_btn.-new::before {
  content: "";
  position: absolute;
  top: 0;
  right: 2px;
  width: 11px;
  height: 11px;
  background: url(/images/onb/2024/ico_badge.svg) no-repeat;
}
.l-header_loginBox_item_avatar {
  width: 30px;
  height: 30px;
  margin-right: 6px;
  border-radius: 50%;
  overflow: hidden;
}
.l-header_loginBox_menu {
  display: flex;
  align-items: center;
}
.l-header_loginBox_menu_item + .l-header_loginBox_menu_item {
  margin-left: 31px;
}
.l-header_loginBox_menu_link {
  color: var(--color-default);
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.14px;
}
@media (hover: hover) and (pointer: fine) {
  .l-header_loginBox_menu_link:hover {
    color: var(--color-theme);
  }
}
.l-header_overlay {
  position: fixed;
  top: 92px;
  left: 0;
  z-index: var(--z-index-overlay);
  display: none;
  width: 100vw;
  height: calc(100vh - 92px);
  opacity: 0.7;
  background-color: rgba(0, 0, 0, 0.4);
}
.l-header_overlay.is-fixed {
  top: 60px;
  height: calc(100vh - 60px);
}
.l-header.is-fixed {
  position: fixed;
  z-index: 10000;
}
.l-header.-simple {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 132px;
  border-bottom: none;
  background-color: var(--color-light-gray);
}
.l-header.-simple .l-header_container {
  min-width: inherit;
  max-width: inherit;
  border: none;
  box-shadow: none;
}
.l-header.-simple .l-header_siteLogo {
  width: 173px;
  margin: 0 auto;
}
.l-header.-simple .l-header_siteLogo_image {
  width: 100%;
  height: auto;
}
/*
@media screen and (max-width: 1380px) {
  .l-header_loginBox_menu_item:last-of-type {
    display: none;
  }
}
*/
@media screen and (max-width: 767px) {
  .l-header.-simple {
    height: 90px;
  }
  .l-header.-simple .l-header_container {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .l-header.-simple .l-header_siteLogo {
    width: 133px;
  }
}

/* =================================================
  .l-localNavi
================================================= */
.l-localNavi {
  position: fixed;
  top: 92px;
  bottom: 0;
  left: 0;
  z-index: var(--z-index-menu);
  display: none;
  width: 375px;
  height: calc(100vh - 92px);
  background: var(--color-light-gray);
  overflow: hidden;
  visibility: hidden;
  transform: translateX(-400px);
  transition-property: transform, visibility;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  text-align: left;
}
.l-localNavi_toggleBtn {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  background: url(/images/onb/2024/ico_menu.svg) left center no-repeat;
  border-radius: 12px;
  transition: background 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_toggleBtn:hover {
    background-color: var(--color-light-purple);
  }
}
.l-localNavi_container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.l-localNavi_contents {
  padding: 32px 31px 170px 31px;
}
.l-localNavi_section_title {
  margin-bottom: 16px;
  font-size: 16px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-align: center;
}
.l-localNavi_section_title .-en {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.12px;
}
.l-localNavi_section + .l-localNavi_section {
  margin-top: 56px;
}
.l-localNavi_function_item {
  text-align: center;
}
.l-localNavi_function_item + .l-localNavi_function_item {
  margin-top: 16px;
}
.l-localNavi_function_item .btnFunc {
  width: 260px;
  height: 46px;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid var(--color-theme);
  border-radius: 8px;
  background-color: var(--color-base);
  color: var(--color-theme);
  font-size: 16px;
  line-height: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_function_item .btnFunc:hover {
    color: var(--color-base);
    background-color: var(--color-theme);
  }
}
.l-localNavi_function_item .btnFunc.-mypage, .l-localNavi_function_item .btnFunc.-apply {
  color: var(--color-base);
  background-color: var(--color-theme);
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_function_item .btnFunc.-mypage:hover, .l-localNavi_function_item .btnFunc.-apply:hover {
    color: var(--color-theme);
    background-color: var(--color-base);
  }
}
.l-localNavi_menu_content {
  display: flex;
  justify-content: center;
}
.l-localNavi_menu_item + .l-localNavi_menu_item {
  margin-top: 32px;
}
.l-localNavi_menu_item a {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-line-gray);
  color: var(--color-default);
  font-size: 16px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.l-localNavi_menu_item a::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  width: 16px;
  height: 16px;
  background: url(/images/onb/2024/ico_arrow_right.svg) center center/16px 16px no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_menu_item a:hover {
    color: var(--color-theme);
    border-color: var(--color-theme);
  }
  .l-localNavi_menu_item a:hover::after {
    animation: arrowSlide 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s 1 forwards;
  }
  .l-localNavi_menu_item a:hover .l-localNavi_menu_item_icon path, .l-localNavi_menu_item a:hover .l-localNavi_menu_item_icon g {
    fill: var(--color-theme);
  }
}
.l-localNavi_menu_item_icon {
  margin-right: 16px;
}
.l-localNavi_accordion {
  width: 100%;
  margin-bottom: 32px;
}
.l-localNavi_accordion_btn {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 24px 8px 0;
  border-bottom: 1px solid var(--color-line-gray);
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}
.l-localNavi_accordion_btn::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: url(/images/onb/2024/ico_arrow_bottom_02.svg) left center no-repeat;
  transition: transform 0.2s linear;
}
.l-localNavi_accordion_btn::-webkit-details-marker {
  display: none;
}
.l-localNavi_accordion_btn_icon {
  margin-right: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_accordion_btn:hover {
    color: var(--color-theme);
    border-color: var(--color-theme);
  }
  .l-localNavi_accordion_btn:hover .l-localNavi_accordion_btn_icon {
    fill: var(--color-theme);
  }
  .l-localNavi_accordion_btn:hover .l-localNavi_accordion_btn_icon path, .l-localNavi_accordion_btn:hover .l-localNavi_accordion_btn_icon g {
    stroke: var(--color-theme);
  }
}
.l-localNavi_accordion_panel {
  padding-bottom: 32px;
}
.l-localNavi_accordion_title {
  margin-top: 32px;
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-line-gray03);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.l-localNavi_accordion_menu {
  display: flex;
  flex-wrap: wrap;
  margin-top: -8px;
  margin-left: -50px;
}
.l-localNavi_accordion_menu_item {
  width: calc(50% - 50px);
  margin-top: 8px;
  margin-left: 50px;
}
.l-localNavi_accordion_menu_item.-full {
  width: 100%;
}
.l-localNavi_accordion_menu_item a {
  color: var(--color-defualt);
  font-size: 12px;
  letter-spacing: 0.12px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_accordion_menu_item a:hover {
    text-decoration: underline;
  }
}
.l-localNavi_accordion.is-open .l-localNavi_accordion_btn::after {
  transform: rotate(180deg);
}
.l-localNavi_bannerList {
  margin-top: 48px;
}
.l-localNavi_bannerList_list {
  display: flex;
  justify-content: space-between;
  margin-top: -32px;
  margin-left: -32px;
}
.l-localNavi_bannerList_item {
  margin-top: 32px;
  margin-left: 32px;
}
.l-localNavi_bannerList_item a {
  transition: opacity 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_bannerList_item a:hover {
    opacity: 0.7;
  }
}
.l-localNavi_magazine_link {
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_magazine_link:hover .l-localNavi_magazine_title {
    color: var(--color-theme);
  }
}
.l-localNavi_magazine_image {
  text-align: center;
}
.l-localNavi_magazine_image img {
  width: 117px;
}
.l-localNavi_magazine_title {
  margin-top: 8px;
  transition: color 0.2s linear;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.14px;
  text-align: center;
}
.l-localNavi_magazine_number {
  margin-top: 6px;
  color: var(--color-gray);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12px;
  text-align: center;
}
.l-localNavi_magazine_linkBtn {
  margin-top: 8px;
  text-align: center;
}
.l-localNavi_magazine_linkBtn a {
  color: var(--color-default);
  font-size: 12px;
  line-height: 1.8;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_magazine_linkBtn a:hover {
    text-decoration: underline;
  }
}
.l-localNavi_logoutBtn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 32px auto 0;
  font-size: 14px;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_logoutBtn:hover {
    text-decoration: underline;
  }
}
.l-localNavi_snsList {
  display: flex;
  justify-content: center;
}
.l-localNavi_snsList_item + .l-localNavi_snsList_item {
  margin-left: 24px;
}
.l-localNavi_snsList_item a {
  transition: opacity 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_snsList_item a:hover {
    opacity: 0.7;
  }
}
.l-localNavi_footer {
  padding: 0 48px 40px 72px;
}
.l-localNavi_footer_appBtn {
  padding: 0 48px 0 72px;
  margin-bottom: 30px;
}
.l-localNavi_footer_appBtn_item + .l-localNavi_footer_appBtn_item {
  margin-top: 20px;
}
.l-localNavi_footer_appBtn_item a {
  display: block;
  padding: 10px 0 10px 44px;
  font-size: 14px;
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_footer_appBtn_item a:hover {
    color: var(--color-theme);
  }
}
.l-localNavi_footer_appBtn_item.-webApp a {
  background: url(/images/onb/2024/ico_webapp.png) left center/32px auto no-repeat;
}
.l-localNavi_footer_appBtn_item.-viewer a {
  background: url(/images/onb/2024/ico_viewer.png) left center/32px auto no-repeat;
}
.l-localNavi_footer_sns {
  display: flex;
}
.l-localNavi_footer_sns_btn {
  width: 60px;
  height: 60px;
}
.l-localNavi_footer_sns_btn + .l-localNavi_footer_sns_btn {
  margin-left: 50px;
}
.l-localNavi_footer_sns_label {
  display: block;
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  transition: 0.4s all ease-out;
}
.l-localNavi_footer_sns_label.-facebook {
  background-image: url(/images/onb/2024/ico_facebook.svg);
}
.l-localNavi_footer_sns_label.-twitter {
  background-image: url(/images/onb/2024/ico_twitter.svg);
}
.l-localNavi_footer_sns_label.-instagram {
  background-image: url(/images/onb/2024/ico_instagram.svg);
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_footer_sns_label:hover {
    opacity: 0.7;
  }
}
.l-localNavi_footer_logout {
  margin-top: 20px;
  font-size: 14px;
  line-height: 20px;
}
.l-localNavi_footer_logout a {
  transition: 0.4s all ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .l-localNavi_footer_logout a:hover {
    color: var(--color-theme);
  }
}
.l-localNavi.is-open {
  visibility: visible;
  transform: translateX(0);
}
.l-localNavi.is-fixed {
  top: 60px;
  height: calc(100vh - 60px);
}

/* =================================================
  .globalNav
================================================= */
.globalNavi {
  position: relative;
  height: 32px;
  padding-top: 2px;
  padding-bottom: 2px;
  clear: both;
  background: var(--color-base);
  border-bottom: 1px solid var(--color-line-gray);
}
.globalNavi.is-fixed {
  margin-bottom: 100px;
}
.globalNavi .globalNaviContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-width);
  min-width: var(--min-container-width);
  height: 28px;
  padding-left: 32px;
  padding-right: 22px;
  margin: 0 auto;
}
.globalNavi .globalNaviLeft {
  height: 100%;
  align-items: center;
}
.globalNavi .globalNaviLeft > li {
  height: 100%;
  float: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.globalNavi .globalNaviLeft > li a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-defualt);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .globalNavi .globalNaviLeft > li a:hover {
    text-decoration: underline;
  }
}
.globalNavi .globalNaviLeft > li a.linkBottomArrow i.bottomArrow {
  margin-left: 6px;
  display: inline-block;
  background: url(/images/onb/2024/ico_bottom_arrow.svg) no-repeat;
  background-size: 100% 100%;
  width: 12px;
  height: 12px;
}
.globalNavi .globalNaviLeft > li + li {
  margin-left: 24px;
}
.globalNavi .globalNaviRight {
  display: flex;
  height: 100%;
  align-items: center;
}
.globalNavi .globalNaviRight li {
  font-size: 14px;
  font-weight: 500;
}
.globalNavi .globalNaviRight li a.btnLogin {
  margin-right: 4px;
}
.globalNavi .globalNaviRight li a.nikNotRegistered {
  margin-right: 10px;
}
.globalNavi .globalNaviRight .btn + .btn {
  margin-left: 16px;
}
.globalNavi .globalNaviRight .name {
  margin-left: 12px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
}
.globalNavi .globalNaviRight .config {
  margin-left: 16px;
}
.globalNavi .globalNaviRight .config a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: 22px;
  padding: 0 11px;
  border: 1px solid var(--color-default);
  background-color: var(--color-default);
  border-radius: 4px;
  color: var(--color-base);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.2s linear, background 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .globalNavi .globalNaviRight .config a:hover {
    color: var(--color-theme);
    background-color: var(--color-base);
  }
}
.globalNavi .globalNaviRight .config a.-apply {
  border-color: var(--color-theme);
  background-color: var(--color-theme);
}
@media (hover: hover) and (pointer: fine) {
  .globalNavi .globalNaviRight .config a.-apply:hover {
    color: var(--color-theme);
    background-color: var(--color-base);
  }
}

/* BPプルダウン */
.bpSiteNavi {
  position: relative;
  height: 28px;
}
.bpSiteNavi .bpSiteList {
  display: none;
  position: absolute;
  background: var(--color-base);
  width: 200px;
  box-sizing: content-box;
  padding: 8px 16px;
  border: 1px solid #ccc;
  z-index: var(--z-index-global-navi);
  left: 0;
  top: 28px;
  font-size: 12px;
  line-height: 1;
}
.bpSiteNavi .bpSiteList li {
  padding: 6px 0;
}
@media (hover: hover) and (pointer: fine) {
  .bpSiteNavi .bpSiteList li a:hover {
    text-decoration: underline;
  }
}
.bpSiteNavi .bpSiteList li.close {
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  right: 4px;
  border: solid 1px #888888;
  border-radius: 2px;
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}
.bpSiteNavi .bpSiteList li.close::before, .bpSiteNavi .bpSiteList li.close::after {
  display: block;
  content: "";
  position: absolute;
  top: -8px;
  border-bottom: solid 1px #888888;
  width: 17px;
  height: 17px;
}
.bpSiteNavi .bpSiteList li.close::before {
  transform: rotate(45deg);
  left: 3px;
}
.bpSiteNavi .bpSiteList li.close::after {
  transform: rotate(-45deg);
  left: -8px;
}
.bpSiteNavi .bpSiteList li.close label {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
}
.bpSiteNavi .bottomArrow {
  display: block;
  width: 24px;
  height: 24px;
  background: url(/images/onb/2024/ico_arrow_bottom.svg) no-repeat;
  background-size: 100% 100%;
}
.bpSiteNavi label {
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .bpSiteNavi label:hover {
    text-decoration: underline;
  }
}
.bpSiteNavi label.mask {
  display: none;
}
.bpSiteNavi label.mask div {
  position: fixed;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#globalNaviStatus {
  display: none;
}

#globalNaviStatus:checked ~ label.mask,
#globalNaviStatus:checked ~ label.mask ~ ul.bpSiteList {
  display: block !important;
}

/* 機能ボタン */
.btnFunc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: 22px;
  padding: 0 11px;
  border-radius: 4px;
  background-color: var(--color-base);
  transition: background-color 0.2s linear, color 0.2s linear;
  border: 1px solid var(--color-theme);
  color: var(--color-theme);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .btnFunc.-login:hover {
    background: var(--color-theme);
    color: var(--color-base);
  }
}
.btnFunc.-apply {
  background: var(--color-theme);
  color: var(--color-base);
}
@media (hover: hover) and (pointer: fine) {
  .btnFunc.-apply:hover {
    background: var(--color-base);
    color: var(--color-theme);
  }
}
@media (hover: hover) and (pointer: fine) {
  .btnFunc.-mypage:hover {
    background: var(--color-theme);
    color: var(--color-base);
  }
}

/* =================================================
  .l-topicList
================================================= */
.l-topicList {
  width: 100%;
  height: 40px;
  padding: 0 90px;
  background-color: var(--color-base);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  z-index: 110;
}
.l-topicList_inner {
  display: flex;
  justify-content: center;
  max-width: 1260px;
  min-height: 100%;
  margin: 0 auto;
}
.l-topicList_container {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 97px);
}
.l-topicList_scrollContainer {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.l-topicList_scrollContainer::-webkit-scrollbar {
  display: none;
}
.l-topicList_prevBtn, .l-topicList_nextBtn {
  position: absolute;
  top: 0;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--color-base) url(/images/onb/2024/ico_arrow_right_02.svg) center center/12px 12px no-repeat;
}
.l-topicList_prevBtn {
  left: 0;
  transform: rotate(180deg);
}
.l-topicList_nextBtn {
  right: 0;
}
.l-topicList_prevControl {
  position: absolute;
  bottom: 3px;
  left: 0;
  z-index: 2;
  display: none;
  width: 72px;
  height: 24px;
  background: linear-gradient(-270deg, #FFF 54.92%, rgba(255, 255, 255, 0) 107.38%);
}
.l-topicList_prevControl.is-show {
  display: block;
}
.l-topicList_nextControl {
  position: absolute;
  bottom: 3px;
  right: 0;
  z-index: 3;
  display: none;
  width: 72px;
  height: 24px;
  background: linear-gradient(270deg, #FFF 54.92%, rgba(255, 255, 255, 0) 107.38%);
  text-align: right;
}
.l-topicList_nextControl.is-show {
  display: block;
}
.l-topicList_list {
  display: flex;
  padding-top: 10px;
}
.l-topicList_item {
  flex-shrink: 0;
}
.l-topicList_item + .l-topicList_item {
  margin-left: 12px;
}
.l-topicList_item a {
  display: block;
  padding: 6px 12px;
  color: var(--color-gray);
  font-size: 12px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .l-topicList_item a:hover {
    background-color: var(--color-light-purple);
  }
}
.l-topicList_item.-current a {
  position: relative;
  color: var(--color-theme);
}
.l-topicList_item.-current a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-theme);
}
.l-topicList_editBtn {
  flex-basis: 85px;
  flex-shrink: 0;
  align-self: center;
  display: block;
  width: 85px;
  padding: 3px 11px;
  margin-left: 12px;
  background-color: var(--color-theme);
  border-radius: 23px;
  border: 1px solid var(--color-theme);
  color: var(--color-base);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12px;
}
@media (hover: hover) and (pointer: fine) {
  .l-topicList_editBtn:hover {
    background-color: var(--color-base);
    color: var(--color-theme);
  }
}
.l-topicList.is-fixed {
  position: fixed;
  top: 60px;
}
/* =================================================
  .l-pageHeader
================================================= */
.l-pageHeader {
  padding-top: 24px;
  margin-bottom: 32px;
}
.l-pageHeader_logo {
  text-align: center;
}
.l-pageHeader_description {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.5px;
}
.l-pageHeader_calendar {
  display: flex;
}
.l-pageHeader_calendar_btn {
  margin-left: auto;
  padding-left: 32px;
  background: url(/images/onb/2024/ico_calendar.svg) left center/24px 24px no-repeat;
  transition: color 0.2s linear;
  color: var(--color-default);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.5px;
}
@media (hover: hover) and (pointer: fine) {
  .l-pageHeader_calendar_btn:hover {
    color: var(--color-theme);
  }
}
.l-pageHeader .c-pageTitle {
  margin-bottom: 0;
}
.l-pageHeader.-video {
  padding-top: 20px;
}
.l-pageHeader.-ranking {
  padding-top: 20px;
}
.l-pageHeader.-latest {
  padding-top: 26px;
}
.l-pageHeader.-backnumber {
  padding-top: 20px;
}
.l-pageHeader.-ranking {
  padding-top: 20px;
}
.l-pageHeader.-author {
  padding-top: 20px;
  margin-bottom: 36px;
}
.l-pageHeader.-series {
  margin-bottom: 24px;
}
.l-pageHeader.-mypage {
  padding-top: 32px;
  margin-bottom: 24px;
}

/* =================================================
  .l-topSection
================================================= */
.l-topSection + .l-topSection {
  margin-top: 24px;
}
.l-topSection + .l-topSection.-mt-sm {
  margin-top: 16px;
}
.l-topSection + .l-topSection.-mt-lg {
  margin-top: 32px;
}
.l-topSection + .l-topSection.-mt-xl {
  margin-top: 48px;
}
.l-topSection.-stretch {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* =================================================
  .l-topTimeMachine
================================================= */
.l-topTimeMachine {
  padding: 16px 17px 16px 24px;
  background-color: var(--color-light-gray02);
}
.l-topTimeMachine_section + .l-topTimeMachine_section {
  margin-top: 10px;
}
.l-topTimeMachine_title {
  margin-bottom: 3px;
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14px;
}

/* =================================================
  .l-content
================================================= */
.l-content_footer {
  margin-top: 48px;
}

/* =================================================
  .l-container
================================================= */
.l-container {
  width: 805px;
  margin: 0 auto;
}
.l-container.-small {
  width: 754px;
}

/* =================================================
  .l-articleMenu
================================================= */
.l-articleMenu {
  padding-left: 113px;
}

/* =================================================
  .l-topicsPath
================================================= */
.l-breadcrumb {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  line-height: 0;
}
.l-breadcrumb_list {
  display: inline-block;
  width: 100%;
  line-height: 0;
}
.l-breadcrumb_item {
  position: relative;
  display: inline;
  padding-top: 1px;
  padding-bottom: 2.2px;
  vertical-align: middle;
  color: var(--color-gray);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6666;
}
.l-breadcrumb_item + .l-breadcrumb_item {
  margin-left: 8px;
  padding-left: 28px;
}
.l-breadcrumb_item + .l-breadcrumb_item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 20px;
  height: 20px;
  background: url(/images/onb/2024/ico_arrow_right_gray.svg) center center/20px 20px no-repeat;
}
.l-breadcrumb_item a {
  color: var(--color-gray);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .l-breadcrumb_item a:hover {
    text-decoration: underline;
  }
}

/* =================================================
  .l-section
================================================= */
.l-section {
  position: relative;
}
.l-section + .l-section {
  margin-top: 24px;
}
.l-section + .l-section.-mt-sm {
  margin-top: 16px;
}
.l-section + .l-section.-mt-md {
  margin-top: 32px;
}
.l-section + .l-section.-mt-lg {
  margin-top: 48px;
}
.l-section + .l-section.-mt-xl {
  margin-top: 64px;
}
.l-section.-white {
  padding: 24px 32px;
  background-color: var(--color-base);
}
.l-section.-timemachine {
  margin: 0 -16px;
  padding-top: 24px;
  padding-bottom: 52px;
  background-color: var(--color-light-gray02);
}
.l-section.-timemachine + .l-content_footer {
  margin-top: 32px;
}
.l-section.-parentIndexList {
  padding: 16px 32px;
  background-color: var(--color-base);
}

/* =================================================
  .l-asideSection
================================================= */
.l-asideSection_title {
  padding: 8px 0;
  background-color: var(--color-navy);
  color: var(--color-base);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.l-asideSection_title.-xwoman {
  background-color: #ed5300;
}
.l-asideSection_contents {
  padding: 24px 16px;
  background-color: var(--color-base);
}
.l-asideSection_contents.-transparent {
  padding-top: 20px;
  padding-bottom: 16px;
  background-color: transparent;
}
.l-asideSection_contents.-simple {
  padding-top: 16px;
  padding-bottom: 16px;
}
.l-asideSection_contents.-timemachine {
  padding: 32px 0;
}
.l-asideSection_articleList {
  padding-top: 20px;
}
.l-asideSection_articleList_item {
  border-bottom: 1px solid var(--color-line-gray);
}
.l-asideSection_articleList_item + .l-asideSection_articleList_item {
  margin-top: 32px;
}
.l-asideSection_articleList_item_link {
  display: block;
  padding: 0 24px 12px;
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .l-asideSection_articleList_item_link:hover .l-asideSection_articleList_item_image img {
    transform: scale(1.06);
  }
  .l-asideSection_articleList_item_link:hover .l-asideSection_articleList_item_title {
    color: var(--color-theme);
  }
}
.l-asideSection_articleList_item_link:visited .l-asideSection_articleList_item_title {
  color: var(--color-visited-link);
}
.l-asideSection_articleList_item_image {
  overflow: hidden;
}
.l-asideSection_articleList_item_image img {
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.4s ease-in-out;
}
.l-asideSection_articleList_item_title {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.14px;
}
.l-asideSection + .l-asideSection {
  margin-top: 40px;
}
.l-asideSection + .l-asideSection.-small {
  margin-top: 24px;
}
.l-asideSection + .l-asideSection.-medium {
  margin-top: 32px;
}
.l-asideSection + .l-asideSection.-large {
  margin-top: 48px;
}

/* =================================================
  .l-modal
================================================= */
.l-modal {
  position: fixed;
  top: 92px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-index-modal);
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100% - 92px);
  overflow: visible;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity, visibility;
  transition-duration: 0.2s;
  transition-timing-function: linear;
}
.l-modal_scrollWrapper {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100vh - 92px);
  min-height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: none;
}
.l-modal_scrollContainer {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.l-modal_wrap {
  position: relative;
  z-index: 1;
  padding: 80px 0;
  pointer-events: none;
}
.l-modal_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.l-modal_container {
  position: relative;
  z-index: 2;
  width: 100%;
  pointer-events: auto;
}
.l-modal_contents {
  padding: 30px 32px;
  border-radius: 8px;
  background-color: var(--color-light-gray03);
}
.l-modal_contents.-author {
  width: 512px;
  padding-top: 32px;
  padding-bottom: 32px;
  background-color: var(--color-base);
}
.l-modal_title {
  margin-bottom: 24px;
  color: var(--color-theme);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.l-modal_title.-author {
  margin-bottom: 32px;
  color: var(--color-default);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-align: center;
}
.l-modal_closeBtn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 24px;
  height: 24px;
  background: url(/images/onb/2024/ico_cross.svg) center center/24px 24px no-repeat;
}
.l-modal_closeBtn.-outside {
  top: -40px;
  right: 0;
  background-image: url(/images/onb/2024/ico_cross_white.svg);
}
.l-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.l-modal.-full {
  top: 0;
  min-height: 100%;
}
.l-modal.-full .l-modal_scrollWrapper {
  height: 100%;
}
.l-modal.-full .l-modal_wrap {
  padding-top: 30px;
  padding-bottom: 30px;
}
.l-modal.-editTopic .l-modal_scrollContainer {
  align-items: flex-start;
}
.l-modal.-editTopic .l-modal_wrap {
  padding-top: 60px;
}
.l-modal.-information {
  top: 132px;
  min-height: calc(100% - 132px);
}
.l-modal.-information .l-modal_scrollContainer {
  display: block;
}
.l-modal.-information .l-modal_wrap {
  padding-top: 0;
  padding-bottom: 0;
}
.l-modal.-tips .l-modal_container {
  max-width: 560px;
  background-color: var(--color-base);
  border-radius: 8px;
  padding: 30px 32px 0;
}
.l-modal.-paywall .l-modal_wrap {
  width: 100%;
  padding: 40px 40px;
}
.l-modal.-paywall .l-modal_container {
  max-width: 960px;
  padding: 32px 16px;
  margin-right: auto;
  margin-left: auto;
  background-color: var(--color-line-gray);
  border-radius: 8px;
}
.l-modal.-viewerPaywall .l-modal_wrap {
  width: 100%;
  padding: 40px 40px;
}
.l-modal.-viewerPaywall .l-modal_container {
  max-width: 960px;
  padding: 32px 16px;
  margin-right: auto;
  margin-left: auto;
  background-color: var(--color-light-gray);
}
.l-modal.-giftPaywall .l-modal_wrap {
  width: 100%;
  padding: 40px 40px;
}
.l-modal.-giftPaywall .l-modal_container {
  max-width: 560px;
  padding: 32px 32px;
  margin-right: auto;
  margin-left: auto;
  background-color: var(--color-light-gray03);
  border-radius: 8px;
}
.l-modal.-gift .l-modal_container {
  width: 560px;
  padding: 30px 32px;
  border-radius: 8px;
  background-color: var(--color-base);
}
.l-modal.-giftGuide .l-modal_container {
  width: 960px;
  padding: 30px 32px;
  border-radius: 8px;
  background-color: var(--color-light-gray);
}
.l-modal.-calendar .l-modal_container {
  width: 560px;
  padding: 32px;
  border-radius: 8px;
  background-color: var(--color-light-gray);
}
.l-modal.-walkThrough .l-modal_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  height: var(--100dvh);
  height: 100dvh;
}
.l-modal.-walkThrough .l-modal_scrollWrapper {
  overflow-y: inherit;
}
.l-modal.-walkThrough .l-modal_container {
  width: 960px;
  max-height: calc(100vh - 60px);
  max-height: calc(var(--100dvh) - 60px);
  max-height: calc(100dvh - 60px);
  padding: 30px 32px 0;
  background-color: var(--color-base);
  border-radius: 8px;
}
.l-modal.-walkThrough .l-modal_closeBtn {
  display: none;
}
.l-modal.-topicCategory .l-modal_container {
  width: 960px;
  padding: 30px 32px;
  border-radius: 8px;
  background-color: var(--color-base);
}

body.is-fixed .l-modal {
  top: 60px;
  min-height: calc(100% - 60px);
}
body.is-fixed .l-modal_scrollWrapper {
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
}
body.is-fixed .l-modal_overlay {
  min-height: calc(100vh - 60px);
  min-height: calc(100dvh - 60px);
}
body.is-fixed .l-modal.-information {
  top: 100px;
}
body.is-fixed .l-modal.-walkThrough {
  top: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 20000;
}

/* =================================================
  .l-tipsBtn
================================================= */
.l-tipsBtn {
  position: fixed;
  bottom: 16px;
  right: calc(env(safe-area-inset-right) + 16px);
  z-index: var(--z-index-tips-btn);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding-top: 28.5px;
  background: var(--color-theme) url(/images/onb/2024/ico_double_quotation.svg) center top 12.5px/13px 12px no-repeat;
  border-radius: 55px;
  opacity: 1;
  visibility: visible;
  transition-property: opacity, visibility;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  color: #fff;
  font-size: 10px;
  line-height: 1.2;
  text-decoration: none;
}

/* =================================================
  .l-footer
================================================= */
.l-footer {
  margin-top: 40px;
  background: #222;
}
.l-footer_utility_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-width);
  min-width: calc(var(--min-container-width) - 120px);
  padding: 36px 0;
  margin: 0 auto;
}
.l-footer_function {
  display: flex;
  justify-content: center;
  width: 100%;
}
.l-footer_function_item + .l-footer_function_item {
  margin-left: 36px;
}
.l-footer_function_item .btnFunc {
  width: 200px;
  height: 48px;
  border-radius: 8px;
  border: none;
  color: var(--color-default);
  font-size: 16px;
  line-height: 1.6;
}
.l-footer_function_item .btnFunc.-apply {
  color: var(--color-base);
}
@media (hover: hover) and (pointer: fine) {
  .l-footer_function_item .btnFunc.-apply:hover {
    color: var(--color-default);
  }
}
.l-footer_local {
  padding: 0 60px 60px;
}
.l-footer_local_container {
  display: flex;
  max-width: var(--container-width);
  min-width: calc(var(--min-container-width) - 120);
  margin: 0 auto;
}
.l-footer_local_nav {
  display: flex;
  width: 100%;
  max-width: 1010px;
  padding-right: 36px;
}
.l-footer_local_group {
  flex-grow: 0;
}
.l-footer_local_group + .l-footer_local_group {
  margin-left: 68px;
}
.l-footer_local_group_row {
  display: flex;
}
.l-footer_local_group_col {
  max-width: 250px;
  flex-basis: calc(50% - 30px);
}
.l-footer_local_group_col + .l-footer_local_group_col {
  margin-left: 60px;
}
.l-footer_local_group.-article {
  flex-shrink: 0;
}
.l-footer_local_group.-magazine {
  flex-shrink: 0;
}
.l-footer_local_title {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  color: var(--color-base);
  font-size: 18px;
  font-weight: 700;
}
.l-footer_local_list {
  display: block;
}
.l-footer_local_list_item {
  font-size: 14px;
  line-height: 1.6;
}
.l-footer_local_list_item + .l-footer_local_list_item {
  margin-top: 8px;
}
.l-footer_local_list_item a {
  display: inline-block;
  color: var(--color-base);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .l-footer_local_list_item a:hover {
    text-decoration: underline;
  }
}
.l-footer_local_poweredBy {
  margin-top: 8px;
  color: var(--color-gray);
  font-size: 12px;
  font-weight: 700;
}
.l-footer_local_poweredBy .-break {
  display: inline-block;
}
.l-footer_local_sns {
  flex-shrink: 0;
  flex-basis: 201px;
  width: 201px;
  padding-left: 36px;
  border-left: 1px solid var(--color-gray);
}
.l-footer_local_sns_title {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  color: var(--color-base);
  font-size: 18px;
  font-weight: 700;
}
.l-footer_local_sns_list_item + .l-footer_local_sns_list_item {
  margin-top: 8px;
}
.l-footer_local_sns_list_item a {
  padding-left: 28px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px auto;
  color: var(--color-base);
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
  transition: opacity 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .l-footer_local_sns_list_item a:hover {
    opacity: 0.7;
  }
}
.l-footer_local_sns_list_item.-facebook a {
  background-image: url(/images/onb/2024/ico_facebook_white.svg);
  background-size: 20px 20px;
}
.l-footer_local_sns_list_item.-twitter a {
  background-image: url(/images/onb/2024/ico_twitter_white.svg);
  background-size: 20px 17px;
}
.l-footer_local_sns_list_item.-instagram a {
  background-image: url(/images/onb/2024/ico_instagram_white.svg);
  background-size: 20px 20px;
}
.l-footer_local_sns_btn {
  width: 60px;
  height: 60px;
}
.l-footer_local_sns_btn + .l-footer_local_sns_btn {
  margin-left: 37px;
}
.l-footer_global {
  background-color: #000;
  color: var(--color-base);
  padding: 0 60px;
}
.l-footer_global_container {
  max-width: var(--container-width);
  min-width: calc(var(--min-container-width) - 120);
  padding: 48px 0;
  margin: 0 auto;
}
.l-footer_global_logo {
  width: 100%;
}
.l-footer_global_logo a {
  transition: opacity 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .l-footer_global_logo a:hover {
    opacity: 0.7;
  }
}
.l-footer_global_contents {
  display: flex;
  align-items: center;
  margin-top: 24px;
}
.l-footer_global_menu {
  display: flex;
}
.l-footer_global_menu_item {
  display: block;
  font-size: 14px;
  line-height: 1.6;
}
.l-footer_global_menu_item a {
  color: var(--color-base);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .l-footer_global_menu_item a:hover {
    text-decoration: underline;
  }
}
.l-footer_global_menu_item + .l-footer_global_menu_item {
  position: relative;
  margin-left: 9px;
  padding-left: 9px;
}
.l-footer_global_menu_item + .l-footer_global_menu_item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 20px;
  background-color: var(--color-gray);
}
.l-footer_switch {
  margin-left: auto;
}
.l-footer_switch a {
  color: var(--color-base);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .l-footer_switch a:hover {
    text-decoration: underline;
  }
}
.l-footer_copyright {
  margin-top: 24px;
  color: var(--color-gray);
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.l-footer.-simple {
  margin-top: 40px;
}
.l-footer.-simple .l-footer_global {
  padding-left: 16px;
  padding-right: 16px;
  background-color: var(--color-line-gray);
}
.l-footer.-simple .l-footer_global_container {
  padding: 48px 0 44px;
}
.l-footer.-simple .l-footer_global_company {
  width: 93px;
  margin: 0 auto;
}
.l-footer.-simple .l-footer_copyright {
  width: auto;
  margin: 28px 0 0;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 1380px) {
  .l-footer_local_nav {
    width: calc(100% - 201px);
  }
  .l-footer_global_contents {
    display: block;
  }
  .l-footer_switch {
    margin-top: 12px;
  }
}
@media screen and (max-width: 767px) {
  .l-footer.-simple .l-footer_global_container {
    padding-top: 48px;
    padding-bottom: 32px;
  }
  .l-footer.-simple .l-footer_copyright {
    margin-top: 16px;
    text-align: left;
  }
}

/* =================================================
  .l-adRectangle
================================================= */
.l-adRectangle {
  display: flex;
  justify-content: center;
  margin: 48px auto 0;
}
.l-adRectangle li + li {
  margin-left: 32px;
}

/* =================================================
  .l-print
================================================= */
.l-print_content {
  width: 600px;
  margin: 0 auto;
}

/* =================================================
  アドタグ
================================================= */
.dag_billboard {
  text-align: center;
  max-width: 970px;
  margin: 0 auto;
}
.dag_billboard + .l-main {
  padding-top: 32px;
}
.dag_billboard + .l-main .l-topicsPath {
  margin-top: 0;
}
.dag_billboard > div > div {
  position: relative;
  margin: 30px auto 0 auto;
}
.dag_aside_pickup li {
  border-bottom: 1px solid #eee;
}
.dag_aside_pickup li div div iframe {
  margin-top: 10px;
  padding-bottom: 5px;
}
.dag_list_banner li {
  margin-bottom: 15px;
}
.adRectangle.inread {
  margin: 32px 0;
  text-align: center;
}
.p-article_ad {
  text-align: center;
}
/*
@media screen and (max-width: 1380px) {
  .dag_billboard {
    display: none;
  }
}
*/

/* =================================================
  アンカー広告用
================================================= */
.custom-overlay-bottom-close-button-728 {
  display: block !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='341 8 13 13' fill='black' fill-opacity='0.6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  background-position: center;
  background-color: rgba(255, 255, 255, 0);
  background-repeat: no-repeat;
  border: none;
  height: 25px;
  width: 25px;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 5px;
  top: 25px;
}

.custom-overlay-wrapper-rendered {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-index-anker-ad);
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  visibility: visible;
  opacity: 1;
  will-change: opacity;
}

.custom-overlay-wrapper-unrendered {
  display: none;
  visibility: hidden;
  opacity: 0;
  will-change: opacity;
  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.custom-overlay-static-unit {
  width: 100%;
  height: 103px;
  transform-origin: 50% 100%;
  position: relative;
}

.custom-overlay-static-housing {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: stretch;
  align-items: flex-end;
  align-content: flex-end;
  width: 100%;
  height: 103px;
}

.custom-overlay-static-housing__tile {
  flex: 1;
  height: 39px;
  background-color: rgba(0, 0, 0, 0.3);
}

.custom-overlay-static-housing__marquee {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 730px;
  height: 103px;
  background-color: rgba(0, 0, 0, 0.3);
  vertical-align: bottom;
}

.custom-overlay-static-housing__cap {
  position: relative;
  height: 103px;
  width: 169px;
}

.custom-overlay-static-housing__cap > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.custom-overlay-static-content {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%;
  height: 90px;
}

.custom-overlay-static-content__container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  margin: auto;
}

.custom-overlay-static-housing__center {
  display: flex;
  align-content: stretch;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  max-width: 1068px;
}

@media screen and (max-width: 780px) {
  .custom-overlay-static-housing__cap {
    display: none;
  }
  .custom-overlay-static-housing__marquee {
    width: 100%;
  }
}
/* =================================================
  ギフト表示
================================================= */
.giftModule {
  margin: 24px auto 0;
}
.giftModule.is-hidden {
  animation: fadeOut 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.giftModule .shareGift {
  position: relative;
  width: 983px;
  height: 88px;
  margin: 0 auto;
  border: solid 1px var(--color-line-gray);
  border-radius: 2px;
  background-color: #ffffff;
}
.giftModule .shareGiftTitle {
  margin: 0;
  color: var(--color-default);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: normal;
}
.giftModule .giftClose {
  position: absolute;
  top: 3px;
  right: 3px;
}
.giftModule .shareGiftIconTitle,
.giftModule .shareGiftMembers {
  width: 132px;
  text-align: center;
}
.giftModule ul {
  display: flex;
  height: 100%;
}
.giftModule ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.giftModule ul li:last-child {
  width: 155px;
}
.giftModule ul li.shareGiftDescrip {
  color: var(--color-default);
  font-size: 14px;
  letter-spacing: 0.1px;
  line-height: 1.9;
}
.giftModule ul li.giftDescrip {
  justify-content: center;
  width: 478px;
  line-height: 2;
}
.giftModule ul li.giftDescrip p {
  font-size: 14px;
}
.giftModule ul li.giftDescrip p span {
  font-weight: 700;
}
.giftModule ul li.giftDescrip p a {
  color: var(--color-red);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .giftModule ul li.giftDescrip p a:hover {
    text-decoration: underline;
  }
}
.giftModule ul li.shareGiftMembers {
  position: relative;
  width: 215px;
  color: var(--color-default);
  font-size: 12px;
}
.giftModule ul li.shareGiftMembers:before {
  content: "";
  position: absolute;
  top: 24px;
  left: 0;
  width: 0;
  height: 40px;
  border: 1px solid var(--color-line-gray);
}
.giftModule ul li.shareGiftMembers:after {
  content: "";
  position: absolute;
  top: 24px;
  right: 0;
  width: 0;
  height: 40px;
  border: 1px solid var(--color-line-gray);
}
.giftModule ul li a {
  font-weight: 500;
}
.giftModule ul li a:nth-child(1) {
  font-weight: 700;
}
.giftModule ul li a.shareGiftTitleRed {
  color: var(--color-red);
  font-size: 15px;
  line-height: 1.9;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .giftModule ul li a.shareGiftTitleRed:hover {
    text-decoration: underline;
  }
}

body.nbodd .giftModule li.login {
  display: none;
}
body.nbodd .giftModule li.shareGiftMembers {
  width: 355px;
}
body.nbodd .giftModule li.shareGiftMembers::after {
  border: none;
}

/*****************************************************
  Component
*****************************************************/
/* =================================================
  .c-btn
================================================= */
.c-btn {
  position: relative;
  display: grid;
  place-content: center;
  width: 100%;
  min-height: 4px;
  padding: 10px 12px;
  background: var(--color-base);
  border: 2px solid var(--color-theme);
  border-radius: 8px;
  color: var(--color-theme);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  transition-property: background-color, border-color, color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  cursor: pointer;
}
.c-btn_label {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  transition: background 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .c-btn:hover {
    background-color: var(--color-theme);
    color: var(--color-base);
  }
  .c-btn:hover.-prev .c-btn_label:before {
    background-image: url(/images/onb/2024/ico_arrow_right_white.svg);
  }
  .c-btn:hover.-next .c-btn_label::after {
    background-image: url(/images/onb/2024/ico_arrow_right_white.svg);
  }
}
.c-btn.-inline {
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 0;
}
.c-btn.-small {
  max-width: 200px;
}
.c-btn.-medium {
  max-width: 260px;
}
.c-btn.-large {
  max-width: 417px;
}
.c-btn.-center {
  margin-left: auto;
  margin-right: auto;
}
.c-btn.-right {
  margin-left: auto;
}
.c-btn.-prev .c-btn_label, .c-btn.-next .c-btn_label {
  padding: 0 32px;
}
.c-btn.-prev .c-btn_label::before, .c-btn.-prev .c-btn_label::after, .c-btn.-next .c-btn_label::before, .c-btn.-next .c-btn_label::after {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
  width: 24px;
  height: 24px;
  font-size: 0;
  margin: auto 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}
.c-btn.-prev .c-btn_label::before {
  content: "";
  left: 0;
  background-image: url(/images/onb/2024/ico_arrow_right_purple.svg);
  transform: rotate(180deg);
}
.c-btn.-next .c-btn_label::after {
  content: "";
  right: 0;
  background-image: url(/images/onb/2024/ico_arrow_right_purple.svg);
}
.c-btn.-themeBorder {
  border: 1px solid var(--color-theme);
}
.c-btn.-round {
  min-height: 50px;
  border-radius: 43px;
  border-width: 1px;
}
.c-btn.-disabled {
  pointer-events: none;
  background-color: var(--color-light-gray);
  color: #959595;
}
.c-btn.-primary {
  background-color: var(--color-theme);
  border-color: var(--color-theme);
  color: var(--color-base);
}
.c-btn.-primary.-disabled {
  pointer-events: none;
  background-color: var(--color-gray);
  border-color: var(--color-gray);
  color: var(--color-base);
}
.c-btn.-primary.-prev .c-btn_label:before {
  background-image: url(/images/onb/2024/ico_arrow_right_white.svg);
}
.c-btn.-primary.-next .c-btn_label::after {
  background-image: url(/images/onb/2024/ico_arrow_right_white.svg);
}
@media (hover: hover) and (pointer: fine) {
  .c-btn.-primary:hover {
    background-color: var(--color-base);
    color: var(--color-theme);
  }
  .c-btn.-primary:hover.-prev .c-btn_label::before {
    background-image: url(/images/onb/2024/ico_arrow_right_purple.svg);
  }
  .c-btn.-primary:hover.-next .c-btn_label::after {
    background-image: url(/images/onb/2024/ico_arrow_right_purple.svg);
  }
}
.c-btn.-dark {
  background-color: var(--color-default);
  border-color: var(--color-default);
  color: var(--color-base);
}
.c-btn.-dark.-prev .c-btn_label:before {
  background-image: url(/images/onb/2024/ico_arrow_right_white.svg);
}
.c-btn.-dark.-next .c-btn_label::after {
  background-image: url(/images/onb/2024/ico_arrow_right_white.svg);
}
@media (hover: hover) and (pointer: fine) {
  .c-btn.-dark:hover {
    background-color: var(--color-base);
    border-color: var(--color-default);
    color: var(--color-default);
  }
  .c-btn.-dark:hover.-prev .c-btn_label::before {
    background-image: url(/images/onb/2024/ico_arrow_right.svg);
  }
  .c-btn.-dark:hover.-next .c-btn_label::after {
    background-image: url(/images/onb/2024/ico_arrow_right.svg);
  }
}
.c-btn.-noBorder {
  border: none;
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
  color: var(--color-default);
}
@media (hover: hover) and (pointer: fine) {
  .c-btn.-noBorder:hover {
    background-color: var(--color-default);
    color: var(--color-base);
  }
}

/* =================================================
  title
================================================= */
.c-heading {
  position: relative;
  display: block;
  padding-top: 11.5px;
  padding-bottom: 5.5px;
  margin-top: 0;
  margin-bottom: 24px;
  border-top: 2px solid var(--color-line-gray);
}
.c-heading_text {
  font-size: 18px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
}
.c-heading_text .-en {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.12px;
}
.c-heading_link {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  align-items: center;
  height: 24px;
  padding-right: 32px;
  background: url(/images/onb/2024/ico_arrow_right.svg) right center/24px 24px no-repeat;
  transform: translateY(-50%);
  color: var(--color-default);
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14px;
  text-decoration: none;
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .c-heading_link:hover {
    text-decoration: underline;
  }
}
.c-heading.-topLatest {
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 16px;
}
.c-heading.-topLatest .c-heading_text {
  font-size: 16px;
  line-height: 1.5;
}
.c-heading.-topLatest .c-heading_link {
  right: 16px;
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.c-heading.-topHighlight {
  padding-top: 0;
  padding-bottom: 6px;
  margin-bottom: 0;
  border-top: none;
}
.c-heading.-topHighlight .c-heading_text {
  font-size: 16px;
  line-height: 1.5;
}
.c-heading.-topHighlight .c-heading_link {
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.c-heading.-topVideo {
  padding-top: 6px;
  margin-bottom: 16px;
}
.c-heading.-topRecommend {
  padding-top: 8px;
  padding-bottom: 0;
}
.c-heading.-topTrend {
  padding-top: 8px;
}
.c-heading.-topTrend .c-heading_text {
  font-size: 16px;
}
.c-heading.-sidebar {
  padding-top: 6px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 0;
  margin-bottom: 12px;
  border-top: 2px solid var(--color-theme);
}
.c-heading.-sidebar .c-heading_text {
  font-size: 16px;
  line-height: 1.5;
}
.c-heading.-sidebar .c-heading_link {
  padding-right: 28px;
  letter-spacing: 0.12px;
}
.c-heading.-sidebar.-topics {
  padding-left: 8px;
  padding-right: 0;
}
.c-heading.-sidebarCompact {
  padding-top: 4px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 6px;
  margin-bottom: 0;
  border-top: 2px solid var(--color-theme);
}
.c-heading.-sidebarCompact .c-heading_text {
  font-size: 16px;
  line-height: 1.5;
}
.c-heading.-sidebarCompact .c-heading_link {
  padding-right: 28px;
  font-size: 12px;
  letter-spacing: 0.12px;
}
.c-heading.-sidebarMagazine {
  padding-top: 6px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 0;
  margin-bottom: 8px;
  border-top: 2px solid var(--color-theme);
}
.c-heading.-sidebarMagazine .c-heading_text {
  font-size: 16px;
  line-height: 1.5;
}
.c-heading.-sidebarMagazine .c-heading_link {
  padding-right: 28px;
  letter-spacing: 0.12px;
}
.c-heading.-firstView {
  padding: 6px 8px 0;
  margin-bottom: 4px;
  border-top: 2px solid var(--color-theme);
}
.c-heading.-firstView .c-heading_text {
  font-size: 16px;
  line-height: 1.5;
}
.c-heading.-index {
  padding: 8px 16px 0;
  border-top: 2px solid var(--color-theme);
}
.c-heading.-index .c-heading_text {
  font-size: 20px;
}
.c-heading.-purpleBorder {
  border-top: 2px solid var(--color-theme);
}
.c-heading.-noBorder {
  border-top: none;
}
.c-heading.-center {
  padding-top: 6px;
}
.c-heading.-center .c-heading_text {
  text-align: center;
}
.c-heading.-big .c-heading_text {
  font-size: 24px;
}
.c-heading.-big .c-heading_text .-en {
  font-size: 16px;
  line-height: 1.5;
}
.c-heading.-author {
  padding-top: 15px;
  padding-bottom: 0;
  margin-bottom: 24px;
}
.c-heading.-author .c-heading_text {
  font-size: 16px;
  text-align: center;
}

.c-heading02 {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.c-heading02.-border {
  padding-top: 8px;
  border-top: 1px solid var(--color-line-gray);
}
.c-heading02.-big {
  margin-bottom: 32px;
  font-size: 30px;
}

.c-heading03 {
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.14px;
}

.c-heading04 {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding-top: 6px;
  margin-bottom: 32px;
  border-top: 2px solid var(--color-theme);
  font-size: 24px;
  font-weight: 700;
}
.c-heading04.-center {
  margin-left: auto;
  margin-right: auto;
}

.c-heading05 {
  position: relative;
  padding-left: 12px;
  margin-bottom: 24px;
  font-size: 20px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
}
.c-heading05::before {
  position: absolute;
  content: "";
  display: block;
  top: 14px;
  left: 0;
  width: 8px;
  height: 2px;
  background-color: var(--color-theme);
}

.c-heading06 {
  padding-bottom: 3px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-theme);
  font-size: 18px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
}

/* =================================================
  .c-pageTitle
================================================= */
.c-pageTitle {
  margin-bottom: 32px;
  font-size: 28px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.c-pageTitle .-en {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.c-pageTitle.-latest {
  margin-bottom: 8px;
}

/* =================================================
  .c-grid
================================================= */
.c-grid {
  --column-gap: var(--grid-gap);
  --row-gap: var(--grid-gap);
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--row-gap) * -1);
  margin-left: calc(var(--column-gap) * -1);
}
.c-grid > .c-grid_col,
.p-card.-recommend .c-grid > li:not([class]),
ul.c-grid > li:not([class]) {
  margin-top: var(--row-gap);
  margin-left: var(--column-gap);
}
.c-grid[data-grid-col*="[1]"] > .c-grid_col {
  width: calc(100% - var(--column-gap));
}
.c-grid[data-grid-col*="[2]"] > .c-grid_col,
.-ad .c-grid[data-grid-col*="[2]"] > li:not([class]) {
  width: calc(50% - var(--column-gap));
}
.c-grid[data-grid-col*="[3]"] > .c-grid_col,
.p-card.-recommend .c-grid[data-grid-col*="[3]"] > li:not([class]) {
  width: calc(33.3333333333% - var(--column-gap));
}
.c-grid[data-grid-col*="[4]"] > .c-grid_col,
ul.p-card_list > li:not([class]) {
  width: calc(25% - var(--column-gap));
}
.c-grid[data-grid-col*="[5]"] > .c-grid_col {
  width: calc(20% - var(--column-gap));
}
.c-grid[data-grid-col*="[6]"] > .c-grid_col {
  width: calc(16.6666666667% - var(--column-gap));
}
.c-grid[data-grid-col*="[7]"] > .c-grid_col {
  width: calc(14.2857142857% - var(--column-gap));
}
.c-grid[data-grid-col*="[8]"] > .c-grid_col {
  width: calc(12.5% - var(--column-gap));
}
.c-grid[data-grid-col*="[9]"] > .c-grid_col {
  width: calc(11.1111111111% - var(--column-gap));
}
.c-grid[data-grid-col*="[10]"] > .c-grid_col {
  width: calc(10% - var(--column-gap));
}
.c-grid[data-grid-col*="[11]"] > .c-grid_col {
  width: calc(9.0909090909% - var(--column-gap));
}
.c-grid[data-grid-col*="[12]"] > .c-grid_col {
  width: calc(8.3333333333% - var(--column-gap));
}
.c-grid.-center {
  justify-content: center;
}
.c-grid.-reverse {
  flex-direction: row-reverse;
}
.c-grid.-middle {
  align-items: center;
}
.c-grid.-gapZero {
  --column-gap: 0px;
  --row-gap: 0px;
}
.c-grid.-gapSmall {
  --column-gap: 12px;
  --row-gap: 12px;
}
.c-grid.-gapMedium {
  --column-gap: 24px;
  --row-gap: 24px;
}
.c-grid.-gapLarge {
  --column-gap: 48px;
  --row-gap: 48px;
}
.c-grid.-gapRowZero {
  --row-gap: 0;
}
.c-grid.-gapRowSmall {
  --row-gap: 12px;
}
.c-grid.-gapRowMedium {
  --row-gap: 24px;
}
.c-grid.-gapRowLarge {
  --row-gap: 48px;
}
@media screen and (max-width: 1380px) {
  .c-grid {
    --column-gap: var(--grid-gap);
    --row-gap: var(--grid-gap);
  }
  .c-grid[data-grid-col*="[xl:1]"] > .c-grid_col {
    width: calc(100% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:2]"] > .c-grid_col {
    width: calc(50% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:3]"] > .c-grid_col {
    width: calc(33.3333333333% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:4]"] > .c-grid_col {
    width: calc(25% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:5]"] > .c-grid_col {
    width: calc(20% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:6]"] > .c-grid_col {
    width: calc(16.6666666667% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:7]"] > .c-grid_col {
    width: calc(14.2857142857% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:8]"] > .c-grid_col {
    width: calc(12.5% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:9]"] > .c-grid_col {
    width: calc(11.1111111111% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:10]"] > .c-grid_col {
    width: calc(10% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:11]"] > .c-grid_col {
    width: calc(9.0909090909% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[xl:12]"] > .c-grid_col {
    width: calc(8.3333333333% - var(--column-gap));
  }
}
@media screen and (max-width: 1280px) {
  .c-grid {
    --column-gap: var(--grid-gap);
    --row-gap: var(--grid-gap);
  }
  .c-grid[data-grid-col*="[lg:1]"] > .c-grid_col {
    width: calc(100% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:2]"] > .c-grid_col {
    width: calc(50% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:3]"] > .c-grid_col {
    width: calc(33.3333333333% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:4]"] > .c-grid_col {
    width: calc(25% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:5]"] > .c-grid_col {
    width: calc(20% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:6]"] > .c-grid_col {
    width: calc(16.6666666667% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:7]"] > .c-grid_col {
    width: calc(14.2857142857% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:8]"] > .c-grid_col {
    width: calc(12.5% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:9]"] > .c-grid_col {
    width: calc(11.1111111111% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:10]"] > .c-grid_col {
    width: calc(10% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:11]"] > .c-grid_col {
    width: calc(9.0909090909% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[lg:12]"] > .c-grid_col {
    width: calc(8.3333333333% - var(--column-gap));
  }
}
@media screen and (max-width: 1380px) {
  .c-grid {
    --column-gap: var(--grid-gap);
    --row-gap: var(--grid-gap);
  }
  .c-grid[data-grid-col*="[md:1]"] > .c-grid_col {
    width: calc(100% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:2]"] > .c-grid_col {
    width: calc(50% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:3]"] > .c-grid_col {
    width: calc(33.3333333333% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:4]"] > .c-grid_col {
    width: calc(25% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:5]"] > .c-grid_col {
    width: calc(20% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:6]"] > .c-grid_col {
    width: calc(16.6666666667% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:7]"] > .c-grid_col {
    width: calc(14.2857142857% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:8]"] > .c-grid_col {
    width: calc(12.5% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:9]"] > .c-grid_col {
    width: calc(11.1111111111% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:10]"] > .c-grid_col {
    width: calc(10% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:11]"] > .c-grid_col {
    width: calc(9.0909090909% - var(--column-gap));
  }
  .c-grid[data-grid-col*="[md:12]"] > .c-grid_col {
    width: calc(8.3333333333% - var(--column-gap));
  }
}

/* =================================================
  .c-bookmarkBtn
================================================= */
.c-bookmarkBtn {
  position: relative;
  width: 24px;
  height: 24px;
}
.c-bookmarkBtn::before, .c-bookmarkBtn::after {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}
.c-bookmarkBtn::before {
  z-index: 1;
  background-image: url(/images/onb/2024/ico_bookmark.svg);
}
.c-bookmarkBtn::after {
  z-index: 2;
  opacity: 0;
  background-image: url(/images/onb/2024/ico_bookmark_black.svg);
  transition: opacity 0.2s linear;
}
.c-bookmarkBtn.-white::before {
  background-image: url(/images/onb/2024/ico_bookmark_white.svg);
}
.c-bookmarkBtn.is-active::after {
  opacity: 1;
}

/* =================================================
  .c-arrowLink
================================================= */
.c-arrowLink {
  padding: 3.6px 28px 3.6px 0;
  background: url(/images/onb/2024/ico_arrow_right.svg) right center/24px 24px no-repeat;
  transform: translateY(-50%);
  color: var(--color-default);
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .c-arrowLink:hover {
    text-decoration: underline;
  }
}

/* =================================================
  .c-tab
================================================= */
.c-tab {
  margin-bottom: 36px;
}
.c-tab_nav {
  display: flex;
  flex-wrap: wrap;
}
.c-tab_item {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 33.3222259247%;
}
.c-tab_item.-active .c-tab_trigger {
  padding-bottom: 7px;
  border-bottom-color: var(--color-theme);
  border-width: 2px;
  color: var(--color-theme);
}
.c-tab_trigger {
  display: inline-block;
  width: 100%;
  padding: 8px 0 8px 0;
  border-bottom: 1px solid var(--color-line-gray03);
  transition: color 0.2s linear;
  color: var(--color-gray);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .c-tab_trigger:hover {
    background-color: var(--color-light-purple);
  }
}

/* =================================================
  .c-tab02
================================================= */
.c-tab02 {
  margin-bottom: 32px;
}
.c-tab02_nav {
  display: flex;
  width: 754px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--color-theme);
  overflow: hidden;
}
.c-tab02_item {
  width: auto;
  flex: 1;
  border-left: 1px solid var(--color-theme);
}
.c-tab02_item:first-of-type {
  border-left: none;
}
.c-tab02_item.-active .c-tab02_trigger {
  background-color: var(--color-theme);
  color: var(--color-base);
}
@media (hover: hover) and (pointer: fine) {
  .c-tab02_item.-active .c-tab02_trigger:hover {
    background-color: var(--color-light-purple);
    color: var(--color-default);
  }
}
.c-tab02_trigger {
  display: block;
  padding: 8px 0;
  background-color: transparent;
  transition-property: background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  color: var(--color-default);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .c-tab02_trigger:hover {
    background-color: var(--color-light-purple);
  }
}
.c-tab02.-round .c-tab02_nav {
  border-radius: 10px;
}
.c-tab02.-round .c-tab02_item {
  position: relative;
  border-left: none;
}
.c-tab02.-round .c-tab02_item.-active {
  border-left: none;
}
.c-tab02.-round .c-tab02_item.-active + .c-tab02_item {
  border-left: none;
}
.c-tab02.-round .c-tab02_item.-active .c-tab02_trigger {
  background-color: var(--color-theme);
  color: var(--color-base);
}
@media (hover: hover) and (pointer: fine) {
  .c-tab02.-round .c-tab02_item.-active .c-tab02_trigger:hover {
    background-color: var(--color-light-purple);
    color: var(--color-default);
  }
}
.c-tab02.-round .c-tab02_trigger {
  border-radius: 8px;
}
.c-tab02.-mypage {
  margin-top: 36px;
}
.c-tab02.-timeMachine {
  margin-bottom: 52px;
}
.c-tab02.-timeMachine .c-tab02_nav {
  width: 644px;
}
.c-tab02.-timeMachine .c-tab02_trigger {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 16px;
}

/* =================================================
  .c-follow
================================================= */
.c-follow {
  display: flex;
  flex-wrap: wrap;
  justify-items: center;
  align-items: center;
}
.c-follow_total {
  width: 100%;
  margin-bottom: 6px;
  text-align: center;
  color: var(--color-gray);
  font-size: 12px;
  font-weight: 700;
}
.c-follow_text {
  margin-right: 28px;
  font-size: 14px;
  font-weight: 700;
}
.c-follow_btn {
  width: 38px;
}
.c-follow_btn a {
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  border-radius: 36px;
  background-color: var(--color-gray);
  transition: background 0.2s linear;
}
.c-follow_btn a::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--color-base);
  border-radius: 50%;
  transition: left 0.2s linear;
}
.c-follow_btn.-active a {
  background-color: var(--color-theme);
}
.c-follow_btn.-active a::before {
  left: 17px;
}

/* =================================================
  .c-sortList
================================================= */
.c-sortList {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 16px;
}
.c-sortList_selected {
  position: relative;
  padding: 7px 30px 9px 16px;
  font-weight: 700;
  border: 0;
  color: var(--color-default);
}
.c-sortList_selected::after {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: url(/images/onb/2024/ico_arrow_bottom_03.svg) right center/contain no-repeat;
}
.c-sortList_selected.is-open::after {
  transform: translateY(-50%) scaleY(-1);
}
.c-sortList_content {
  display: none;
  position: absolute;
  top: 48px;
  right: 0;
  z-index: 10;
  width: 112px;
  padding: 16px;
  border-radius: 4px;
  background-color: var(--color-base);
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
}
.c-sortList_content.-open {
  display: block;
}
.c-sortList_item {
  text-align: right;
}
.c-sortList_item:not(:first-of-type) {
  margin-top: 20px;
}
.c-sortList_item_label {
  position: relative;
  cursor: pointer;
}
.c-sortList_item_label:focus-within {
  outline: 2px solid var(--color-gray);
}
@media (hover: hover) and (pointer: fine) {
  .c-sortList_item_label:hover .c-sortList_item_text {
    color: var(--color-default);
  }
}
.c-sortList_item_label input[type=radio] {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
}
.c-sortList_item_label input[type=radio]:checked + .c-sortList_item_text {
  color: var(--color-default);
}
.c-sortList_item_text {
  position: relative;
  z-index: 2;
  color: var(--color-gray);
  font-weight: 700;
}
.c-sortList_item a {
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .c-sortList_item a:hover {
    color: var(--color-theme);
  }
}
.c-sortList.-mypage .c-sortList_selected {
  display: flex;
  align-items: center;
  padding: 0 20px 0 0;
  font-size: 14px;
  line-height: 1.6;
}
.c-sortList.-mypage .c-sortList_selected::after {
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
}
.c-sortList.-mypage .c-sortList_content {
  top: 26px;
}

/* =================================================
  .c-selectList
================================================= */
.c-selectList {
  position: relative;
  padding: 0;
  border: 0;
}
.c-selectList_selected {
  display: flex;
  background-color: var(--color-base);
  border-radius: 8px;
  padding: 0 12px;
  line-height: 1.5;
  border: 0;
}
.c-selectList_selected_property {
  padding: 7px 0 9px;
  font-weight: 700;
}
.c-selectList_selected_value {
  margin-left: 64px;
  padding: 7px 24px 9px 0;
  background: url(/images/onb/2024/ico_arrow_bottom_03.svg) right center/24px 24px no-repeat;
  color: var(--color-gray);
  font-weight: 700;
}
.c-selectList_selected_value [data-observe] {
  pointer-events: none;
}
.c-selectList_content {
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 10;
  margin: 0;
  padding: 16px;
  width: 100%;
  border-radius: 4px;
  background-color: var(--color-base);
  border: none;
}
.c-selectList_content.is-open {
  display: block;
}
.c-selectList_item {
  position: relative;
}
.c-selectList_item:not(:first-of-type) {
  margin-top: 16px;
}
.c-selectList_item_checkbox {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
}
.c-selectList_item_checkbox:checked + .c-selectList_item_label::before {
  background: var(--color-theme) url(/images/onb/2024/ico_checked.svg) center/12px auto no-repeat;
}
.c-selectList_item_checkbox:focus-visible + .c-selectList_item_label {
  outline: 2px solid var(--color-gray);
}
.c-selectList_item_label {
  position: relative;
  z-index: 2;
  display: flex;
  cursor: pointer;
  padding-left: 30px;
}
.c-selectList_item_label::before {
  position: absolute;
  content: "";
  display: block;
  top: 5px;
  left: 0;
  flex-shrink: 0;
  flex-basis: 18px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-theme);
  border-radius: 4px;
}
.c-selectList_item_label_text {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.5px;
}
.c-selectList_item_label_num {
  flex-shrink: 0;
  margin-top: 2px;
  margin-left: 12px;
  color: var(--color-gray);
  font-family: var(--font-family-jp-inter);
}

/* =================================================
  .c-chipBtn
================================================= */
.c-chipBtn {
  display: inline-block;
  padding: 6px 12px 6px 32px;
  border-radius: 30px;
  border: 1px solid var(--color-theme);
  background: var(--color-base) url(/images/onb/2024/ico_cross_03.svg) left 12px center/16px 16px no-repeat;
  color: var(--color-default);
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  letter-spacing: 0.14px;
}
@media (hover: hover) and (pointer: fine) {
  .c-chipBtn:hover {
    background-color: var(--color-theme);
    background-image: url(/images/onb/2024/ico_cross_03_white.svg);
    color: var(--color-base);
  }
}

/* .c-topicBtn */
.c-topicBtn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 30px;
  border: 1px solid var(--color-theme);
  background: var(--color-base);
  color: var(--color-default);
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  letter-spacing: 0.14px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .c-topicBtn:hover {
    background-color: var(--color-theme);
    color: var(--color-base);
  }
}

/* =================================================
  .c-formSelect
================================================= */
.c-formSelect_select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  width: 306px;
  padding: 8px 36px 8px 12px;
  margin: 0 auto;
  background: var(--color-base) url(/images/onb/2024/ico_arrow_bottom_04.svg) right 15px center/24px 24px no-repeat;
  border: 1px solid var(--color-line-gray03);
  border-radius: 4px;
  cursor: pointer;
  color: #000;
  font-family: var(--font-family-jp-inter);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
.c-formSelect.-backnumber {
  margin-bottom: 36px;
}
.c-formSelect.-author {
  margin-bottom: 36px;
}

/* =================================================
  .c-viewerLink
================================================= */
.c-viewerLink {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 28px;
  margin: 0 auto;
  color: var(--color-theme);
  font-size: 14px;
  line-height: 2;
  text-decoration: none;
  background: url(/images/onb/2024/ico_book_purple.svg) left center/20px 20px no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .c-viewerLink:hover {
    text-decoration: underline;
  }
}

/* =================================================
  .c-viewMoreBtn
================================================= */
.c-viewMoreBtn {
  position: relative;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 28px;
  margin: 0 auto;
  background: url(/images/onb/2024/ico_arrow_bottom_03.svg) right center/24px 24px no-repeat;
  color: var(--color-default);
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  letter-spacing: 0.14px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .c-viewMoreBtn:hover {
    text-decoration: underline;
  }
}

/* =================================================
  .c-multiSelectChips
================================================= */
.c-multiSelectChips {
  display: flex;
  flex-wrap: wrap;
  margin-top: -16px;
  margin-left: -16px;
}
.c-multiSelectChips_item {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 16px;
  margin-left: 16px;
  border-radius: 40px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.c-multiSelectChips_btn {
  position: relative;
  display: block;
  padding: 7px 11px 7px 35px;
  background-color: var(--color-base);
  border-radius: 40px;
  border: 1px solid var(--color-line-gray);
  font-size: 16px;
  letter-spacing: 0.5px;
}
.c-multiSelectChips_btn::before, .c-multiSelectChips_btn::after {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 12px;
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  transform: translateY(-50%);
}
.c-multiSelectChips_btn::before {
  z-index: 2;
  background-image: url(/images/onb/2024/ico_plus.svg);
}
.c-multiSelectChips_btn::after {
  z-index: 1;
  visibility: hidden;
  background-image: url(/images/onb/2024/ico_cross_white_02.svg);
}
@media (hover: hover) and (pointer: fine) {
  .c-multiSelectChips_btn:hover {
    background-color: var(--color-light-purple);
  }
}
.c-multiSelectChips_checkbox {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.c-multiSelectChips_checkbox:focus-visible + .c-multiSelectChips_btn {
  border-color: blue;
}
.c-multiSelectChips_checkbox:checked + .c-multiSelectChips_btn {
  background-color: var(--color-theme);
  border-color: var(--color-theme);
  color: var(--color-base);
}
.c-multiSelectChips_checkbox:checked + .c-multiSelectChips_btn::before {
  visibility: hidden;
}
.c-multiSelectChips_checkbox:checked + .c-multiSelectChips_btn::after {
  visibility: visible;
}

/*****************************************************
  Project
*****************************************************/
/* =================================================
  .p-card
================================================= */
.p-card_item,
.p-card.-recommend .c-grid > li:not([class]),
ul.p-card_list > li:not([class]) {
  position: relative;
  text-decoration: none;
  background-color: var(--color-base);
}
.p-card_item_link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-default);
  text-decoration: none;
}
.p-card_item_link:visited .p-card_item_title {
  color: var(--color-visited-link);
}
@media (hover: hover) and (pointer: fine) {
  .p-card_item_link:hover .p-card_item_image img {
    transform: scale(1.06);
  }
  .p-card_item_link:hover .p-card_item_title {
    color: var(--color-theme);
  }
}
.p-card_item_tag {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 3;
  padding: 4px 8px;
  background-color: var(--color-red);
  border-radius: 4px;
  color: var(--color-base);
  font-size: 10px;
  font-weight: 700;
}
.p-card_item_tag.-ad {
  background: rgba(34, 34, 34, 0.5);
}
.p-card_item_bookmarkBtn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
.p-card_item_image {
  position: relative;
  width: 100%;
  height: 124px;
  overflow: hidden;
}
.p-card_item_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-in-out;
}
.p-card_item_inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 12px;
}
.p-card_item_header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.p-card_item_spreadList {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-card_item_spreadList_item {
  display: flex;
  align-items: center;
}
.p-card_item_spreadList_item.-right {
  margin-left: auto;
}
.p-card_item_separatedList {
  display: flex;
  flex-wrap: wrap;
}
.p-card_item_separatedList_item + .p-card_item_separatedList_item {
  position: relative;
  margin-left: 4px;
  padding-left: 4px;
}
.p-card_item_separatedList_item + .p-card_item_separatedList_item::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 1px;
  height: 12px;
  background-color: var(--color-gray);
}
.p-card_item_subTitle {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 4px 8px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--color-default);
  border-radius: 60px;
  color: var(--color-base);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.p-card_item_subTitle.-red {
  background-color: var(--color-red);
}
.p-card_item_title {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--color-default);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}
.p-card_item_title a {
  display: block;
}
.p-card_item_title a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.p-card_item_contents {
  margin-top: auto;
}
.p-card_item_description {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.p-card_item_mostRead {
  padding-left: 20px;
  background: url(/images/onb/2024/ico_trend.svg) left center/16px 16px no-repeat;
  color: var(--color-theme);
  font-family: var(--font-family-jp-inter);
  font-size: 12px;
  line-height: 1.5;
}
.p-card_item_author {
  color: var(--color-gray);
  font-family: var(--font-family-jp-inter);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.12px;
}
.p-card_item_date {
  color: var(--color-gray);
  font-size: 12px;
  font-family: var(--font-family-jp-inter);
  line-height: 1.5;
}
.p-card_item_readTime {
  color: var(--color-gray);
  font-family: var(--font-family-jp-inter);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.12px;
}
.p-card_item_readTime.-red {
  color: var(--color-red);
}
.p-card_item_playTime {
  display: flex;
  color: var(--color-gray);
  font-size: 12px;
  font-family: var(--font-family-jp-inter);
}
.p-card_item_playTime_title {
  padding-left: 16px;
  color: var(--color-default);
  line-height: 1.5;
}
.p-card_item_playTime_time {
  margin-left: 10px;
}
.p-card_item_playTime.-audio .p-card_item_playTime_title {
  background: url(/images/onb/2024/ico_headphone.svg) left center/12px 12px no-repeat;
}
.p-card_item_playTime.-video .p-card_item_playTime_title {
  background: url(/images/onb/2024/ico_play.svg) left center/16px 16px no-repeat;
}
.p-card.-bookmarkBtn .p-card_item_header .p-card_item_title:first-child {
  padding-right: 24px;
}
.p-card.-top .p-card_item_inner {
  padding: 16px 24px;
}
.p-card.-top .p-card_item_image {
  height: 311px;
}
.p-card.-top .p-card_item_subTitle {
  padding-top: 2px;
  padding-bottom: 2px;
  margin-bottom: 9px;
}
.p-card.-top .p-card_item_subTitle {
  margin-bottom: 8px;
}
.p-card.-top .p-card_item_title {
  font-size: 24px;
  line-height: 1.5;
}
.p-card.-top .p-card_item_footer {
  margin-top: 16px;
}
.p-card.-top .p-card_item_bookmarkBtn {
  top: 327px;
  right: 16px;
}
.p-card.-topLatest .p-card_item_image {
  height: 124px;
}
.p-card.-topLatest .p-card_item_footer {
  padding: 0 4px;
}
.p-card.-topLatest .p-card_item_bookmarkBtn {
  top: 136px;
  right: 12px;
}
.p-card.-topVideo .p-card_item {
  background-color: transparent;
}
.p-card.-topVideo .p-card_item_inner {
  padding-left: 0;
  padding-right: 0;
}
.p-card.-topVideo .p-card_item_image {
  height: 172px;
  border-radius: 8px;
  isolation: isolate;
}
.p-card.-topVideo .p-card_item_image::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  background: url(/images/onb/2024/ico_play_circle.svg) center center/cover no-repeat;
  transform: translate(-50%, -50%);
}
.p-card.-topVideo .p-card_item_footer {
  margin-top: 8px;
}
.p-card.-topVideo .p-card_item_spreadList_item {
  font-size: 12px;
  line-height: 1.5;
}
.p-card.-topVideo .p-card_item_subTitle {
  margin-bottom: 8px;
}
.p-card.-topVideo .p-card_item_bookmarkBtn {
  top: 185px;
}
.p-card.-topAudio .p-card_item {
  background-color: transparent;
}
.p-card.-topAudio .p-card_item_inner {
  padding-left: 0;
  padding-right: 0;
}
.p-card.-topAudio .p-card_item_image {
  height: 172px;
  border-radius: 8px;
  isolation: isolate;
}
.p-card.-topAudio .p-card_item_image::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 20px;
  width: 60px;
  height: 25px;
  background: url(/images/onb/2024/logo_nikkei_business_audio.png) center center/contain no-repeat;
}
.p-card.-topAudio .p-card_item_footer {
  margin-top: 8px;
}
.p-card.-topAudio .p-card_item_spreadList_item {
  font-size: 12px;
  line-height: 1.5;
}
.p-card.-topAudio .p-card_item_subTitle {
  margin-bottom: 8px;
}
.p-card.-topAudio .p-card_item_bookmarkBtn {
  top: 185px;
}
.p-card.-topAudio .p-card_item_tag + .p-card_item_image::after {
  top: 32px;
}
.p-card.-video .p-card_item {
  background-color: transparent;
}
.p-card.-video .p-card_item_inner {
  padding-left: 0;
  padding-right: 0;
}
.p-card.-video .p-card_item_image {
  height: 172px;
  border-radius: 8px;
  isolation: isolate;
}
.p-card.-video .p-card_item_image::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  background: url(/images/onb/2024/ico_play_circle.svg) center center/cover no-repeat;
  transform: translate(-50%, -50%);
}
.p-card.-video .p-card_item_footer {
  margin-top: 8px;
}
.p-card.-video .p-card_item_spreadList_item {
  font-size: 12px;
  line-height: 1.5;
}
.p-card.-video .p-card_item_subTitle {
  margin-bottom: 8px;
}
.p-card.-video .p-card_item_title {
  line-height: 1.5;
}
.p-card.-video .p-card_item_bookmarkBtn {
  top: 185px;
}
.p-card.-video .p-card_item_tag + .p-card_item_image::after {
  top: 32px;
}
.p-card.-audio .p-card_item {
  background-color: transparent;
}
.p-card.-audio .p-card_item_inner {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 32px;
}
.p-card.-audio .p-card_item_image {
  height: 172px;
  border-radius: 8px;
  isolation: isolate;
}
.p-card.-audio .p-card_item_image::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 20px;
  width: 60px;
  height: 25px;
  background: url(/images/onb/2024/logo_nikkei_business_audio.png) center center/contain no-repeat;
}
.p-card.-audio .p-card_item_footer {
  margin-top: 8px;
}
.p-card.-audio .p-card_item_spreadList_item {
  font-size: 12px;
  line-height: 1.5;
}
.p-card.-audio .p-card_item_subTitle {
  margin-bottom: 8px;
}
.p-card.-audio .p-card_item_bookmarkBtn {
  top: 185px;
}
.p-card.-audio .p-card_item_tag + .p-card_item_image::after {
  top: 32px;
}
.p-card.-live .p-card_item {
  background-color: transparent;
}
.p-card.-live .p-card_item_inner {
  padding-left: 0;
  padding-right: 0;
}
.p-card.-live .p-card_item_image {
  height: 172px;
  border-radius: 8px;
  isolation: isolate;
}
.p-card.-live .p-card_item_footer {
  margin-top: 8px;
}
.p-card.-live .p-card_item_subTitle {
  margin-bottom: 8px;
}
.p-card.-live .p-card_item_bookmarkBtn {
  top: 185px;
}
.p-card.-recommend .p-card_item_image {
  height: 172px;
}
.p-card.-recommend .p-card_item_footer {
  padding-left: 4px;
  padding-right: 4px;
  margin-top: 26px;
}
.p-card.-recommend .p-card_item_subTitle {
  margin-bottom: 8px;
}
.p-card.-recommend .p-card_item_bookmarkBtn {
  top: 186px;
  right: 12px;
}
.p-card.-topics.-lg .p-card_item {
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-line-gray);
}
.p-card.-topics.-lg .p-card_item_inner {
  padding: 16px 0;
}
.p-card.-topics.-lg .p-card_item_image {
  height: 424px;
}
.p-card.-topics.-lg .p-card_item_subTitle {
  margin-bottom: 8px;
}
.p-card.-topics.-lg .p-card_item_title {
  font-size: 20px;
  line-height: 1.5;
}
.p-card.-topics.-lg .p-card_item_bookmarkBtn {
  top: 440px;
}
.p-card.-topics.-lg .p-card_item_description {
  line-height: 2;
}
.p-card.-topics.-lg .p-card_item_footer {
  margin-top: 16px;
}
.p-card.-topics .p-card_item {
  background: none;
}
.p-card.-topics .p-card_item_bookmarkBtn {
  top: 136px;
}
/*
@media screen and (max-width: 1380px) {
  body[data-page=top] .p-card.-topVideo {
    max-width: 306px;
    margin: 0 auto;
  }
  body[data-page=top] .p-card.-topVideo .p-card_item_image {
    height: 172px;
  }
  body[data-page=top] .p-card.-topAudio {
    max-width: 306px;
    margin: 0 auto;
  }
  body[data-page=top] .p-card.-live {
    max-width: 306px;
    margin: 0 auto;
  }
  body[data-page=top] .p-card.-recommend .p-card_list {
    margin-top: 0;
  }
  body[data-page=top] .p-card.-recommend .p-card_item {
    margin-top: 0;
    background-color: transparent;
    border-bottom: 1px solid var(--color-line-gray02);
  }
  body[data-page=top] .p-card.-recommend .p-card_item_link {
    flex-direction: row;
    padding: 16px;
  }
  body[data-page=top] .p-card.-recommend .p-card_item_image {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
    margin-right: 12px;
  }
  body[data-page=top] .p-card.-recommend .p-card_item_image img {
    width: auto;
    height: 96px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  body[data-page=top] .p-card.-recommend .p-card_item_inner {
    flex-basis: calc(100% - 108px);
    width: calc(100% - 108px);
    padding: 0;
  }
  body[data-page=top] .p-card.-recommend .p-card_item_footer {
    display: none;
  }
  body[data-page=top] .p-card.-recommend .p-card_item_subTitle {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 5px;
    font-size: 12px;
  }
  body[data-page=top] .p-card.-recommend .p-card_item_bookmarkBtn {
    top: 16px;
    right: 16px;
  }
}
*/

/* =================================================
  .p-card02
================================================= */
.p-card02_item {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background-color: var(--color-base);
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
}
.p-card02_item_link {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--color-default);
  text-decoration: none;
}
.p-card02_item_link:visited .p-card02_item_title {
  color: var(--color-visited-link);
}
@media (hover: hover) and (pointer: fine) {
  .p-card02_item_link:hover .p-card02_item_image img {
    transform: scale(1.06);
  }
  .p-card02_item_link:hover .p-card02_item_title {
    color: var(--color-theme);
  }
}
.p-card02_item_tag {
  position: absolute;
  top: 23px;
  left: 7px;
  z-index: 3;
  padding: 4px 8px;
  background-color: var(--color-red);
  border-radius: 4px;
  color: var(--color-base);
  font-size: 10px;
  font-weight: 700;
}
.p-card02_item_tag.-ad {
  background: rgba(34, 34, 34, 0.5);
}
.p-card02_item_image {
  position: relative;
  width: 100%;
  height: 179px;
  overflow: hidden;
}
.p-card02_item_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-in-out;
}
.p-card02_item_inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 16px 16px 12px;
}
.p-card02_item_header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.p-card02_item_header .p-card02_item_title:first-child {
  padding-right: 24px;
}
.p-card02_item_title {
  color: var(--color-default);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}
.p-card02_item_contents {
  margin-top: auto;
}
.p-card02_item_description {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.p-card02_item_episodes {
  margin-top: 4px;
  color: var(--color-gray);
  font-size: 12px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  letter-spacing: 0.12px;
}
.p-card02_item_playMark {
  padding: 3px 0 3px 28px;
  background: url(/images/onb/2024/ico_play_purple.svg) left center/24px 24px no-repeat;
  color: var(--color-theme);
  font-size: 12px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  letter-spacing: 0.12px;
}
.p-card02_item_footer {
  flex-grow: 0;
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 12px;
  padding-bottom: 16px;
  border-top: 1px solid var(--color-line-gray);
}
.p-card02_item_footer .c-follow {
  justify-content: center;
}
.p-card02.-program .p-card02_item_link {
  height: 100%;
  padding: 8px;
}
.p-card02.-program .p-card02_item_image {
  height: 227px;
  border-radius: 8px;
  isolation: isolate;
}
.p-card02.-program .p-card02_item_inner {
  padding: 16px 8px 8px;
}
.p-card02.-program .p-card02_item_title {
  font-size: 20px;
}
.p-card02.-program .p-card02_item_contents {
  margin-top: 0;
  margin-bottom: 24px;
}
.p-card02.-program .p-card02_item_footer {
  padding: 0;
  margin: auto 0 0;
  border-top: none;
}
.p-card02.-series .p-card02_item_inner {
  padding-bottom: 20px;
}

/* =================================================
  .p-articleList
================================================= */
.p-articleList_list {
  display: flex;
  flex-wrap: wrap;
}
.p-articleList_item,
ul.p-articleList_list > li:not([class]) {
  position: relative;
  width: 100%;
  margin-top: 16px;
  border-bottom: 1px solid var(--color-line-gray);
}
.p-articleList_item:first-of-type {
  margin-top: 0;
}
.p-articleList_item_link {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
  color: var(--color-default);
  text-decoration: none;
}
.p-articleList_item_link:visited .p-articleList_item_title {
  color: var(--color-visited-link);
}
@media (hover: hover) and (pointer: fine) {
  .p-articleList_item_link:hover .p-articleList_item_image img {
    transform: scale(1.06);
  }
  .p-articleList_item_link:hover .p-articleList_item_title {
    color: var(--color-theme);
  }
}
.p-articleList_item_tag {
  position: absolute;
  top: 23px;
  left: 7px;
  z-index: 3;
  padding: 4px 8px;
  background-color: var(--color-red);
  border-radius: 4px;
  color: var(--color-base);
  font-size: 10px;
  font-weight: 700;
}
.p-articleList_item_tag.-ad {
  background: rgba(34, 34, 34, 0.5);
}
.p-articleList_item_tag.-full {
  left: 5px;
  padding-left: 2px;
  padding-right: 2px;
}
.p-articleList_item_number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  padding-left: 5px;
  color: var(--color-theme);
  font-size: 30px;
  font-family: var(--font-family-en);
  font-weight: 700;
  line-height: 1.6;
}
.p-articleList_item_number.-one, .p-articleList_item_number.-two, .p-articleList_item_number.-three {
  width: 40px;
  height: 40px;
  padding-left: 0;
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
  background: var(--color-default);
  color: var(--color-base);
  font-size: 20px;
}
.p-articleList_item_number.-one {
  border-color: var(--color-theme);
}
.p-articleList_item_number.-two {
  border-color: var(--color-red);
}
.p-articleList_item_number.-three {
  border-color: var(--color-line-gray03);
}
.p-articleList_item_image {
  flex-shrink: 0;
  flex-basis: 120px;
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.p-articleList_item_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-in-out;
}
.p-articleList_item_image.-sideAudio {
  position: relative;
}
.p-articleList_item_image.-sideAudio::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  width: 27px;
  height: 11px;
  background: url(/images/onb/2024/logo_nikkei_business_audio.png) left center/27px auto no-repeat;
}
.p-articleList_item_image.-sideVideo {
  position: relative;
}
.p-articleList_item_image.-sideVideo::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 31px;
  height: 31px;
  background: url(/images/onb/2024/ico_play_circle.svg) center center/contain no-repeat;
  transform: translate(-50%, -50%);
}
.p-articleList_item_contents {
  flex-basis: calc(100% - 132px);
  width: calc(100% - 132px);
  margin-left: 12px;
}
.p-articleList_item_footer {
  margin-top: 8px;
}
.p-articleList_item_spreadList {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p-articleList_item_spreadList_item.-right {
  margin-left: auto;
}
.p-articleList_item_separatedList {
  display: flex;
  flex-wrap: wrap;
}
.p-articleList_item_separatedList_item + .p-articleList_item_separatedList_item {
  position: relative;
  margin-left: 4px;
  padding-left: 4px;
}
.p-articleList_item_separatedList_item + .p-articleList_item_separatedList_item::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 1px;
  height: 12px;
  background-color: var(--color-gray);
}
.p-articleList_item_subTitle {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 2px 8px;
  margin-bottom: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 60px;
  background: var(--color-default);
  color: var(--color-base);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.p-articleList_item_subTitle.-red {
  background-color: var(--color-red);
}
.p-articleList_item_title {
  color: var(--color-default);
  font-size: 20px;
  font-weight: 700;
}
.p-articleList_item_mostRead {
  padding-left: 20px;
  margin-bottom: 4px;
  background: url(/images/onb/2024/ico_trend.svg) left center/16px 16px no-repeat;
  color: var(--color-theme);
  font-family: var(--font-family-jp-inter);
  font-size: 12px;
  line-height: 1.5;
}
.p-articleList_item_author {
  color: var(--color-gray);
  font-family: var(--font-family-jp-inter);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.12px;
}
.p-articleList_item_author.-image {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  line-height: 20px;
}
.p-articleList_item_author .-image {
  position: relative;
  display: block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 20px;
}
.p-articleList_item_author .-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-articleList_item_author .-name {
  margin-right: 10px;
  color: var(--color-red);
  font-size: 14px;
  font-weight: 700;
}
.p-articleList_item_date {
  display: block;
  color: var(--color-gray);
  font-family: var(--font-family-jp-inter);
  font-size: 12px;
  line-height: 1.5;
}
.p-articleList_item_readTime {
  font-family: var(--font-family-jp-inter);
  font-size: 12px;
  line-height: 1.5;
}
.p-articleList_item_readTime.-red {
  color: var(--color-red);
}
.p-articleList_item_playTime {
  display: flex;
  align-items: center;
  color: var(--color-gray);
  font-size: 10px;
  font-family: var(--font-family-jp-inter);
  line-height: 1.5;
}
.p-articleList_item_playTime_title {
  padding-left: 16px;
  color: var(--color-default);
}
.p-articleList_item_playTime_time {
  margin-left: 10px;
}
.p-articleList_item_playTime.-audio .p-articleList_item_playTime_title {
  background: url(/images/onb/2024/ico_headphone.svg) left center/12px 12px no-repeat;
}
.p-articleList_item_playTime.-video .p-articleList_item_playTime_title {
  background: url(/images/onb/2024/ico_play.svg) left center/16px 16px no-repeat;
}
.p-articleList_item_bookmarkBtn {
  position: absolute;
  top: 16px;
  right: 0;
}
.p-articleList_item_description {
  width: 100%;
  margin-top: 16px;
  color: var(--color-default);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.5px;
}
.p-articleList_item_shoulderTitle {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 4px 8px;
  margin-bottom: 16px;
  border-radius: 4px;
  color: var(--color-base);
  font-size: 10px;
  font-weight: 700;
  background-color: var(--color-theme);
}
.p-articleList_item_audio {
  margin: 20px auto 0;
  width: 300px;
}
.p-articleList_item.-ad .p-articleList_item_contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p-articleList_noArticle {
  width: 100%;
  margin: 0;
  padding: 48px 0;
  border: 1px solid var(--color-gray);
  vertical-align: middle;
  color: var(--color-gray);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.p-articleList.-bookmarkBtn .p-articleList_item_header .p-articleList_item_title:first-child {
  padding-right: 24px;
}
.p-articleList.-firstView {
  padding-left: 16px;
  padding-right: 16px;
  background-color: var(--color-base);
}
.p-articleList.-firstView .p-articleList_item {
  margin-top: 0;
}
.p-articleList.-firstView .p-articleList_item_link {
  padding-top: 16px;
  padding-bottom: 15px;
}
.p-articleList.-firstView .p-articleList_item_image {
  flex-basis: 96px;
  width: 96px;
  height: 96px;
}
.p-articleList.-firstView .p-articleList_item_contents {
  flex-basis: calc(100% - 108px);
  width: calc(100% - 108px);
}
.p-articleList.-firstView .p-articleList_item_footer {
  margin-top: 4px;
}
.p-articleList.-firstView .p-articleList_item_separatedList_item + .p-articleList_item_separatedList_item::before {
  top: 1px;
}
.p-articleList.-firstView .p-articleList_item_subTitle {
  margin-bottom: 4px;
}
.p-articleList.-firstView .p-articleList_item_title {
  font-size: 18px;
}
.p-articleList.-firstView .p-articleList_item_readTime {
  font-size: 10px;
}
.p-articleList.-firstView .p-articleList_item_author {
  font-size: 10px;
}
.p-articleList.-firstView .p-articleList_item_date {
  font-size: 10px;
}
.p-articleList.-sidebar .p-articleList_item {
  background-color: var(--color-base);
  border-bottom: none;
}
.p-articleList.-sidebar .p-articleList_item_link {
  padding: 12px 16px;
}
.p-articleList.-sidebar .p-articleList_item_image {
  position: relative;
  flex-basis: 81px;
  width: 81px;
  height: 81px;
}
.p-articleList.-sidebar .p-articleList_item_contents {
  flex-basis: calc(100% - 97px);
  width: calc(100% - 97px);
}
.p-articleList.-sidebar .p-articleList_item_footer {
  margin-top: 4px;
}
.p-articleList.-sidebar .p-articleList_item_title {
  font-size: 14px;
  line-height: 1.6;
}
.p-articleList.-sidebar .p-articleList_item_readTime {
  font-size: 10px;
}
.p-articleList.-sidebar .p-articleList_item_date {
  font-size: 10px;
}
.p-articleList.-sidebar .p-articleList_item_bookmarkBtn {
  top: 16px;
}
.p-articleList.-sidebarRanking .p-articleList_item {
  margin-top: 0;
  background-color: var(--color-base);
}
.p-articleList.-sidebarRanking .p-articleList_item:first-of-type .p-articleList_item_link {
  padding-top: 12px;
  padding-bottom: 12px;
}
.p-articleList.-sidebarRanking .p-articleList_item_link {
  padding: 16px 8px;
}
.p-articleList.-sidebarRanking .p-articleList_item_title {
  font-size: 14px;
  line-height: 1.6;
}
.p-articleList.-sidebarRanking .p-articleList_item_image {
  flex-basis: 81px;
  width: 81px;
  height: 81px;
  margin-left: 16px;
}
.p-articleList.-sidebarRanking .p-articleList_item_contents {
  flex-basis: calc(100% - 151px);
  width: calc(100% - 151px);
  margin-left: 12px;
}
.p-articleList.-sidebarRanking .p-articleList_item_footer {
  margin-top: 4px;
}
.p-articleList.-sidebarRanking .p-articleList_item_author {
  font-size: 10px;
  line-height: 1.4;
}
.p-articleList.-sidebarRanking .p-articleList_item_date {
  font-size: 10px;
  line-height: 1.4;
}
.p-articleList.-accessRanking .p-articleList_item {
  margin-top: 0;
  background-color: var(--color-base);
}
.p-articleList.-accessRanking .p-articleList_item:first-of-type .p-articleList_item_link {
  padding-top: 12px;
  padding-bottom: 12px;
}
.p-articleList.-accessRanking .p-articleList_item_link {
  align-items: center;
  padding: 16px 8px;
}
.p-articleList.-accessRanking .p-articleList_item_title {
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.14px;
}
.p-articleList.-accessRanking .p-articleList_item_number {
  color: var(--color-navy);
}
.p-articleList.-accessRanking .p-articleList_item_number.-xwoman {
  color: #ed5300;
}
.p-articleList.-accessRanking .p-articleList_item_contents {
  flex-basis: calc(100% - 54px);
  width: calc(100% - 54px);
}
.p-articleList.-sideRecommend .p-articleList_item,
.-sideRecommend .p-articleList_list > li:not([class]) {
  margin-top: 0;
  background-color: var(--color-base);
}
.p-articleList.-sideRecommend .p-articleList_item_link {
  padding: 12px 16px;
}
.p-articleList.-sideRecommend .p-articleList_item_image {
  flex-basis: 81px;
  width: 81px;
  height: 81px;
}
.p-articleList.-sideRecommend .p-articleList_item_contents {
  display: flex;
  align-items: center;
  flex-basis: calc(100% - 97px);
  margin-left: 16px;
}
.p-articleList.-sideRecommend .p-articleList_item_title {
  font-size: 14px;
  letter-spacing: 0.14px;
}
.p-articleList.-mypageTimeline .p-articleList_item {
  margin-top: 0;
}
.p-articleList.-mypageTimeline .p-articleList_item:first-of-type .p-articleList_item_link {
  padding-top: 0;
}
.p-articleList.-mypageTimeline .p-articleList_item:first-of-type .p-articleList_item_bookmarkBtn {
  top: 0;
}
.p-articleList.-mypageTimeline .p-articleList_item_link {
  padding-top: 24px;
  padding-bottom: 24px;
}
.p-articleList.-mypageTimeline .p-articleList_item_footer {
  margin-top: 0;
}
.p-articleList.-mypageTimeline .p-articleList_item_subTitle {
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.6;
  letter-spacing: 0.36px;
}
.p-articleList.-mypageTimeline .p-articleList_item_bookmarkBtn {
  top: 24px;
}
.p-articleList.-mypageBookmark .p-articleList_item {
  margin-top: 0;
}
.p-articleList.-mypageBookmark .p-articleList_item:first-of-type .p-articleList_item_link {
  padding-top: 0;
}
.p-articleList.-mypageBookmark .p-articleList_item:first-of-type .p-articleList_item_bookmarkBtn {
  top: 0;
}
.p-articleList.-mypageBookmark .p-articleList_item:last-of-type {
  border-bottom: none;
}
.p-articleList.-mypageBookmark .p-articleList_item_link {
  padding-top: 24px;
  padding-bottom: 24px;
}
.p-articleList.-mypageBookmark .p-articleList_item_footer {
  margin-top: 0;
}
.p-articleList.-mypageBookmark .p-articleList_item_subTitle {
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.6;
  letter-spacing: 0.36px;
}
.p-articleList.-mypageBookmark .p-articleList_item_bookmarkBtn {
  top: 24px;
}
.p-articleList.-author .p-articleList_item:not(:first-of-type) {
  margin-top: 24px;
}
.p-articleList.-author .p-articleList_item_link {
  padding-top: 0;
}
.p-articleList.-author .p-articleList_item_subTitle {
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.6;
  letter-spacing: 0.36px;
}
.p-articleList.-author .p-articleList_item_description {
  line-height: 1.6;
}
.p-articleList.-author .p-articleList_item_bookmarkBtn {
  top: 0;
}
.p-articleList.-tipsModal .p-articleList_item {
  margin-top: 0;
  border-width: 2px;
}
.p-articleList.-tipsModal .p-articleList_item_link {
  padding-top: 12px;
  padding-bottom: 24px;
}
.p-articleList.-tipsModal .p-articleList_item_title {
  font-size: 14px;
}
.p-articleList.-tipsModal .p-articleList_item_subTitle {
  padding-top: 4px;
  padding-bottom: 4px;
}
.p-articleList.-small .p-articleList_item {
  padding-bottom: 0;
}
.p-articleList.-small .p-articleList_item_title {
  font-size: 18px;
}
.p-articleList.-small .p-articleList_item_description {
  margin-top: 12px;
  font-size: 14px;
}
.p-articleList.-series {
  padding-left: 16px;
  padding-right: 16px;
}
.p-articleList.-series .p-articleList_item {
  margin-top: 0;
  border-color: var(--color-line-gray02);
}
.p-articleList.-series .p-articleList_item_link {
  padding: 16px;
}
.p-articleList.-series .p-articleList_item_image {
  flex-basis: 96px;
  width: 96px;
  height: 96px;
}
.p-articleList.-series .p-articleList_item_contents {
  flex-basis: calc(100% - 108px);
  width: calc(100% - 108px);
}
.p-articleList.-series .p-articleList_item_footer {
  margin-top: 4px;
}
.p-articleList.-series .p-articleList_item_separatedList_item + .p-articleList_item_separatedList_item::before {
  top: 1px;
}
.p-articleList.-series .p-articleList_item_subTitle {
  margin-bottom: 4px;
}
.p-articleList.-series .p-articleList_item_title {
  font-size: 18px;
}
.p-articleList.-series .p-articleList_item_readTime {
  font-size: 10px;
}
.p-articleList.-series .p-articleList_item_author {
  font-size: 10px;
}
.p-articleList.-series .p-articleList_item_date {
  font-size: 10px;
}
.p-articleList.-series .p-articleList_item_bookmarkBtn {
  top: 16px;
  right: 16px;
}
.p-articleList.-parentIndexList .p-articleList_item:first-of-type .p-articleList_item_link {
  padding-top: 0;
}
.p-articleList.-parentIndexList .p-articleList_item:first-of-type .p-articleList_item_bookmarkBtn {
  top: 0;
}
.p-articleList.-parentIndexList .p-articleList_item:last-of-type {
  border-bottom: none;
}
.p-articleList.-ranking .p-articleList_item {
  border-width: 2px;
}
.p-articleList.-ranking .p-articleList_item:first-of-type {
  margin-top: 11px;
  margin-bottom: 11px;
}
.p-articleList.-ranking .p-articleList_item:last-of-type {
  border-bottom: none;
}
.p-articleList.-ranking .p-articleList_item:not(:first-of-type) {
  margin-top: 24px;
}
.p-articleList.-ranking .p-articleList_item_link {
  padding-top: 0;
  padding-bottom: 10px;
}
.p-articleList.-ranking .p-articleList_item_number {
  flex-basis: 40px;
  align-self: center;
  margin-left: 10px;
}
.p-articleList.-ranking .p-articleList_item_number:not(.-one):not(.-two):not(.-three) {
  padding-left: 0;
  color: #000;
}
.p-articleList.-ranking .p-articleList_item_image {
  flex-basis: 120px;
  width: 120px;
  height: 120px;
  margin-left: 12px;
}
.p-articleList.-ranking .p-articleList_item_contents {
  flex-basis: calc(100% - 194px);
  width: calc(100% - 194px);
  margin-left: 12px;
}
.p-articleList.-ranking .p-articleList_item_subTitle {
  max-width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.p-articleList.-ranking .p-articleList_item_title {
  font-size: 18px;
}
.p-articleList.-ranking .p-articleList_item_description {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.p-articleList.-ranking .p-articleList_item_footer {
  margin-top: 6px;
}
.p-articleList.-ranking .p-articleList_item_author {
  line-height: 1.25;
}
.p-articleList.-ranking .p-articleList_item_date {
  font-size: 10px;
  line-height: 1.4;
}
.p-articleList.-parentArticleCard .p-articleList_item_link {
  padding-top: 0;
}
.p-articleList.-parentArticleCard .p-articleList_item_image {
  flex-basis: 204px;
  width: 204px;
  height: 151px;
}
.p-articleList.-parentArticleCard .p-articleList_item_contents {
  flex-basis: calc(100% - 228px);
  width: calc(100% - 228px);
  margin-left: 24px;
}
.p-articleList.-parentArticleCard .p-articleList_item_title {
  font-size: 18px;
}
.p-articleList.-parentArticleCard .p-articleList_item_description {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
}
.p-articleList.-recommend .p-articleList_item {
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 0;
  border-bottom: none;
}
.p-articleList.-recommend .p-articleList_item:first-of-type {
  margin-top: 0;
}
.p-articleList.-recommend .p-articleList_item_link {
  border-bottom: 1px solid var(--color-line-gray);
}
.p-articleList.-recommend .p-articleList_item_image {
  flex-basis: 96px;
  width: 96px;
  height: 96px;
}
.p-articleList.-recommend .p-articleList_item_contents {
  flex-basis: calc(100% - 108px);
  width: calc(100% - 108px);
}
.p-articleList.-recommend .p-articleList_item_subTitle {
  margin-bottom: 5px;
}
.p-articleList.-recommend .p-articleList_item_title {
  font-size: 18px;
}
.p-articleList.-recommend .p-articleList_item_bookmarkBtn {
  right: 16px;
}

/* =================================================
  .p-article
================================================= */
.p-article {
  position: relative;
  padding-top: 24px;
  min-height: 600px;
}
.p-article_menu {
  position: absolute;
  top: 202px;
  z-index: var(--z-index-utility);
  width: 81px;
  padding: 24px 0;
  background-color: var(--color-base);
  border-radius: 60px;
  transform: translateX(-141px);
  text-align: center;
}
.p-article_menu_item + .p-article_menu_item {
  margin-top: 48px;
}
.p-article_menu_item_label {
  display: block;
  margin-bottom: 12px;
  color: var(--color-gray);
  font-size: 12px;
  font-family: var(--font-family-jp-inter);
}
.p-article_menu_item_label .-help img {
  display: inline-block;
  vertical-align: -2px;
}
.p-article_menu_btn {
  display: block;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: opacity 0.2s linear;
}
.p-article_menu_btn.-gift {
  background-image: url(/images/onb/2024/ico_gift.svg);
}
.p-article_menu_btn.-bookmark {
  background-image: url(/images/onb/2024/ico_bookmark.svg);
}
.p-article_menu_btn.-bookmark.is-active {
  background-image: url(/images/onb/2024/ico_bookmark_black.svg);
}
@media (hover: hover) and (pointer: fine) {
  .p-article_menu_btn:hover {
    opacity: 0.6;
  }
}
.p-article_menu_share_item {
  position: relative;
}
.p-article_menu_share_item + .p-article_menu_share_item {
  margin-top: 32px;
}
.p-article_menu_share_btn {
  display: block;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.2s linear;
}
.p-article_menu_share_btn.-facebook {
  background-image: url(/images/onb/2024/ico_facebook_02.svg);
}
.p-article_menu_share_btn.-twitter {
  height: 19px;
  background-image: url(/images/onb/2024/ico_twitter.svg);
}
.p-article_menu_share_btn.-copy {
  background-image: url(/images/onb/2024/ico_copy.svg);
}
.p-article_menu_share_btn.-copy.is-copied + .p-article_menu_share_balloon {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_menu_share_btn:hover {
    opacity: 0.6;
  }
}
.p-article_menu_share_balloon {
  position: absolute;
  top: 50%;
  left: 92px;
  transform: translateY(-50%);
  display: none;
  width: -moz-max-content;
  width: max-content;
  padding: 16px;
  background-color: var(--color-base);
  border-radius: 8px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  font-size: 12px;
  font-weight: 700;
}
.p-article_setFontsize {
  position: relative;
}
.p-article_setFontsize_toggle {
  transition: opacity 0.2s linear;
}
.p-article_setFontsize_toggle.is-active + .p-article_setFontsize_balloon {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_setFontsize_toggle:hover {
    opacity: 0.7;
  }
}
.p-article_setFontsize_balloon {
  position: absolute;
  top: 50%;
  left: calc(100% + 11px);
  transform: translateY(-50%);
  display: none;
  padding: 13px 16px 14px;
  background-color: var(--color-base);
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  text-align: center;
}
.p-article_setFontsize_balloon_title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.p-article_setFontsize_balloon.-walkThrough {
  position: static;
  display: block;
  width: 223px;
  padding: 14px 24px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 32px;
  transform: none;
}
.p-article_setFontsize_balloon.-walkThrough .p-article_setFontsize_balloon_title {
  line-height: 1.6;
}
.p-article_setFontsize_list {
  display: flex;
}
.p-article_setFontsize_item {
  width: 48px;
  height: 48px;
}
.p-article_setFontsize_item + .p-article_setFontsize_item {
  margin-left: 16px;
}
.p-article_setFontsize_btn {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  border: 1px solid var(--color-line-gray);
  color: var(--color-default);
  font-size: 18px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
}
.p-article_setFontsize_btn.is-active {
  border-color: var(--color-theme);
}
.p-article_header {
  margin-bottom: 24px;
}
.p-article_header_top {
  display: flex;
  justify-content: space-between;
}
.p-article_header_top_item {
  flex-grow: 1;
}
.p-article_header_top_item:last-of-type {
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 16px;
}
.p-article_header_reprintLogo {
  float: right;
  margin: -8px 0 0 8px;
}
.p-article_header_parentTitle {
  margin-bottom: 12px;
}
.p-article_header_parentTitle a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding: 4px 8px;
  background-color: var(--color-default);
  border: 1px solid var(--color-default);
  border-radius: 60px;
  outline-color: var(--color-theme);
  transition: background-color 0.2s linear;
  color: var(--color-base);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  word-break: break-all;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_header_parentTitle a:hover {
    background-color: var(--color-base);
    color: var(--color-default);
  }
}
.p-article_header_number {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-default);
  font-size: 20px;
  font-weight: 700;
  word-break: break-all;
}
.p-article_header_shoulderTitle {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  letter-spacing: 0.56px;
  word-break: break-all;
}
.p-article_header_title {
  font-size: 24px;
  font-weight: 700;
  word-break: break-all;
}
.p-article_header_subTitle {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  word-break: break-all;
}
.p-article_header_info {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.p-article_header_info.tobira {
  justify-content: right;
  height: 35px;
}
.p-article_header_meta {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}
.p-article_header_meta_item {
  display: flex;
  align-items: center;
  margin-right: 16px;
  font-family: var(--font-family-jp-inter);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.12px;
}
.p-article_header_meta_item.-date {
  width: 100%;
  margin: 4px 0 0 0;
  color: var(--color-gray);
  font-weight: 700;
}
.p-article_header_meta_item.-editor {
  color: var(--color-gray);
}
.p-article_header_meta_item.-readTime {
  color: var(--color-gray);
  font-weight: 700;
}
.p-article_header_meta_item_title {
  display: inline-block;
  margin-right: 4px;
}
.p-article_header_meta_item .-black {
  color: var(--color-default);
}
.p-article_header_meta_item a {
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_header_meta_item a:hover {
    color: var(--color-theme);
  }
}
.p-article_header_meta_moreBtn {
  margin-left: 8px;
  font-size: 12px;
  line-height: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_header_meta_moreBtn:hover {
    color: var(--color-theme);
  }
}
.p-article_header_action {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: 16px;
}
.p-article_header_action_item {
  text-align: center;
}
.p-article_header_action_item + .p-article_header_action_item {
  margin-left: 32px;
}
.p-article_header_action_item.-book .p-article_header_action_btn::before {
  background-image: url(/images/onb/2024/ico_book.svg);
}
.p-article_header_action_item.-print {
  margin-left: 24px;
}
.p-article_header_action_item.-print .p-article_header_action_btn::before {
  background-image: url(/images/onb/2024/ico_print.svg);
}
.p-article_header_action_item.-bookmark .p-article_header_action_btn::before {
  background-image: url(/images/onb/2024/ico_bookmark.svg);
}
.p-article_header_action_item.-bookmark .p-article_header_action_btn.is-active::before {
  background-image: url(/images/onb/2024/ico_bookmark_black.svg);
}
.p-article_header_action_btn {
  position: relative;
  display: block;
  text-decoration: none;
  transition: color 0.2s linear;
  color: var(--color-default);
  font-size: 10px;
}
.p-article_header_action_btn::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_header_action_btn:hover {
    color: var(--color-theme);
  }
}
.p-article_header_image {
  margin-top: 12px;
  text-align: center;
}
.p-article_header_point {
  width: 754px;
  padding-bottom: 27px;
  margin: 48px auto 0;
  border-bottom: 1px solid var(--color-line-gray03);
  font-size: 18px;
}
.p-article_header_point h4 {
  margin-bottom: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.p-article_header_point ol {
  counter-reset: number 0;
}
.p-article_header_point ol li {
  position: relative;
  padding-left: 1.7em;
  line-height: 1.75;
}
.p-article_header_point ol li:before {
  position: absolute;
  top: 0;
  left: 0;
  counter-increment: number 1;
  content: counter(number) ".";
}
.p-article_header_point ol li + .p-article_header_point ol li {
  margin-top: 16px;
}
body.-fontSizeL .p-article_header_point {
  font-size: 22px;
}
body.-fontSizeS .p-article_header_point {
  font-size: 14px;
}
.p-article_body {
  width: 754px;
  margin: 0 auto;
}
.p-article_footer {
  margin-top: 32px;
}
.p-article_footer_tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: -8px;
  margin-left: -8px;
}
.p-article_footer_tags_item {
  margin-top: 8px;
  margin-left: 8px;
}
.p-article_footer_tags_item a {
  display: block;
  padding: 1px 15px;
  background-color: var(--color-default);
  border: 1px solid var(--color-default);
  border-radius: 76px;
  transition-property: background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  color: var(--color-base);
  font-size: 14px;
  text-decoration: none;
  line-height: 2;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_footer_tags_item a:hover {
    color: var(--color-default);
    background-color: var(--color-base);
  }
}
.p-article_footer_good {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 32px auto;
  padding: 16px 24px 16px 56px;
  background: var(--color-base) url(/images/onb/2024/ico_good.svg) 24px center/24px auto no-repeat;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition-property: background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  color: var(--color-default);
  font-size: 16px;
  font-weight: 700;
}
.p-article_footer_good_number {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-family-jp-inter);
}
.p-article_footer_good:last-child {
  margin-bottom: -36px;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_footer_good:hover {
    background-color: var(--color-theme);
    color: var(--color-base);
  }
}
.p-article_footer_ad {
  width: 640px;
  margin: 48px auto 0;
}
.p-article_footer_ad + .p-article_series {
  margin-top: 48px;
}
.p-article_vote {
  margin-top: 32px;
}
.p-article_vote_chart {
  position: relative;
  width: 280px;
  height: 280px;
  margin-left: auto;
  margin-right: auto;
}
.p-article_vote_chart_container {
  width: 280px;
  height: 280px;
}
.p-article_vote_message {
  text-align: center;
  display: block;
  background: #eee;
  padding: 10px 0;
  width: 500px;
  margin: -50px auto 20px;
  z-index: 10;
  position: relative;
}
.p-article_vote_result {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: -moz-max-content;
  width: max-content;
  transform: translate(-50%, -50%);
  color: var(--color-theme);
  font-weight: 700;
  text-align: center;
}
.p-article_vote_result_percentage {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.6;
}
.p-article_vote_result_label {
  font-size: 20px;
  line-height: 1.6;
}
.p-article_vote_result_number {
  font-size: 11px;
}
.p-article_vote_result.is-show {
  display: block;
}
.p-article_vote_reaction {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.p-article_vote_reaction_btn {
  min-width: 263px;
  padding: 12px;
  background-color: var(--color-default);
  border-radius: 12px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  transition-property: background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_vote_reaction_btn:hover {
    color: var(--color-default);
    background-color: var(--color-base);
  }
}
.p-article_vote_reaction_btn + .p-article_vote_reaction_btn {
  margin-left: 16px;
}
.p-article_vote_reaction_btn.-disLike {
  background-color: var(--color-base);
  color: var(--color-default);
}
@media (hover: hover) and (pointer: fine) {
  .p-article_vote_reaction_btn.-disLike:hover {
    color: var(--color-base);
    background-color: var(--color-default);
  }
}
.p-article_series {
  margin-top: 72px;
}
.p-article_series_contents {
  display: flex;
  justify-content: space-between;
  padding-left: 28px;
  padding-right: 28px;
}
.p-article_series_contents .p-article_series_card:only-child {
  margin-left: auto;
  margin-right: auto;
}
.p-article_series_card {
  width: 306px;
}
.p-article_series_list {
  flex: 1;
  margin-left: 32px;
}
.p-article_series_prevBtn, .p-article_series_nextBtn {
  position: relative;
  color: var(--color-theme);
  font-size: 20px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}
.p-article_series_prevBtn::before, .p-article_series_nextBtn::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  width: 24px;
  height: 24px;
  background: url(/images/onb/2024/ico_arrow_right_purple.svg) right center/24px auto no-repeat;
  transform: translateY(-50%);
}
@media (hover: hover) and (pointer: fine) {
  .p-article_series_prevBtn:hover, .p-article_series_nextBtn:hover {
    text-decoration: underline;
  }
}
.p-article_series_prevBtn {
  padding-left: 28px;
  margin-bottom: 12px;
}
.p-article_series_prevBtn::before {
  left: 0;
  transform: translateY(-50%) rotate(180deg);
}
.p-article_series_nextBtn {
  padding-right: 28px;
  margin-top: 32px;
  margin-bottom: 12px;
}
.p-article_series_nextBtn::before {
  right: 0;
}
.p-article_relatedArticleCard {
  width: 686px;
  padding: 24px 16px;
  margin: 48px auto 24px;
  border: 1px solid var(--color-theme);
}
.p-article_relatedArticleCard_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-line-gray);
}
.p-article_relatedArticleCard_title {
  flex-grow: 1;
  margin: 0;
  font-size: 18px;
}
.p-article_relatedArticleCard_follow {
  flex-shrink: 0;
}
.p-article_relatedArticleCard_follow .c-follow_text {
  margin-right: 16px;
  margin-bottom: 0;
  font-size: 16px;
}
.p-article_relatedArticleCard_list_item {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1.5;
}
.p-article_relatedArticleCard_list_item + .p-article_relatedArticleCard_list_item {
  margin-top: 12px;
}
.p-article_relatedArticleCard_list_item .-number {
  flex-shrink: 0;
  display: inline-block;
  margin-right: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.p-article_relatedArticleCard_list_item a {
  color: var(--color-gray);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.p-article_relatedArticleCard_list_item a.-purple {
  color: var(--color-theme);
}
.p-article_parentArticleCard {
  padding: 24px;
  margin-top: 48px;
  margin-bottom: 32px;
  background-color: var(--color-base);
  border-radius: 4px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  clear: both;
}
.p-article_parentArticleCard_follow {
  width: 194px;
  margin-right: auto;
  margin-left: auto;
  justify-content: center;
  padding-top: 16px;
}
.p-article_parentArticleCard_follow .c-follow_text {
  margin-bottom: 0;
}
.p-article_parentArticleCard_follow .c-follow_total {
  margin-bottom: 4px;
  font-size: 10px;
  line-height: 1.5;
  text-align: left;
}
.p-article_parentArticleCard_linkBtn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  color: var(--color-red);
  font-size: 11px;
  line-height: 1.1;
  text-align: right;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_parentArticleCard_linkBtn:hover {
    text-decoration: underline;
  }
}
.p-article_campaignCard {
  padding: 24px;
  margin-top: 48px;
  margin-bottom: 32px;
  background-color: var(--color-line-gray);
  border-radius: 4px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
}
.p-article_campaignCard_heading {
  margin-bottom: 22px;
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
}
.p-article_campaignCard_contents {
  display: flex;
}
.p-article_campaignCard_image {
  flex-basis: 150px;
  width: 150px;
}
.p-article_campaignCard_info {
  flex-basis: calc(100% - 174px);
  display: flex;
  flex-direction: column;
  width: calc(100% - 174px);
  margin-left: 24px;
}
.p-article_campaignCard_title {
  width: 100%;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
}
.p-article_campaignCard_description {
  width: 100%;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}
.p-article_campaignCard_linkBtn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 24px;
  margin-top: auto;
  margin-left: auto;
  margin-bottom: 8px;
  background: url(/images/onb/2024/ico_external_link.svg) right center/16px auto no-repeat;
  font-size: 11px;
  line-height: 1.1;
  text-align: right;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_campaignCard_linkBtn:hover {
    text-decoration: underline;
  }
}
.p-article_registerCard {
  padding: 24px;
  margin-top: 32px;
  margin-bottom: 32px;
  background-color: var(--color-base);
  border-radius: 4px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
}
.p-article_registerCard_title {
  margin-top: 24px;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.p-article_registerCard_text {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}
.p-article_seriesFollowCard {
  padding: 24px;
  margin-top: 32px;
  margin-bottom: 32px;
  background-color: var(--color-base);
  border-radius: 4px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
}
.p-article_seriesFollowCard_text {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}
.p-article_seriesFollowCard_text a[target=_blank] {
  padding-right: 24px;
  background-size: 16px auto;
}
.p-article_seriesFollowCard_follow {
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid var(--color-line-gray);
}
.p-article_seriesFollowCard_follow .c-follow_text {
  margin-bottom: 0;
}
.p-article_nextPage {
  display: flex;
  align-items: center;
  width: 417px;
  padding: 11px 21px;
  margin: 0 auto 32px;
  border-radius: 8px;
  border: 1px solid var(--color-theme);
  color: var(--color-default);
  text-decoration: none;
  transition: background 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .p-article_nextPage:hover {
    background-color: var(--color-light-purple);
  }
}
.p-article_nextPage_title {
  flex-shrink: 0;
  margin-right: 12px;
  color: var(--color-theme);
  font-size: 12px;
  font-weight: 700;
}
.p-article_nextPage_text {
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  white-space: nowrap;
}
.p-article_adTextList {
  margin-bottom: 32px;
}
.p-article_adTextList li {
  margin-top: 0;
  line-height: 1;
}
.p-article_adTextList > li:not([class]) > div {
  padding:0 16px 16px;
  background-color: var(--color-light-purple);
}
.p-article_adTextList > li:first-child:not([class]) > div {
  padding-top: 16px;
}
.p-article_ad > div > div {
  margin: 24px 0;
}
.p-article.-print {
  padding-top: 0;
}
.p-article.-print .p-article_header_point {
  padding: 0 0 24px;
}
@media screen and (max-width: 1440px) {
  .p-article_menu {
    transform: translateX(-113px);
  }
}

body.print .p-article_header_point {
  width: 100%;
}
body.print .p-article_body {
  width: 100%;
}

.p-article_cpBox {
  margin-top: 48px;
  padding: 32px 32px 16px;
  border: 1px solid rgba(229, 1, 33, 0.2);
  background-color: rgba(229, 1, 33, 0.06);
}
.p-article_cpBox p {
  margin: 0 0 16px;
  font-size: var(--base-font-size);
}
.p-article_cpBox .bpimage_right {
  margin: 5px 0 20px 20px;
}
.p-article_cpBox .bpimage_left {
  margin: 5px 20px 20px 0;
}

/* =================================================
  .p-articleBooks
================================================= */
.p-articleBooks {
  position: relative;
  width: calc(var(--contents-width) + 113px);
  margin: 0 auto;
  padding-top: 24px;
  padding-right: 113px;
}
.p-articleBooks_menu {
  position: absolute;
  top: 202px;
  transform: translateX(-225px);
  z-index: var(--z-index-utility);
  width: 81px;
  padding: 24px 0;
  background-color: var(--color-base);
  border-radius: 60px;
  text-align: center;
}
.p-articleBooks_menu_item + .p-articleBooks_menu_item {
  margin-top: 48px;
}
.p-articleBooks_menu_item_label {
  display: block;
  margin-bottom: 12px;
  color: var(--color-gray);
  font-size: 12px;
  font-family: var(--font-family-jp-inter);
}
.p-articleBooks_menu_item_label .-help img {
  display: inline-block;
  vertical-align: -2px;
}
.p-articleBooks_menu_btn {
  display: block;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: opacity 0.2s linear;
}
.p-articleBooks_menu_btn.-gift {
  background-image: url(/images/onb/2024/ico_gift.svg);
}
.p-articleBooks_menu_btn.-bookmark {
  background-image: url(/images/onb/2024/ico_bookmark.svg);
}
.p-articleBooks_menu_btn.-bookmark.is-active {
  background-image: url(/images/onb/2024/ico_bookmark_black.svg);
}
@media (hover: hover) and (pointer: fine) {
  .p-articleBooks_menu_btn:hover {
    opacity: 0.6;
  }
}
.p-articleBooks_menu_share_item {
  position: relative;
}
.p-articleBooks_menu_share_item + .p-articleBooks_menu_share_item {
  margin-top: 32px;
}
.p-articleBooks_menu_share_btn {
  display: block;
  width: 24px;
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.2s linear;
}
.p-articleBooks_menu_share_btn.-facebook {
  background-image: url(/images/onb/2024/ico_facebook_02.svg);
}
.p-articleBooks_menu_share_btn.-twitter {
  height: 19px;
  background-image: url(/images/onb/2024/ico_twitter.svg);
}
.p-articleBooks_menu_share_btn.-copy {
  background-image: url(/images/onb/2024/ico_copy.svg);
}
.p-articleBooks_menu_share_btn.-copy.is-copied + .p-article_menu_share_balloon {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .p-articleBooks_menu_share_btn:hover {
    opacity: 0.6;
  }
}
.p-articleBooks_menu_share_balloon {
  position: absolute;
  top: 50%;
  left: 92px;
  transform: translateY(-50%);
  display: none;
  width: -moz-max-content;
  width: max-content;
  padding: 16px;
  background-color: var(--color-base);
  border-radius: 8px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  font-size: 12px;
  font-weight: 700;
}
.p-articleBooks_setFontsize {
  position: relative;
}
.p-articleBooks_setFontsize_toggle {
  transition: opacity 0.2s linear;
}
.p-articleBooks_setFontsize_toggle.is-active + .p-article_setFontsize_balloon {
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .p-articleBooks_setFontsize_toggle:hover {
    opacity: 0.7;
  }
}
.p-articleBooks_setFontsize_balloon {
  position: absolute;
  top: 50%;
  left: calc(100% + 11px);
  transform: translateY(-50%);
  display: none;
  padding: 13px 16px 14px;
  background-color: var(--color-base);
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  text-align: center;
}
.p-articleBooks_setFontsize_balloon_title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.p-articleBooks_setFontsize_list {
  display: flex;
}
.p-articleBooks_setFontsize_item {
  width: 48px;
  height: 48px;
}
.p-articleBooks_setFontsize_item + .p-articleBooks_setFontsize_item {
  margin-left: 16px;
}
.p-articleBooks_setFontsize_btn {
  display: grid;
  width: 100%;
  height: 100%;
  place-content: center;
  border: 1px solid var(--color-line-gray);
  font-size: 18px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
}
.p-articleBooks_setFontsize_btn.is-active {
  border-color: var(--color-theme);
}
.p-articleBooks_header {
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line-gray);
}
.p-articleBooks_header .p-parentArticleHero {
  margin-bottom: 40px;
}
.p-articleBooks_header_chapter {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.75;
}
.p-articleBooks_header_title {
  font-size: 24px;
  font-weight: 700;
}
.p-articleBooks_header_author {
  margin-top: 12px;
  color: var(--color-gray);
  font-size: 16px;
}
.p-articleBooks_footer {
  margin-top: 32px;
}
.p-articleBooks_footer_tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: -8px;
  margin-left: -8px;
}
.p-articleBooks_footer_tags_item {
  margin-top: 8px;
  margin-left: 8px;
}
.p-articleBooks_footer_tags_item a {
  display: block;
  padding: 1px 15px;
  background-color: var(--color-default);
  border: 1px solid var(--color-default);
  border-radius: 76px;
  transition-property: background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  color: var(--color-base);
  font-size: 14px;
  text-decoration: none;
  line-height: 2;
}
@media (hover: hover) and (pointer: fine) {
  .p-articleBooks_footer_tags_item a:hover {
    color: var(--color-default);
    background-color: var(--color-base);
  }
}
.p-articleBooks_footer_btn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 260px;
  margin: 40px auto 0;
  padding: 12px 24px;
  background: var(--color-base);
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition-property: background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  text-align: center;
  text-decoration: none;
  color: var(--color-default);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
  .p-articleBooks_footer_btn:hover {
    background-color: var(--color-theme);
    color: var(--color-base);
  }
}
.p-articleBooks_pagenation {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--color-line-gray);
}
.p-articleBooks_pagenation_item {
  flex: 1;
  line-height: 1.6;
}
.p-articleBooks_pagenation_item.-prev {
  margin-right: 32px;
}
.p-articleBooks_pagenation_item.-prev .p-articleBooks_pagenation_item_label {
  padding-left: 28px;
}
.p-articleBooks_pagenation_item.-prev .p-articleBooks_pagenation_item_label::before {
  position: absolute;
  content: "";
  display: block;
  top: 5px;
  transform: scaleX(-1);
  left: 0;
  width: 24px;
  height: 24px;
  background: url(/images/onb/2024/ico_arrow_right_purple.svg) center/contain no-repeat;
}
.p-articleBooks_pagenation_item.-next {
  margin-left: auto;
  text-align: right;
}
.p-articleBooks_pagenation_item.-next .p-articleBooks_pagenation_item_label {
  padding-right: 28px;
}
.p-articleBooks_pagenation_item.-next .p-articleBooks_pagenation_item_label::after {
  position: absolute;
  content: "";
  display: block;
  top: 5px;
  right: 0;
  width: 24px;
  height: 24px;
  background: url(/images/onb/2024/ico_arrow_right_purple.svg) center/contain no-repeat;
}
.p-articleBooks_pagenation_item a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: var(--color-default);
}
@media (hover: hover) and (pointer: fine) {
  .p-articleBooks_pagenation_item a:hover .p-articleBooks_pagenation_item_title {
    color: var(--color-theme);
  }
}
.p-articleBooks_pagenation_item_label {
  position: relative;
  color: var(--color-theme);
  font-size: 20px;
  font-weight: 700;
}
.p-articleBooks_pagenation_item_label + * {
  margin-top: 14px;
}
.p-articleBooks_pagenation_item_chapter {
  font-size: 14px;
  color: var(--color-gray);
}
.p-articleBooks_pagenation_item_title {
  font-size: 16px;
  font-weight: 700;
}
.p-articleBooks_bookList {
  width: 791px;
  margin: 64px auto 0;
}
.p-articleBooks_bookList .p-bookList.-new .p-bookList_list {
  display: block;
  margin: 0;
}
.p-articleBooks_bookList .p-bookList.-new .p-bookList_item {
  width: auto;
  margin: 0;
}
.p-articleBooks_bookList .p-bookList.-new .p-bookList_item + .p-bookList_item {
  margin-top: 64px;
}
.p-articleBooks_bookList .p-bookList.-new .p-bookList_item_image {
  width: 162px;
}
.p-articleBooks_bookList .p-bookList.-new .p-bookList_item_image img {
  width: 100%;
}

/* =================================================
  .p-parentArticleHeader
================================================= */
.p-parentArticleHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  margin-bottom: 16px;
  border-top: 1px solid var(--color-line-gray);
}
.p-parentArticleHeader_title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.6px;
}
.p-parentArticleHeader_viewrLink {
  margin-left: auto;
  margin-right: 0;
}

/* =================================================
  .p-parentArticleBooks
================================================= */
.p-parentArticleBooks_header {
  display: flex;
}
.p-parentArticleBooks_header_image {
  width: 230px;
  margin-right: 32px;
  text-align: center;
}
.p-parentArticleBooks_header_contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.p-parentArticleBooks_header_title {
  font-size: 18px;
  font-weight: 700;
}
.p-parentArticleBooks_header_description {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.p-parentArticleBooks_header_info {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-gray);
}
.p-parentArticleBooks_header_author {
  margin-right: 16px;
  font-family: var(--font-family-jp-inter);
}
.p-parentArticleBooks_header_date {
  margin-left: auto;
}
.p-parentArticleBooks_header_btn {
  margin-top: 32px;
}
.p-parentArticleBooks_body {
  margin-top: 40px;
}
.p-parentArticleBooks_body .articleBody {
  padding-top: 16px;
}
.p-parentArticleBooks_body .articleBody .chapter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line-gray);
}
.p-parentArticleBooks_body .articleBody .chapter + .chapter {
  margin-top: 24px;
}
.p-parentArticleBooks_body .articleBody .chapter a {
  text-decoration: none;
  color: var(--color-default);
}
.p-parentArticleBooks_body .articleBody .chapter .title {
  width: 118px;
  font-size: 18px;
  font-weight: 700;
}
.p-parentArticleBooks_body .articleBody .chapter .heading {
  width: calc(100% - 118px);
  margin-left: auto;
}
.p-parentArticleBooks_body .articleBody .chapter .heading h2 {
  position: relative;
  padding-left: 12px;
  font-size: 18px;
}
.p-parentArticleBooks_body .articleBody .chapter .heading h2::before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 2px;
  background-color: var(--color-theme);
}
.p-parentArticleBooks_body .articleBody .chapter .heading h2 a {
  display: block;
  padding-right: 24px;
  background: url(/images/onb/2024/ico_arrow_right_purple.svg) center right/auto 24px no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .p-parentArticleBooks_body .articleBody .chapter .heading h2 a:hover {
    color: var(--color-theme);
  }
}
.p-parentArticleBooks_body .articleBody .chapter .heading h3 {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin: 12px 0 0;
  padding: 0;
  background: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
}
.p-parentArticleBooks_body .articleBody .chapter .heading h3 a {
  display: block;
  width: 100%;
  padding-right: 24px;
  background: url(/images/onb/2024/ico_arrow_right_purple.svg) center right/auto 24px no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .p-parentArticleBooks_body .articleBody .chapter .heading h3 a:hover {
    color: var(--color-theme);
  }
}

/* =================================================
  .p-parentArticleHero
================================================= */
.p-parentArticleHero {
  position: relative;
  height: 441px;
}
.p-parentArticleHero_inner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.p-parentArticleHero_inner::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: var(--color-default);
  opacity: 0.2;
}
.p-parentArticleHero_link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: opacity 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .p-parentArticleHero_link:hover {
    opacity: 0.7;
  }
}
.p-parentArticleHero_link::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: var(--color-default);
  opacity: 0.2;
}
.p-parentArticleHero_text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 0 40px;
  color: var(--color-base);
  text-align: center;
}
.p-parentArticleHero_category {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 8px;
  padding: 2px 12px;
  background-color: var(--color-base);
  border: 1px solid var(--color-theme);
  border-radius: 30px;
  color: var(--color-default);
  font-size: 14px;
  line-height: 2;
}
.p-parentArticleHero_title {
  font-size: 24px;
  font-weight: 700;
}
.p-parentArticleHero_subTitle {
  margin-top: 8px;
  font-size: 20px;
  line-height: 1.65;
}
.p-parentArticleHero_image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.p-parentArticleHero_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-parentArticleHero_logo {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

/* =================================================
  .p-parentArticle
================================================= */
.p-parentArticle {
  padding-top: 24px;
}
.p-parentArticle_viewerLink {
  margin-top: 16px;
  margin-bottom: 32px;
}
.p-parentArticle_function {
  min-height: 60px;
  margin-top: 32px;
}
.p-parentArticle_function.tobira {
  margin: 32px 32px 0 0;
  display: flex;
  justify-content: right;
}
.p-parentArticle_follow {
  justify-content: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line-gray);
}
.p-parentArticle_follow.-bottom {
  padding-bottom: 0;
  border-bottom: none;
}
.p-parentArticle_follow_description {
  width: 531px;
  margin: 0 auto 32px;
  font-size: 18px;
  line-height: 1.85;
}
.p-parentArticle_follow .c-follow_total {
  font-size: 16px;
}
.p-parentArticle_follow .c-follow_text {
  margin-right: 20px;
  font-size: 20px;
}
.p-parentArticle_complete {
  display: block;
  width: 60px;
  padding: 5px 0;
  margin: 0 auto;
  border: 1px solid var(--color-gray);
  border-radius: 1px;
  font-weight: 500;
  text-align: center;
}
.p-parentArticle_body {
  margin-top: 32px;
  padding-left: 32px;
  padding-right: 32px;
}
.p-parentArticle_author {
  display: flex;
  justify-content: center;
  padding-top: 32px;
  padding-bottom: 32px;
  border-block: 1px solid var(--color-line-gray);
}
.p-parentArticle_author_item {
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}
.p-parentArticle_author_item a,
.p-parentArticle_author_item button {
  color: currentColor;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-parentArticle_author_item a:hover,
  .p-parentArticle_author_item button:hover {
    color: var(--color-theme);
  }
  .p-parentArticle_author_item a:hover .p-parentArticle_author_image img,
  .p-parentArticle_author_item button:hover .p-parentArticle_author_image img {
    transform: scale(1.06);
  }
  .p-parentArticle_author_item a:hover .p-parentArticle_author_image.-more,
  .p-parentArticle_author_item button:hover .p-parentArticle_author_image.-more {
    opacity: 1;
  }
  .p-parentArticle_author_item a:hover .p-parentArticle_author_image.-more img,
  .p-parentArticle_author_item button:hover .p-parentArticle_author_image.-more img {
    transform: none;
  }
}
.p-parentArticle_author_image {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  isolation: isolate;
}
.p-parentArticle_author_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-in-out;
}
.p-parentArticle_author_image img:only-child {
  width: 60px;
}
.p-parentArticle_author_image.-more {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 60px;
  border-radius: 0;
  opacity: 0.5;
  transition: opacity 0.1s linear;
}
.p-parentArticle_author_image.-more img {
  position: relative;
  width: 28px;
  height: 28px;
  margin-left: -10px;
  border-radius: 50%;
}
.p-parentArticle_author_image.-more img:last-child {
  margin-left: 0;
}
.p-parentArticle_author_name {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  font-weight: 700;
}

/* =================================================
  .p-readMore
================================================= */
.p-readMore_content {
  display: none;
}
.p-readMore_btn {
  position: relative;
  z-index: 1;
  display: none;
  margin: 12px 32px 0;
  padding: 15px 24px;
  border: 1px solid var(--color-theme);
  background-color: var(--color-base);
  cursor: pointer;
  text-align: center;
  clear: both;
}
@media (hover: hover) and (pointer: fine) {
  .p-readMore_btn:hover .p-readMore_btn_pageTitle {
    color: var(--color-theme);
  }
}
.p-readMore_btn_text {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 4px;
  padding-left: 28px;
  transition: color 0.2s linear;
  background: url(/images/onb/2024/ico_arrow_bottom_purple.svg) left center/24px auto no-repeat;
  color: var(--color-theme);
  font-size: 18px;
  line-height: 1.75;
}
.p-readMore_btn_pageTitle {
  color: var(--color-default);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}
.p-readMore_checkbox {
  display: none;
}
.p-readMore_checkbox:checked + .p-readMore_btn {
  /* display: none !important; */
  visibility: hidden;
  height: 1px;
  padding: 0;
}
.p-readMore_checkbox:checked + .p-readMore_content {
  display: block;
}
.p-readMore_checkbox:checked + .p-readMore_content + .p-readMore_checkbox + .p-readMore_btn {
  display: block;
}
.p-readMore_checkbox:checked + .p-readMore_btn + .p-readMore_content {
  display: block;
}
.p-readMore_checkbox:checked + .p-readMore_btn + .p-readMore_content + .p-readMore_checkbox + .p-readMore_btn {
  display: block;
}

/* =================================================
  .p-panel
================================================= */
.p-panel_item {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 1.6px 1.6px 8px 0 rgba(0, 0, 0, 0.1);
  isolation: isolate;
}
.p-panel_item_link {
  display: block;
  overflow: hidden;
  background-color: transparent;
}
.p-panel_item_link img {
  transition: transform 0.4s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .p-panel_item_link:hover img {
    transform: scale(1.06);
  }
}

/* =================================================
  .p-imageGrid
================================================= */
.p-imageGrid {
  display: grid;
  grid-template-rows: 269px 271px;
  grid-template-columns: 558px 1fr;
}
.p-imageGrid_item_link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-base);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-imageGrid_item_link:hover .p-imageGrid_item_image img {
    transform: scale(1.06);
  }
}
.p-imageGrid_item_contents {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(34, 34, 34, 0.3);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}
.p-imageGrid_item_title {
  width: calc(100% - 60px);
  color: var(--color-base);
  font-size: 30px;
  font-weight: 700;
  margin: 0 auto;
  text-align: center;
}
.p-imageGrid_item_description {
  width: 450px;
  margin: 11px auto 0;
  font-size: 18px;
  line-height: 2;
}
.p-imageGrid_item_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.p-imageGrid_item_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-in-out;
}
.p-imageGrid_item_linkBtn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 24px;
  margin: 12px auto 0;
  background: url(/images/onb/2024/ico_arrow_right_white.svg) right center no-repeat;
  color: var(--color-base);
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.5px;
  text-decoration: none;
}
.p-imageGrid_item.-left {
  grid-row: 1/3;
}
.p-imageGrid_item.-left .p-imageGrid_item_linkBtn {
  margin-top: 16px;
}
.p-imageGrid.-firstView {
  flex-grow: 1;
  display: block;
  height: auto;
}
.p-imageGrid.-firstView .p-imageGrid_item {
  width: 100%;
  height: 100%;
}
.p-imageGrid.-firstView .p-imageGrid_item_contents {
  padding: 16px 40.5px;
}
.p-imageGrid.-firstView .p-imageGrid_item_description {
  width: 100%;
  margin-top: 16px;
}
.p-imageGrid.-firstView .p-imageGrid_item_linkBtn {
  margin-top: 16px;
}
/*
@media screen and (max-width: 1380px) {
  .p-imageGrid {
    display: block;
  }
  .p-imageGrid_item.-left {
    height: 474px;
  }
  .p-imageGrid_item.-rightTop {
    height: 237px;
  }
  .p-imageGrid_item.-rightBottom {
    height: 237px;
  }
  .p-imageGrid.-firstView {
    height: 583px;
  }
}
*/

/* =================================================
  .p-timeMachine
================================================= */
.p-timeMachine {
  display: flex;
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
}
.p-timeMachine_header {
  flex-shrink: 0;
  flex-basis: 396px;
  width: 396px;
  padding: 71px 35px 40px 50px;
  background: var(--color-light-gray02);
}
.p-timeMachine_contents {
  flex-grow: 1;
  flex-basis: calc(100% - 396px);
  width: calc(100% - 396px);
  padding-top: 66px;
  overflow: hidden;
}
.p-timeMachine_title {
  font-size: 38px;
  font-family: var(--font-family-en);
  font-weight: 700;
  line-height: 1.25;
}
.p-timeMachine_title .-sub {
  display: block;
  margin-bottom: 7px;
  font-size: 21px;
  font-family: var(--font-family-jp);
}
.p-timeMachine_subTitle {
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  letter-spacing: 0.14px;
}
.p-timeMachine_description {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.5px;
}
.p-timeMachine_figcaption {
  text-align: center;
  margin-top: 20px;
}
.p-timeMachine_figcaption a {
  font-size: 10px;
  color: var(--color-gray);
  text-decoration: none;
}
.p-timeMachine_keyword {
  margin-top: 80px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}
.p-timeMachine_keyword_link {
  display: block;
  width: 247px;
  padding: 3px 0 2px;
  margin: 0 auto 8px;
  border-radius: 60px;
  border: 1px solid var(--color-theme);
  color: var(--color-theme);
  font-size: 24px;
  font-family: var(--font-family-jp-inter);
  line-height: 1.5;
  text-decoration: none;
}
.p-timeMachine_keyword_form {
  position: relative;
  width: 343px;
  margin: 0 auto;
}
.p-timeMachine_keyword_textField {
  width: 100%;
  padding: 0 40px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--color-default);
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  color: var(--color-theme);
  font-size: 24px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.p-timeMachine_keyword_textField::-moz-placeholder {
  color: var(--color-gray);
  font-size: 18px;
}
.p-timeMachine_keyword_textField::placeholder {
  color: var(--color-gray);
  font-size: 18px;
}
.p-timeMachine_keyword_submitBtn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  background: url(/images/onb/2024/ico_search_02.svg) center center/24px 24px no-repeat;
}
.p-timeMachine_keyword_text {
  margin-top: 4px;
}
.p-timeMachine_linkBtn {
  width: 260px;
  margin-top: 70px;
}
.p-timeMachine_slider {
  margin-top: 23px;
}
.p-timeMachine_slider_item {
  width: 472px;
  padding: 12px;
  margin: 0 auto;
  border-radius: 8px;
  background: var(--color-base);
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
}
.p-timeMachine_slider_item + .p-timeMachine_slider_item {
  margin-top: 16px;
}
.p-timeMachine_slider_item_link {
  display: flex;
  justify-content: space-between;
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-timeMachine_slider_item_link:hover .p-timeMachine_slider_item_title {
    color: var(--color-theme);
  }
  .p-timeMachine_slider_item_link:hover .p-timeMachine_slider_item_image img {
    transform: scale(1.06);
  }
}
.p-timeMachine_slider_item_link:visited .p-timeMachine_slider_item_title {
  color: var(--color-visited-link);
}
.p-timeMachine_slider_item_image {
  flex-shrink: 0;
  flex-basis: 120px;
  width: 120px;
  height: 120px;
  margin-right: 12px;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}
.p-timeMachine_slider_item_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-in-out;
}
.p-timeMachine_slider_item_contents {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: calc(100% - 132px);
  width: calc(100% - 132px);
}
.p-timeMachine_slider_item_footer {
  margin-top: auto;
}
.p-timeMachine_slider_item_spreadList {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 10px;
}
.p-timeMachine_slider_item_spreadList_item.-right {
  margin-left: auto;
}
.p-timeMachine_slider_item_subTitle {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 2.5px 8px 2px;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 60px;
  background-color: var(--color-theme);
  color: var(--color-base);
  font-size: 10px;
  font-family: var(--font-family-jp-inter);
  line-height: 1.6;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.p-timeMachine_slider_item_subTitle.-dark {
  background-color: var(--color-default);
}
.p-timeMachine_slider_item_title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.p-timeMachine_slider_item_author {
  color: var(--color-gray);
  font-size: 10px;
  font-family: var(--font-family-jp-inter);
}
.p-timeMachine_slider_item_date {
  color: var(--color-gray);
  font-size: 10px;
  font-family: var(--font-family-jp-inter);
}
.p-timeMachine_slider .splide__slide {
  padding: 10px 0;
}
.p-timeMachine_yearSlider {
  display: flex;
  width: 100%;
  margin: 0 auto;
}
.p-timeMachine_yearSlider_item {
  padding: 4px 16px;
  border-radius: 26px;
  border: 1px solid var(--color-theme);
  background-color: var(--color-base);
  transition-property: background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  color: var(--color-theme);
  font-family: var(--font-family-jp-inter);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
  .p-timeMachine_yearSlider_item:hover {
    color: var(--color-theme);
    background-color: var(--color-light-purple);
  }
}
.p-timeMachine_yearSlider_item.is-active {
  color: var(--color-base);
  background-color: var(--color-theme);
}
@media (hover: hover) and (pointer: fine) {
  .p-timeMachine_yearSlider_item.is-active:hover {
    color: var(--color-theme);
    background-color: var(--color-light-purple);
  }
}
.p-timeMachine_yearSlider_item.-disable:not([class*="is-active"]) {
  background-color: #ddd;
  color: #666;
  border-color: #666;
}
.p-timeMachine_yearSlider .splide__track {
  width: 100%;
  overflow: visible;
}
.p-timeMachine_point {
  position: relative;
  display: none;
  width: 48px;
  height: 48px;
  margin: 35px auto 0;
}
.p-timeMachine_point_inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 48px;
  height: 48px;
  padding: 7px 0;
  border-radius: 50%;
  background-color: var(--color-theme);
  color: var(--color-base);
  font-size: 10px;
  text-align: center;
}
.p-timeMachine_point_number {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-family-jp-inter);
  letter-spacing: 0.14px;
}
.p-timeMachine_point_unit {
  display: block;
}
.p-timeMachine_point_line {
  position: absolute;
  top: 48px;
  left: 48%;
  width: 1px;
  height: 1000px;
  max-height: 0;
  transition: max-height 0.2s linear;
  background-color: var(--color-theme);
}
.p-timeMachine_chart {
  position: relative;
  height: 200px;
  margin-top: 30px;
}
.p-timeMachine_chart_container {
  position: relative;
  top: 0;
  left: calc(50% - 4px);
  height: 200px;
  overflow-y: hidden;
  transition: transform 0.2s linear;
}
.p-timeMachine_chart_container canvas {
  aspect-ratio: unset !important;
}
.p-timeMachine_keywordList {
  margin-top: 40px;
}
.p-timeMachine_keywordList_section + .p-timeMachine_keywordList_section {
  margin-top: 8px;
}
.p-timeMachine_keywordList_title {
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.p-timeMachine.-firstView {
  display: block;
  min-height: 583px;
  box-shadow: none;
  background-color: var(--color-light-gray02);
}
.p-timeMachine.-firstView .p-timeMachine_header {
  width: 100%;
  background-color: transparent;
  padding: 22px 0 23.5px;
}
.p-timeMachine.-firstView .p-timeMachine_contents {
  flex-basis: 100%;
  width: 100%;
  padding: 0;
}
.p-timeMachine.-firstView .p-timeMachine_keyword {
  margin-top: 0;
}
.p-timeMachine.-firstView .p-timeMachine_slider {
  margin-top: 25px;
  z-index: 3;
}
.p-timeMachine.-firstView .p-timeMachine_slider_item {
  width: 343px;
}
.p-timeMachine.-firstView .p-timeMachine_point {
  position: absolute;
  bottom: 4px;
  z-index: 2;
  left: calc(50% - 24px);
  margin-top: 0;
  transition: transform 0.2s linear;
}
.p-timeMachine.-firstView .p-timeMachine_point_line {
  position: absolute;
  top: inherit;
  bottom: 0;
  left: 50%;
  transition: max-height 0.2s linear;
  background-color: var(--color-theme);
}
.p-timeMachine.-firstView .p-timeMachine_chart {
  position: relative;
  height: 208px;
  margin-top: 20px;
}
.p-timeMachine.-firstView .p-timeMachine_chart_container {
  height: 200px;
  overflow-y: visible;
}
.p-timeMachine.-firstView .p-timeMachine_chart canvas {
  margin-top: 0;
}
.p-timeMachine.-sidebar {
  display: block;
  box-shadow: none;
}
.p-timeMachine.-sidebar .p-timeMachine_header {
  flex-basis: 100%;
  width: 100%;
  padding: 0 16px;
  background-color: var(--color-base);
}
.p-timeMachine.-sidebar .p-timeMachine_contents {
  flex-basis: 100%;
  width: 100%;
  padding-top: 6px;
  overflow-y: visible;
}
.p-timeMachine.-sidebar .p-timeMachine_description {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.p-timeMachine.-sidebar .p-timeMachine_keyword {
  margin-top: 12px;
}
.p-timeMachine.-sidebar .p-timeMachine_linkBtn {
  margin-top: 14px;
}
.p-timeMachine.-sidebar .p-timeMachine_slider {
  margin-top: 0;
}
.p-timeMachine.-sidebar .p-timeMachine_slider_item {
  width: calc(100% - 16px);
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 8px;
  border-radius: 0;
}
.p-timeMachine.-sidebar .p-timeMachine_slider_item_image {
  flex-basis: 81px;
  width: 81px;
  height: 81px;
  margin-right: 16px;
  border-radius: 0;
}
.p-timeMachine.-sidebar .p-timeMachine_slider_item_contents {
  flex-basis: calc(100% - 97px);
  width: calc(100% - 97px);
}
.p-timeMachine.-sidebar .p-timeMachine_slider_item_footer {
  margin-top: 4px;
}
.p-timeMachine.-sidebar .p-timeMachine_point {
  position: absolute;
  top: inherit;
  bottom: 0;
  left: calc(50% - 24px);
  z-index: 2;
  margin: 0;
  transition: transform 0.2s linear;
}
.p-timeMachine.-sidebar .p-timeMachine_chart {
  position: relative;
  height: 220px;
  margin-top: 0;
}
.p-timeMachine.-sidebar .p-timeMachine_chart_container {
  height: 220px;
  padding-top: 8px;
  padding-bottom: 12px;
  overflow-y: visible;
}
.p-timeMachine.-sidebar .p-timeMachine_chart canvas {
  margin-top: 0;
}
.p-timeMachine.-page {
  margin-top: 8px;
  box-shadow: none;
}
.p-timeMachine.-page .p-timeMachine_header {
  flex-basis: 591px;
  width: 591px;
  padding: 16px 99px 59px 59px;
}
.p-timeMachine.-page .p-timeMachine_contents {
  flex-basis: calc(100% - 591px);
  width: calc(100% - 591px);
  padding-top: 72px;
}
.p-timeMachine.-page .p-timeMachine_keyword {
  margin-top: 35px;
}
.p-timeMachine.-page .p-timeMachine_description {
  margin-top: 16px;
}
.p-timeMachine.-page .p-timeMachine_slider {
  margin-top: 30px;
}
/*
@media screen and (max-width: 1380px) {
  body[data-page=top] .p-timeMachine {
    display: block;
  }
  body[data-page=top] .p-timeMachine_header {
    flex-basis: 100%;
    width: 100%;
    padding: 40px 87px 43px;
  }
  body[data-page=top] .p-timeMachine_contents {
    flex-basis: 100%;
    width: 100%;
    padding-top: 46px;
  }
  body[data-page=top] .p-timeMachine_keyword {
    margin-top: 43px;
  }
  body[data-page=top] .p-timeMachine_keyword_link {
    margin-bottom: 43px;
  }
  body[data-page=top] .p-timeMachine_linkBtn {
    margin-top: 43px;
  }
  body[data-page=top] .p-timeMachine_slider_item {
    width: calc(100% - 40px);
  }
}
*/

/* =================================================
  .p-textArticleList
================================================= */
.p-textArticleList_item_link {
  display: block;
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-textArticleList_item_link:hover {
    color: var(--color-theme);
  }
}
.p-textArticleList_item_subTitle {
  display: block;
  margin-bottom: 4px;
  color: var(--color-gray);
  font-size: 11px;
}
.p-textArticleList_item_title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.p-textArticleList.-ad {
  margin-top: 16px;
}
.p-textArticleList.-ad .p-textArticleList_item_link {
  padding: 16px;
}
.p-textArticleList.-ad .p-textArticleList_item_title {
  font-size: 18px;
  line-height: 1.5;
}
@media screen and (max-width: 1380px) {
  .p-textArticleList {
    --grid-gap: 8px;
  }
  .p-textArticleList_item {
    --grid-gap: 8px;
  }
}

/* =================================================
  .p-topicEditor
================================================= */
.p-topicEditor {
  max-width: 512px;
  min-width: 512px;
  padding: 16px 32px 32px;
  border-radius: 8px;
  background-color: var(--color-base);
}
.p-topicEditor_footer {
  padding-top: 17px;
}
.p-topicEditor_title {
  padding: 14px 0;
  margin-bottom: 32px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.p-topicEditor_scrollContainer {
  overflow-y: auto;
  max-height: 510px;
}
.p-topicEditor_group + .p-topicEditor_group {
  margin-top: 32px;
}
.p-topicEditor_group_title {
  margin-bottom: 32px;
  color: var(--color-gray);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.14px;
}
.p-topicEditor_completeBtn {
  width: 326px;
  border-radius: 12px;
}
.p-topicEditor_topicList_item {
  display: flex;
  align-items: center;
}
.p-topicEditor_topicList_item + .p-topicEditor_topicList_item {
  margin-top: 32px;
}
.p-topicEditor_topicList_item_btn {
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  transition: none;
  background: url(/images/onb/2024/ico_plus_circle.svg) center center/24px 24px no-repeat;
}
.p-topicEditor_topicList_item_label {
  font-weight: 700;
}
.p-topicEditor_topicList_item_handle {
  width: 24px;
  height: 24px;
  background: url(/images/onb/2024/ico_menu_gray.svg) center center/cover no-repeat;
  margin-left: auto;
  margin-right: 12px;
  cursor: grab;
}
.p-topicEditor_topicList_item.sortable-chosen {
  opacity: 0.7 !important;
}
.p-topicEditor_topicList_item.is-selected .p-topicEditor_topicList_item_btn {
  background-image: url(/images/onb/2024/ico_minus_circle.svg);
}
.p-topicEditor_closeBtn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
}

/* =================================================
  .p-topArticle
================================================= */
.p-topArticle {
  position: relative;
  width: 100%;
  margin-bottom: 32px;
  overflow: hidden;
}
.p-topArticle_link {
  position: relative;
  display: block;
  height: 443px;
  color: var(--color-base);
  text-decoration: none;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .p-topArticle_link:hover .p-topArticle_title {
    text-decoration: underline;
  }
  .p-topArticle_link:hover .p-topArticle_image img {
    transform: scale(1.06);
  }
}
.p-topArticle_inner {
  position: relative;
  z-index: 2;
  display: flex;
}
.p-topArticle_bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 443px;
}
.p-topArticle_bg img {
  transform: translateY(-25%);
}
.p-topArticle_image {
  flex-basis: 703px;
  width: 703px;
  height: 443px;
  overflow: hidden;
}
.p-topArticle_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-in-out;
}
.p-topArticle_contents {
  flex-basis: 617px;
  width: 617px;
  height: 443px;
  padding: 57px 73px 49px 63px;
  background-color: rgba(0, 0, 0, 0.54);
  -webkit-backdrop-filter: blur(7.5px);
          backdrop-filter: blur(7.5px);
}
.p-topArticle_footer {
  margin-top: 16px;
}
.p-topArticle_spreadList {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.p-topArticle_spreadList_item.-right {
  margin-left: auto;
}
.p-topArticle_subTitle {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 6px 8px;
  background-color: var(--color-default);
  border-radius: 60px;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.p-topArticle_subTitle.-red {
  background-color: var(--color-red);
}
.p-topArticle_title {
  font-size: 30px;
  line-height: 1.6;
}
.p-topArticle_description {
  margin-top: 8px;
  font-size: 14px;
  line-height: 2;
}
.p-topArticle_date {
  font-family: var(--font-family-jp-inter);
  font-size: 12px;
}
.p-topArticle_author {
  font-family: var(--font-family-jp-inter);
  font-size: 12px;
}
.p-topArticle_bookmarkBtn {
  position: absolute;
  top: 57px;
  right: 776px;
  z-index: 4;
}
/*
@media screen and (max-width: 1380px) {
  body[data-page=top] .p-topArticle {
    width: 812px;
  }
  body[data-page=top] .p-topArticle_link {
    height: 457px;
  }
  body[data-page=top] .p-topArticle_inner {
    display: block;
  }
  body[data-page=top] .p-topArticle_contents {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    flex-basis: 100%;
    width: 100%;
    height: auto;
    padding: 16px 32px;
  }
  body[data-page=top] .p-topArticle_footer {
    display: none;
  }
  body[data-page=top] .p-topArticle_bg {
    display: none;
  }
  body[data-page=top] .p-topArticle_image {
    flex-basis: 100%;
    width: 100%;
    height: 457px;
  }
  body[data-page=top] .p-topArticle_description {
    display: none;
  }
  body[data-page=top] .p-topArticle_bookmarkBtn {
    top: inherit;
    right: 32px;
    bottom: 127px;
  }
}
*/

/* =================================================
  .p-bookArticle
================================================= */
.p-bookArticle_link {
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-bookArticle_link:hover .p-bookArticle_title {
    color: var(--color-theme);
  }
}
.p-bookArticle_image {
  align-self: flex-start;
  margin-bottom: 32px;
  overflow: hidden;
  text-align: center;
}
.p-bookArticle_image a {
  display: block;
}
.p-bookArticle_image a img {
  transition: transform 0.4s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .p-bookArticle_image a:hover img {
    transform: scale(1.06);
  }
}
.p-bookArticle_subTitle {
  margin-bottom: 8px;
  color: var(--color-red);
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.14px;
}
.p-bookArticle_title {
  font-size: 20px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.p-bookArticle_viewerLink {
  margin-top: 8px;
}
.p-bookArticle_description {
  margin-top: 8px;
  color: var(--color-gray);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.p-bookArticle_btn {
  margin-top: 32px;
}
.p-bookArticle_arrowLink {
  margin-top: 16px;
  text-align: center;
}
.p-bookArticle.-recommend {
  background-color: transparent;
}
.p-bookArticle.-recommend .p-bookArticle_title {
  font-size: 16px;
  text-align: left;
}
.p-bookArticle.-recommend .p-bookArticle_description {
  margin-top: 16px;
}
.p-bookArticle.-recommend .p-bookArticle_btn {
  margin-top: 16px;
}
.p-bookArticle.-simple {
  background-color: transparent;
}
.p-bookArticle.-simple .p-bookArticle_image {
  margin-bottom: 12px;
}
.p-bookArticle.-simple .p-bookArticle_title {
  font-size: 16px;
  text-align: left;
}
.p-bookArticle.-simple .p-bookArticle_description {
  margin-top: 8px;
}
.p-bookArticle.-simple .p-bookArticle_btn {
  margin-top: 16px;
}
.p-bookArticle.-top .p-bookArticle_inner {
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
  background-color: var(--color-base);
}
.p-bookArticle.-top .p-bookArticle_image {
  flex-shrink: 1;
  flex-basis: 142px;
  width: 142px;
  margin-bottom: 0;
}
.p-bookArticle.-top .p-bookArticle_contents {
  flex-basis: calc(100% - 166px);
  width: calc(100% - 166px);
  margin-left: 24px;
}
.p-bookArticle.-top .p-bookArticle_btn {
  margin-top: 16px;
}

/* =================================================
  .p-bookList
================================================= */
.p-bookList_list {
  display: flex;
  flex-wrap: wrap;
  margin-top: -32px;
  margin-left: -60px;
}
.p-bookList_item {
  flex-basis: calc(20% - 60px);
  width: calc(20% - 60px);
  margin-top: 32px;
  margin-left: 60px;
}
.p-bookList_item_link {
  display: block;
  overflow: hidden;
}
.p-bookList_item_link img {
  transition: transform 0.4s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .p-bookList_item_link:hover img {
    transform: scale(1.06);
  }
}
.p-bookList.-new .p-bookList_item {
  flex-basis: calc(50% - 60px);
  width: calc(50% - 60px);
}
.p-bookList.-new .p-bookList_item_link {
  display: flex;
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-bookList.-new .p-bookList_item_link:hover .p-bookList_item_title {
    color: var(--color-theme);
  }
  .p-bookList.-new .p-bookList_item_link:hover .p-bookList_item_btn img {
    transform: scale(1);
  }
}
.p-bookList.-new .p-bookList_item_image {
  width: 193px;
  height: -moz-fit-content;
  height: fit-content;
  margin-right: 32px;
  overflow: hidden;
  text-align: center;
}
.p-bookList.-new .p-bookList_item_image img {
  transition: transform 0.4s ease-in-out;
}
.p-bookList.-new .p-bookList_item_contents {
  flex: 1;
}
.p-bookList.-new .p-bookList_item_title {
  font-size: 18px;
  font-weight: 700;
}
.p-bookList.-new .p-bookList_item_description {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
}
.p-bookList.-new .p-bookList_item_btn {
  margin-top: 32px;
}

/* =================================================
  .p-magazineList
================================================= */
.p-magazineList img {
  transition: transform 0.4s ease-in-out;
}
.p-magazineList_item_link {
  display: block;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .p-magazineList_item_link:hover img {
    transform: scale(1.06);
  }
}

/* =================================================
  .p-mypageHeader
================================================= */
.p-mypageHeader {
  display: block;
  padding-top: 12px;
  margin-bottom: 32px;
  text-align: center;
}
.p-mypageHeader .avatarCircle {
  margin: 0 auto;
  width: 80px;
  height: 80px;
}
.p-mypageHeader .info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}
.p-mypageHeader .textAuthortitle {
  width: 100%;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
}
.p-mypageHeader .textAuthorName {
  font-size: 18px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
}
.p-mypageHeader .displayName {
  color: var(--color-dark-gray);
  font-size: 12px;
  font-weight: 500;
}
.p-mypageHeader .nbPoint {
  margin-top: 4px;
}
.p-mypageHeader .setting {
  margin-top: 0;
  margin-left: 12px;
}
.p-mypageHeader .setting a,
.p-mypageHeader .setting button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 3px 10px;
  border: 1px solid var(--color-default);
  background-color: var(--color-default);
  border-radius: 4px;
  color: var(--color-base);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s linear, background 0.2s linear;
}
@media (hover: hover) and (pointer: fine) {
  .p-mypageHeader .setting a:hover,
  .p-mypageHeader .setting button:hover {
    color: var(--color-default);
    background-color: var(--color-base);
  }
}

/* =================================================
  .p-mypageNotice
================================================= */
.p-mypageNotice {
  padding: 32px;
  background-color: var(--color-line-gray);
  text-align: center;
}
.p-mypageNotice_number {
  margin: 0 0 24px;
  font-size: 18px;
  text-align: center;
}
.p-mypageNotice_number .-number {
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
}
.p-mypageNotice_text {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 24px;
}
.p-mypageNotice_box {
  padding: 24px 0;
  border-radius: 8px;
  background-color: var(--color-base);
  font-size: 16px;
}
.p-mypageNotice_image {
  margin: 32px 0;
  text-align: center;
}
.p-mypageNotice_btn {
  margin-top: 24px;
}
.p-mypageNotice_btn .c-btnFill {
  margin: 0;
}
.p-mypageNotice_btn .c-btnFill + .p-mypageNotice_btn .c-btnFill {
  margin-top: 12px;
}

/* =================================================
  .p-pagination
================================================= */
.p-pagination {
  margin: 48px 0 0;
}
.p-pagination_list {
  display: flex;
  justify-content: center;
}
.p-pagination_list_item {
  min-width: 44px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
}
.p-pagination_list_item:not(:first-child) {
  margin-left: 12px;
}
.p-pagination_list_item:not(.-current, .-prev, .-next) a {
  background-color: var(--color-base);
  border-radius: 50%;
  border: 1px solid var(--color-line-gray03);
}
.p-pagination_list_item a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
  text-decoration: none;
  color: currentColor;
  transition: background-color 0.2s linear;
}
.p-pagination_list_item.-current {
  width: 50px;
  background-color: var(--color-theme);
  color: var(--color-base);
  font-family: var(--font-family-jp-inter);
}
.p-pagination_list_item:not(.-prev, .-next) a {
  font-family: var(--font-family-jp-inter);
}
@media (hover: hover) and (pointer: fine) {
  .p-pagination_list_item:not(.-prev, .-next) a:hover {
    background-color: var(--color-light-purple);
  }
}
.p-pagination_list_item.-prev a, .p-pagination_list_item.-next a {
  background: url(/images/onb/2024/ico_arrow_right_purple.svg) center/auto 24px no-repeat;
}
.p-pagination_list_item.-prev {
  transform: scale(-1, 1);
}
.p-pagination.-mt-lg {
  margin-top: 32px;
}

/* =================================================
  .p-information
================================================= */
.p-information {
  padding-top: 12px;
  background-color: var(--color-base);
}
.p-information_header {
  position: relative;
  box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.1), inset 0 2px 4px 0px rgba(0, 0, 0, 0.1);
  padding: 16px 0;
}
.p-information_title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.p-information_contents {
  width: 600px;
  padding-top: 4px;
  padding-bottom: 30px;
  margin: 0 auto;
}
.p-information_list_item {
  border-bottom: 1px solid var(--color-line-gray);
}
.p-information_list_item_link {
  display: block;
  padding: 15px 0 15px 26px;
  color: var(--color-default);
  font-size: 16px;
  line-height: 1.75;
  text-decoration: none;
}
.p-information_list_item_date {
  display: block;
  color: var(--color-gray);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.p-information_list_item.-new .p-information_list_item_link {
  position: relative;
}
.p-information_list_item.-new .p-information_list_item_link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-red);
  transform: translateY(-50%);
}
.p-information_closeBtn {
  position: absolute;
  right: 60px;
  top: 18px;
  width: 24px;
  height: 24px;
  background: transparent url(/images/onb/2024/ico_cross_02.svg) center center/24px 24px no-repeat;
}

/* =================================================
  .p-search
================================================= */
.p-search {
  padding-top: 21px;
  margin-bottom: 16px;
}
.p-search_form {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  width: 100%;
  height: 44px;
}
.p-search_form::-moz-placeholder {
  color: var(--color-gray);
}
.p-search_form::placeholder {
  color: var(--color-gray);
}
.p-search_field {
  width: 100%;
  height: 44px;
  padding: 11px 36px 11px 12px;
  background-color: var(--color-base);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.75;
}
.p-search_submitBtn {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  background: transparent url(/images/onb/2024/ico_search.svg) center center no-repeat;
  vertical-align: top;
}
.p-search_container {
  margin-bottom: 30px;
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--color-line-gray);
}
.p-search_selecter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 16px;
}
.p-search_chips_list {
  display: flex;
  flex-wrap: wrap;
  margin-top: -12px;
  margin-left: -12px;
}
.p-search_chips_list:empty {
  margin-top: -16px;
  margin-left: 0;
}
.p-search_chips_item {
  margin-top: 12px;
  margin-left: 12px;
}
.p-search_footer {
  display: flex;
  justify-content: space-between;
}
.p-search_sortList {
  margin-left: auto;
}
.p-search_count {
  font-size: 18px;
  font-weight: 700;
}
.p-search_noresult {
  margin: 32px 0 64px;
  font-size: 16px;
  line-height: 1.8;
}
.p-search.-mypageTimeline {
  padding-top: 0;
  margin-bottom: 34px;
}
.p-search.-mypageBookmark {
  padding-top: 0;
  margin-bottom: 24px;
}
.p-search.-mypageBookmark .p-search_footer {
  padding-right: 8px;
}
.p-search.-mypageBookmark .p-search_count {
  font-size: 14px;
}
.p-search.-mypageFollow {
  padding-top: 0;
  margin-bottom: 24px;
}
.p-search.-mypageFollow .p-search_footer {
  padding-right: 8px;
}
.p-search.-mypageFollow .p-search_count {
  font-size: 14px;
}
.p-search.-topics {
  align-items: center;
  padding-top: 0;
  margin-bottom: 24px;
  border-top: 1px solid var(--color-line-gray03);
}
.p-search.-topics .p-search_footer {
  align-items: center;
}
.p-search.-topics .p-search_count {
  font-size: 14px;
}
.p-search.-backnumber {
  padding-top: 0;
}
.p-search.-backnumber .p-search_footer {
  padding-right: 10px;
  padding-left: 10px;
}
.p-search.-series {
  padding-top: 0;
  margin-bottom: 28px;
}
.p-search.-series .p-search_form {
  margin-bottom: 28px;
}
.p-search.-series .p-search_footer {
  padding: 0 10px;
}

/* =================================================
  .p-profileList
================================================= */
.p-profileList_item {
  display: flex;
}
.p-profileList_image {
  flex-shrink: 0;
  flex-basis: 60px;
  width: 60px;
  height: 60px;
  margin-right: 8px;
  border-radius: 60px;
  overflow: hidden;
  isolation: isolate;
}
.p-profileList_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease-in-out;
}
.p-profileList_contents {
  flex-basis: calc(100% - 51px);
  display: flex;
  align-items: center;
  width: calc(100% - 51px);
  margin-right: 8px;
}
.p-profileList_link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-profileList_link:hover .p-profileList_name {
    color: var(--color-theme);
  }
  .p-profileList_link:hover .p-profileList_image img {
    transform: scale(1.06);
  }
}
.p-profileList_info {
  flex-basis: calc(100% - 68px);
  width: calc(100% - 68px);
}
.p-profileList_name {
  transition: color 0.4s linear;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.p-profileList_alphabet {
  font-size: 12px;
}
.p-profileList_position {
  color: var(--color-gray);
  font-size: 12px;
  font-family: var(--font-family-jp);
}
.p-profileList_follow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  flex-basis: 43px;
  width: 43px;
}
.p-profileList.-modal {
  width: 305px;
  margin: 0 auto;
}
.p-profileList.-modal .p-profileList_list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: -32px;
}
.p-profileList.-modal .p-profileList_item {
  width: 100%;
  margin-top: 32px;
}

/* =================================================
  .p-termSelect
================================================= */
.p-termSelect {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 8px;
  width: max(100%, 360px);
  border-radius: 4px;
  background-color: var(--color-base);
  border: none;
}
.p-termSelect.is-open {
  display: block;
}
.p-termSelect_group {
  margin: 0;
  padding: 0;
  border: none;
}
.p-termSelect_title {
  padding-top: 16px;
  text-align: center;
  font-size: 14px;
}
.p-termSelect_list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
  margin-right: -12px;
}
.p-termSelect_list.-hasRange {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-right: -24px;
  padding: 0 16px 24px;
  text-align: center;
}
.p-termSelect_list.-hasRange .p-termSelect_item:nth-child(3n-1)[data-range] .p-termSelect_item_label_text::before, .p-termSelect_list.-hasRange .p-termSelect_item:nth-child(3n-1)[data-range-item] .p-termSelect_item_label_text::before,
.p-termSelect_list.-hasRange .p-termSelect_item:nth-child(3n)[data-range] .p-termSelect_item_label_text::before,
.p-termSelect_list.-hasRange .p-termSelect_item:nth-child(3n)[data-range-item] .p-termSelect_item_label_text::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: -50%;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: rgba(84, 12, 255, 0.2);
}
.p-termSelect_list.-hasRange .p-termSelect_item:not([data-range-item]) + [data-range] .p-termSelect_item_label_text::before {
  content: none;
}
.p-termSelect_list.-hasRange .p-termSelect_item_label_text {
  margin-right: 24px;
}
.p-termSelect_item_label {
  position: relative;
  cursor: pointer;
}
.p-termSelect_item_label_text {
  position: relative;
  display: block;
  padding: 2px 16px 3px;
  margin: 0 12px 16px 0;
  background-color: var(--color-base);
  border-radius: 16px;
  border: 1px solid #E4E4E4;
}
.p-termSelect_item_label input[type=radio] {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
}
.p-termSelect_item_label input[type=radio]:focus + .p-termSelect_item_label_text {
  border: 1px solid var(--color-gray);
}
.p-termSelect_item_label input[type=radio]:checked + .p-termSelect_item_label_text {
  border: 1px solid var(--color-theme);
}
.p-termSelect_item_label input[type=checkbox] {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
}
.p-termSelect_item_label input[type=checkbox]:focus + .p-termSelect_item_label_text {
  border: 1px solid var(--color-gray);
}
.p-termSelect_item_label input[type=checkbox]:checked + .p-termSelect_item_label_text {
  border: 1px solid var(--color-theme);
}
.p-termSelect_item:not([data-range])[data-range-item] input[type=checkbox]:checked + .p-termSelect_item_label_text {
  border: 1px solid #E4E4E4;
}

/* =================================================
  .p-author
================================================= */
.p-author {
  padding-top: 12px;
}
.p-author_avator {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 80px;
  overflow: hidden;
}
.p-author_nameWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-author_nameWrapper h1 {
  margin-right: 12px;
}
.p-author_nameWrapper .c-follow {
  display: inline-block;
}
.p-author_name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.p-author_alias {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.p-author_position {
  margin-top: 5px;
  color: var(--color-gray);
  font-size: 12px;
  text-align: center;
}
.p-author_description {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

/* =================================================
  .p-tips
================================================= */
.p-tips {
  padding-bottom: 30px;
}
.p-tips_header {
  margin-bottom: 14px;
}
.p-tips_title {
  font-size: 32px;
  font-weight: 800;
  font-family: var(--font-family-jp-inter);
}
.p-tips_subTitle {
  margin-top: -8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.p-tips_category {
  margin-bottom: 32px;
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-family-jp-inter);
}
.p-tips_image {
  margin-bottom: 20px;
  text-align: center;
}
.p-tips_number {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 231px;
  margin-bottom: 20px;
  font-size: 70px;
  font-family: var(--font-family-jp-inter);
  font-weight: 800;
}
.p-tips_chart {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 231px;
  margin-bottom: 20px;
}
.p-tips_text {
  padding: 12px 32px 0;
  margin-bottom: 32px;
  background: url(/images/onb/2024/ico_double_quotation_purple.svg) left 16px top/28px auto no-repeat;
  font-size: 16px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
}
.p-tips_text .-name {
  display: block;
  margin-top: 32px;
  font-size: 12px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
  letter-spacing: 0.12px;
}
.p-tips_date {
  font-size: 28px;
  font-family: var(--font-family-jp-inter);
  font-weight: 800;
}
.p-tips_articleLink {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 32px;
  color: var(--color-theme);
  font-size: 14px;
  line-height: 2;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-tips_articleLink:hover {
    text-decoration: underline;
  }
}
.p-tips.-keywords {
  padding-bottom: 11px;
}
.p-tips.-keywords .p-tips_text {
  font-size: 24px;
  line-height: 1.5;
}
.p-tips.-numbers .p-tips_text {
  letter-spacing: -0.2px;
}
.p-tips.-words {
  padding-bottom: 17px;
}
.p-tips.-words .p-tips_category {
  margin-bottom: 20px;
}
.p-tips.-words .p-tips_text {
  min-height: 228px;
  font-size: 24px;
  line-height: 1.5;
}

/* =================================================
  .p-topicsHeader
================================================= */
.p-topicsHeader {
  display: flex;
  justify-content: space-between;
  margin-bottom: 48px;
  padding: 24px 10px 0;
}
.p-topicsHeader_title {
  flex: 1;
  padding: 3px 0 8px 24px;
  border-left: 2px solid var(--color-theme);
  font-size: 32px;
  font-weight: 700;
}
.p-topicsHeader_title .-en {
  display: block;
  font-family: var(--font-family-jp-inter);
  font-size: 14px;
}
.p-topicsHeader_description {
  flex: 1;
  margin-left: 48px;
  font-size: 12px;
  line-height: 1.8;
}

/* =================================================
  .p-backnumberList
================================================= */
.p-backnumberList {
  display: flex;
  flex-wrap: wrap;
}
.p-backnumberList_item {
  display: block;
  padding-top: 10px;
}
.p-backnumberList_item_link {
  text-align: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-backnumberList_item_link:hover .p-backnumberList_item_title {
    color: var(--color-theme);
  }
}
.p-backnumberList_item_image {
  width: 216px;
  margin: 0 auto 16px;
}
.p-backnumberList_item_date {
  margin-bottom: 8px;
  color: var(--color-default);
  font-family: var(--font-family-jp-inter);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
}
.p-backnumberList_item_title {
  margin-bottom: 8px;
  color: var(--color-default);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}
.p-backnumberList_item_title .-sub {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.5px;
}
.p-backnumberList_item_viewerBtn {
  margin-bottom: 16px;
  text-align: left;
}

/* =================================================
  .p-paywall
================================================= */
.p-paywall_inner {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.p-paywall_inner.-books {
  max-width: 606px;
  background-color: #f6f6f6;
  padding-bottom: 20px;
}
.p-paywall_heading {
  text-align: center;
  color: var(--color-theme);
  font-size: 18px;
  line-height: 1.8;
}
.p-paywall_heading.-mypage {
  margin-bottom: 16px;
}
.p-paywall_title {
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.p-paywall_title.-topics {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.4px;
}
.p-paywall_title.-topics .-theme {
  color: var(--color-theme);
}
.p-paywall_subTitle {
  margin: 16px 0 24px;
  text-align: center;
  color: var(--color-default);
  font-size: 16px;
  line-height: 1.5;
}
.p-paywall_subTitle.-topics {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.8;
  text-align: left;
}
.p-paywall_panel {
  padding: 24px 16px;
  margin: 0 auto 16px;
  border-radius: 8px;
  background: var(--color-base);
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
}
.p-paywall_panel.-memberShip {
  margin-bottom: 24px;
}
.p-paywall_panel.-rhizome {
  padding: 24px 54px;
  margin-bottom: 24px;
}
.p-paywall_memberShip {
  padding: 7px 80px;
}
.p-paywall_memberShip_item {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.p-paywall_memberShip_item:not(:first-of-type) {
  padding-top: 24px;
  margin-top: 16px;
  border-top: 1px solid var(--color-line-gray);
}
.p-paywall_memberShip_item .list {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: calc(100% - 100px);
  padding-left: 32px;
}
.p-paywall_memberShip_item .list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 4px;
  background: url(/images/onb/2024/ico_checked_purple.svg) left center/24px 24px no-repeat;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.55px;
}
.p-paywall_memberShip_item_title {
  width: 100px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14px;
  text-align: right;
  align-self: center;
}
.p-paywall_memberShip_item_title .name {
  display: inline-block;
  padding-left: 0;
  margin: 0;
  color: #000;
  font-size: 18px;
  line-height: 1.5;
}
.p-paywall_memberShip_item_title .name::before {
  content: none;
}
.p-paywall_memberShip_item_title .name .-sub {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}
.p-paywall_paidOffer {
  text-align: center;
}
.p-paywall_paidOffer_title {
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.14px;
  text-align: center;
}
.p-paywall_paidOffer_list {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}
.p-paywall_paidOffer_list_item {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}
.p-paywall_paidOffer_list_item .-emphasis {
  color: var(--color-theme);
}
.p-paywall_link {
  margin: 16px 0 24px;
  font-size: 11px;
  line-height: 1.09;
  text-align: center;
}
.p-paywall_link a {
  color: var(--color-red);
  font-size: 14px;
  line-height: 1.09;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-paywall_link a:hover {
    text-decoration: underline;
  }
}
.p-paywall_link.-mypage {
  margin-bottom: 0;
}
.p-paywall_btn {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.p-paywall_btn:last-child {
  margin-bottom: 0;
}
.p-paywall_btn .c-btn.-themeBorder {
  color: var(--color-default);
}
@media (hover: hover) and (pointer: fine) {
  .p-paywall_btn .c-btn.-themeBorder:hover {
    color: var(--color-base);
  }
}
.p-paywall_btn .c-btn + .c-btn {
  margin-left: 12px;
}
@media (hover: hover) and (pointer: fine) {
  .p-paywall_btn .c-btn:hover {
    text-decoration: none;
  }
}
.p-paywall_description {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}
.p-paywall_description.-gift {
  font-weight: 700;
}
.p-paywall_description a {
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-paywall_description a:hover {
    text-decoration: underline;
  }
}
.p-paywall_image {
  text-align: center;
  margin-bottom: 24px;
}
.p-paywall_rhizomeSummary {
  font-size: 12px;
  line-height: 1.8;
}
.p-paywall_rhizomeSummary .-purple {
  color: var(--color-theme);
}
.p-paywall.-articleBody {
  position: relative;
  padding: 32px 0;
  clear: both;
}
.p-paywall.-articleBody:not(.-opaque)::before {
  position: absolute;
  content: "";
  display: block;
  top: -200px;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-light-gray) 100%);
}
.p-paywall.-gray {
  padding: 32px 16px;
  background-color: var(--color-line-gray);
}
body.-print .p-paywall {
  margin-bottom: 237px;
}
.articleSalesBanner {
  text-align: center;
}

/* =================================================
  .p-barChart
================================================= */
.p-barChart_list {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.p-barChart_list.-slim .p-barChart_axis {
  width: 47.29%;
}
.p-barChart_item + .p-barChart_item {
  margin-left: 32px;
}
.p-barChart_item.-top .p-barChart_axis {
  opacity: 1;
}
.p-barChart_item.-top .p-barChart_btn {
  color: var(--color-theme);
}
.p-barChart_item.-top .p-barChart_btn_icon.-pen::before {
  background-image: url(/images/onb/2024/ico_pen_purple.svg);
}
.p-barChart_item.-top .p-barChart_btn_icon.-loading::before {
  background-image: url(/images/onb/2024/ico_loading_purple.svg);
}
.p-barChart_item.-top .p-barChart_btn_icon.-eye::before {
  background-image: url(/images/onb/2024/ico_eye_purple.svg);
}
@media (hover: hover) and (pointer: fine) {
  .p-barChart_item.-top .p-barChart_btn:hover {
    color: var(--color-base);
    background-color: var(--color-theme);
  }
}
.p-barChart_number {
  margin-bottom: 12px;
  color: var(--color-theme);
  font-size: 24px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.p-barChart_axis {
  width: 107px;
  height: 241px;
  max-height: 241px;
  margin: 0 auto;
  background: var(--color-theme);
  border-radius: 4px;
  opacity: 0.2;
}
.p-barChart_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 180px;
  padding: 16px 18px;
  margin-top: 12px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  color: var(--color-default);
}
.p-barChart_btn_icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 4px;
}
.p-barChart_btn_icon::before, .p-barChart_btn_icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  background-position: center;
  background-size: 24px 24px;
  background-repeat: no-repeat;
}
.p-barChart_btn_icon::before {
  z-index: 2;
}
.p-barChart_btn_icon::after {
  opacity: 0;
}
.p-barChart_btn_icon.-pen::before {
  background-image: url(/images/onb/2024/ico_pen.svg);
}
.p-barChart_btn_icon.-pen::after {
  background-image: url(/images/onb/2024/ico_pen_white.svg);
}
.p-barChart_btn_icon.-loading::before {
  background-image: url(/images/onb/2024/ico_loading.svg);
}
.p-barChart_btn_icon.-loading::after {
  background-image: url(/images/onb/2024/ico_loading_white.svg);
}
.p-barChart_btn_icon.-eye::before {
  background-image: url(/images/onb/2024/ico_eye.svg);
}
.p-barChart_btn_icon.-eye::after {
  background-image: url(/images/onb/2024/ico_eye_white.svg);
}
.p-barChart_btn_text {
  display: block;
  font-size: 16px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  .p-barChart_btn:hover {
    color: var(--color-base);
    background-color: var(--color-default);
  }
  .p-barChart_btn:hover .p-barChart_btn_icon::before {
    opacity: 0;
  }
  .p-barChart_btn:hover .p-barChart_btn_icon::after {
    opacity: 1;
  }
}

/* =================================================
  .p-magazineSlider
================================================= */
.p-magazineSlider {
  position: relative;
  padding-top: 3px;
  margin-bottom: 32px;
}
.p-magazineSlider_slider {
  opacity: 0;
}
.p-magazineSlider_nav {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 100%;
  pointer-events: none;
}
.p-magazineSlider_prevBtn, .p-magazineSlider_nextBtn {
  width: 30px;
  height: 30px;
  background-position: center;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  pointer-events: auto;
}
.p-magazineSlider_prevBtn.-disabled, .p-magazineSlider_nextBtn.-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.p-magazineSlider_nextBtn {
  background-image: url(/images/onb/2024/ico_arrow_circle_left.svg);
}
.p-magazineSlider_prevBtn {
  background-image: url(/images/onb/2024/ico_arrow_circle_right.svg);
}
.p-magazineSlider_list {
  align-items: flex-end;
}
.p-magazineSlider_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: -moz-fit-content;
  width: fit-content;
  height: 282px;
  text-align: center;
}
.p-magazineSlider_item_link {
  text-decoration: none;
}
.p-magazineSlider_item_link img {
  width: 140px;
  height: auto;
}
@media (hover: hover) and (pointer: fine) {
  .p-magazineSlider_item_link:hover .p-magazineSlider_item_title {
    color: var(--color-theme);
  }
}
.p-magazineSlider_item_title {
  margin-top: 16px;
  transition: color 0.2s linear;
  color: var(--color-default);
  font-size: 16px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.5px;
}
.p-magazineSlider_item.is-active img {
  width: 180px;
}
.p-magazineSlider_linkBtn {
  position: absolute;
  z-index: 2;
  top: 153px;
  left: 65px;
  visibility: hidden;
  opacity: 0;
  transition-property: visibility, opacity;
  transition-duration: 0.2s;
  transition-timing-function: linear;
}

/* =================================================
  .p-settingNav
================================================= */
.p-settingNav {
  width: 496px;
}
.p-settingNav_item {
  padding-top: 16px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-line-gray);
  text-align: center;
}
.p-settingNav_item:first-of-type {
  padding-top: 0;
}
.p-settingNav_item:last-of-type {
  padding-bottom: 8px;
  border-bottom: none;
}
.p-settingNav_item a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  padding-right: 21px;
  background: url(/images/onb/2024/ico_external_link.svg) right center/16px 16px no-repeat;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.14px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-settingNav_item a:hover {
    text-decoration: underline;
  }
}

/* =================================================
  .p-gift
================================================= */
.p-gift_title {
  margin-bottom: 24px;
  color: var(--color-theme);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.p-gift_icon {
  margin-bottom: 24px;
  text-align: center;
}
.p-gift_description {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.p-gift_complete {
  width: 412px;
  padding: 10px 0;
  margin: 24px auto 0;
  border-radius: 8px;
  background-color: var(--color-line-gray);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.14px;
}
.p-gift_notice {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}
.p-gift_articleImage {
  padding-bottom: 28px;
  margin-top: 24px;
  text-align: center;
}
.p-gift_issueBtn {
  margin-top: 24px;
}
.p-gift_issueBtn .c-btn_label {
  font-size: 16px;
}

/* =================================================
  .p-articleCalendar
================================================= */
.p-articleCalendar,
.p-articleCalendar_picker {
  display: none;
}
.l-modal.is-open .p-articleCalendar {
  display: block;
}
.p-articleCalendar_resetBtn {
  margin-top: 16px;
}
.p-articleCalendar .flatpickr-calendar {
  margin: 0 auto;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-family: var(--font-family-jp-inter);
}
.p-articleCalendar .flatpickr-calendar.arrowTop::before, .p-articleCalendar .flatpickr-calendar.arrowTop::after {
  content: none;
}
.p-articleCalendar .flatpickr-current-month {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.p-articleCalendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  order: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  box-shadow: none;
  font-size: 18px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .p-articleCalendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background-color: #fff;
  }
}
.p-articleCalendar .flatpickr-current-month .numInputWrapper {
  order: 1;
  display: flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 14px;
}
.p-articleCalendar .flatpickr-current-month .numInputWrapper:after {
  content: "年";
}
.p-articleCalendar .flatpickr-current-month .numInputWrapper .numInput {
  width: 54px;
  font-size: 18px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .p-articleCalendar .flatpickr-day:hover {
    background-color: var(--color-light-purple);
  }
}
.p-articleCalendar .flatpickr-day.today {
  position: relative;
  z-index: 1;
  color: var(--color-base);
  background-color: transparent;
  border: none;
}
.p-articleCalendar .flatpickr-day.today::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  display: block;
  width: 25px;
  height: 25px;
  background-color: var(--color-red);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .p-articleCalendar .flatpickr-day.today:hover {
    background-color: var(--color-light-purple);
    border: none;
  }
}
.p-articleCalendar .flatpickr-day.selected {
  background-color: var(--color-theme);
}
@media (hover: hover) and (pointer: fine) {
  .p-articleCalendar .flatpickr-day.selected:hover {
    color: var(--color-default);
    background-color: var(--color-light-purple);
    border: none;
  }
}
.p-articleCalendar .flatpickr-day.nextMonthDay.selected {
  background-color: var(--color-theme);
}
@media (hover: hover) and (pointer: fine) {
  .p-articleCalendar .flatpickr-day.nextMonthDay.selected:hover {
    color: var(--color-default);
    background-color: var(--color-light-purple);
    border: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-articleCalendar .flatpickr-months .flatpickr-prev-month:hover svg,
  .p-articleCalendar .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-theme);
  }
}

/* =================================================
  .p-imageViewer
================================================= */
.p-imageViewer {
  width: 100%;
}
.p-imageViewer_title {
  margin-bottom: 40px;
  font-size: 24px;
  text-align: center;
}
.p-imageViewer_image {
  margin: 0 0 20px;
  text-align: center;
}
.p-imageViewer_image_caption {
  max-width: 643px;
  margin: 40px auto 0;
  color: var(--color-gray);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}
.p-imageViewer_closeBtn {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 32px auto 0;
  padding-left: 22px;
  background: url(/images/onb/2024/ico_cross_red.svg) left top 6px/12px 13px no-repeat;
  color: var(--color-red);
  font-size: 14px;
  line-height: 1.6;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-imageViewer_closeBtn:hover {
    text-decoration: underline;
  }
}
@media screen and (max-width: 767px) {
  .p-imageViewer_title {
    padding: 0 16px;
    font-size: 20px;
  }
  .p-imageViewer_image_caption {
    padding: 0 16px;
  }
}

/* =================================================
  .p-ankerLinkList
================================================= */
.p-ankerLinkList {
  margin-bottom: 32px;
}
.p-ankerLinkList_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.p-ankerLinkList_item + .p-ankerLinkList_item {
  margin-left: 32px;
}
.p-ankerLinkList_item a {
  display: block;
  padding: 2px 28px 2px 0;
  background: url(/images/onb/2024/ico_arrow_bottom_purple.svg) right center/24px 24px no-repeat;
  color: var(--color-default);
  font-size: 14px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  letter-spacing: 0.14px;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-ankerLinkList_item a:hover {
    text-decoration: underline;
  }
}

/* =================================================
  .p-syllabaryNav
================================================= */
.p-syllabaryNav {
  margin-bottom: 36px;
}
.p-syllabaryNav_list {
  display: flex;
  justify-content: center;
}
.p-syllabaryNav_item {
  width: 62px;
  height: 62px;
  border-top: 1px solid var(--color-line-gray);
  border-left: 1px solid var(--color-line-gray);
  border-bottom: 1px solid var(--color-line-gray);
}
.p-syllabaryNav_item a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition-property: background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  color: var(--color-default);
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .p-syllabaryNav_item a:hover {
    background-color: var(--color-light-purple);
  }
}
.p-syllabaryNav_item:last-of-type {
  border-right: 1px solid var(--color-line-gray);
}
.p-syllabaryNav_item.-current {
  border-color: var(--color-theme);
}
.p-syllabaryNav_item.-current + .p-syllabaryNav_item {
  border-left-color: var(--color-theme);
}
.p-syllabaryNav_item.-current a {
  background: var(--color-base);
}
@media (hover: hover) and (pointer: fine) {
  .p-syllabaryNav_item.-current a:hover {
    background-color: var(--color-theme);
    color: var(--color-base);
  }
}

/* =================================================
  .p-bookCommingSoon
================================================= */
.p-bookCommingSoon {
  margin-bottom: 64px;
  padding: 32px;
  background: #e8e4fb;
}
.p-bookCommingSoon_link {
  display: flex;
  margin: -32px;
  padding: 32px;
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .p-bookCommingSoon_link:hover .p-bookCommingSoon_image img {
    transform: scale(1.06);
  }
  .p-bookCommingSoon_link:hover .p-bookCommingSoon_title {
    color: var(--color-theme);
  }
}
.p-bookCommingSoon_image {
  width: 193px;
  height: -moz-fit-content;
  height: fit-content;
  margin-right: 32px;
  overflow: hidden;
  text-align: center;
}
.p-bookCommingSoon_image img {
  transition: transform 0.4s ease-in-out;
}
.p-bookCommingSoon_contents {
  flex: 1;
}
.p-bookCommingSoon_schedule {
  margin-bottom: 16px;
  color: var(--color-theme);
  font-size: 18px;
  font-weight: 700;
}
.p-bookCommingSoon_title {
  font-size: 24px;
  font-weight: 700;
}
.p-bookCommingSoon_description {
  font-size: 16px;
  line-height: 1.75;
}
.p-bookCommingSoon_author {
  margin-top: 8px;
  color: var(--color-gray);
  font-size: 12px;
  font-weight: 700;
}

/* =================================================
  .p-keywordSlider
================================================= */
.p-keywordSlider {
  position: relative;
}
.p-keywordSlider_nav {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 100%;
  pointer-events: none;
  transform: translateY(-50%);
}
.p-keywordSlider_prevBtn, .p-keywordSlider_nextBtn {
  width: 30px;
  height: 30px;
  background-position: center;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  pointer-events: auto;
}
.p-keywordSlider_prevBtn.-disabled, .p-keywordSlider_nextBtn.-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.p-keywordSlider_nextBtn {
  background-image: url(/images/onb/2024/ico_arrow_circle_right.svg);
}
.p-keywordSlider_prevBtn {
  background-image: url(/images/onb/2024/ico_arrow_circle_left.svg);
}
.p-keywordSlider .p-keywordSlider_item {
  margin-top: 2px;
  margin-bottom: 8px;
}
.p-keywordSlider_item {
  border-radius: 4px;
  box-shadow: 1.6px 1.6px 8px 0 rgba(0, 0, 0, 0.1);
}
.p-keywordSlider_item_link {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
}
.p-keywordSlider_item_link img {
  width: 98px;
  height: auto;
  transition: transform 0.4s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .p-keywordSlider_item_link:hover img {
    transform: scale(1.06);
  }
}
.p-keywordSlider_item_title {
  margin-top: 16px;
  transition: color 0.2s linear;
  color: var(--color-default);
  font-size: 16px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.5px;
}

/* =================================================
  .p-walkThrough
================================================= */
.p-walkThrough {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 90px);
  max-height: calc(var(--100dvh) - 90px);
  max-height: calc(100dvh - 90px);
}
.p-walkThrough_scrollContainer {
  flex: 1 1 calc(100% - 120px);
  width: 100%;
  height: calc(100% - 120px);
  padding-bottom: 10px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.p-walkThrough_header {
  margin-bottom: 32px;
}
.p-walkThrough_title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.p-walkThrough_description {
  margin-top: 16px;
  color: var(--color-gray);
  font-size: 14px;
  letter-spacing: 0.5px;
  line-height: 1.6;
  text-align: center;
}
.p-walkThrough_image {
  max-width: 448px;
  margin: 0 auto;
}
.p-walkThrough_section {
  margin-top: 32px;
}
.p-walkThrough_section_header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.p-walkThrough_section_title {
  color: var(--color-theme);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}
.p-walkThrough_section_hintBtn {
  width: 20px;
  height: 20px;
  margin-left: 4px;
}
.p-walkThrough_block + .p-walkThrough_block {
  margin-top: 32px;
}
.p-walkThrough_block_title {
  margin-bottom: 8px;
  color: var(--color-gray);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.14px;
}
.p-walkThrough_text {
  width: 412px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.65;
}
.p-walkThrough_footer {
  flex: 0 0 120px;
  height: 120px;
  padding: 32px;
}
.p-walkThrough_footer_btnGroup {
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-walkThrough_footer_cancelBtn {
  max-width: 411px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-color: var(--color-line-gray03);
  border-radius: 16px;
  color: var(--color-default);
  line-height: 1.5;
}
.p-walkThrough_footer_cancelBtn + .p-walkThrough_footer_nextBtn {
  margin-left: 10px;
}
.p-walkThrough_footer_nextBtn {
  max-width: 411px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-radius: 16px;
  line-height: 1.5;
}
.p-walkThrough.-series .p-card02 {
  width: 644px;
  margin-right: auto;
  margin-left: auto;
}
.p-walkThrough.-fontSize .p-walkThrough_scrollContainer {
  /* min-height: 480px; */
}
.p-walkThrough.-fontSize .p-walkThrough_header {
  margin-bottom: 24px;
}
.p-walkThrough.-fontSize .p-walkThrough_footer {
  margin-top: auto;
}

body.-fontSizeL .p-walkThrough_text {
  font-size: 22px;
  line-height: 1.5;
}

body.-fontSizeM .p-walkThrough_text {
  font-size: 18px;
  line-height: 1.65;
}

body.-fontSizeS .p-walkThrough_text {
  font-size: 14px;
  line-height: 2;
}

/* =================================================
  .p-topicCategoryList
================================================= */
.p-topicCategoryList_title {
  margin-bottom: 8px;
  font-size: 20px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1.6;
}
.p-topicCategoryList_description {
  font-size: 14px;
  line-height: 1.6;
}

/* =================================================
  鍵アイコン制御
================================================= */
body.notlogin .-titleLock {
  padding-left: 16px;
  background: url(/images/onb/2024/ico_lock.svg) left center/12px 12px no-repeat;
}
body.notlogin .p-articleList.-firstView .-titleLock {
  padding-left: 14px;
  background-size: 10px 10px;
  background-position: left top 1.5px;
}
body.notlogin .p-articleList.-sidebarRanking .-titleLock {
  padding-left: 14px;
  background-size: 10px 10px;
}
body.notlogin .p-articleList.-sidebar .-titleLock {
  padding-left: 14px;
  background-size: 10px 10px;
}
body.notlogin .p-timeMachine_slider .-titleLock {
  padding-left: 14px;
  background-size: 10px 10px;
}
body.nbodd .-titleLock.-nbdd {
  padding-left: 16px;
  background: url(/images/onb/2024/ico_lock.svg) left center/12px 12px no-repeat;
}
body.nbodd .p-articleList.-firstView .-titleLock.-nbdd {
  padding-left: 14px;
  background-size: 10px 10px;
  background-position: left top 1.5px;
}
body.nbodd .p-articleList.-sidebarRanking .-titleLock.-nbdd {
  padding-left: 14px;
  background-size: 10px 10px;
}
body.nbodd .p-articleList.-sidebar .-titleLock.-nbdd {
  padding-left: 14px;
  background-size: 10px 10px;
}
body.nbodd .p-timeMachine_slider .-titleLock.-nbdd {
  padding-left: 14px;
  background-size: 10px 10px;
}

/* =================================================
  Avatar
================================================= */
.avatarCircle {
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.avatarCircle img {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate(-50%, -50%);
}

.nbPoint {
  padding-left: 20px;
  background: url(/images/onb/2024/ico_lock.svg) left center/13px auto no-repeat;
  line-height: 1;
}
.nbPoint strong {
  color: var(--color-theme);
  font-weight: 700;
}

.l-header_loginBox .avatarUser a {
  display: flex;
  position: relative;
  align-items: center;
  height: 100%;
  font-size: 14px;
  font-weight: 700;
}
.l-header_loginBox .avatarUser a .avatarCircle {
  width: 32px;
  height: 32px;
}

/* -----------------------------------------------
  BPタグ
----------------------------------------------- */
:where(.articleBody) {
  --base-font-size: 18px;
  /* 図（縦積み）*/
  /* 図（エトキ右配置） */
}
:where(.articleBody) > *:first-child {
  margin-top: 0;
}
:where(.articleBody) > *:last-child {
  margin-bottom: 0;
}
:where(.articleBody) p {
  margin: 0 0 32px;
  color: var(--color-default);
  font-size: var(--base-font-size);
  line-height: 1.65;
}
:where(.articleBody) p a[target=_blank] {
  padding-right: 32px;
  background: url(/images/onb/2024/ico_external_link.svg) right 4px center/24px auto no-repeat;
}
:where(.articleBody) cite {
  font-style: normal;
}
:where(.articleBody) .bplead {
  padding: 30px;
  margin-bottom: 48px;
  background-color: var(--color-light-gray02);
  color: var(--color-default);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}
:where(.articleBody) h3:where(:not(.p-article_relatedArticleCard_title):not(.p-articleList_item_title):not(.p-article_campaignCard_heading):not(.p-article_registerCard_title)) {
  padding: 8px 20px;
  margin-top: 48px;
  margin-bottom: 24px;
  background-color: var(--color-light-gray02);
  clear: both;
  font-size: 24px;
  font-weight: 700;
}
:where(.articleBody) h4:where(:not(.p-article_campaignCard_title):not(.p-paywall_paidOffer_title)) {
  position: relative;
  padding-left: 8px;
  clear: both;
  margin-top: 32px;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
}
:where(.articleBody) h4:where(:not(.p-article_campaignCard_title):not(.p-paywall_paidOffer_title))::before {
  position: absolute;
  content: "";
  display: block;
  top: 3px;
  left: 0;
  width: 3px;
  height: calc(100% - 6px);
  background-color: var(--color-theme);
}
body.-fontSizeL h4:where(:not(.p-article_campaignCard_title):not(.p-paywall_paidOffer_title)) {
  font-size: 22px;
}
body.-fontSizeS h4:where(:not(.p-article_campaignCard_title):not(.p-paywall_paidOffer_title)) {
  font-size: 16px;
}
:where(.articleBody) h5 {
  position: relative;
  padding-left: 8px;
  margin-top: 24px;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
}
:where(.articleBody) h5::before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  height: calc(100% - 8px);
  margin: auto 0;
  background: var(--color-theme);
}
:where(.articleBody) h6 {
  position: relative;
  padding-left: 12px;
  margin-top: 16px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
}
:where(.articleBody) h6::before {
  position: absolute;
  content: "";
  display: block;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--color-theme);
}
:where(.articleBody) .fontSizeXXL {
  font-size: 2em;
}
:where(.articleBody) .fontSizeXL {
  font-size: 1.6666666667em;
}
:where(.articleBody) .fontSizeL {
  font-size: 1.3333333333em;
}
:where(.articleBody) .fontSizeS {
  font-size: 0.7777777778em;
}
:where(.articleBody) .fontSizeXS {
  font-size: 0.6666666667em;
}
:where(.articleBody) .textCol {
  color: #17004e;
}
:where(.articleBody) .textColTintA {
  color: #3b08b2;
}
:where(.articleBody) .textColTintB {
  color: var(--color-theme);
}
:where(.articleBody) .textColShade {
  color: #6666f3;
}
:where(.articleBody) .textColShadeA {
  color: #9696ff;
}
:where(.articleBody) .textColShadeB {
  color: #ccccff;
}
:where(.articleBody) .bgCol {
  color: var(--color-base);
  background-color: #17004e;
}
:where(.articleBody) .bgColTintA {
  color: var(--color-base);
  background-color: #3b08b2;
}
:where(.articleBody) .bgColTintB {
  color: var(--color-base);
  background-color: var(--color-theme);
}
:where(.articleBody) .bgColShade {
  color: var(--color-base);
  background-color: #6666f3;
}
:where(.articleBody) .bgColShadeA {
  color: var(--color-base);
  background-color: #9696ff;
}
:where(.articleBody) .bgColShadeB {
  color: var(--color-base);
  background-color: #ccccff;
}
:where(.articleBody) .textColBlackTintA {
  color: #424242;
}
:where(.articleBody) .textColBlackTintB {
  color: #5a5a5a;
}
:where(.articleBody) .textColBlackShade {
  color: var(--color-dark-gray);
}
:where(.articleBody) .textColBlackShadeA {
  color: #afafaf;
}
:where(.articleBody) .textColBlackShadeB {
  color: #e1e1e1;
}
:where(.articleBody) .bgColBlack {
  color: var(--color-base);
  background-color: var(--color-default);
}
:where(.articleBody) .bgColBlackTintA {
  color: var(--color-base);
  background-color: #424242;
}
:where(.articleBody) .bgColBlackTintB {
  color: var(--color-base);
  background-color: #5a5a5a;
}
:where(.articleBody) .bgColBlackShade {
  color: var(--color-base);
  background-color: var(--color-gray);
}
:where(.articleBody) .bgColBlackShadeA {
  color: var(--color-base);
  background-color: #afafaf;
}
:where(.articleBody) .bgColBlackShadeB {
  color: var(--color-base);
  background-color: #e1e1e1;
}
:where(.articleBody) .textColBlack {
  color: var(--color-default);
}
:where(.articleBody) .textColGray {
  color: gray;
}
:where(.articleBody) .textColSilver {
  color: silver;
}
:where(.articleBody) .textColWhite {
  color: white;
}
:where(.articleBody) .textColRed {
  color: red;
}
:where(.articleBody) .textColYellow {
  color: yellow;
}
:where(.articleBody) .textColLime {
  color: lime;
}
:where(.articleBody) .textColAqua {
  color: aqua;
}
:where(.articleBody) .textColBlue {
  color: blue;
}
:where(.articleBody) .textColFuchsia {
  color: fuchsia;
}
:where(.articleBody) .textColMaroon {
  color: maroon;
}
:where(.articleBody) .textColOlive {
  color: olive;
}
:where(.articleBody) .textColGreen {
  color: green;
}
:where(.articleBody) .textColTeal {
  color: teal;
}
:where(.articleBody) .textColNavy {
  color: navy;
}
:where(.articleBody) .textColPurple {
  color: purple;
}
:where(.articleBody) .bgColBlack {
  background-color: var(--color-default);
}
:where(.articleBody) .bgColGray {
  background-color: gray;
}
:where(.articleBody) .bgColSilver {
  background-color: silver;
}
:where(.articleBody) .bgColWhite {
  background-color: white;
}
:where(.articleBody) .bgColRed {
  background-color: red;
}
:where(.articleBody) .bgColYellow {
  background-color: yellow;
}
:where(.articleBody) .bgColLime {
  background-color: lime;
}
:where(.articleBody) .bgColAqua {
  background-color: aqua;
}
:where(.articleBody) .bgColBlue {
  background-color: blue;
}
:where(.articleBody) .bgColFuchsia {
  background-color: fuchsia;
}
:where(.articleBody) .bgColMaroon {
  background-color: maroon;
}
:where(.articleBody) .bgColOlive {
  background-color: olive;
}
:where(.articleBody) .bgColGreen {
  background-color: green;
}
:where(.articleBody) .bgColTeal {
  background-color: teal;
}
:where(.articleBody) .bgColNavy {
  background-color: navy;
}
:where(.articleBody) .bgColPurple {
  background-color: purple;
}
:where(.articleBody) b, :where(.articleBody) .fontBold {
  font-weight: 700;
}
:where(.articleBody) .fontNormal {
  font-weight: 500;
}
:where(.articleBody) i, :where(.articleBody) .fontItalic {
  font-style: italic;
}
:where(.articleBody) em, :where(.articleBody) strong {
  font-style: normal;
  font-weight: 500;
}
:where(.articleBody) sup, :where(.articleBody) sub {
  position: static;
  font-size: 60%;
}
:where(.articleBody) sup {
  vertical-align: super;
}
:where(.articleBody) sub {
  vertical-align: sub;
}
:where(.articleBody) u,
:where(.articleBody) .textSolidUndrLine {
  text-decoration: none;
  padding-bottom: 0.15em;
  border-bottom: 1px solid #000;
}
:where(.articleBody) .textUnsolidUndrLine {
  padding-bottom: 0.15em;
  border-bottom: 1px dashed #000;
}
:where(.articleBody) s, :where(.articleBody) del, :where(.articleBody) .textLineThrough {
  text-decoration: line-through;
}
:where(.articleBody) .textHighlight {
  padding: 0.15em;
  background: #ff00ff;
}
:where(.articleBody) .textHighlightTintA {
  padding: 0.15em;
  background: #ffff00;
}
:where(.articleBody) .textHighlightTintB {
  padding: 0.15em;
  background: #00ffff;
}
:where(.articleBody) .textHighlightShade {
  padding: 0.15em;
  background: rgba(255, 0, 255, 0.1);
}
:where(.articleBody) .textHighlightShadeA {
  padding: 0.15em;
  background: rgba(255, 255, 0, 0.1);
}
:where(.articleBody) .textHighlightShadeB {
  padding: 0.15em;
  background: rgba(0, 255, 255, 0.1);
}
:where(.articleBody) .textAlignLeft {
  text-align: left;
}
:where(.articleBody) .textAlignCenter {
  text-align: center;
}
:where(.articleBody) .textAlignRight {
  text-align: right;
}
:where(.articleBody) hr {
  height: auto;
  overflow-x: hidden;
}
:where(.articleBody) hr.line {
  margin: 15px 0;
  border: none;
  border-top: 1px solid var(--color-default);
}
:where(.articleBody) hr.diamond,
:where(.articleBody) hr.asterisk {
  margin: 30px 0;
  border: none;
}
:where(.articleBody) hr.diamond::after,
:where(.articleBody) hr.asterisk::after {
  display: block;
  margin-right: -4em;
  color: var(--color-default);
  font-size: 18px;
  text-align: center;
  letter-spacing: 4em;
}
:where(.articleBody) hr.diamond::after {
  content: "◇◇◇";
}
:where(.articleBody) hr.asterisk::after {
  content: "＊＊＊";
}
:where(.articleBody) .clearLeft {
  clear: left;
}
:where(.articleBody) .clearRight {
  clear: right;
}
:where(.articleBody) .clearBoth {
  clear: both;
}
:where(.articleBody) .clearfix::after {
  content: "";
  display: block;
  clear: both;
}
:where(.articleBody) .bpimage_image {
  position: relative;
  margin-bottom: 0;
  z-index: 1;
}
:where(.articleBody) .bpimage_image + .bpimage_title, :where(.articleBody) .bpimage_image + .bpimage_caption, :where(.articleBody) .bpimage_image + .bpimage_click {
  margin-top: 16px;
}
:where(.articleBody) .bpimage_title + .bpimage_image,
:where(.articleBody) .bpimage_caption + .bpimage_image {
  margin-top: 16px;
}
:where(.articleBody) .bpimage_title {
  margin-bottom: 4px;
  clear: both;
  font-size: 14px;
  line-height: 1.6;
}
:where(.articleBody) .bpimage_caption {
  clear: both;
  color: var(--color-dark-gray);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
:where(.articleBody) .bpimage_click {
  clear: both;
  color: var(--color-red);
  font-size: 14px;
  line-height: 1.6;
}
:where(.articleBody) .bpimage_click a {
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  :where(.articleBody) .bpimage_click a:hover {
    text-decoration: underline;
  }
}
:where(.articleBody) .bpimage_caption + .bpimage_click {
  margin-top: 4px;
}
:where(.articleBody) .bpimage_right {
  float: right;
  margin: 0 0 32px 42px;
}
:where(.articleBody) .bpimage_left {
  float: left;
  margin: 0 32px 42px 0;
}
:where(.articleBody) .bpimage_center {
  width: 500px;
  margin: 30px auto;
}
:where(.articleBody) .bpimage_center .ulizahtml5 {
  width: 100% !important;
}
:where(.articleBody) .bpimage_center .ulizahtml5:not(.vjs-audio) {
  min-height: 314px !important;
  max-height: 337.5px !important;
}
:where(.articleBody) .bpimage_double {
  margin: 12px auto 32px;
  overflow: hidden;
}
:where(.articleBody) .bpimage_double .bpimage_left,
:where(.articleBody) .bpimage_double .bpimage_right {
  margin: 0;
}
:where(.articleBody) .bpimage_double .bpimage_left + .bpimage_title,
:where(.articleBody) .bpimage_double .bpimage_right + .bpimage_title {
  padding-top: 32px;
  margin-bottom: 10px;
}
:where(.articleBody) .bpimage_double .bpimage_left + .bpimage_caption,
:where(.articleBody) .bpimage_double .bpimage_right + .bpimage_caption {
  padding-top: 32px;
}
:where(.articleBody) .bpimage_triple {
  width: 640px;
  margin: 10px auto 30px;
  overflow: hidden;
}
:where(.articleBody) .bpimage_triple .bpimage_wrap,
:where(.articleBody) .bpimage_triple .bpimage_right {
  margin: 0;
}
:where(.articleBody) .bpimage_triple .bpimage_wrap + .bpimage_title,
:where(.articleBody) .bpimage_triple .bpimage_right + .bpimage_title {
  padding-top: 32px;
  margin-bottom: 10px;
}
:where(.articleBody) .bpimage_triple .bpimage_wrap + .bpimage_caption,
:where(.articleBody) .bpimage_triple .bpimage_right + .bpimage_caption {
  padding-top: 32px;
}
:where(.articleBody) .bpimage_triple .bpimage_wrap {
  margin: 0;
  float: left;
  overflow: hidden;
}
:where(.articleBody) .bpimage_triple .bpimage_left,
:where(.articleBody) .bpimage_triple .bpimage_right {
  margin: 0;
}
:where(.articleBody) .bpimage_triple .bpimage_center {
  float: right;
  margin: 0;
}
:where(.articleBody) .bpbox_left {
  float: left;
  margin: 0 40px 30px 0;
}
:where(.articleBody) .bpbox_right {
  float: right;
  margin: 0 0 30px 40px;
}
:where(.articleBody) .bpimage_set + .bpimage_set {
  margin-top: 30px;
}
:where(.articleBody) .bpimage_caption_right {
  margin: 0 auto 20px;
  overflow: hidden;
  zoom: 1;
}
:where(.articleBody) .bpimage_caption_right .bpimage_left {
  margin-bottom: 0;
}
:where(.articleBody) .bpimage_caption_right .bpimage_title {
  padding: 10px 0 0;
  clear: none;
}
:where(.articleBody) .bpimage_caption_right .bpimage_caption {
  clear: none;
}
:where(.articleBody) .bptable {
  margin: 12px auto 32px;
  overflow: auto;
}
:where(.articleBody) .bptable_title {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.65;
}
:where(.articleBody) .bptable_caption {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}
:where(.articleBody) .bptable table {
  border-collapse: collapse;
}
:where(.articleBody) .bptable th,
:where(.articleBody) .bptable td {
  padding: 11px 8px;
  border: 1px solid var(--color-line-gray03);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.5px;
  word-break: normal;
}
:where(.articleBody) .bptable th {
  background: var(--color-light-gray02);
}
:where(.articleBody) .bptable th[scope=col] {
  background: #ffe4e9;
}
:where(.articleBody) .nowrap {
  white-space: nowrap;
}
:where(.articleBody) .bptable_title + table,
:where(.articleBody) .bptable_caption + table,
:where(.articleBody) table + .bptable_title,
:where(.articleBody) table + .bptable_caption {
  margin-top: 12px;
}
:where(.articleBody) .bpprofile,
:where(.articleBody) .bpprofile_photo,
:where(.articleBody) .bpinterview {
  width: auto;
  clear: both;
  margin: 48px 0;
  overflow: hidden;
}
:where(.articleBody) .bpprofile,
:where(.articleBody) .bpprofile_photo {
  padding: 32px 0;
  border-top: 1px solid var(--color-line-gray03);
  border-bottom: 1px solid var(--color-line-gray03);
}
:where(.articleBody) .bpprofile_photo .bpprofile_text img {
  float: right;
  padding: 0;
  margin-left: 32px;
}
:where(.articleBody) .bpinterview {
  padding: 32px;
  border: 1px solid var(--color-line-gray03);
}
:where(.articleBody) .bpprofile_profile,
:where(.articleBody) .bpinterview_profile {
  margin: 0 0 16px;
}
:where(.articleBody) .bpprofile_name,
:where(.articleBody) .bpinterview_name {
  font-size: 24px;
  font-weight: 700;
}
:where(.articleBody) .bpprofile_position,
:where(.articleBody) .bpinterview_position {
  color: var(--color-dark-gray);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
:where(.articleBody) .bpprofile_text,
:where(.articleBody) .bpinterview_text {
  line-height: 1.65;
  font-size: var(--base-font-size);
}
:where(.articleBody) .bpinterview_text {
  clear: both;
}
:where(.articleBody) .bpinterview_text img {
  float: right;
  margin-left: 32px;
}
:where(.articleBody) ul, :where(.articleBody) ol, :where(.articleBody) dl {
  margin-bottom: 32px;
}
:where(.articleBody) ul li,
:where(.articleBody) ol li {
  margin-top: 3px;
  line-height: 1.65;
  font-size: var(--base-font-size);
}
:where(.articleBody) ul li:first-of-type,
:where(.articleBody) ol li:first-of-type {
  margin-top: 0;
}
:where(.articleBody) ul.square {
  padding-left: 20px;
}
:where(.articleBody) ul.square > li {
  position: relative;
}
:where(.articleBody) ul.square > li::before {
  position: absolute;
  content: "";
  display: block;
  box-sizing: border-box;
  top: 13px;
  left: -20px;
  width: 7px;
  height: 7px;
  background-color: var(--color-theme);
}
:where(.articleBody) ul.square > li ul li {
  list-style: none;
}
:where(.articleBody) ul.disc {
  padding-left: 20px;
}
:where(.articleBody) ul.disc > li {
  position: relative;
}
:where(.articleBody) ul.disc > li::before {
  position: absolute;
  content: "";
  display: block;
  box-sizing: border-box;
  top: 13px;
  left: -20px;
  width: 7px;
  height: 7px;
  background-color: var(--color-theme);
  border-radius: 50%;
}
:where(.articleBody) ul.circle {
  padding-left: 20px;
}
:where(.articleBody) ul.circle > li {
  position: relative;
}
:where(.articleBody) ul.circle > li::before {
  position: absolute;
  content: "";
  display: block;
  box-sizing: border-box;
  top: 13px;
  left: -20px;
  width: 7px;
  height: 7px;
  background-color: var(--color-base);
  border: 1px solid var(--color-theme);
  border-radius: 50%;
}
:where(.articleBody) ol.decimal {
  padding-left: 30px;
  list-style: decimal;
}
:where(.articleBody) ol.decimal > li {
  list-style: decimal;
}
:where(.articleBody) ol.decimal > li::marker {
  color: var(--color-theme);
}
:where(.articleBody) ol.circledDecimal {
  padding-left: 30px;
  counter-reset: number 0;
}
:where(.articleBody) ol.circledDecimal > li {
  position: relative;
}
:where(.articleBody) ol.circledDecimal > li::before {
  position: absolute;
  top: 6px;
  left: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  background-color: var(--color-base);
  border: 1px solid var(--color-theme);
  border-radius: 50%;
  content: counter(number);
  counter-increment: number 1;
  color: var(--color-theme);
  font-size: 12px;
  font-family: var(--font-family-jp-inter);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
:where(.articleBody) ol.upperAlpha {
  padding-left: 30px;
  list-style: upper-alpha;
}
:where(.articleBody) ol.upperAlpha > li {
  list-style: upper-alpha;
}
:where(.articleBody) ol.upperAlpha > li::marker {
  color: var(--color-theme);
}
:where(.articleBody) ol.lowerAlpha {
  padding-left: 30px;
  list-style: lower-alpha;
}
:where(.articleBody) ol.lowerAlpha > li {
  list-style: lower-alpha;
}
:where(.articleBody) ol.lowerAlpha > li::marker {
  color: var(--color-theme);
}
:where(.articleBody) ol.upperRoman {
  padding-left: 30px;
  list-style: upper-roman;
}
:where(.articleBody) ol.upperRoman > li {
  list-style: upper-roman;
}
:where(.articleBody) ol.upperRoman > li::marker {
  color: var(--color-theme);
  font-family: var(--font-family-jp);
  font-size: 18px;
}
:where(.articleBody) ol.lowerRoman {
  padding-left: 30px;
  list-style: lower-roman;
}
:where(.articleBody) ol.lowerRoman > li {
  list-style: lower-roman;
}
:where(.articleBody) ol.lowerRoman > li::marker {
  color: var(--color-theme);
  font-family: var(--font-family-jp);
  font-size: 18px;
}
:where(.articleBody) ul.square,
:where(.articleBody) ul.disc,
:where(.articleBody) ul.circle,
:where(.articleBody) ol.decimal,
:where(.articleBody) ol.circledDecimal,
:where(.articleBody) ol.upperAlpha,
:where(.articleBody) ol.lowerAlpha,
:where(.articleBody) ol.upperRoman,
:where(.articleBody) ol.lowerRoman {
  margin-top: 16px;
}
:where(.articleBody) ul.square ul,
:where(.articleBody) ul.disc ul,
:where(.articleBody) ul.circle ul,
:where(.articleBody) ol.decimal ul,
:where(.articleBody) ol.circledDecimal ul,
:where(.articleBody) ol.upperAlpha ul,
:where(.articleBody) ol.lowerAlpha ul,
:where(.articleBody) ol.upperRoman ul,
:where(.articleBody) ol.lowerRoman ul {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 18px;
}
:where(.articleBody) ul.square ul > li,
:where(.articleBody) ul.disc ul > li,
:where(.articleBody) ul.circle ul > li,
:where(.articleBody) ol.decimal ul > li,
:where(.articleBody) ol.circledDecimal ul > li,
:where(.articleBody) ol.upperAlpha ul > li,
:where(.articleBody) ol.lowerAlpha ul > li,
:where(.articleBody) ol.upperRoman ul > li,
:where(.articleBody) ol.lowerRoman ul > li {
  position: relative;
  list-style: none !important;
}
:where(.articleBody) ul.square ul > li::before,
:where(.articleBody) ul.disc ul > li::before,
:where(.articleBody) ul.circle ul > li::before,
:where(.articleBody) ol.decimal ul > li::before,
:where(.articleBody) ol.circledDecimal ul > li::before,
:where(.articleBody) ol.upperAlpha ul > li::before,
:where(.articleBody) ol.lowerAlpha ul > li::before,
:where(.articleBody) ol.upperRoman ul > li::before,
:where(.articleBody) ol.lowerRoman ul > li::before {
  position: absolute;
  content: "";
  display: block;
  left: -18px;
  top: 15px;
  width: 8px;
  height: 2px;
  background-color: var(--color-theme);
}
:where(.articleBody) ul.square ul ol,
:where(.articleBody) ul.disc ul ol,
:where(.articleBody) ul.circle ul ol,
:where(.articleBody) ol.decimal ul ol,
:where(.articleBody) ol.circledDecimal ul ol,
:where(.articleBody) ol.upperAlpha ul ol,
:where(.articleBody) ol.lowerAlpha ul ol,
:where(.articleBody) ol.upperRoman ul ol,
:where(.articleBody) ol.lowerRoman ul ol {
  margin-top: 8px;
  margin-bottom: 8px;
}
:where(.articleBody) ul.square ol.decimal > li::marker,
:where(.articleBody) ul.disc ol.decimal > li::marker,
:where(.articleBody) ul.circle ol.decimal > li::marker,
:where(.articleBody) ol.decimal ol.decimal > li::marker,
:where(.articleBody) ol.circledDecimal ol.decimal > li::marker,
:where(.articleBody) ol.upperAlpha ol.decimal > li::marker,
:where(.articleBody) ol.lowerAlpha ol.decimal > li::marker,
:where(.articleBody) ol.upperRoman ol.decimal > li::marker,
:where(.articleBody) ol.lowerRoman ol.decimal > li::marker {
  color: var(--color-default);
}
:where(.articleBody) .speaker01,
:where(.articleBody) .speaker02,
:where(.articleBody) .speaker03,
:where(.articleBody) .speaker04,
:where(.articleBody) .speaker05,
:where(.articleBody) .speaker06,
:where(.articleBody) .speaker07,
:where(.articleBody) .speaker08,
:where(.articleBody) .speaker09 {
  font-weight: 700;
}
:where(.articleBody) .speaker01 {
  color: #ed4c61;
}
:where(.articleBody) .speaker02 {
  color: #ff8000;
}
:where(.articleBody) .speaker03 {
  color: #ac3141;
}
:where(.articleBody) .speaker04 {
  color: #7100bc;
}
:where(.articleBody) .speaker05 {
  color: #915a22;
}
:where(.articleBody) .speaker06 {
  color: #7d9f19;
}
:where(.articleBody) .speaker07 {
  color: #007f80;
}
:where(.articleBody) .speaker08 {
  color: #4082d0;
}
:where(.articleBody) .speaker09 {
  color: #555555;
}
:where(.articleBody) .bpquestion {
  margin-bottom: 32px;
  font-weight: 700;
  line-height: 1.65;
}
:where(.articleBody) .bpquestion::before {
  content: "—";
  display: inline-block;
  margin-right: 2px;
  vertical-align: top;
}
:where(.articleBody) .bpanswer {
  line-height: 1.65;
}
:where(.articleBody) .bpbox,
:where(.articleBody) .bpbox2,
:where(.articleBody) .bpbox3,
:where(.articleBody) .bpbox4,
:where(.articleBody) .bpframe {
  width: auto;
  clear: both;
  margin: 32px 0;
  padding: 30px;
  border-radius: 2px;
}
:where(.articleBody) .bpbox h3,
:where(.articleBody) .bpbox2 h3,
:where(.articleBody) .bpbox3 h3,
:where(.articleBody) .bpbox4 h3,
:where(.articleBody) .bpframe h3 {
  padding: 3px 10px;
  margin: 20px 0 20px;
  font-size: 18px;
}
:where(.articleBody) .bpbox h4,
:where(.articleBody) .bpbox2 h4,
:where(.articleBody) .bpbox3 h4,
:where(.articleBody) .bpbox4 h4,
:where(.articleBody) .bpframe h4 {
  position: relative;
  margin-top: 20px;
  padding-left: 16px;
  font-size: 18px;
}
:where(.articleBody) .bpbox h4::before,
:where(.articleBody) .bpbox2 h4::before,
:where(.articleBody) .bpbox3 h4::before,
:where(.articleBody) .bpbox4 h4::before,
:where(.articleBody) .bpframe h4::before {
  position: absolute;
  content: "";
  display: block;
  display: block;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--color-theme);
}
:where(.articleBody) .bpbox .bpimage_right,
:where(.articleBody) .bpbox2 .bpimage_right,
:where(.articleBody) .bpbox3 .bpimage_right,
:where(.articleBody) .bpbox4 .bpimage_right,
:where(.articleBody) .bpframe .bpimage_right {
  margin-left: 20px;
}
:where(.articleBody) .bpbox_title {
  padding-bottom: 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--color-red);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.44;
}
:where(.articleBody) .bpbox_text,
:where(.articleBody) .bpbox_text p {
  font-size: var(--base-font-size);
  line-height: 1.7;
  margin: 0;
  overflow: hidden;
}
:where(.articleBody) .bpbox_text p:where(:not(.p-article_recommend_lead)) {
  margin-bottom: 16px;
}
:where(.articleBody) .bpbox_text p:where(:not(.p-article_recommend_lead)):last-child {
  margin-bottom: 0;
}
:where(.articleBody) .bpimage_left,
:where(.articleBody) .bpimage_right {
  margin-bottom: 20px;
}
:where(.articleBody) .bpbox {
  background: #ffe4e9;
}
:where(.articleBody) .bpbox2 {
  background-color: #e9e1fa;
}
:where(.articleBody) .bpbox2 .bpbox_title {
  border-color: var(--color-theme);
}
:where(.articleBody) .bpbox2 h3 {
  border-color: var(--color-theme);
}
:where(.articleBody) .bpbox2 h4::before {
  background-color: #1b9b82;
}
:where(.articleBody) .bpbox3 {
  border: 1px solid var(--color-red);
  background-color: #fff;
}
:where(.articleBody) .bpbox4 {
  border: 1px solid transparent;
  background-color: var(--color-light-gray02);
}
:where(.articleBody) .bpbox4 .bpbox_title {
  border-color: var(--color-default);
}
:where(.articleBody) .bpframe {
  border: 1px solid var(--color-line-gray03);
  background: transparent;
}
:where(.articleBody) .bpframe .bpbox_title {
  border-color: var(--color-default);
}
:where(.articleBody) blockquote {
  position: relative;
  padding: 52px 40px;
  margin: 24px 0;
  border: 1px solid var(--color-line-gray03);
}
:where(.articleBody) blockquote::before, :where(.articleBody) blockquote::after {
  position: absolute;
  content: "";
  display: block;
  width: 20px;
  height: 16px;
  background: url(/images/onb/2024/ico_double_quotation_gray.svg) 50% 50%/20px auto no-repeat;
}
:where(.articleBody) blockquote::before {
  top: 20px;
  left: 40px;
}
:where(.articleBody) blockquote::after {
  right: 40px;
  bottom: 20px;
  transform: scale(-1, 1);
}
:where(.articleBody) blockquote h3 {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1.65;
}
:where(.articleBody) blockquote h3::before {
  content: none;
}
:where(.articleBody) blockquote h4 {
  margin: 0;
}
:where(.articleBody) blockquote p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 2;
}
:where(.articleBody) pre {
  padding: 20px;
  margin-top: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--color-line-gray03);
  overflow: auto;
  white-space: pre;
  color: var(--color-default);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
:where(.articleBody) pre code {
  font-family: var(--font-family-jp);
}
:where(.articleBody) pre.light {
  background-color: var(--color-light-gray02);
  border: 1px solid transparent;
}
:where(.articleBody) pre.dark {
  color: white;
  background-color: var(--color-default);
  border: 1px solid transparent;
}
:where(.articleBody) > dl:where(:not(.p-article_topics)) {
  margin-top: 32px;
  margin-bottom: 32px;
}
:where(.articleBody) > dl:where(:not(.p-article_topics)) dt {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 32px 0 8px 0;
  font-weight: 500;
  text-decoration: underline;
}
:where(.articleBody) > dl:where(:not(.p-article_topics)) dd {
  margin: 8px 0;
}
:where(.articleBody) .bpteisei_box {
  margin: 32px 0;
  font-size: 14px;
  line-height: 1.6;
}
:where(.articleBody) .bpteisei_box .bpteisei b {
  color: var(--color-red);
  font-size: 16px;
  line-height: 1.5;
}
:where(.articleBody) .bpannotation {
  margin: 32px 0;
  font-size: 16px;
  line-height: 1.6;
}
:where(.articleBody) .bpword {
  padding: 16px 0;
  margin: 32px 0;
  border-top: 1px dotted var(--color-dark-gray);
  color: var(--color-default);
  font-size: 14px;
  line-height: 1.6;
}
:where(.articleBody) .bpword b {
  display: inline-block;
  padding-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
:where(.articleBody) .bpreference {
  color: var(--color-default);
  font-size: 14px;
  line-height: 1.6;
}
:where(.articleBody) .bpreference b {
  display: inline-block;
  padding-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
:where(.articleBody) .endText {
  display: block;
  margin: 32px 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
:where(.articleBody) .endText a {
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  :where(.articleBody) .endText a:hover {
    text-decoration: underline;
  }
}
:where(.articleBody) span.bpLayoutLink.inline {
  display: inline;
}
:where(.articleBody) span.bpLayoutLink.inline em,
:where(.articleBody) span.bpLayoutLink.inline a {
  display: inline;
}
:where(.articleBody) span.bpLayoutLink.inline span:first-of-type::before {
  content: "（";
}
:where(.articleBody) span.bpLayoutLink.inline span::after {
  content: "、";
}
:where(.articleBody) span.bpLayoutLink.inline span:last-of-type::after {
  content: "）" !important;
}
:where(.articleBody) span.bpLayoutLink.block {
  display: block;
  font-size: 90%;
  margin: 30px 5px;
}
:where(.articleBody) span.bpLayoutLink.block em,
:where(.articleBody) span.bpLayoutLink.block a {
  display: block;
  font-size: 90%;
}
:where(.articleBody) span.bpLayoutLink.block span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}
:where(.articleBody) span.bpLayoutLink.block a {
  margin: 10px 10px 0;
}
:where(.articleBody) span.bpLayoutLink.block a[target=_blank] {
  padding-right: 24px;
  background-size: 16px auto;
}
:where(.articleBody) span.bpLayoutLink.block a::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 5px 4px 0;
  border-radius: 50%;
  background: var(--color-default);
}
:where(.articleBody).tobira h3 {
  position: relative;
  margin: 40px 0 20px;
  padding: 5px 14px;
  background: #f6f6f6;
  border: none;
  clear: both;
  color: #666666;
  font-size: 16px;
  line-height: 1.57;
  letter-spacing: 0.2px;
}
:where(.articleBody).tobira p a {
  color: var(--color-default);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  :where(.articleBody).tobira p a:hover {
    color: var(--color-theme);
  }
}
:where(.articleBody) .-noOpacity {
  position: relative;
  z-index: 1;
}

:where(body.-fontSizeL) :where(.articleBody) {
  --base-font-size: 22px;
}
:where(body.-fontSizeL) :where(.articleBody) p {
  line-height: 1.5;
}

:where(body.-fontSizeM) :where(.articleBody) {
  --base-font-size: 18px;
}
:where(body.-fontSizeM) :where(.articleBody) p {
  line-height: 1.65;
}

:where(body.-fontSizeS) :where(.articleBody) {
  --base-font-size: 14px;
}
:where(body.-fontSizeS) :where(.articleBody) p {
  line-height: 2;
}

/*****************************************************
  CSS Animation
*****************************************************/
@keyframes fadeIn {
  0% {
    visibility: hidden;
    opacity: 0;
  }
  50% {
    visibility: hidden;
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    visibility: visible;
    opacity: 1;
  }
  to {
    visibility: hidden;
    opacity: 0;
  }
}
@keyframes scroll {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes slideTip {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
@keyframes slideIn {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
  }
}
@keyframes arrowSlide {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  50.0% {
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
  50.1% {
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
/*****************************************************
  Utility
*****************************************************/
.u-mt0:not(#_) {
  margin-top: 0px !important;
}

.u-mr0:not(#_) {
  margin-right: 0px !important;
}

.u-mb0:not(#_) {
  margin-bottom: 0px !important;
}

.u-ml0:not(#_) {
  margin-left: 0px !important;
}

.u-mt5:not(#_) {
  margin-top: 5px !important;
}

.u-mr5:not(#_) {
  margin-right: 5px !important;
}

.u-mb5:not(#_) {
  margin-bottom: 5px !important;
}

.u-ml5:not(#_) {
  margin-left: 5px !important;
}

.u-mt10:not(#_) {
  margin-top: 10px !important;
}

.u-mr10:not(#_) {
  margin-right: 10px !important;
}

.u-mb10:not(#_) {
  margin-bottom: 10px !important;
}

.u-ml10:not(#_) {
  margin-left: 10px !important;
}

.u-mt15:not(#_) {
  margin-top: 15px !important;
}

.u-mr15:not(#_) {
  margin-right: 15px !important;
}

.u-mb15:not(#_) {
  margin-bottom: 15px !important;
}

.u-ml15:not(#_) {
  margin-left: 15px !important;
}

.u-mt20:not(#_) {
  margin-top: 20px !important;
}

.u-mr20:not(#_) {
  margin-right: 20px !important;
}

.u-mb20:not(#_) {
  margin-bottom: 20px !important;
}

.u-ml20:not(#_) {
  margin-left: 20px !important;
}

.u-mt25:not(#_) {
  margin-top: 25px !important;
}

.u-mr25:not(#_) {
  margin-right: 25px !important;
}

.u-mb25:not(#_) {
  margin-bottom: 25px !important;
}

.u-ml25:not(#_) {
  margin-left: 25px !important;
}

.u-mt30:not(#_) {
  margin-top: 30px !important;
}

.u-mr30:not(#_) {
  margin-right: 30px !important;
}

.u-mb30:not(#_) {
  margin-bottom: 30px !important;
}

.u-ml30:not(#_) {
  margin-left: 30px !important;
}

.u-mt35:not(#_) {
  margin-top: 35px !important;
}

.u-mr35:not(#_) {
  margin-right: 35px !important;
}

.u-mb35:not(#_) {
  margin-bottom: 35px !important;
}

.u-ml35:not(#_) {
  margin-left: 35px !important;
}

.u-mt40:not(#_) {
  margin-top: 40px !important;
}

.u-mr40:not(#_) {
  margin-right: 40px !important;
}

.u-mb40:not(#_) {
  margin-bottom: 40px !important;
}

.u-ml40:not(#_) {
  margin-left: 40px !important;
}

.u-mt45:not(#_) {
  margin-top: 45px !important;
}

.u-mr45:not(#_) {
  margin-right: 45px !important;
}

.u-mb45:not(#_) {
  margin-bottom: 45px !important;
}

.u-ml45:not(#_) {
  margin-left: 45px !important;
}

.u-mt50:not(#_) {
  margin-top: 50px !important;
}

.u-mr50:not(#_) {
  margin-right: 50px !important;
}

.u-mb50:not(#_) {
  margin-bottom: 50px !important;
}

.u-ml50:not(#_) {
  margin-left: 50px !important;
}

.u-mt55:not(#_) {
  margin-top: 55px !important;
}

.u-mr55:not(#_) {
  margin-right: 55px !important;
}

.u-mb55:not(#_) {
  margin-bottom: 55px !important;
}

.u-ml55:not(#_) {
  margin-left: 55px !important;
}

.u-mt60:not(#_) {
  margin-top: 60px !important;
}

.u-mr60:not(#_) {
  margin-right: 60px !important;
}

.u-mb60:not(#_) {
  margin-bottom: 60px !important;
}

.u-ml60:not(#_) {
  margin-left: 60px !important;
}

.u-mt65:not(#_) {
  margin-top: 65px !important;
}

.u-mr65:not(#_) {
  margin-right: 65px !important;
}

.u-mb65:not(#_) {
  margin-bottom: 65px !important;
}

.u-ml65:not(#_) {
  margin-left: 65px !important;
}

.u-mt70:not(#_) {
  margin-top: 70px !important;
}

.u-mr70:not(#_) {
  margin-right: 70px !important;
}

.u-mb70:not(#_) {
  margin-bottom: 70px !important;
}

.u-ml70:not(#_) {
  margin-left: 70px !important;
}

.u-mt75:not(#_) {
  margin-top: 75px !important;
}

.u-mr75:not(#_) {
  margin-right: 75px !important;
}

.u-mb75:not(#_) {
  margin-bottom: 75px !important;
}

.u-ml75:not(#_) {
  margin-left: 75px !important;
}

.u-mt80:not(#_) {
  margin-top: 80px !important;
}

.u-mr80:not(#_) {
  margin-right: 80px !important;
}

.u-mb80:not(#_) {
  margin-bottom: 80px !important;
}

.u-ml80:not(#_) {
  margin-left: 80px !important;
}

.u-mt85:not(#_) {
  margin-top: 85px !important;
}

.u-mr85:not(#_) {
  margin-right: 85px !important;
}

.u-mb85:not(#_) {
  margin-bottom: 85px !important;
}

.u-ml85:not(#_) {
  margin-left: 85px !important;
}

.u-mt90:not(#_) {
  margin-top: 90px !important;
}

.u-mr90:not(#_) {
  margin-right: 90px !important;
}

.u-mb90:not(#_) {
  margin-bottom: 90px !important;
}

.u-ml90:not(#_) {
  margin-left: 90px !important;
}

.u-mt95:not(#_) {
  margin-top: 95px !important;
}

.u-mr95:not(#_) {
  margin-right: 95px !important;
}

.u-mb95:not(#_) {
  margin-bottom: 95px !important;
}

.u-ml95:not(#_) {
  margin-left: 95px !important;
}

.u-mt100:not(#_) {
  margin-top: 100px !important;
}

.u-mr100:not(#_) {
  margin-right: 100px !important;
}

.u-mb100:not(#_) {
  margin-bottom: 100px !important;
}

.u-ml100:not(#_) {
  margin-left: 100px !important;
}

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

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

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

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

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

.u-mtXXLarge {
  margin-top: 48px !important;
}

.u-mbSmall {
  margin-bottom: 12px !important;
}

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

.u-mbNormal {
  margin-bottom: 24px !important;
}

.u-mbLarge {
  margin-bottom: 32px !important;
}

.u-mbXLarge {
  margin-bottom: 40px !important;
}

.u-mbXXLarge {
  margin-bottom: 48px !important;
}

.u-pt0 {
  padding-top: 0px !important;
}

.u-pr0 {
  padding-right: 0px !important;
}

.u-pb0 {
  padding-bottom: 0px !important;
}

.u-pl0 {
  padding-left: 0px !important;
}

.u-pt5 {
  padding-top: 5px !important;
}

.u-pr5 {
  padding-right: 5px !important;
}

.u-pb5 {
  padding-bottom: 5px !important;
}

.u-pl5 {
  padding-left: 5px !important;
}

.u-pt10 {
  padding-top: 10px !important;
}

.u-pr10 {
  padding-right: 10px !important;
}

.u-pb10 {
  padding-bottom: 10px !important;
}

.u-pl10 {
  padding-left: 10px !important;
}

.u-pt15 {
  padding-top: 15px !important;
}

.u-pr15 {
  padding-right: 15px !important;
}

.u-pb15 {
  padding-bottom: 15px !important;
}

.u-pl15 {
  padding-left: 15px !important;
}

.u-pt20 {
  padding-top: 20px !important;
}

.u-pr20 {
  padding-right: 20px !important;
}

.u-pb20 {
  padding-bottom: 20px !important;
}

.u-pl20 {
  padding-left: 20px !important;
}

.u-pt25 {
  padding-top: 25px !important;
}

.u-pr25 {
  padding-right: 25px !important;
}

.u-pb25 {
  padding-bottom: 25px !important;
}

.u-pl25 {
  padding-left: 25px !important;
}

.u-pt30 {
  padding-top: 30px !important;
}

.u-pr30 {
  padding-right: 30px !important;
}

.u-pb30 {
  padding-bottom: 30px !important;
}

.u-pl30 {
  padding-left: 30px !important;
}

.u-pt35 {
  padding-top: 35px !important;
}

.u-pr35 {
  padding-right: 35px !important;
}

.u-pb35 {
  padding-bottom: 35px !important;
}

.u-pl35 {
  padding-left: 35px !important;
}

.u-pt40 {
  padding-top: 40px !important;
}

.u-pr40 {
  padding-right: 40px !important;
}

.u-pb40 {
  padding-bottom: 40px !important;
}

.u-pl40 {
  padding-left: 40px !important;
}

.u-pt45 {
  padding-top: 45px !important;
}

.u-pr45 {
  padding-right: 45px !important;
}

.u-pb45 {
  padding-bottom: 45px !important;
}

.u-pl45 {
  padding-left: 45px !important;
}

.u-pt50 {
  padding-top: 50px !important;
}

.u-pr50 {
  padding-right: 50px !important;
}

.u-pb50 {
  padding-bottom: 50px !important;
}

.u-pl50 {
  padding-left: 50px !important;
}

.u-pt55 {
  padding-top: 55px !important;
}

.u-pr55 {
  padding-right: 55px !important;
}

.u-pb55 {
  padding-bottom: 55px !important;
}

.u-pl55 {
  padding-left: 55px !important;
}

.u-pt60 {
  padding-top: 60px !important;
}

.u-pr60 {
  padding-right: 60px !important;
}

.u-pb60 {
  padding-bottom: 60px !important;
}

.u-pl60 {
  padding-left: 60px !important;
}

.u-pt65 {
  padding-top: 65px !important;
}

.u-pr65 {
  padding-right: 65px !important;
}

.u-pb65 {
  padding-bottom: 65px !important;
}

.u-pl65 {
  padding-left: 65px !important;
}

.u-pt70 {
  padding-top: 70px !important;
}

.u-pr70 {
  padding-right: 70px !important;
}

.u-pb70 {
  padding-bottom: 70px !important;
}

.u-pl70 {
  padding-left: 70px !important;
}

.u-pt75 {
  padding-top: 75px !important;
}

.u-pr75 {
  padding-right: 75px !important;
}

.u-pb75 {
  padding-bottom: 75px !important;
}

.u-pl75 {
  padding-left: 75px !important;
}

.u-pt80 {
  padding-top: 80px !important;
}

.u-pr80 {
  padding-right: 80px !important;
}

.u-pb80 {
  padding-bottom: 80px !important;
}

.u-pl80 {
  padding-left: 80px !important;
}

.u-pt85 {
  padding-top: 85px !important;
}

.u-pr85 {
  padding-right: 85px !important;
}

.u-pb85 {
  padding-bottom: 85px !important;
}

.u-pl85 {
  padding-left: 85px !important;
}

.u-pt90 {
  padding-top: 90px !important;
}

.u-pr90 {
  padding-right: 90px !important;
}

.u-pb90 {
  padding-bottom: 90px !important;
}

.u-pl90 {
  padding-left: 90px !important;
}

.u-pt95 {
  padding-top: 95px !important;
}

.u-pr95 {
  padding-right: 95px !important;
}

.u-pb95 {
  padding-bottom: 95px !important;
}

.u-pl95 {
  padding-left: 95px !important;
}

.u-pt100 {
  padding-top: 100px !important;
}

.u-pr100 {
  padding-right: 100px !important;
}

.u-pb100 {
  padding-bottom: 100px !important;
}

.u-pl100 {
  padding-left: 100px !important;
}

.u-ptSmall {
  padding-top: 12px !important;
}

.u-ptMedium {
  padding-top: 16px !important;
}

.u-ptNormal {
  padding-top: 24px !important;
}

.u-ptLarge {
  padding-top: 32px !important;
}

.u-ptXLarge {
  padding-top: 40px !important;
}

.u-ptXXLarge {
  padding-top: 48px !important;
}

.u-pbSmall {
  padding-bottom: 12px !important;
}

.u-pbMedium {
  padding-bottom: 16px !important;
}

.u-pbNormal {
  padding-bottom: 24px !important;
}

.u-pbLarge {
  padding-bottom: 32px !important;
}

.u-pbXLarge {
  padding-bottom: 40px !important;
}

.u-pbXXLarge {
  padding-bottom: 48px !important;
}

.u-wAuto {
  width: auto;
}

.u-w1 {
  width: 1% !important;
}

.u-w2 {
  width: 2% !important;
}

.u-w3 {
  width: 3% !important;
}

.u-w4 {
  width: 4% !important;
}

.u-w5 {
  width: 5% !important;
}

.u-w6 {
  width: 6% !important;
}

.u-w7 {
  width: 7% !important;
}

.u-w8 {
  width: 8% !important;
}

.u-w9 {
  width: 9% !important;
}

.u-w10 {
  width: 10% !important;
}

.u-w11 {
  width: 11% !important;
}

.u-w12 {
  width: 12% !important;
}

.u-w13 {
  width: 13% !important;
}

.u-w14 {
  width: 14% !important;
}

.u-w15 {
  width: 15% !important;
}

.u-w16 {
  width: 16% !important;
}

.u-w17 {
  width: 17% !important;
}

.u-w18 {
  width: 18% !important;
}

.u-w19 {
  width: 19% !important;
}

.u-w20 {
  width: 20% !important;
}

.u-w21 {
  width: 21% !important;
}

.u-w22 {
  width: 22% !important;
}

.u-w23 {
  width: 23% !important;
}

.u-w24 {
  width: 24% !important;
}

.u-w25 {
  width: 25% !important;
}

.u-w26 {
  width: 26% !important;
}

.u-w27 {
  width: 27% !important;
}

.u-w28 {
  width: 28% !important;
}

.u-w29 {
  width: 29% !important;
}

.u-w30 {
  width: 30% !important;
}

.u-w31 {
  width: 31% !important;
}

.u-w32 {
  width: 32% !important;
}

.u-w33 {
  width: 33% !important;
}

.u-w34 {
  width: 34% !important;
}

.u-w35 {
  width: 35% !important;
}

.u-w36 {
  width: 36% !important;
}

.u-w37 {
  width: 37% !important;
}

.u-w38 {
  width: 38% !important;
}

.u-w39 {
  width: 39% !important;
}

.u-w40 {
  width: 40% !important;
}

.u-w41 {
  width: 41% !important;
}

.u-w42 {
  width: 42% !important;
}

.u-w43 {
  width: 43% !important;
}

.u-w44 {
  width: 44% !important;
}

.u-w45 {
  width: 45% !important;
}

.u-w46 {
  width: 46% !important;
}

.u-w47 {
  width: 47% !important;
}

.u-w48 {
  width: 48% !important;
}

.u-w49 {
  width: 49% !important;
}

.u-w50 {
  width: 50% !important;
}

.u-w51 {
  width: 51% !important;
}

.u-w52 {
  width: 52% !important;
}

.u-w53 {
  width: 53% !important;
}

.u-w54 {
  width: 54% !important;
}

.u-w55 {
  width: 55% !important;
}

.u-w56 {
  width: 56% !important;
}

.u-w57 {
  width: 57% !important;
}

.u-w58 {
  width: 58% !important;
}

.u-w59 {
  width: 59% !important;
}

.u-w60 {
  width: 60% !important;
}

.u-w61 {
  width: 61% !important;
}

.u-w62 {
  width: 62% !important;
}

.u-w63 {
  width: 63% !important;
}

.u-w64 {
  width: 64% !important;
}

.u-w65 {
  width: 65% !important;
}

.u-w66 {
  width: 66% !important;
}

.u-w67 {
  width: 67% !important;
}

.u-w68 {
  width: 68% !important;
}

.u-w69 {
  width: 69% !important;
}

.u-w70 {
  width: 70% !important;
}

.u-w71 {
  width: 71% !important;
}

.u-w72 {
  width: 72% !important;
}

.u-w73 {
  width: 73% !important;
}

.u-w74 {
  width: 74% !important;
}

.u-w75 {
  width: 75% !important;
}

.u-w76 {
  width: 76% !important;
}

.u-w77 {
  width: 77% !important;
}

.u-w78 {
  width: 78% !important;
}

.u-w79 {
  width: 79% !important;
}

.u-w80 {
  width: 80% !important;
}

.u-w81 {
  width: 81% !important;
}

.u-w82 {
  width: 82% !important;
}

.u-w83 {
  width: 83% !important;
}

.u-w84 {
  width: 84% !important;
}

.u-w85 {
  width: 85% !important;
}

.u-w86 {
  width: 86% !important;
}

.u-w87 {
  width: 87% !important;
}

.u-w88 {
  width: 88% !important;
}

.u-w89 {
  width: 89% !important;
}

.u-w90 {
  width: 90% !important;
}

.u-w91 {
  width: 91% !important;
}

.u-w92 {
  width: 92% !important;
}

.u-w93 {
  width: 93% !important;
}

.u-w94 {
  width: 94% !important;
}

.u-w95 {
  width: 95% !important;
}

.u-w96 {
  width: 96% !important;
}

.u-w97 {
  width: 97% !important;
}

.u-w98 {
  width: 98% !important;
}

.u-w99 {
  width: 99% !important;
}

.u-w100 {
  width: 100% !important;
}

.u-w1em {
  width: 1em !important;
}

.u-w2em {
  width: 2em !important;
}

.u-w3em {
  width: 3em !important;
}

.u-w4em {
  width: 4em !important;
}

.u-w5em {
  width: 5em !important;
}

.u-w6em {
  width: 6em !important;
}

.u-w7em {
  width: 7em !important;
}

.u-w8em {
  width: 8em !important;
}

.u-w9em {
  width: 9em !important;
}

.u-w10em {
  width: 10em !important;
}

.u-w11em {
  width: 11em !important;
}

.u-w12em {
  width: 12em !important;
}

.u-w13em {
  width: 13em !important;
}

.u-w14em {
  width: 14em !important;
}

.u-w15em {
  width: 15em !important;
}

.u-w16em {
  width: 16em !important;
}

.u-w17em {
  width: 17em !important;
}

.u-w18em {
  width: 18em !important;
}

.u-w19em {
  width: 19em !important;
}

.u-w20em {
  width: 20em !important;
}

.u-w21em {
  width: 21em !important;
}

.u-w22em {
  width: 22em !important;
}

.u-w23em {
  width: 23em !important;
}

.u-w24em {
  width: 24em !important;
}

.u-w25em {
  width: 25em !important;
}

.u-w26em {
  width: 26em !important;
}

.u-w27em {
  width: 27em !important;
}

.u-w28em {
  width: 28em !important;
}

.u-w29em {
  width: 29em !important;
}

.u-w30em {
  width: 30em !important;
}

.u-w31em {
  width: 31em !important;
}

.u-w32em {
  width: 32em !important;
}

.u-w33em {
  width: 33em !important;
}

.u-w34em {
  width: 34em !important;
}

.u-w35em {
  width: 35em !important;
}

.u-w36em {
  width: 36em !important;
}

.u-w37em {
  width: 37em !important;
}

.u-w38em {
  width: 38em !important;
}

.u-w39em {
  width: 39em !important;
}

.u-w40em {
  width: 40em !important;
}

.u-w41em {
  width: 41em !important;
}

.u-w42em {
  width: 42em !important;
}

.u-w43em {
  width: 43em !important;
}

.u-w44em {
  width: 44em !important;
}

.u-w45em {
  width: 45em !important;
}

.u-w46em {
  width: 46em !important;
}

.u-w47em {
  width: 47em !important;
}

.u-w48em {
  width: 48em !important;
}

.u-w49em {
  width: 49em !important;
}

.u-w50em {
  width: 50em !important;
}

.u-fs11 {
  font-size: 11px !important;
}

.u-fs12 {
  font-size: 12px !important;
}

.u-fs13 {
  font-size: 13px !important;
}

.u-fs14 {
  font-size: 14px !important;
}

.u-fs15 {
  font-size: 15px !important;
}

.u-fs16 {
  font-size: 16px !important;
}

.u-fs17 {
  font-size: 17px !important;
}

.u-fs18 {
  font-size: 18px !important;
}

.u-fs19 {
  font-size: 19px !important;
}

.u-fs20 {
  font-size: 20px !important;
}

.u-fs21 {
  font-size: 21px !important;
}

.u-fs22 {
  font-size: 22px !important;
}

.u-fs23 {
  font-size: 23px !important;
}

.u-fs24 {
  font-size: 24px !important;
}

.u-fs25 {
  font-size: 25px !important;
}

.u-fs26 {
  font-size: 26px !important;
}

.u-fs27 {
  font-size: 27px !important;
}

.u-fs28 {
  font-size: 28px !important;
}

.u-fs29 {
  font-size: 29px !important;
}

.u-fs30 {
  font-size: 30px !important;
}

.u-fs31 {
  font-size: 31px !important;
}

.u-fs32 {
  font-size: 32px !important;
}

.u-fs33 {
  font-size: 33px !important;
}

.u-fs34 {
  font-size: 34px !important;
}

.u-fs35 {
  font-size: 35px !important;
}

.u-fsXlarge {
  font-size: 32px !important;
}

.u-fsLarge {
  font-size: 24px !important;
}

.u-fsMedium {
  font-size: 20px !important;
}

.u-fsSmall {
  font-size: 16px !important;
}

.u-fsXsmall {
  font-size: 14px !important;
}

.u-fsXxsmall {
  font-size: 12px !important;
}

.u-colorTheme {
  color: var(--color-theme) !important;
}

.u-colorRed {
  color: var(--color-red) !important;
}

.u-textbold {
  font-weight: 700 !important;
}

.u-textnormal {
  font-weight: 500 !important;
}

.u-indent {
  text-indent: 1em !important;
}

.u-underline {
  text-decoration: underline !important;
}

.u-clear {
  clear: both !important;
}

.u-inlineBlock {
  display: inline-block !important;
}

.u-ac {
  text-align: center !important;
}

.u-ar {
  text-align: right !important;
}

.u-al {
  text-align: left !important;
}

.u-vm {
  vertical-align: middle !important;
}

.u-vt {
  vertical-align: top !important;
}

.u-vb {
  vertical-align: bottom !important;
}

.u-hidden {
  visibility: hidden !important;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}

.flatpickr-calendar.open, .flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}

.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}

.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}

.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}

.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}

.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}

.flatpickr-calendar:before, .flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  left: 22px;
}

.flatpickr-calendar.rightMost:before, .flatpickr-calendar.arrowRight:before, .flatpickr-calendar.rightMost:after, .flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}

.flatpickr-calendar.arrowCenter:before, .flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}

.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}

.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}

.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}

.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}

.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}

.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
  top: 100%;
}

.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}

.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}

.flatpickr-calendar:focus {
  outline: 0;
}

.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}

.flatpickr-months {
  display: flex;
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  overflow: hidden;
  flex: 1;
}

.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}

.flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i {
  position: relative;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /*
/*rtl:begin:ignore*/
  left: 0;
} /*
/*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /*
/*rtl:begin:ignore*/
  right: 0;
} /*
/*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}

.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}

.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
  transition: fill 0.1s;
  fill: inherit;
}

.numInputWrapper {
  position: relative;
  height: auto;
}

.numInputWrapper input, .numInputWrapper span {
  display: inline-block;
}

.numInputWrapper input {
  width: 100%;
}

.numInputWrapper input::-ms-clear {
  display: none;
}

.numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.15);
  box-sizing: border-box;
}

.numInputWrapper span:hover {
  background: rgba(0, 0, 0, 0.1);
}

.numInputWrapper span:active {
  background: rgba(0, 0, 0, 0.2);
}

.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}

.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}

.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%;
}

.numInputWrapper span.arrowDown {
  top: 50%;
}

.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%;
}

.numInputWrapper span svg {
  width: inherit;
  height: auto;
}

.numInputWrapper span svg path {
  fill: rgba(0, 0, 0, 0.5);
}

.numInputWrapper:hover {
  background: rgba(0, 0, 0, 0.05);
}

.numInputWrapper:hover span {
  opacity: 1;
}

.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0, 0, 0);
}

.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}

.flatpickr-current-month span.cur-month:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0 ;
  display: inline-block;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0, 0, 0, 0.9);
}

.flatpickr-current-month input.cur-year {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}

.flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}

.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: 28px;
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  flex: 1;
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1;
  font-weight: bolder;
}

.dayContainer, .flatpickr-weeks {
  padding: 1px 0 0 0;
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 307.875px;
}

.flatpickr-days:focus {
  outline: 0;
}

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #e6e6e6;
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}

.flatpickr-day.today {
  border-color: #959ea9;
}

.flatpickr-day.today:hover, .flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}

.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}

.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #569ff7;
}

.flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}

.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57, 57, 57, 0.1);
}

.flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}

.flatpickr-day.hidden {
  visibility: hidden;
}

.rangeMode .flatpickr-day {
  margin-top: 1px;
}

.flatpickr-weekwrapper {
  float: left;
}

.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  box-shadow: 1px 0 0 #e6e6e6;
}

.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}

.flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none;
}

.flatpickr-innerContainer {
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}

.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}

.flatpickr-time .numInputWrapper {
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}

.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}

.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}

.flatpickr-time input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}

.flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
  font-weight: 400;
}

.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}

.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  align-self: center;
}

.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}

.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}

.flatpickr-input[readonly] {
  cursor: pointer;
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* =================================================
  全社緊急お知らせ
================================================= */
#corporateInfomation {
  width: 100%;
  padding: 10px 0;
  background-color: #fff;
}
#corporateInfomation * {
  box-sizing: border-box;
  font-size: 14px;
}
#corporateInfomation h4 {
  margin: 0;
  color: #d80022;
}
#corporateInfomation a {
  display: block;
  width: 600px;
  height: 100%;
  padding: 10px 40px;
  margin: 0 auto;
  border: solid 1px red;
  border-radius: 4px;
  text-decoration: none;
}
#corporateInfomation.is-fixed {
  margin-bottom: 100px;
}

/* =================================================
  データ利用について
================================================= */
.bpPrivacy {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-index-bp-privacy);
  width: 440px;
  padding: 16px;
  border-top: 4px solid #1e4d84;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}
.bpPrivacy_message {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
}
.bpPrivacy_buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.bpPrivacy_button-detail, .bpPrivacy_button-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1.65;
  text-decoration: none;
  vertical-align: bottom;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.bpPrivacy_button-detail {
  border: 1px solid #e8e8e8;
  border-radius: 2px;
  background-color: #ffffff;
  color: #333333;
  font-weight: 500;
}
.bpPrivacy_button-detail:hover {
  background-color: rgba(51, 51, 51, 0.06);
}
.bpPrivacy_button-close {
  margin-left: 15px;
  border: none;
  background-color: #0068bc;
  color: #fff;
  font-weight: 700;
}
.bpPrivacy_button-close:hover {
  background-color: rgba(0, 118, 214, 0.9);
}

/* =================================================
  コメント引用
================================================= */
.articleBody .commentAdd {
  margin-bottom: 40px;
}
.articleBody .commentAdd .authorComment {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 20px 10px;
  border: 1px solid #eee;
}
.articleBody .commentAdd .authorComment .authorCommentAvatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 20px;
  overflow: hidden;
  border-radius: 50%;
}
.articleBody .commentAdd .authorComment .authorCommentInfo {
  flex: 1;
}
.articleBody .commentAdd .authorComment .authorCommentInfo .authorCommentName {
  font-size: 18px;
  font-weight: bold;
}
.articleBody .commentAdd .authorComment .authorCommentInfo .authorCommentLevel {
  color: #666;
  font-size: 14px;
}
.articleBody .commentAdd .authorComment .authorCommentText {
  width: 100%;
  margin: 10px 0;
  font-size: 14px;
  line-height: 22px;
}
.articleBody .commentAdd .authorComment time {
  display: inline-block;
  margin-right: 12px;
  color: #8c8c8c;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.articleBody .commentAdd .authorComment .authorCommentLike {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  color: #8c8c8c;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.articleBody .commentAdd .authorComment .authorCommentLike img {
  margin-right: 3px;
}

/* =================================================
  併せてお読みください
================================================= */
.articleBody .relationArticle {
  margin-bottom: 40px;
  clear: both;
}
.articleBody .relationArticle li:after {
  display: block;
  height: 20px;
  clear: both;
  content: "";
}
.articleBody .relationArticle li .thumb {
  width: 180px;
  margin-right: 10px;
  float: left;
}
.articleBody .relationArticle li .thumb img {
  width: 180px;
  height: auto;
}
.articleBody .relationArticle li p {
  margin-bottom: 5px !important;
  padding: 0 !important;
  color: black;
  font-size: 14px !important;
  line-height: 100% !important;
}
.articleBody .relationArticle li p.date, .articleBody .relationArticle li p.shoulder {
  color: #777;
}
.articleBody .relationArticle li p.title {
  padding: 5px 0 !important;
  font-size: 16px !important;
  font-weight: 700;
}
.articleBody .reArticleLink {
  margin-top: 48px;
  margin-bottom: 48px;
}
.articleBody .reArticleLink .reArticleWidget {
  border: 1px solid #f2f2f2;
}
.articleBody .reArticleLink .reArticleWidget > a {
  display: table-cell;
  padding: 16px;
  vertical-align: middle;
}
.articleBody .reArticleLink a {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
  text-decoration: none;
}
.articleBody .reArticleLink a:first-child {
  min-width: 142px;
}
.articleBody .reArticleLink a:nth-child(2) {
  flex: 0;
  width: 100%;
  background-position: 50%;
  background-size: cover;
}
.articleBody .reArticleLink em {
  display: block;
  margin-bottom: 8px;
  color: #787c7b;
  font-size: 12px;
  line-height: 1.5;
}
.articleBody .reArticleLink .reArticleTitle {
  max-height: 2.8em;
  overflow: hidden;
  font-size: 16px;
  word-break: break-all;
}
.articleBody .reArticleLink .reArticleImage {
  height: 110px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
}
.articleBody .reArticleLink .reArticleDescription {
  max-height: 3em;
  overflow: hidden;
  color: #787c7b;
  word-break: break-all;
}
.articleBody .reArticleLink .reArticleSource {
  text-align: right;
}
.articleBody .seminarLead {
  position: relative;
  margin: 15px 0 40px;
  padding: 13px 20px;
  border: solid 1px #E6001E;
  color: #242424;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.67;
}
.articleBody .seminarLead:after {
  position: absolute;
  top: 0;
  left: 0px;
  width: 12px;
  height: 12px;
  background-color: #E6001E;
  content: "";
}
.articleBody .seminarLead p {
  margin-bottom: 20px;
  font-size: 15px;
}
.articleBody .seminarLead dt {
  margin: 0 0 5px;
  color: #666666;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.articleBody .seminarLead dd {
  margin: 0;
}
.articleBody .seminarLead dd span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
}
.articleBody .seminarLead dd a {
  display: block;
  width: auto;
  padding: 15px 20px;
  border: solid 1px #eeeeee;
  border-radius: 2px;
}
.articleBody .seminarLead dd a:hover {
  color: #e6001e;
}

/* =================================================
  記事本文中キャンペーン
================================================= */
.bpcampaignbody {
  margin: 20px 0;
  background: #ccc;
}
.bpcampaignbody a {
  color: black;
  text-decoration: none;
  transition: none;
}
.bpcampaignbody a[href]:hover {
  color: black;
  text-decoration: underline;
  text-decoration-color: black;
}
.bpcampaignbody img {
  height: auto;
}
.bpcampaignbody.pt1 a {
  display: flex;
}
.bpcampaignbody.pt1 img {
  width: 120px;
}
.bpcampaignbody.pt2 img, .bpcampaignbody.pt3 img {
  display: block;
  width: 600px;
  margin: 0 auto;
}
.bpcampaignbody.pt1 .cmpb_heading {
  flex-shrink: 0;
  margin: 10px;
}
.bpcampaignbody.pt2 .cmpb_heading {
  padding-top: 20px;
}
.bpcampaignbody.pt3 .cmpb_heading {
  padding-bottom: 20px;
}
.bpcampaignbody .cmpb_text {
  flex-basis: 100%;
  padding: 10px;
}
.bpcampaignbody .cmpb_text h4 {
  margin: 0 0 10px 0;
  padding: 0;
  border: none;
  color: black;
  font-size: 16px;
  line-height: 1.44;
}
.bpcampaignbody .cmpb_subtitle {
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
}
.bpcampaignbody .cmpb_notice {
  font-size: 15px;
}
.bpcampaignbody .cmpb_link {
  font-size: 14px;
  text-align: right;
}

/* =================================================
  rhizome関連 ポップアップ
================================================= */
.rhizomePopup {
  display: none;
  z-index: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition-duration: 0.3s;
  transition-property: opacity;
}

.rhizomePopup.show {
  z-index: 10001;
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
  pointer-events: auto;
  display: block;
}

.rhizomePopup var {
  font-style: normal;
}

.rhizomePopup > div {
  -webkit-transform: translate(-50%, -50%);
  z-index: 100002;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 660px;
  max-width: 100%;
  height: auto;
  max-height: 80%;
  padding: 0;
  overflow: inherit;
  transform: translate(-50%, -50%);
  background: transparent !important;
}

.rhizomePopup span.close {
  display: block;
  position: absolute;
  top: -40px;
  right: 0;
  color: #242424;
  cursor: pointer;
}

.rhizomePopup span.close:before {
  display: inline-block;
  color: #ffffff;
  font-size: 45px;
  line-height: 32px;
  content: "\00d7";
}

#rhizomePopup.rhizomePopup > div div {
  padding: 22px 40px;
  border-radius: 4px;
  background: white;
  text-align: center;
}

#rhizomePopup.rhizomePopup > div div p {
  margin: 0;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.2px;
  line-height: 1.67;
}

#rhizomePopup.rhizomePopup > div div a {
  display: inline-block;
  width: 238px;
  height: 38px;
  margin-top: 20px;
  border: 1px solid #e6001e;
  border-radius: 4px;
  background: white;
  color: #E6001E;
  font-size: 17px;
  font-size: 15px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
}

#rhizomePopup.rhizomePopup > div span {
  display: block;
  position: absolute;
  top: -34px;
  right: 0;
  color: #242424;
  cursor: pointer;
}

#rhizomePopup.rhizomePopup > div span:before {
  display: inline-block;
  position: absolute;
  right: 3px;
  width: 32px;
  color: #ffffff;
  font-size: 45px;
  line-height: 32px;
  text-align: center;
  content: "\00d7";
}

/*****************************************************
  Print
*****************************************************/
@media print {
  body.print {
    min-width: inherit;
  }
}