@import url("color.css");
  @media(max-width: 719px) { .pc-only {  display: none !important } }  @media(min-width: 720px) { .sp-only {  display: none !important } }  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: rgba(0, 0, 0, 0) }  body { line-height: 1 }  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }  nav ul { list-style: none }  blockquote, q { quotes: none }  blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none }  a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: rgba(0, 0, 0, 0) }  ins { background-color: #ff9; color: #000; text-decoration: none }  mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold }  del { text-decoration: line-through }  abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help }  table { border-collapse: collapse; border-spacing: 0 }  hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0 }  input, select { vertical-align: middle }  html { height: 100% }  body { margin: 0; background-color: var(--basic-background-color); color: var(--basic-font-color); -webkit-font-smoothing: antialiased; font-family: "Noto Sans JP", "Open Sans", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif; min-height: 100%; overflow-wrap: break-word }  a { transition: opacity ease-out .15s }  a:hover { opacity: .75 }  .local-link { -webkit-font-smoothing: antialiased; font-family: "Noto Sans JP", "Open Sans", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif; font-weight: normal; font-size: 1rem; line-height: 1.6rem; -webkit-text-decoration-line: underline; text-decoration-line: underline; color: var(--information-link-font-color); transition: color .5s ease-out; line-height: 42px; letter-spacing: 0em; display: inline-block }  .local-img { margin-top: 4px }  * { box-sizing: border-box }  *:before, *:after { box-sizing: border-box }  .container { padding-top: 56px }  @media(min-width: 720px) { .container {  padding-top: 108px;  min-height: calc(100vh - 262px) } }  @media(max-width: 1150px)and (orientation: landscape) { .container {  padding-top: 10px } }  .default-layout { max-width: 1440px; margin: 0 auto }  .common-title { font-family: "Noto Serif JP", serif; font-weight: normal; font-size: 2rem; line-height: 3rem; letter-spacing: .03em; margin-bottom: 48px; color: var(--basic-title-color) }  .pagination_ul { display: flex; text-align: center; align-items: center; justify-content: center; margin: 0 auto 160px; padding: .25em }  .page-item { cursor: pointer; background: var(--paging-background-color); color: var(--paging-font-color); display: inline-flex; align-items: center; border-radius: 30px; justify-content: center; font-weight: 700; font-size: 12px; height: 35px; width: 35px; margin: 0 3px }  .page-item a { display: block; height: 40px; width: 40px; text-align: center; line-height: 40px }  .page-item-selected { cursor: pointer; background: var(--paging-selected-background-color); color: var(--paging-selected-font-color); display: inline-flex; align-items: center; border-radius: 30px; justify-content: center; font-weight: 700; font-size: 12px; height: 35px; width: 35px; margin: 0 3px }  .page-item-disabeld { display: none }  .perfomances-count { font-size: 1.5rem; line-height: 2.25rem; font-weight: bold; display: block; font-size: 1em; text-align: right; width: 100%; margin-top: 15px }  .perfomances-count label { opacity: .7; border-left: 1px solid rgba(0, 0, 0, .3333333333); border-top: 1px solid rgba(0, 0, 0, .3333333333); border-right: 1px solid rgba(255, 255, 255, .1333333333); border-bottom: 1px solid rgba(255, 255, 255, .1333333333); padding: .25em 1em; border-radius: 4px; background-color: rgba(0, 0, 0, .2) }  .perfomances-count-inline { display: inline; float: right; font-size: 20px; text-align: right; margin-left: 30px }  .large-banner-frame { margin: 0 auto; max-width: 1440px }  .large-banner { width: 100%; max-height: 550px; max-width: 100%; padding: 5px 20px }  @media(min-width: 927px) { .page-item {  font-size: 16px;  height: 40px;  width: 40px;  margin: 0 7px }  .page-item-selected {  font-size: 16px;  height: 40px;  width: 40px;  margin: 0 7px }  .large-banner {  max-width: 100%;  padding: 10px 50px } }  .contents-tags { margin-bottom: 10px }  .contents-tags:after { content: ""; display: block; width: 100%; height: 1px }  .month-tags { display: flex; width: 100%; flex-wrap: wrap; padding-top: 5px }  .month-tag { display: block; border: 1px solid rgba(128, 128, 128, .4); border-bottom-style: hidden; padding: 10px; list-style: none; margin: 0 3px 2px 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; font-size: 12px; border-radius: 10px 10px 0 0; flex-wrap: wrap }  .month-tag:first-child { margin-left: 15px }  .month-tag.hilite { box-shadow: 0 -3px 1px 0 rgba(213, 96, 150, .7882352941) inset }  .day-tag.show { display: block; opacity: 1; -webkit-animation: show 300ms linear 0s; animation: show 300ms linear 0s }  .day-title { font-size: 24px; padding: 5px 10px; margin: 2px 0 0 0 }  .day-tag { display: none; opacity: 0 }  .day { display: block; -webkit-animation: show 300ms linear 0s; animation: show 300ms linear 0s }  @-webkit-keyframes show { from {  opacity: 0 }  to {  opacity: 1 } }  @keyframes show { from {  opacity: 0 }  to {  opacity: 1 } }  .day-check:checked+.day { height: -webkit-max-content; height: -moz-max-content; height: max-content }  .day-check { display: block }  .day-list { width: 100% }  .home-title { padding-top: 20px }  .tags-wrapper { margin-bottom: 10px }  .search-form { width: 300px }  .hide { display: none }  .panel-button { position: relative; float: right; margin: 5px; cursor: pointer }  .home-btn { display: inline-block; font-weight: bold; font-size: 14px; margin-top: -4px; margin-right: 10px; border: 1px solid gray; padding: 5px 10px; border-radius: 8px }  .home-btn a { color: #fcf4f8; text-decoration: none }  .home-btn.home-btn--active a, .home-btn a:hover { color: #e5b1cb }  .search-form:before { content: ""; display: none; width: 100%; height: 24px }  .global-header { width: 100%; position: fixed; background-color: var(--header-background-color); transition: background-color .5s ease-out; z-index: 100 }  @media(max-width: 1150px)and (orientation: landscape) { .global-header {  position: relative !important } }  .global-header__inner { margin: 0 auto; position: relative; padding: 12px 10px; height: 56px }  @media(min-width: 720px) { .global-header__inner {  width: auto;  max-width: 1440px;  padding: 24px 48px;  height: 112px } }  .global-header__logo { width: 154px; height: 32px }  @media(min-width: 720px) { .global-header__logo {  width: 305px;  height: 64px } }  .global-header__logo a { display: inline-block; background-size: contain }  .global-header__logo img { width: 100%; height: auto; display: block }  .global-header-navi { position: absolute; top: 15px; right: 21px; font-size: 0 }  @media(min-width: 720px) { .global-header-navi {  top: 24px;  right: 48px;  padding: 12px 0 0 } }  @media(max-width: 1149px) { .global-header-navi {  padding-right: 64px } }  @media(max-width: 719px) { .global-header-navi {  padding-right: 28px } }  .global-header-navi__pc { display: none }  @media(min-width: 1150px) { .global-header-navi__pc {  display: inline-block } }  .language { font-weight: bold; font-size: .875rem; line-height: 1.3125rem; text-align: left; display: inline-block }  .language .language__ja, .language .language__en, .language .language__slash { display: inline-block; color: var(--language-font-color) }  .language .language__ja a, .language .language__en a, .language .language__slash a { text-decoration: none; color: var(--language-font-color) }  .language .language__slash { margin: 0 .25em }  .language--ja .language__ja a { color: var(--language-selected-font-color); pointer-events: none }  .language--en .language__en a { color: var(--language-selected-font-color); pointer-events: none }  .language--menu { font-weight: bold; font-size: .875rem; line-height: 1.3125rem; margin-bottom: 24px }  .official-site-link, .guide-link, .mypage-link, .logout-link { font-weight: bold; font-size: .875rem; line-height: 1.3125rem; text-decoration: none; color: var(--link-font-color); transition: color .5s ease-out; margin: 0 0 0 20px; display: inline-block }  @media(min-width: 720px) { .official-site-link, .guide-link, .mypage-link, .logout-link {  line-height: 40px } }  .guide-link, .mypage-link { margin-right: 20px }  @media(max-width: 1149px) { .mypage-link, .logout-link {  margin-right: 0 } }  @media(max-width: 719px) { .mypage-link, .logout-link {  margin-right: 0;  line-height: 24px;  font-size: 12px } }  .logout-link { margin: 0 }  .mypage-link { margin-left: 0 }  .header-social { font-size: 0; padding: 0; display: inline-block; padding: 9px 0; margin-right: 32px; vertical-align: top }  .header-social__item { display: inline-block; width: 24px; height: 24px }  .header-social__item.header-social__item--facebook { margin-left: 20px }  .header-social__item.header-social__item--facebook a { background-image: url(../img/icons/facebook-icon.svg) }  .header-social__item.header-social__item--twitter { margin-left: 20px }  .header-social__item.header-social__item--twitter a { background-image: url(../img/icons/twitter-icon.svg) }  .header-social__item.header-social__item--instagram { margin-left: 20px }  .header-social__item.header-social__item--instagram a { background-image: url(../img/icons/instagram-icon.svg) }  .header-social__item.header-social__item--youtube { margin-left: 20px }  .header-social__item.header-social__item--youtube a { background-image: url(../img/icons/youtube-icon.svg) }  .header-social__item a { width: 100%; height: 100%; display: block; background-position: center center; background-size: contain; background-repeat: no-repeat }  .login-logout { display: inline-block }  @media(max-width: 719px) { .login-logout {  vertical-align: top } }  @media(max-width: 1149px) { .logged-in .login-logout {  display: none } }  .login-button, .logout-button { text-decoration: none; display: inline-block; font-weight: bold; font-size: 1rem; line-height: 1.5rem; background: var(--button1-background-color); color: var(--button1-font-color); text-align: center }  @media(max-width: 719px) { .login-button, .logout-button {  vertical-align: top;  background-color: rgba(0, 0, 0, 0);  color: var(--button1-mobile-font-color);  font-size: 12px;  font-weight: bold;  width: auto;  height: auto } }  @media(min-width: 720px) { .login-button, .logout-button {  border-radius: 20px;  height: 40px;  width: 124px;  border-radius: 20px;  line-height: 40px } }  @media(max-width: 1149px) { .login-button.login-button--mypage {  display: none } }  .global-footer { position: relative; background-color: var(--footer-background-color); transition: background-color .5s ease-out }  .global-footer__inner { max-width: 1440px; margin: 0 auto; padding: 0 16px; padding: 24px 16px 32px }  @media(min-width: 720px) { .global-footer__inner {  padding: 0 48px } }  @media(min-width: 720px) { .global-footer__inner {  padding: 48px } }  .global-footer__logo { width: 232px; margin-bottom: 48px }  @media(min-width: 720px) { .global-footer__logo {  width: 309px } }  .global-footer__logo img { display: block; width: 100% }  .footer-links-wrapper { display: flex; flex-wrap: wrap }  .footer-links { width: calc(25% - 18px); margin-bottom: 48px }  @media(max-width: 719px) { .footer-links {  width: 100% } }  .footer-links:not(:nth-child(4n+4)) { margin-right: 20px }  @media(max-width: 719px) { .footer-links:not(:nth-child(4n+4)) {  margin-right: 0 } }  .footer-links__item { list-style-type: none; margin-bottom: 12px }  @media(min-width: 720px) { .footer-links__item {  margin-bottom: 12px } }  .footer-links__item:last-of-type { margin-bottom: 0 }  .footer-links__item a { font-weight: bold; font-size: .875rem; line-height: 1.3125rem; color: var(--footer-link-font-color); text-decoration: none }  .footer-social { font-size: 0; padding: 0; margin-bottom: 48px }  .footer-social__item { display: inline-block; width: 24px; height: 24px; margin-right: 20px }  .footer-social__item.footer-social__item--facebook a { background-image: url(../img/icons/facebook-icon.svg) }  .footer-social__item.footer-social__item--twitter a { background-image: url(../img/icons/twitter-icon.svg) }  .footer-social__item.footer-social__item--instagram a { background-image: url(../img/icons/instagram-icon.svg) }  .footer-social__item.footer-social__item--youtube a { background-image: url(../img/icons/youtube-icon.svg) }  .footer-social__item a { width: 100%; height: 100%; display: block; background-position: center center; background-size: contain; background-repeat: no-repeat }  .powerdby, .copyright { font-size: 11px; line-height: 1.5; letter-spacing: .03em; color: var(--footer-copy-font-color) }  .powerdby { text-align: left; margin-bottom: 24px }  @media(min-width: 720px) { .powerdby {  margin-bottom: 0px;  text-align: left } }  .copyright { text-align: left }  @media(min-width: 720px) { .copyright {  text-align: right;  position: absolute;  bottom: 48px;  right: 48px } }  #totop { background-color: var(--button2-backgound-color); color: var(--button2-font-color); opacity: .8; position: fixed; bottom: 10px; cursor: pointer; font-size: .9rem; border-radius: 20px; padding: .8rem 1rem; transition: .2s ease-out }  .btninactive { right: -120px }  .btnactive { right: 10px !important; transition: .2s ease-out }  #totop:hover { opacity: .5; transition: .2s linear }  .mobile-menu { position: fixed; top: 0; right: -100vw; width: 100%; height: 100%; background-color: var(--mobilemenu-background-color1); overflow-x: hidden; overflow-y: scroll; z-index: 200; padding: 57px 16px; transition: right .2s cubic-bezier(0.215, 0.61, 0.355, 1), background-color .5s ease-out, color .5s ease-out }  @media(min-width: 720px) { .mobile-menu {  padding: 112px 48px } }  @media(min-width: 1150px) { .mobile-menu {  display: none } }  .mobile-menu.active { right: 0 }  .mobile-menu__line1, .mobile-menu__line2 { width: 100%; height: 1px; background-color: var(--mobilemenu-dividing-line-color1); transition: background-color .5s ease-out; margin-bottom: 24px }  .mobile-menu__title { font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: .03em; color: var(--basic-title-color); margin-bottom: 24px }  .mobile-menu-links { margin-bottom: 24px }  .mobile-menu-item { font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .03em; margin-bottom: 12px }  .mobile-menu-item a { color: var(--mobilemenu-font-color1); transition: color .5s ease-out; text-decoration: none }  .mobile-menu-item:last-of-type { margin-bottom: 0 }  .menu-small-links { margin: 32px 0 }  .menu-small-links__item { font-weight: bold; font-size: .875rem; line-height: 1.3125rem; list-style-type: none; margin-bottom: 12px }  .menu-small-links__item a { color: var(--mobilemenu-font-color1); transition: color .5s ease-out; text-decoration: none }  .menu-small-links__item:last-of-type { margin-bottom: 0 }  .mobile-menu-button { position: fixed; top: 10px; right: 10px; width: 30px; padding: 6px 6px 2px; box-sizing: border-box; display: block; z-index: 300 }  .mobile-menu-button:after { content: ""; display: none; width: 33px; height: 7px; background: url(../img/common/menu-sp-text.svg) no-repeat center center; background-size: contain; position: absolute; top: 24px; left: 0; transition: opacity .25s ease-out }  @media(max-width: 719px) { .mobile-menu-button:after {  display: block } }  @media(min-width: 720px) { .mobile-menu-button {  top: 34px;  right: 48px;  width: 48px;  padding: 9px 0 9px 18px } }  @media(min-width: 1150px) { .mobile-menu-button {  display: none } }  @media(max-width: 1150px)and (orientation: landscape) { .mobile-menu-button {  position: absolute !important } }  .mobile-menu-button__line { width: 18px; height: 2px; background-color: var(--button1-mobile-font-color); transition: background-color .5s ease-out; display: block; margin-bottom: 4px; transition: all .25s ease-out; position: relative }  @media(min-width: 720px) { .mobile-menu-button__line {  width: 30px;  height: 3px;  margin-bottom: 7px } }  .mobile-menu-button__line:nth-child(2):after { background-color: var(--button1-mobile-font-color); transition: background-color .5s ease-out; content: ""; display: block; width: 18px; height: 2px; margin-bottom: 4px; opacity: 0; position: absolute; transition: all .25s ease-out }  @media(min-width: 720px) { .mobile-menu-button__line:nth-child(2):after {  width: 30px;  height: 3px;  margin-bottom: 7px } }  .mobile-menu-button__line:last-child { margin-bottom: 0 }  .mobile-menu-button.active:after { opacity: 0 }  .mobile-menu-button.active .mobile-menu-button__line { transform-origin: 50% 50% }  .mobile-menu-button.active .mobile-menu-button__line:nth-child(1) { opacity: 0 }  .mobile-menu-button.active .mobile-menu-button__line:nth-child(2) { transform: rotate(-45deg) }  .mobile-menu-button.active .mobile-menu-button__line:nth-child(2):after { opacity: 1; transform: rotate(90deg) }  .mobile-menu-button.active .mobile-menu-button__line:nth-child(3) { opacity: 0 }  .home { position: relative }  .home:before { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 100%; height: 250px; background: linear-gradient(180deg, var(--gradation-background-color-1-start) 0%, #fff 100%) }  .home__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 16px; padding: 24px 16px 0 }  @media(min-width: 720px) { .home__inner {  padding: 0 48px } }  @media(min-width: 720px) { .home__inner {  padding: 48px 48px 0 } }  .home-footer { padding-bottom: 24px }  @media(min-width: 720px) { .home-footer {  display: none } }  .home-footer .home-title { color: var(--footer-copy-font-color) }  .home-title { font-weight: bold; font-size: 1.5rem; line-height: 2.25rem; color: var(--basic-font-color); margin-bottom: 16px }  @media(min-width: 720px) { .home-title {  margin-bottom: 24px } }  .home-navi { position: relative; padding-bottom: 35px }  @media(min-width: 720px) { .home-navi {  padding-bottom: 48px } }  .home-navi.home-navi--open .home-search-open-button { background-image: url(../img/icons/search-close-icon.svg) }  .home-navi button { display: none }  .home-header .home-navi { margin-bottom: 0 }  .home-tabs, .home-tabs-child { font-size: 0; position: relative; display: block; list-style-type: none }  .home-tabs-child { margin-top: 25px; }  .home-tab, .home-tab-child { display: inline-block; margin: 0 12px 12px 0 }  @media(min-width: 720px) { .home-tab, .home-tab-child {  margin-right: 16px } }  .home-tab a, .home-tab-child a { font-weight: bold; font-size: 1rem; line-height: 1.5rem; background-color: var(--tab-backgound-color); color: var(--tab-font-color); text-decoration: none; position: relative; transition: color .1s ease-out; display: inline-block; height: 40px; line-height: 40px; padding: 0 16px; border-radius: 20px; cursor: pointer }  .home-tab.home-tab--active a, .home-tab-child.home-tab-child--active a { pointer-events: none; background-color: var(--tab-selected-background-color) }  .home-tab.home-tab--active a, .home-tab a:hover, .home-tab-child.home-tab-child--active a, .home-tab-child a:hover { background-color: var(--tab-hovering-background-color) }  .home-credit { background-color: #fff; color: #212121; padding: 32px 0; margin-top: -10px }  .home-credit-block { font-size: 1rem; line-height: 1.6rem; font-weight: normal; max-width: 100%; padding: 0 0 32px }  .home-credit-block__inner { margin: 0 auto; max-width: 1440px; padding: 0 16px }  .home-credit-block__title { font-family: "Noto Serif JP", serif; font-size: 1.15rem; line-height: 1.875rem; font-weight: bold; margin-bottom: 16px }  .support-textlist-wrapper__list { font-size: .875rem; line-height: 1.4rem; font-weight: normal; list-style: none; margin: 16px 0 0 }  .support-textlist-wrapper__item { margin-bottom: 8px }  .support-textlist-wrapper__item { margin-bottom: 8px }  .support-textlist-wrapper__item:last-child { margin-bottom: 0 }  .support-textlist-wrapper__item-link { text-decoration: none }  .support-textlist-wrapper__item-link:hover { opacity: .75 }  @media(min-width: 927px) { .home-credit {  padding: 48px 0 }  .home-credit-block {  padding: 0 0 48px }  .home-credit-block__inner {  padding: 0 48px }  .home-credit-block__title {  margin-bottom: 24px }  .support-textlist-wrapper__list {  margin: 16px 0 0 }  .support-textlist-wrapper__list {  margin: 16px 0 0 }  .support-textlist-wrapper__item {  margin-bottom: 4px } }  @media screen and (max-width: 926px) { .support-textlist-wrapper__list {  font-size: .75rem;  line-height: 1.2rem } }  .card-list { display: flex; flex-wrap: wrap; padding-bottom: 24px }  @media(min-width: 720px) { .card-list {  padding-bottom: 24px } }  .card { background-color: var(--card-background-color); border-radius: 12px; margin-bottom: 24px; overflow: hidden; position: relative; width: 100% }  @media screen and (min-width: 1221px) { .card {  width: calc(25% - 18px) }  .card:not(:nth-child(4n+4)) {  margin-right: 24px } }  @media screen and (min-width: 927px)and (max-width: 1220px) { .card {  width: calc(33.3333% - 16px) }  .card:not(:nth-child(3n+3)) {  margin-right: 24px } }  @media(max-width: 719px) { .card {  margin-bottom: 12px;  width: 100% } }  .card__inner { color: var(--card-font-color); display: block; text-decoration: none }  .card__inner:hover { opacity: 1 }  .card__inner:hover .card-thumbnail .card-thumbnail__inner:before, .card__inner:hover .card-thumbnail .card-thumbnail__inner:after { opacity: 0 }  .card__inner:hover .card-thumbnail__inner { -webkit-filter: saturate(100%) brightness(100%) contrast(100%); filter: saturate(100%) brightness(100%) contrast(100%); transition: -webkit-filter .1s ease-out; transition: filter .1s ease-out; transition: filter .1s ease-out, -webkit-filter .1s ease-out }  .card-header { padding: 8px 12px 0 }  @media(min-width: 720px) { .card-header {  padding: 16px } }  .card-header__date { font-weight: bold; font-size: 1.25rem; line-height: 1.875rem; margin-bottom: 12px }  @media(min-width: 720px) { .card-header__date {  margin-bottom: 0 } }  .card-header__tag { margin-bottom: 12px }  .card-thumbnail { position: relative }  @media(max-width: 719px) { .card-thumbnail {  max-width: 206px;  position: absolute;  right: 0;  top: 0;  width: 60% }  .card-thumbnail__grad {  background: linear-gradient(90deg, #242728 0%, rgba(36, 39, 40, 0.3) 34.9%, rgba(36, 39, 40, 0) 100%);  content: "";  display: block;  height: 100%;  left: 0;  position: absolute;  top: 0;  width: 28px } }  .card-thumbnail__inner { position: relative }  @media(min-width: 720px) { .card-thumbnail__inner {  -webkit-filter: saturate(65%) brightness(85%) contrast(105%);  filter: saturate(65%) brightness(85%) contrast(105%);  transition: -webkit-filter .2s ease-out;  transition: filter .2s ease-out;  transition: filter .2s ease-out, -webkit-filter .2s ease-out } }  .card-thumbnail__inner::before, .card-thumbnail__inner::after { content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100% }  @media(max-width: 719px) { .card-thumbnail__inner::before, .card-thumbnail__inner::after {  opacity: 0 } }  .card-thumbnail__inner:after { background-color: #4d3319; mix-blend-mode: color }  .card-thumbnail__inner img { display: block; height: auto; width: 100% }  @media(max-width: 719px) { .card-thumbnail__inner img {  max-width: 206px } }  .card-thumbnail__logo { background: url(../img/common/card-logo.png) no-repeat center center; background-size: contain; height: 24px; left: 8px; position: absolute; top: 8px; width: 22px }  @media(min-width: 720px) { .card-thumbnail__logo {  height: 51px;  width: 29px } }  .card-thumbnail__logo img { display: block; width: 100% }  .card-body { padding: 12px }  @media(min-width: 720px) { .card-body {  padding: 16px } }  .card-body__category { font-weight: normal; font-size: 1rem; line-height: 1.5rem; margin-bottom: 4px }  @media screen and (max-width: 719px) { .card-body__category {  font-size: .9375rem;  line-height: 1.40625rem } }  .card-body__title { font-weight: bold; font-size: 1.25rem; line-height: 1.875rem; letter-spacing: -0.01em; padding-bottom: 4px }  @media screen and (max-width: 719px) { .card-body__title {  font-size: 1rem;  line-height: 1.5rem } }  .card-body__subtitle { font-weight: bold; font-size: .9375rem; line-height: 1.40625rem; letter-spacing: -0.01em }  .card-body__place { font-weight: normal; font-size: .875rem; line-height: 1.4rem; color: #999; margin-bottom: 12px; padding-top: 4px }  @media screen and (max-width: 719px) { .card-body__place {  font-size: .75rem;  line-height: 1.2rem } }  @media(min-width: 720px) { .card-body__place {  margin-bottom: 16px } }  .card-body__deadline { font-weight: bold; font-size: .75rem; line-height: 1.2rem }  .card-tags { display: flex; justify-content: space-between; margin-bottom: 16px }  .card-tags:last-of-type { margin-bottom: 0; margin-top: 12px }  .card-tag { border: 1px solid #d1d1d1; color: #d1d1d1; display: inline-block; padding: 6px 8px; font-weight: bold; font-size: .8125rem; line-height: .8125rem; letter-spacing: -0.01em }  .card-tag.card-tag--wait { background-color: #8a68b5; border-color: #8a68b5; color: #fff }  .card-tag.card-tag--sale { background-color: #d775a6; border-color: #d775a6; color: #fff }  .card-tag.card-tag--live { background-color: #fe62c7; border-color: #fe62c7; color: #fff }  .card-tag.card-tag--purchased { background-color: #574271; border-color: #574271; color: #fff }  .card-tag.card-tag--end { background-color: #666; border-color: #666; color: #fff }  .card-tag.card-tag--other { background-color: #666; border-color: #666; color: #fff }  .card-tag.card-tag--cancelled { background-color: #b51313; border-color: #b51313; color: #fff }  .card-tag.card-tag--rerun { background-color: var(--card-tag-rerun-color); border-color: var(--card-tag-rerun-color); color: #fff; }  .card-tag.card-tag--archive { background-color: var(--card-tag-archive-color); border-color: var(--card-tag-archive-color); color: #fff; }  .card-tag.card-tag--archive-preparation { background-color: var(--card-tag-archive-preparation-color); border-color: var(--card-tag-archive-preparation-color); color: #fff; }  .search-form { width: 40px; height: 40px; padding-top: 0; overflow: hidden; font-size: 0; border-radius: 20px; transition: width .3s ease-out }  .search-form.search-form--active, .search-form.search-form--result { width: calc(100vw - 32px) }  .search-form.search-form--active .search-form__input-wrapper, .search-form.search-form--result .search-form__input-wrapper { background-color: var(--search-background-color) }  .search-form.search-form--active .search-form__input, .search-form.search-form--result .search-form__input { pointer-events: auto; background-color: var(--search-background-color) }  .search-form.search-form--active .search-form__submit-button, .search-form.search-form--result .search-form__submit-button { pointer-events: auto }  .search-form.search-form--active .search-form__open-button, .search-form.search-form--result .search-form__open-button { left: 2px; background-image: url(../img/icons/search-form-icon-dark.svg) }  @media(min-width: 720px) { .search-form.search-form--active, .search-form.search-form--result {  width: 308px } }  .search-form.search-form--result .search-form__submit-button { background-color: #666 }  @media(min-width: 720px) { .search-form {  width: 40px;  position: absolute;  top: -62px;  right: 0;  height: auto } }  @media(max-width: 1050px) { .search-form {  position: relative;  top: 0;  height: auto;  text-align: right } }  @media(max-width: 719px) { .search-form {  position: relative;  top: 0;  height: auto } }  .search-form__inner { width: calc(100vw - 32px); overflow: hidden; display: flex; justify-content: space-between }  @media(min-width: 720px) { .search-form__inner {  width: 308px } }  .search-form__input-wrapper { width: calc(100vw - 32px - 68px); height: 40px; background-color: #666; border-radius: 40px; padding: 0 0 0 44px; overflow: hidden; position: relative; transition: background-color .25s ease-out }  @media(min-width: 720px) { .search-form__input-wrapper {  width: 240px } }  .search-form__open-button { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 20px; border: none; background: rgba(0, 0, 0, 0) url(../img/icons/search-form-icon.svg) no-repeat center center; background-size: 16px 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none }  .search-form__open-button.search-form__open-button--close { background-image: url(../img/icons/search-form-close-icon.svg) !important; background-size: 12px 12px }  .search-form__input { font-weight: normal; font-size: .875rem; line-height: 1.3125rem; border: none; height: 100%; width: 100%; background-color: #666; outline: none; color: var(--search-font-color); padding: 0 16px 0 0; pointer-events: none; transition: background-color .25s ease-out }  .search-form__submit-button { width: 60px; height: 40px; background-color: #4577bb; color: #fff; font-weight: bold; font-size: .875rem; line-height: 1.3125rem; display: block; border-radius: 20px; text-align: center; line-height: 40px; pointer-events: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border: none; transition: opacity ease-out .15s }  .search-form__submit-button:hover { opacity: .75 }  .companies { max-width: 100%; background-color: #fff; padding: 32px 0 }  .companies__title { font-family: "Noto Serif JP", serif; font-weight: bold; font-size: 2rem; line-height: 3rem; color: #3d3d3d; font-size: 1.15rem; margin-bottom: 16px }  @media(min-width: 720px) { .companies__title {  margin-bottom: 24px } }  .support-list-wrapper { padding: 0 }  @media(min-width: 720px) { .support-list-wrapper {  padding: 0 48px } }  @media(max-width: 719px) { .support-list-wrapper {  padding: 0 24px } }  ul.support-list { display: flex; flex-wrap: wrap; margin: 0 0 12px; padding: 0 }  @media(min-width: 720px) { ul.support-list {  margin: 0 0 48px } }  ul.support-list li { display: inline-block; margin: 0 0 12px }  @media(min-width: 720px) { ul.support-list li {  margin: 0 0 24px } }  ul.support-list li a { text-decoration: none; margin: 0 }  ul.support-list li img { width: 100%; margin: 0 }  ul.support-list.platinum li { width: calc(28% - 12px); } @media (min-width: 720px) { ul.support-list.platinum li:not(:nth-child(2n + 2)) { margin-right: 24px; } } @media (max-width: 719px) { ul.support-list.platinum li { width: calc(55% - 12px); margin: 0 auto; } }  ul.support-list.gold li { width: calc(25% - 18px) }  @media(min-width: 720px) { ul.support-list.gold li:not(:nth-child(4n+4)) {  margin-right: 24px } }  @media(max-width: 719px) { ul.support-list.gold li {  width: calc(50% - 12px) }  ul.support-list.gold li:not(:nth-child(2n+2)) {  margin-right: 24px } }  ul.support-list.silver li { width: calc(20% - 19.2px) }  @media(min-width: 720px) { ul.support-list.silver li:not(:nth-child(5n+5)) {  margin-right: 24px } }  @media(max-width: 719px) { ul.support-list.silver li {  width: calc(33.3333% - 16px) }  ul.support-list.silver li:not(:nth-child(3n+3)) {  margin-right: 24px } }  ul.support-list.bronze li { width: calc(16.66666% - 20px) }  @media(min-width: 720px) { ul.support-list.bronze li:not(:nth-child(6n+6)) {  margin-right: 24px } }  @media(max-width: 719px) { ul.support-list.bronze li {  width: calc(25% - 18px) }  ul.support-list.bronze li:not(:nth-child(4n+4)) {  margin-right: 24px } }  .information { max-width: 1440px; margin: 0 auto; padding: 0 16px; margin: 24px auto 0 }  @media(min-width: 720px) { .information {  padding: 0 48px } }  @media(min-width: 720px) { .information {  margin: 48px auto 0 } }  .information__inner { width: 100%; position: relative; padding: 12px; background-color: var(--information-background-color); border-radius: 12px }  @media(min-width: 720px) { .information__inner {  padding: 24px;  border-radius: 0px } }  .information .linethrough { text-decoration: line-through }  .information>* { color: var(--information-font-color); display: block; font-size: 12px }  @media(min-width: 720px) { .information>* {  font-size: 14px;  display: inline-block } }  .information__title { width: 100%; font-weight: bold; font-size: 1rem; line-height: 1.6rem; color: var(--information-font-color); margin-bottom: 8px }  @media(min-width: 720px) { .information__title {  margin-bottom: 16px } }  .information__items { list-style-type: none; margin-bottom: 16px }  @media(min-width: 720px) { .information__items {  width: calc(100% - 176px);  margin-bottom: 0 } }  .information__item { font-weight: normal; font-size: .875rem; line-height: 1.4rem; color: var(--information-font-color); margin-bottom: 8px }  @media screen and (max-width: 719px) { .information__item {  font-size: .75rem;  line-height: 1.2rem } }  @media(min-width: 720px) { .information__item {  font-weight: normal;  font-size: 1rem;  line-height: 1.6rem } }  .information__item:last-of-type { margin-bottom: 0 }  .information__item-link { color: var(--information-font-color) }  .information__item-link:hover { color: var(--information-link-font-color) }  .information__more-button { font-weight: normal; font-size: .875rem; line-height: 1.4rem; color: var(--information-link-font-color) }  @media screen and (max-width: 719px) { .information__more-button {  font-size: .75rem;  line-height: 1.2rem } }  @media(min-width: 720px) { .information__more-button {  position: absolute;  bottom: 24px;  right: 24px } }  .detail { width: 100%; margin: 0 auto; background-color: var(--basic-background-color); background: linear-gradient(180deg, var(--gradation-background-color-1-start) 66.6%, var(--gradation-background-color-1-end) 100%) }  .detail__inner { padding: 0 16px 72px }  @media(min-width: 720px) { .detail__inner {  padding: 0 48px 144px;  max-width: 1116px;  margin: 0 auto } }  .player { position: relative; margin: 0 -16px 16px; width: calc(100% + 32px) }  @media(min-width: 720px) { .player {  width: 100%;  margin: 0 0 32px } }  .player__thumbnail { width: 100% }  .player__thumbnail img { width: 100%; height: auto; display: block }  .player-soon { width: 100%; height: 100%; background-color: rgba(0, 0, 0, .9); position: absolute; top: 0; left: 0; cursor: pointer }  .player-soon__inner { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }  @media(min-width: 720px) { .player-soon__inner {  transition: opacity ease-out .15s }  .player-soon__inner:hover {  opacity: .75 } }  .player-soon__icon { width: 43px; height: 50px; background: url(../img/icons/play-icon.svg) no-repeat top left; background-size: contain; display: inline-block; margin-bottom: 23px }  @media(min-width: 720px) { .player-soon__icon {  width: 86px;  height: 100px;  margin-bottom: 46px } }  .player-soon__text { font-weight: bold; color: var(--supplement-font-color); line-height: 1.5; font-size: 13px; margin: -3px 0px -3px 0px }  @media(min-width: 720px) { .player-soon__text {  font-size: 18px;  margin: -5px 0 } }  .player-config { text-align: right; width: 100%; display: none; position: relative; padding: 12px 16px 12px 16px; margin-bottom: 36px }  @media(min-width: 720px) { .player-config {  padding: 14px 16px;  margin-bottom: 48px } }  .player-copyright { text-align: right; width: 100%; position: relative; color: #999; font-size: 11px; padding: 9px 16px 0px 16px; margin-bottom: 29px }  @media(min-width: 720px) { .player-copyright {  padding: 14px 0 0;  margin-bottom: 48px;  font-size: 11px } }  .player-config-button { background-color: rgba(0, 0, 0, 0); -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border: none; cursor: pointer; font-size: 0; padding: 0 }  .player-config-button__icon { width: 18px; height: 20px; margin-right: 9px; background: rgba(0, 0, 0, 0) url(../img/icons/video-icon.svg) no-repeat center center; background-size: contain; display: inline-block; position: relative }  @media(min-width: 720px) { .player-config-button__icon {  width: 18px;  height: 20px;  margin-right: 9px } }  .player-config-button__text { vertical-align: top; display: inline-block; color: #fff; line-height: 20px; font-size: 11px; position: relative }  @media(min-width: 720px) { .player-config-button__text {  font-size: 11px;  line-height: 20px } }  @media(min-width: 720px) { .player-config-button {  transition: opacity ease-out .15s }  .player-config-button:hover {  opacity: .75 } }  .detial-content { margin-top: 24px }  .detial-content:after { content: ""; display: table; clear: both }  @media(min-width: 720px) { .detail-body {  width: calc(100% - 318px);  float: left;  padding-right: 32px } }  .detail-body__text a, .detail-body__sponsors a, .detail-body__attention a { color: var(--supplement-font-color); text-decoration: underline }  .detail-body__text pre, .detail-body__sponsors pre, .detail-body__attention pre { white-space: pre-wrap }  .detail-body__text { font-weight: normal; font-size: 1rem; line-height: 1.6rem; color: var(--supplement-font-color); margin-bottom: 32px }  .detail-body__link { display: block; font-weight: bold; font-size: 1rem; line-height: 1.5rem; color: var(--information-link-font-color); margin-bottom: 32px }  .detail-body__sponsors { font-weight: normal; font-size: 1rem; line-height: 1.6rem; color: var(--basic-font-color); margin: -4px 0px 48px 0px }  .detail-body__sponsors a { color: var(--basic-font-color) }  @media(min-width: 720px) { .detail-body__sponsors {  margin-bottom: 48px } }  .detail-body__attention { font-weight: normal; font-size: .875rem; line-height: 1.4rem; color: var(--supplement-font-color) }  @media screen and (max-width: 719px) { .detail-body__attention {  font-size: .75rem;  line-height: 1.2rem } }  .detail-body__surveylink { display: block; text-align: center; font-weight: normal; font-size: 1rem; line-height: 1.6rem; -webkit-text-decoration-line: underline; text-decoration-line: underline; background-color: var(--announce-background-color); color: var(--announce-font-color); padding: 16px 0; margin-bottom: 24px }  @media(min-width: 720px) { .detail-body__surveylink {  margin-bottom: 32px } }  .detail-body__cancelledlink { background-color: var(--announce-background-color); border: 1px solid var(--emphasis-border-color); color: var(--emphasis-border-font-color); display: block; text-align: center; font-size: 1rem; line-height: 1.6rem; font-weight: normal; -webkit-text-decoration-line: underline; text-decoration-line: underline; line-height: 3rem }  @media(min-width: 720px) { .detail-body__cancelledlink {  margin-bottom: 32px } }  .detail-header { margin-bottom: 32px }  @media(min-width: 720px) { .detail-header {  margin-bottom: 48px } }  .detail-header__date { font-weight: bold; font-size: 1.5rem; line-height: 2.4rem; color: var(--basic-title-color); margin-bottom: 24px }  @media screen and (max-width: 719px) { .detail-header__date {  font-size: 1rem;  line-height: 1.5rem } }  .detail-header__category { font-weight: normal; font-size: 1.3125rem; line-height: 2.1rem; letter-spacing: .01em }  @media screen and (max-width: 719px) { .detail-header__category {  font-size: .875rem;  line-height: 1.4rem } }  .detail-header__title { font-weight: bold; font-size: 1.875rem; line-height: 3rem }  @media screen and (max-width: 719px) { .detail-header__title {  font-size: 1.5rem;  line-height: 2.4rem } }  .detail-header__subtitle { font-weight: bold; font-size: 1.5rem; line-height: 2.4rem }  @media screen and (max-width: 719px) { .detail-header__subtitle {  font-weight: normal;  font-size: 1rem;  line-height: 1.6rem } }  .detail-header__tag  { display: inline-block; list-style: none; margin-top: 16px; font-weight: bold; font-size: .9125rem; color: var(--icon-font-color); margin-right: 10px;}  .detail-header__tag a{ color:inherit; text-decoration: none; margin-right: 5px; }  .detail-header__tag a:hover{ text-decoration: underline; }  .detail-header__movie-type { padding: 6px 8px 7px; font-weight: bold; font-size: .8125rem; line-height: .8125rem; letter-spacing: -0.01em; line-height: 100%; color: var(--icon-font-color); border: 1px solid var(--icon-border-color); display: inline-block; margin-top: 16px }  .detail-info { margin-bottom: 32px }  .detail-info__title { font-weight: bold; font-size: 1.25rem; line-height: 1.875rem; margin-top: 24px; margin-bottom: 4px }  @media(min-width: 720px) { .detail-info__title {  margin-top: 48px } }  .detail-info__text { font-weight: normal; font-size: 1rem; line-height: 1.6rem }  .detail-info__text:last-of-type { margin-bottom: 0 }  .detail-info__text a { color: var(--basic-font-color); text-decoration: underline }  .detail-info__text-title { font-weight: bold; font-size: 1rem; line-height: 1.6rem }  .detail-info__text-title+.detail-info__text-title { margin-top: 8px }  p+.detail-info__text-title { margin-top: 16px }  .detail-info.detail-info--small .detail-info__title { font-weight: bold; font-size: 1rem; line-height: 1.6rem; margin-top: 0 }  .detail-info.detail-info--small .detail-info__text { font-weight: normal; font-size: 1rem; line-height: 1.6rem; margin-bottom: 24px }  .detail-info-heading { font-weight: bold; font-size: 1.5rem; line-height: 2.25rem; margin-bottom: 24px }  .purchase-info { padding-bottom: 20px; font-size: 0 }  .purchase-info__title, .purchase-info__text { display: inline-block; margin: 0 0 12px }  .purchase-info__title { font-weight: bold; font-size: 1rem; line-height: 1.6rem; width: 21.33333vw }  @media(max-width: 719px) { .purchase-info__title {  width: 80px } }  .purchase-info__text { font-weight: normal; font-size: 1rem; line-height: 1.6rem; width: calc(100% - 21.33333vw) }  @media(min-width: 720px) { .purchase-info__text {  width: calc(100% - 80px) } }  .detail-side { display: none }  @media(min-width: 720px) { .detail-side {  width: 318px;  float: right;  display: block;  padding-top: 4px } }  .detail-side__buy-button { cursor: pointer }  .detail-side__buy-button, .detail-side__purchased { display: flex; flex-direction: column; align-items: center; width: 100%; font-weight: bold; font-size: 1rem; line-height: 1.5rem; background: var(--button3-background-color); color: var(--button3-font-color); text-decoration: none; height: 52px; border-radius: 32px; margin-bottom: 24px; line-height: 52px }  @media(min-width: 720px) { .detail-side__buy-button, .detail-side__purchased {  height: 56px;  line-height: 56px;  margin-bottom: 48px } }  .detail-side__purchased { width: 100%; padding: 14px 0; font-weight: bold; font-size: 16px; margin-bottom: 48px }  .detail-live .player-config { display: block }  .detail-live .player-copyright { display: none }  .detail-live .before-live-only { display: none }  @media(min-width: 720px) { .pulldown {  width: 180px;  position: absolute;  bottom: 0;  right: 0;  height: 0;  transform: translateY(100%);  transition: height .2s cubic-bezier(0.215, 0.61, 0.355, 1);  overflow: hidden } }  @media(max-width: 719px) { .pulldown {  width: 100%;  height: 100%;  position: fixed;  top: 0;  left: -100vw;  z-index: 400 }  .pulldown__bg {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, .6);  opacity: 0;  transition: opacity .05s ease-out }  .pulldown__bg.active {  opacity: 1 } }  @media(max-width: 719px) { .pulldown.active {  height: 100% !important;  left: 0 } }  .pulldown-list { width: 100%; list-style-type: none; text-align: left; background-color: #383d40 }  @media(max-width: 719px) { .pulldown-list {  position: absolute;  bottom: 0;  left: 0;  opacity: 0;  transform: translateY(100%);  transition: opacity .1s linear, transform .2s cubic-bezier(0.215, 0.61, 0.355, 1);  padding: 2px 0px 2px 0px }  .pulldown-list.active {  opacity: 1;  transform: translateY(0%) } }  @media(min-width: 720px) { .pulldown-list {  width: 180px;  padding: 2px 0 } }  .pulldown-item { font-size: 16px; line-height: 1.5; width: 100%; color: #fff; position: relative; cursor: pointer; padding: 14px 14px 14px 52px }  @media(min-width: 720px) { .pulldown-item {  font-size: 16px;  padding: 12px 14px 12px 52px } }  .pulldown-item:before { content: ""; display: block; width: 24px; height: 24px; background: url(../img/icons/pulldown-normal-icon.svg) no-repeat top left; background-size: contain; position: absolute; top: 50%; transform: translateY(-50%); left: 16px }  @media(min-width: 720px) { .pulldown-item:before {  width: 24px;  height: 24px;  left: 16px } }  .pulldown-item.active { color: #d56096; cursor: pointer; pointer-events: auto }  .pulldown-item.active:before { background-image: url(../img/icons/pulldown-active-icon.svg) }  .environment { width: 100%; margin: 0 auto; line-height: 1.5; margin-bottom: 72px }  @media(min-width: 720px) { .environment {  max-width: 1212px;  padding: 0 48px;  margin-bottom: 72px } }  .environment-thumbnail { width: 100%; margin-bottom: 32px }  @media(min-width: 720px) { .environment-thumbnail {  margin-bottom: 48px } }  .environment-thumbnail img { width: 100%; height: auto; display: block }  .environment-content:after { content: ""; display: table; clear: both }  @media(max-width: 719px) { .environment-content {  padding: 0px 16px 0px 16px } }  .environment-body { margin-bottom: 44px }  @media(min-width: 720px) { .environment-body {  width: calc(100% - 318px);  float: left;  padding-right: 32px;  margin-bottom: 0 } }  .environment-side { display: block }  @media(min-width: 720px) { .environment-side {  width: 318px;  float: right;  display: block } }  .environment-title { font-weight: bold; font-size: 24px; margin: -6px 0px 26px 0px }  @media(min-width: 720px) { .environment-title {  font-size: 30px;  margin: -6px 0 40px } }  .environment-text { font-size: 16px; margin: -4px 0px 28px 0px }  @media(min-width: 720px) { .environment-text {  font-size: 16px;  margin: -4px 0 28px } }  .environment-title2 { font-weight: bold; font-size: 16px; margin: -4px 0px 20px 0px }  @media(min-width: 720px) { .environment-title2 {  font-size: 16px;  margin: -4px 0 20px } }  .environment-info { margin-bottom: 44px }  @media(min-width: 720px) { .environment-info {  margin-bottom: 44px } }  .environment-info__title { font-weight: bold; font-size: 16px; margin: -4px 0px 11px 0px }  @media(min-width: 720px) { .environment-info__title {  font-size: 16px;  margin: -4px 0 11px } }  .environment-info__text { font-size: 16px; margin: -4px 0px 11px 0px }  @media(min-width: 720px) { .environment-info__text {  font-size: 16px;  margin: -4px 0 11px } }  .environment-info__title+.environment-info__title { margin-top: 19px }  .environment-info__text+.environment-info__title { margin-top: 27px }  .environment-attention { color: var(--supplement-font-color); font-size: 14px; margin: -4px 0px -4px 0px }  @media(min-width: 720px) { .environment-attention {  font-size: 14px;  margin: -4px 0 } }  .hidden_programme { height: 0 !important; overflow: hidden }  .confirm-modal { position: fixed; top: 0; left: -100vw; width: 100%; height: 100%; z-index: 500 }  .confirm-modal.active { left: 0 }  .confirm-modal.active .confirm-modal__bg { opacity: 1 }  .confirm-modal.active .confirm-modal__content { opacity: 1; transform: translate(-50%, -50%) }  .confirm-modal__bg { background-color: rgba(0, 0, 0, .6); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .05s ease-out }  .confirm-modal__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -42%); background-color: #fff; border-radius: 12px; width: 310px; padding: 20px 20px 20px 20px; opacity: 0; transition: opacity .1s ease-out, transform .3s cubic-bezier(0.215, 0.61, 0.355, 1) }  @media(min-width: 720px) { .confirm-modal__content {  width: 480px;  padding: 24px;  border-radius: 12px } }  .confirm-modal__text { line-height: 1.5; color: #212121; font-size: 14px; margin: -4px 0px 12px 0px }  .confirm-modal__text a { color: #212121 }  @media(min-width: 720px) { .confirm-modal__text {  font-size: 14px;  margin: -4px 0 12px } }  .confirm-modal__buy-button { background-color: #fe62c7; color: #fff; border-radius: 32px; width: 100%; height: 56px; line-height: 56px; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; display: block; margin: 0 auto; pointer-events: none; opacity: .5; text-align: center; text-decoration: none; cursor: default }  .confirm-modal__buy-button.active { pointer-events: auto; opacity: 1; cursor: pointer }  @media(min-width: 720px) { .confirm-modal__buy-button {  width: 240px;  height: 56px;  line-height: 56px;  border-radius: 32px } }  .confirm-modal__checkbox-label { position: relative; padding-left: 32px; font-size: 14px; line-height: 1.5; cursor: pointer; margin-bottom: 32px; display: block; color: #212121 }  @media(min-width: 720px) { .confirm-modal__checkbox-label {  padding-left: 32px;  font-size: 14px;  margin-bottom: 32px } }  .confirm-modal__checkbox-label span { width: 24px; height: 24px; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); border: 1px solid #666 }  @media(min-width: 720px) { .confirm-modal__checkbox-label span {  width: 24px;  height: 24px } }  .confirm-modal__checkbox-label span:before { content: ""; display: none; width: 16px; height: 16px; background: rgba(0, 0, 0, 0) url(../img/icons/check-icon.svg) no-repeat center center; background-size: 16px 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }  @media(min-width: 720px) { .confirm-modal__checkbox-label span:before {  width: 16px;  height: 16px } }  #confirm-modal-checkbox:checked+.confirm-modal__checkbox-label span:before { display: block }  #confirm-modal-checkbox { position: absolute; top: 0; left: 0; width: 1; height: 1; opacity: 0; overflow: hidden }  .confirm-form { position: relative; width: 100% }  .account { background-color: #fff; padding: 48px 16px }  @media(min-width: 720px) { .account {  padding: 64px 48px } }  .news { padding: 52px 16px 0px 16px }  @media(min-width: 720px) { .news {  padding: 52px 162px 0 } }  .news-item { line-height: 1.5; max-width: 660px; display: block; margin-bottom: 53px }  .news-item__date { font-family: "Noto Serif JP", serif; font-weight: bold; color: var(--announce-font-color); font-size: 16px; margin: -4px 0px 28px 0px }  @media(min-width: 720px) { .news-item__date {  font-size: 16px;  margin: -4px 0 28px } }  .news-item__title { font-weight: bold; font-size: 20px; margin: -5px 0px 27px 0px }  @media(min-width: 720px) { .news-item__title {  font-size: 20px;  margin: -5px 0 27px } }  .news-item__body { font-size: 16px; margin: -4px 0px 60px 0px }  @media(min-width: 720px) { .news-item__body {  font-size: 16px;  margin: -4px 0 60px } }  .news-item__body a { color: var(--announce-font-color) }  .releasenotice { max-width: 1440px; margin: 0 auto; padding: 0 16px; margin: 12px auto 0 }  @media(min-width: 720px) { .releasenotice {  padding: 0 48px } }  @media(min-width: 720px) { .releasenotice {  margin: 24px auto 0 } }  .releasenotice__inner { width: 100%; position: relative; padding: 12px; border-radius: 12px; text-align: left; opacity: .7; transition: .1s linear }  @media(min-width: 720px) { .releasenotice__inner {  padding: 24px } }  .releasenotice__inner:hover { opacity: 1; transition: .2s linear }  .releasenotice__items { list-style-type: none; margin-bottom: 16px }  @media(min-width: 720px) { .releasenotice__items {  margin-bottom: 0 } }  .releasenotice__item { font-weight: normal; font-size: .875rem; line-height: 1.4rem; color: var(--information-font-color); margin-bottom: 8px; color: var(--information-font-color) }  @media screen and (max-width: 719px) { .releasenotice__item {  font-size: .75rem;  line-height: 1.2rem } }  @media(min-width: 720px) { .releasenotice__item {  font-weight: normal;  font-size: 1rem;  line-height: 1.6rem } }  .releasenotice__item:last-of-type { margin-bottom: 0 }  .releasenotice__item h2 { color: var(--basic-title-color) }  .releasenotice dl>input { display: none }  .releasenotice dt { cursor: pointer }  .releasenotice dt p { font-size: .8em; color: var(--supplement-font-color) }  .releasenotice dd { font-weight: normal; font-size: .875rem; line-height: 1.4rem; position: absolute; visibility: hidden; opacity: 0; transform: translateY(-100%); transition: 0s }  @media screen and (max-width: 719px) { .releasenotice dd {  font-size: .75rem;  line-height: 1.2rem } }  .releasenotice dd p { margin-top: 1em }  .releasenotice dd p span { color: var(--supplement-font-color); font-size: .8em }  .releasenotice dl>input:checked+label+dd { position: relative; visibility: visible; opacity: 1; transform: translateY(0); transition: 0s }  .releasenotice dt::before { content: ""; position: absolute; width: 20px; height: 3px; top: 50%; right: 10px; background: #333; transform: translateY(-50%) }  .releasenotice dt::after { content: ""; position: absolute; top: 50%; right: 10px; width: 20px; height: 3px; background: #333; transition: .2s; transform: translateY(-50%) rotate(90deg) }  .releasenotice dl>input:checked+label>dt::after { transform: translateY(-50%) rotate(180deg) }  .releasenotice dl>input:checked+label>dt>p { display: none }  .appnotice { max-width: 1440px; margin: 0 auto; padding: 0 16px; margin: 12px auto 0; font-size: .8em }  @media(min-width: 720px) { .appnotice {  padding: 0 48px } }  @media(min-width: 720px) { .appnotice {  margin: 24px auto 0;  font-size: 100% } }  .appnotice p { margin: 24px; color: var(--basic-title-color); font-weight: normal }  .qa { max-width: 1440px; margin: 0 auto; padding: 48px 16px }  @media(min-width: 720px) { .qa {  padding: 64px 162px } }  .qa__inner { max-width: 660px }  .qa-links { list-style-type: none; margin-bottom: 48px }  @media(min-width: 720px) { .qa-links {  margin-bottom: 64px } }  .qa-links__item { margin-bottom: 8px; font-weight: normal; font-size: 1rem; line-height: 1.6rem; -webkit-text-decoration-line: underline; text-decoration-line: underline; color: var(--link-font-color); cursor: pointer; padding: 0 .5em 0 .5em }  .qa-links__item a { font-weight: normal; font-size: 1rem; line-height: 1.6rem; -webkit-text-decoration-line: underline; text-decoration-line: underline; color: var(--link-font-color); cursor: pointer; padding: 0 .5em 0 .5em }  .qa-q { font-weight: bold; font-size: 1.25rem; line-height: 1.875rem; padding-bottom: 16px; border-bottom: 1px solid var(--basic-border-color); margin-bottom: 24px; background-color: var(--basic-background-color); position: relative; z-index: 1; cursor: pointer }  .qa-a { font-weight: normal; font-size: 1rem; line-height: 1.6rem; margin-bottom: 80px; padding-left: 2em; background-color: var(--basic-background-color) }  .qa-a a { color: var(--basic-font-color) }  .qa dl>input { display: none }  .qa dd { position: absolute; visibility: hidden; opacity: 0; transform: translateY(-100%); transition: 0s }  .qa dl>input:checked+label+dd { position: relative; visibility: visible; opacity: 1; transform: translateY(0); transition: 0s }  .qa dt::before { content: ""; position: absolute; width: 20px; height: 3px; top: 50%; right: 10px; background: #333; transform: translateY(-50%) }  .qa dt::after { content: ""; position: absolute; top: 50%; right: 10px; width: 20px; height: 3px; background: #333; transition: .2s; transform: translateY(-50%) rotate(90deg) }  .qa dl>input:checked+label>dt::after { transform: translateY(-50%) rotate(180deg) }  .terms { max-width: 1440px; margin: 0 auto; padding: 48px 16px }  @media(min-width: 720px) { .terms {  padding: 64px 162px } }  .terms__inner { max-width: 660px }  .terms .pi-list-ol, .terms .rf-list-ol { margin-left: 2rem; list-style-type: decimal }  .terms .pi-list-ol li, .terms .rf-list-ol li { margin-bottom: .5rem }  .terms .pi-list-ol li .pi-list-ol li, .terms .pi-list-ol li .rf-list-ol li, .terms .rf-list-ol li .pi-list-ol li, .terms .rf-list-ol li .rf-list-ol li { list-style: lower-roman }  .terms .pi-list-ul, .terms .rf-list-ul { margin-left: 2rem; list-style-type: disc }  .terms .iij-number { text-align: right; font-size: .8em }  .terms .terms-list-ol { margin: 0rem 0 .5rem 2rem; list-style: decimal }  .terms .terms-list-ol li { margin-bottom: .5rem }  .terms .terms-list-ol li .terms-list-ol { margin: .5rem 0 .5rem 2rem }  .terms .terms-list-ol li .terms-list-ol li { list-style: lower-roman }  .terms .terms-list-ul { margin: 0rem 0 .5rem 2rem; list-style: disc }  .terms-title2 { font-weight: bold; font-size: 1.5rem; line-height: 2.25rem; margin-bottom: 24px }  .terms-title3 { font-weight: bold; font-size: 1.25rem; line-height: 1.875rem; margin-bottom: 24px }  .terms-text { font-weight: normal; font-size: 1rem; line-height: 1.6rem; padding-bottom: 32px }  .terms-text p { margin-bottom: 16px }  .translaw { max-width: 1440px; margin: 0 auto; padding: 48px 16px }  @media(min-width: 720px) { .translaw {  padding: 64px 162px } }  .translaw__inner { max-width: 660px }  .translaw-title { font-weight: bold; font-size: 1rem; line-height: 1.6rem; margin-bottom: 16px }  .translaw-text { font-weight: normal; font-size: 1rem; line-height: 1.6rem; margin-bottom: 32px }  .translaw-text p { margin-bottom: 16px }  .translaw-text p:last-of-type { margin-bottom: 0 }  .guide { max-width: 1440px; margin: 0 auto; padding: 48px 16px 24px }  @media(min-width: 720px) { .guide {  padding: 64px 162px 40px } }  .guide__inner { max-width: 660px }  .guide-section { margin-top: 64px; width: 100%; max-width: 660px }  .guide-section:first-of-type { margin-top: 0 }  .guide-section a { color: var(--basic-font-color) }  .guide-image { display: block; width: 100%; margin: 24px 0 }  .guide-image img { width: 100%; height: auto; display: block }  .guide-title { font-weight: bold; font-size: 1.5rem; line-height: 2.25rem; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--basic-border-color) }  .guide-title2 { font-weight: bold; font-size: 1.25rem; line-height: 1.875rem; line-height: 1.5; padding-top: 24px; margin: 24px 0 24px }  .guide-title2 a { color: var(--basic-font-color) }  .guide-single-link { font-weight: bold; font-size: 1.25rem; line-height: 1.875rem; margin-bottom: 24px }  .guide-single-link a { color: var(--basic-font-color) }  .guide-attention { font-weight: normal; font-size: 1rem; line-height: 1.6rem; color: var(--emphasis-font-color); margin-bottom: 24px }  .guide-attention.guide-attention--narrow-top { margin-top: -16px }  .guide-attention.guide-attention--large { font-weight: bold; font-size: 1.25rem; line-height: 1.875rem }  .guide-attention+.guide-attention { margin-top: -16px }  .guide-text { font-weight: normal; font-size: 1rem; line-height: 1.6rem; margin-bottom: 24px }  .guide-text a { color: var(--basic-font-color) }  .guide-text strong { font-weight: bold; font-size: 1rem; line-height: 1.6rem }  .guide-text.guide-text--narrow-top { margin-top: -8px }  .guide-text.guide-text--attention { color: var(--emphasis-font-color) }  .guide-text.guide-text--attention strong { font-weight: bold; font-size: 1.25rem; line-height: 1.875rem }  .guide-text+.guide-text { margin-top: -8px }  .guide-list { list-style: none; margin-bottom: 16px }  .guide-list__item { position: relative; padding-left: 1em; font-weight: normal; font-size: 1rem; line-height: 1.6rem }  .guide-list__item:before { content: "・"; display: inline-block; position: absolute; top: 0; left: 0 }  .guide-list__item span { color: var(--supplement-font-color); display: block; padding: 8px 0 }  .unsubscribe--box { text-align: right; color: #777 }  .unsubscribe { margin: 0 auto; max-width: 1440px; padding: 48px 16px 24px }  .unsubscribe-section { margin-top: 64px; width: 100% }  .unsubscribe-section:first-of-type { margin-top: 0 }  .unsubscribe-image { display: block; margin: 24px 0; width: 100% }  .unsubscribe-image img { display: block; height: auto; width: 100% }  .unsubscribe-title { font-size: 1.5rem; line-height: 2.25rem; font-weight: bold; border-bottom: 1px solid #666; margin-bottom: 24px; padding-bottom: 24px }  .unsubscribe-title2 { font-size: 1.25rem; line-height: 1.875rem; font-weight: bold; line-height: 1.5; margin: 24px 0; padding-top: 24px }  .unsubscribe-single-link { font-size: 1.25rem; line-height: 1.875rem; font-weight: bold; margin-bottom: 24px }  .unsubscribe-single-link a { color: #ededed }  .unsubscribe--textbox { color: #ededed; background-color: #151717; width: 100%; height: 320px; border: 1px solid #d1d1d1; padding: 1.8em; margin-bottom: 2em; overflow-y: scroll }  .unsubscribe--textbox pre { line-height: 1.8em }  .unsubscribe--confirm { padding: 1em 0; text-align: center }  .unsubscribe--footer { width: 100%; text-align: right; margin-bottom: 100px }  .unsubscribe-attention { font-size: 1rem; line-height: 1.6rem; font-weight: normal; color: #f20c0c; margin-bottom: 24px }  .unsubscribe-attention.unsubscribe-attention--narrow-top { margin-top: -16px }  .unsubscribe-attention.unsubscribe-attention--large { font-size: 1.25rem; line-height: 1.875rem; font-weight: bold }  .unsubscribe-attention+.unsubscribe-attention { margin-top: -16px }  .unsubscribe-text { font-size: 1rem; line-height: 1.6rem; font-weight: normal; margin-bottom: 24px }  .unsubscribe-text a { color: #ededed }  .unsubscribe-text strong { font-size: 1rem; line-height: 1.6rem; font-weight: bold }  .unsubscribe-text.unsubscribe-text--narrow-top { margin-top: -8px }  .unsubscribe-text.unsubscribe-text--attention { color: #f20c0c }  .unsubscribe-text.unsubscribe-text--attention strong { font-size: 1.25rem; line-height: 1.875rem; font-weight: bold }  .unsubscribe-text+.unsubscribe-text { margin-top: -8px }  .normal-button { background: #fff; color: #242728; display: inline-block; text-align: center; text-decoration: none; cursor: pointer; border: none !important; font-size: 1rem; line-height: 1.5rem; font-weight: bold }  .normal-button:disabled { background: #666 }  #unsubscribe-confirm { cursor: pointer }  .unsubscribe-list { list-style: none; margin-bottom: 16px }  .unsubscribe-list__item { padding-left: 1em; position: relative; font-size: 1rem; line-height: 1.6rem; font-weight: normal }  .unsubscribe-list__item::before { content: "・"; display: inline-block; left: 0; position: absolute; top: 0 }  .unsubscribe-list__item span { color: #999; display: block; padding: 8px 0 }  .unsubscribe--popup { position: absolute; top: 0; left: 0; line-height: 1.8em; padding-top: 240px; width: 100%; height: auto; z-index: 400 }  .unsubscribe--popup .popup__base { position: relative; margin: auto; max-width: 600px; width: 60%; background-color: #fff; border-radius: 1em; padding: 2em; color: #3d3d3d; z-index: 1 }  .unsubscribe--popup .popup__base .common-title { font-family: "Noto Serif JP", serif }  .unsubscribe--popup .popup__footer { width: 100%; text-align: right; margin-top: 2em }  .unsubscribe--popup .popup__footer .normal-button { background: #242728; color: #fff; margin-left: 1em }  .unsubscribe--popup .popup__footer .normal-button.attention { background: #f20c0c }  .unsubscribe-link { color: #9066ba }  .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); z-index: 400 }  @media(min-width: 927px) { .unsubscribe {  padding: 64px 162px 40px;  margin-bottom: 64px }  .unsubscribe-title {  font-size: 1.1rem }  .normal-button {  background: #fff;  color: #242728;  border-radius: 10px;  font-size: 11px;  font-weight: bold;  height: auto;  vertical-align: top;  min-width: 50px }  .normal-button {  border-radius: 20px;  height: 40px;  line-height: 40px;  width: 124px }  .unsubscribe--popup .popup__base {  width: 80% } }  .tp-modal iframe { border-radius: 12px }  .white-ui { background-color: #fff } .sort-icon{background: url(../img/icons/sort_icon.svg) no-repeat  center center; transform: scale(-1,1); height: 30px; width: 30px; float: right; margin-left: 10px; } .sort-icon-desc{background: url(../img/icons/sort_icon.svg) no-repeat  center center; transform: scale(-1,-1); height: 30px; width: 30px; float: right; margin-left: 10px;} .sort-count-inline {display:flex; align-items: center; float: right;}