@charset "UTF-8";
@font-face {
  font-family: 'NotoSansCJKjp';
  src: url("../fonts/NotoSansCJKjp-Regular.woff") format("woff"); }

@font-face {
  font-family: 'NotoSansCJKjp';
  src: url("../fonts/NotoSansCJKjp-Bold.woff") format("woff");
  font-weight: bold; }

[hidden] {
  display: none !important; }

html body {
  font-family: NotoSansCJKjp, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  margin: 0;
  background-color: #111111; }
  html body .roboto {
    font-family: Roboto, sans-serif; }
  html body .register-button, html body > div header .header div a, html body > div section.text-book .register, html body > div section.featured-list .futured-content-footer a, html body > div section.services .services-wrapper .service-footer a, html body > div section.special > div .register, html body > div section.books > div a {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    border-radius: 8px;
    background-color: #0062ff;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
    width: 260px;
    text-align: center;
    cursor: pointer; }
    html body .register-button.min, html body > div header .header div a.min, html body > div section.text-book .min.register, html body > div section.featured-list .futured-content-footer a.min, html body > div section.services .services-wrapper .service-footer a.min, html body > div section.special > div .min.register, html body > div section.books > div a.min {
      margin: 10px;
      min-width: auto;
      height: 40px;
      line-height: 40px; }
    html body .register-button:hover, html body > div header .header div a:hover, html body > div section.text-book .register:hover, html body > div section.featured-list .futured-content-footer a:hover, html body > div section.services .services-wrapper .service-footer a:hover, html body > div section.special > div .register:hover, html body > div section.books > div a:hover {
      background-color: #0A42C4; }
    html body .register-button.border, html body > div header .header div a.border, html body > div section.text-book .border.register, html body > div section.featured-list .futured-content-footer a.border, html body > div section.services .services-wrapper .service-footer a.border, html body > div section.special > div .border.register, html body > div section.books > div a.border {
      line-height: 50px;
      color: #0062ff;
      background-color: #fff;
      border: solid 3px #0062ff; }
      html body .register-button.border:hover, html body > div header .header div a.border:hover, html body > div section.text-book .border.register:hover, html body > div section.featured-list .futured-content-footer a.border:hover, html body > div section.services .services-wrapper .service-footer a.border:hover, html body > div section.special > div .border.register:hover, html body > div section.books > div a.border:hover {
        color: #0A42C4;
        border: solid 3px #0A42C4; }
      html body .register-button.border.min, html body > div header .header div a.border.min, html body > div section.text-book .border.min.register, html body > div section.featured-list .futured-content-footer a.border.min, html body > div section.services .services-wrapper .service-footer a.border.min, html body > div section.special > div .border.min.register, html body > div section.books > div a.border.min {
        border-width: 2px;
        line-height: 36px;
        height: 40px; }
    html body .register-button.close, html body > div header .header div a.close, html body > div section.text-book .close.register, html body > div section.featured-list .futured-content-footer a.close, html body > div section.services .services-wrapper .service-footer a.close, html body > div section.special > div .close.register, html body > div section.books > div a.close {
      min-width: auto;
      padding: 0 40px 0 20px;
      border-color: #222;
      color: #222;
      background-image: url("../img/ic_cross.svg");
      background-position: center right 20px;
      background-repeat: no-repeat;
      background-size: 12px 12px; }
      html body .register-button.close:hover, html body > div header .header div a.close:hover, html body > div section.text-book .close.register:hover, html body > div section.featured-list .futured-content-footer a.close:hover, html body > div section.services .services-wrapper .service-footer a.close:hover, html body > div section.special > div .close.register:hover, html body > div section.books > div a.close:hover {
        color: #484848;
        border: solid 2px #484848; }
  html body .other-plan-button, html body > div section.plans .other-plans a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    text-align: center;
    cursor: pointer; }
    html body .other-plan-button.min, html body > div section.plans .other-plans a.min {
      margin: 10px;
      min-width: auto;
      height: 40px; }
    html body .other-plan-button:hover, html body > div section.plans .other-plans a:hover {
      background-color: #484848; }
    html body .other-plan-button.border, html body > div section.plans .other-plans a.border {
      color: #0062ff;
      background-color: #fff;
      border: solid 3px #0062ff; }
      html body .other-plan-button.border:hover, html body > div section.plans .other-plans a.border:hover {
        color: #0A42C4;
        border: solid 3px #0A42C4; }
      html body .other-plan-button.border.min, html body > div section.plans .other-plans a.border.min {
        border-width: 2px;
        height: 40px; }
    html body .other-plan-button.close, html body > div section.plans .other-plans a.close {
      min-width: auto;
      padding: 0 40px 0 20px;
      border-color: #222;
      color: #222;
      background-image: url("../img/ic_cross.svg");
      background-position: center right 20px;
      background-repeat: no-repeat;
      background-size: 12px 12px; }
      html body .other-plan-button.close:hover, html body > div section.plans .other-plans a.close:hover {
        color: #484848;
        border: solid 2px #484848; }
  html body #magazine, html body #plans {
    margin-top: -56px;
    padding-top: 56px; }
  html body .show-only-short-premium-trial.annotation-box {
    color: #fff; }
    html body .show-only-short-premium-trial.annotation-box .annotation {
      display: inline-block;
      border: solid 1px #fff;
      border-radius: 20px; }
    html body .show-only-short-premium-trial.annotation-box.with-badge {
      position: relative;
      display: flex;
      justify-content: center;
      margin-top: -18px;
      margin-bottom: 36px; }
      html body .show-only-short-premium-trial.annotation-box.with-badge .annotation, html body .show-only-short-premium-trial.annotation-box.with-badge .badge {
        padding: 6px 8px; }
      html body .show-only-short-premium-trial.annotation-box.with-badge .badge {
        border-radius: 20px;
        background-color: #fff;
        color: #000;
        font-weight: 800; }
      html body .show-only-short-premium-trial.annotation-box.with-badge .annotation {
        padding-right: 12px;
        padding-left: 48px;
        margin-left: -40px;
        border-left: none; }
  html body > div header .header {
    position: fixed;
    width: 100%;
    height: 64px;
    top: 0;
    left: 0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
    z-index: 50;
    background-color: #1a1a1a; }
    html body > div header .header div {
      height: 64px;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      padding: 0 96px; }
      html body > div header .header div > img {
        height: 30px; }
      html body > div header .header div a {
        width: 228px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        border-radius: 4px; }
  html body > div header .wrapper {
    text-align: center;
    position: relative;
    width: 100%;
    overflow: hidden; }
    html body > div header .wrapper .pc-banner {
      width: 100%;
      display: block;
      height: 584px;
      object-fit: cover; }
    html body > div header .wrapper .mobile-banner {
      display: none; }
    html body > div header .wrapper .logo {
      position: absolute;
      left: 0;
      right: 0;
      top: 5%; }
      html body > div header .wrapper .logo .logo-image {
        width: 100px; }
    html body > div header .wrapper .title {
      position: absolute;
      left: 0;
      right: 0;
      top: 30%; }
      html body > div header .wrapper .title .pc-title {
        width: 928px; }
      html body > div header .wrapper .title .mobile-title {
        display: none; }
    html body > div header .wrapper .description {
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      letter-spacing: 0.8px;
      text-align: center;
      color: #e6e6e6;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 13%; }
      html body > div header .wrapper .description .pc-description {
        font-size: 20px;
        line-height: 1.8; }
      html body > div header .wrapper .description .mobile-description {
        font-size: 16px;
        line-height: 1.63;
        display: none; }
    html body > div header .wrapper .scroll-down {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 3%; }
      html body > div header .wrapper .scroll-down img {
        width: 72px; }
    html body > div header .wrapper .wrapper-other-plans {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 16px 24px 0; }
      html body > div header .wrapper .wrapper-other-plans .wrapper-other-plans-student {
        margin-left: 16px; }
      html body > div header .wrapper .wrapper-other-plans a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px 0;
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(34, 34, 34, 0.16);
        border-radius: 4px;
        cursor: pointer;
        color: #FFF;
        text-align: center;
        font-family: Noto Sans JP;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 130%;
        text-decoration: none; }
        @media screen and (max-width: 375px) {
          html body > div header .wrapper .wrapper-other-plans a {
            font-size: 12px; } }
        html body > div header .wrapper .wrapper-other-plans a img {
          margin-left: 4px; }
    html body > div header .wrapper .wrapper-cover {
      position: absolute;
      min-width: 382px;
      top: calc(64px + 38.32% /2);
      left: calc(96px + 100% * 0.030);
      z-index: 20; }
      html body > div header .wrapper .wrapper-cover .show-only-short-premium-trial.annotation-box {
        text-align: left;
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 16px; }
        html body > div header .wrapper .wrapper-cover .show-only-short-premium-trial.annotation-box .annotation {
          padding: 2px 16px; }
      html body > div header .wrapper .wrapper-cover .recommend-text {
        color: #FFF;
        font-weight: bold;
        font-size: 40px;
        text-align: left;
        line-height: 52px; }
      html body > div header .wrapper .wrapper-cover .wrapper-register, html body > div header .wrapper .wrapper-cover .wrapper-student {
        display: inline-block;
        color: #FFF;
        font-weight: bold;
        font-size: 24px;
        text-decoration: none;
        background: #0061FF;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        width: 100%;
        margin-top: 24px;
        padding: 16px 0; }
      html body > div header .wrapper .wrapper-cover .wrapper-student {
        font-size: 14px;
        background: transparent;
        border: solid 1px white; }
      html body > div header .wrapper .wrapper-cover .student {
        text-align: center;
        margin-top: 24px; }
        html body > div header .wrapper .wrapper-cover .student a {
          color: #FFF;
          font-weight: bold;
          font-size: 14px; }
      html body > div header .wrapper .wrapper-cover .wrapper-other-plans {
        margin: 16px 0 0; }
      html body > div header .wrapper .wrapper-cover .hidden {
        display: none; }
    html body > div header .wrapper .wrapper-cover-mobile {
      display: none;
      width: 100%;
      margin-top: -76px; }
      html body > div header .wrapper .wrapper-cover-mobile .show-only-short-premium-trial.annotation-box {
        text-align: left;
        font-weight: 700;
        font-size: 14px;
        padding: 0 24px;
        margin-bottom: 12px; }
        html body > div header .wrapper .wrapper-cover-mobile .show-only-short-premium-trial.annotation-box .annotation {
          padding: 2px 8px; }
      html body > div header .wrapper .wrapper-cover-mobile .recommend-text {
        color: #FFF;
        font-weight: bold;
        font-size: 24px;
        line-height: 36px;
        text-align: left;
        padding: 0 24px; }
      html body > div header .wrapper .wrapper-cover-mobile .wrapper-register, html body > div header .wrapper .wrapper-cover-mobile .wrapper-student {
        display: block;
        color: #FFF;
        font-weight: bold;
        font-size: 24px;
        text-decoration: none;
        background: #0061FF;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        margin: 24px 24px 0;
        padding: 16px 0; }
      html body > div header .wrapper .wrapper-cover-mobile .wrapper-student {
        font-size: 14px;
        background: transparent;
        border: solid 1px white; }
      html body > div header .wrapper .wrapper-cover-mobile .student {
        margin-top: 24px; }
        html body > div header .wrapper .wrapper-cover-mobile .student a {
          color: #FFF;
          font-weight: bold;
          font-size: 14px; }
      html body > div header .wrapper .wrapper-cover-mobile .wrapper-other-plans {
        margin: 16px 24px 0; }
      html body > div header .wrapper .wrapper-cover-mobile .hidden {
        display: none; }

@-webkit-keyframes slide-vertical {
  from {
    background-position: 0 0; }
  to {
    background-position: 0 -8000px; } }
  html body > div section {
    padding: 0 32px;
    margin: 0 auto; }
    html body > div section > div {
      max-width: 1440px;
      margin: 0 auto; }
    html body > div section .pc-element {
      display: block; }
    html body > div section .mobile-element {
      display: none; }
    html body > div section.text-book {
      padding-top: 1px;
      text-align: center;
      background: #FFFFFF; }
      html body > div section.text-book > div h1 {
        margin-bottom: 20px;
        font-size: 40px; }
        @media screen and (max-width: 768px) {
          html body > div section.text-book > div h1 {
            font-size: 24px; } }
        @media screen and (max-width: 375px) {
          html body > div section.text-book > div h1 {
            font-size: 20px; } }
        @media screen and (max-width: 360px) {
          html body > div section.text-book > div h1 {
            font-size: 18px; } }
        html body > div section.text-book > div h1 .premium {
          color: #FFFFFF;
          font-size: 16px; }
      html body > div section.text-book > div div {
        height: 70px; }
      html body > div section.text-book > div a {
        color: black; }
      html body > div section.text-book .text-books {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly; }
        html body > div section.text-book .text-books > div {
          width: 20%;
          box-sizing: border-box;
          margin-bottom: 40px;
          padding: 0 18px;
          text-align: center;
          font-size: 18px;
          font-weight: bold;
          letter-spacing: -0.58px;
          color: #111111; }
          html body > div section.text-book .text-books > div > img {
            width: 100%; }
        html body > div section.text-book .text-books .coming-soons {
          display: none; }
      html body > div section.text-book .register {
        margin-bottom: 24px; }
    html body > div section.featured {
      background-color: #222222; }
      html body > div section.featured .description .lead {
        display: flex;
        justify-content: center;
        margin: 30px 0; }
        html body > div section.featured .description .lead img {
          max-width: 100%;
          width: 898px; }
      html body > div section.featured .description .category {
        display: flex;
        justify-content: space-around;
        margin: 27px 0; }
        html body > div section.featured .description .category img {
          width: 160px; }
        html body > div section.featured .description .category .separator {
          width: 2px;
          height: 110px;
          background-color: #d8d8d8;
          margin: 0 20px; }
        html body > div section.featured .description .category .category-description {
          width: 628px;
          height: 110px;
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.85;
          letter-spacing: 0.8px;
          color: #e6e6e6; }
    html body > div section.featured-list {
      padding-top: 40px; }
      html body > div section.featured-list .featured-content-head {
        display: flex;
        justify-content: center; }
        html body > div section.featured-list .featured-content-head img {
          width: 375px;
          height: auto;
          max-width: 100%;
          max-height: 92px; }
      html body > div section.featured-list .featured-contents {
        display: flex;
        flex-wrap: wrap;
        padding: 40px 0; }
        html body > div section.featured-list .featured-contents .content {
          width: 31%;
          height: 252px;
          position: relative;
          border-radius: 4px;
          box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.15);
          background-color: #121212;
          margin: 0 1% 24px; }
          html body > div section.featured-list .featured-contents .content .content-link {
            text-decoration: none; }
          html body > div section.featured-list .featured-contents .content :nth-child(3n+1) {
            margin-left: 0; }
          html body > div section.featured-list .featured-contents .content .banner img {
            max-width: 100%; }
          html body > div section.featured-list .featured-contents .content .title {
            font-size: 18px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: -0.43px;
            color: #e6e6e6;
            padding: 0 11px; }
          html body > div section.featured-list .featured-contents .content .date {
            position: absolute;
            right: 11px;
            bottom: 21px;
            font-family: HiraginoSans-W3;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: -0.29px;
            text-align: right;
            color: #aeaeae; }
      html body > div section.featured-list .futured-content-footer {
        text-align: center; }
        html body > div section.featured-list .futured-content-footer a {
          width: 581px;
          margin-top: 32px;
          margin-bottom: 96px; }
    html body > div section.services {
      padding-top: 10px;
      color: #fff;
      background-color: #111;
      text-align: center; }
      html body > div section.services .services-wrapper {
        max-width: 1080px; }
        html body > div section.services .services-wrapper h1 {
          padding-bottom: 30px;
          color: #fff;
          font-size: 40px; }
          html body > div section.services .services-wrapper h1 .premium {
            color: #fff;
            font-size: 16px; }
        html body > div section.services .services-wrapper .pick-wrapper {
          display: flex;
          flex-direction: column;
          justify-content: space-between; }
          html body > div section.services .services-wrapper .pick-wrapper .pick-card {
            display: flex;
            background-color: #111;
            box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.1);
            border-radius: 3px;
            box-sizing: border-box;
            margin: 0px 12px 60px 12px; }
            html body > div section.services .services-wrapper .pick-wrapper .pick-card:nth-child(even) {
              flex-direction: row-reverse; }
            html body > div section.services .services-wrapper .pick-wrapper .pick-card:nth-child(1) .text {
              margin-left: 80px; }
            html body > div section.services .services-wrapper .pick-wrapper .pick-card:nth-child(2) .text {
              margin-right: 80px; }
            html body > div section.services .services-wrapper .pick-wrapper .pick-card .image {
              width: 100%;
              text-align: left; }
              html body > div section.services .services-wrapper .pick-wrapper .pick-card .image img {
                width: 100%;
                height: 100%;
                border: 0 solid #EFEFEF;
                border-radius: 8px; }
            html body > div section.services .services-wrapper .pick-wrapper .pick-card .text {
              width: 100%;
              display: flex;
              align-items: center;
              flex-direction: row; }
              html body > div section.services .services-wrapper .pick-wrapper .pick-card .text > div h2 {
                margin: 0;
                font-size: 24px;
                font-weight: bold;
                line-height: 1.14;
                letter-spacing: -0.67px;
                text-align: left;
                color: #fff; }
                html body > div section.services .services-wrapper .pick-wrapper .pick-card .text > div h2 span {
                  display: inline-block;
                  text-align: left;
                  vertical-align: middle; }
                  html body > div section.services .services-wrapper .pick-wrapper .pick-card .text > div h2 span img {
                    height: 24px;
                    vertical-align: middle; }
              html body > div section.services .services-wrapper .pick-wrapper .pick-card .text > div p {
                text-align: left;
                flex: 0 1 100px;
                margin-bottom: 0;
                font-size: 16px;
                line-height: 1.5;
                letter-spacing: -0.38px;
                color: #fff; }
        html body > div section.services .services-wrapper > div {
          display: flex;
          justify-content: center;
          gap: 0 32px; }
          html body > div section.services .services-wrapper > div .card {
            color: #fff;
            background-color: #111;
            box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            margin-left: 12px;
            margin-right: 12px;
            width: 30%; }
            html body > div section.services .services-wrapper > div .card > div {
              display: flex;
              flex-direction: column;
              height: 100%; }
              html body > div section.services .services-wrapper > div .card > div .image img {
                width: 100%;
                max-height: 237px;
                border: 0 solid #EFEFEF;
                border-radius: 4px; }
              html body > div section.services .services-wrapper > div .card > div .text {
                padding: 16px 0; }
                html body > div section.services .services-wrapper > div .card > div .text h2 {
                  margin: 0;
                  font-size: 24px;
                  font-weight: bold;
                  line-height: 1.14;
                  letter-spacing: -0.67px;
                  text-align: left;
                  color: #fff; }
                  html body > div section.services .services-wrapper > div .card > div .text h2 span {
                    display: inline-block;
                    width: 100%;
                    text-align: left; }
                html body > div section.services .services-wrapper > div .card > div .text p {
                  text-align: left;
                  flex: 0 1 100px;
                  margin-bottom: 0;
                  font-size: 16px;
                  line-height: 1.5;
                  letter-spacing: -0.38px;
                  color: #fff; }
        html body > div section.services .services-wrapper .service-footer {
          display: block;
          padding: 72px 0 96px 0;
          text-align: center; }
          html body > div section.services .services-wrapper .service-footer a {
            width: 581px; }
    html body > div section.special {
      padding: 40px 32px;
      background-color: #222222;
      color: #fff; }
      html body > div section.special h1 {
        text-align: center;
        font-size: 38px;
        font-weight: bold;
        margin-top: 0; }
        html body > div section.special h1 > span {
          font-size: 16px; }
      html body > div section.special h2 {
        text-align: center;
        margin: 40px 0; }
      html body > div section.special hr {
        width: 100%; }
      html body > div section.special > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 685px; }
        html body > div section.special > div .introduction {
          font-size: 14px; }
          html body > div section.special > div .introduction .link {
            color: white; }
        html body > div section.special > div .contents {
          padding: 40px 0 0; }
          html body > div section.special > div .contents .content .book {
            display: flex; }
            html body > div section.special > div .contents .content .book .cover {
              margin: 0; }
              html body > div section.special > div .contents .content .book .cover img {
                width: 140px;
                margin-right: 40px; }
            html body > div section.special > div .contents .content .book .sub {
              margin-top: 0;
              font-size: 12px;
              font-weight: bold; }
            html body > div section.special > div .contents .content .book .title {
              margin: 0;
              font-size: 28px;
              font-weight: bold; }
              html body > div section.special > div .contents .content .book .title .subtitle {
                font-size: 14px;
                font-weight: normal;
                margin-left: 16px;
                vertical-align: middle; }
            html body > div section.special > div .contents .content .book .under-sub {
              margin: 20px 0;
              font-size: 12px;
              font-weight: bold; }
            html body > div section.special > div .contents .content .book .abstraction {
              font-size: 13px; }
          html body > div section.special > div .contents .content .author {
            display: flex;
            margin-top: 28px; }
            html body > div section.special > div .contents .content .author .name {
              font-size: 14px;
              font-weight: bold; }
            html body > div section.special > div .contents .content .author .name-sp {
              display: none; }
            html body > div section.special > div .contents .content .author .work-history {
              font-size: 13px; }
            html body > div section.special > div .contents .content .author .shadow img {
              width: 100px;
              margin: 0 60px 0 20px; }
        html body > div section.special > div .notice {
          display: flex;
          padding: 0 4px;
          font-size: 13px; }
          html body > div section.special > div .notice .heading {
            font-weight: bold;
            min-width: 175px; }
        html body > div section.special > div .register {
          min-width: 350px;
          margin-top: 40px; }
    html body > div section.plans {
      background-color: #333333;
      text-align: center; }
      html body > div section.plans h1 {
        font-family: Roboto, sans-serif;
        font-size: 40px;
        font-weight: bold;
        color: #ffffff;
        margin: 0 0 40px 0;
        padding-top: 56px; }
        html body > div section.plans h1 .premium {
          font-size: 16px; }
      html body > div section.plans .plan-action {
        max-width: 360px;
        transition: all 1s; }
      html body > div section.plans .feature {
        height: 48px; }
        html body > div section.plans .feature img {
          width: 211px;
          height: auto; }
        html body > div section.plans .feature span {
          display: none; }
      html body > div section.plans .not-feature {
        height: 48px; }
      html body > div section.plans .plan {
        margin: 0;
        padding: 24px;
        border-radius: 4px;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
        background-color: #ffffff; }
        html body > div section.plans .plan .plan-top {
          text-align: left;
          font-weight: bold;
          display: block; }
          html body > div section.plans .plan .plan-top .plan-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between; }
          html body > div section.plans .plan .plan-top .price-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center; }
          html body > div section.plans .plan .plan-top .plan-name {
            text-align: left;
            margin-bottom: 16px;
            font-size: 24px;
            color: #232429; }
          html body > div section.plans .plan .plan-top .no-discount {
            width: 99px;
            margin-left: 8px;
            padding: 4px 6px;
            border-radius: 2px;
            background-color: #ffffff;
            font-size: 13px;
            line-height: 1.31;
            font-style: normal;
            font-stretch: normal;
            letter-spacing: normal;
            color: #ffffff;
            vertical-align: middle; }
          html body > div section.plans .plan .plan-top .annual-discount {
            height: 21px;
            font-size: 13px;
            display: inline-block;
            padding: 2px 12px;
            border-radius: 16px;
            text-decoration: none;
            color: #fff;
            background-color: #0cb258;
            transition: .4s;
            word-break: keep-all;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row; }
          html body > div section.plans .plan .plan-top .monthly-price {
            align-items: center;
            width: 100%;
            font-size: 48px;
            font-family: Roboto, sans-serif;
            font-weight: bold;
            line-height: 1;
            color: #222222; }
          html body > div section.plans .plan .plan-top .per-month {
            font-size: 18px; }
          html body > div section.plans .plan .plan-top .annual-price {
            height: auto;
            margin-top: 10px;
            font-size: 12px;
            vertical-align: middle;
            color: #808080;
            top: 50%;
            left: 50%; }
          html body > div section.plans .plan .plan-top .three-yearly-discount {
            height: 21px;
            font-size: 13px;
            display: inline-block;
            padding: 2px 12px;
            border-radius: 25px;
            text-decoration: none;
            color: #fff;
            background-color: #222;
            transition: .4s;
            display: flex;
            word-break: keep-all;
            justify-content: center;
            align-items: center;
            flex-direction: row; }
          html body > div section.plans .plan .plan-top .three-yearly-price {
            margin-top: 10px;
            font-size: 12px;
            vertical-align: middle;
            color: #808080; }
          html body > div section.plans .plan .plan-top .caution {
            width: 260px;
            height: 31px;
            font-size: 12px;
            font-weight: bold;
            font-style: normal;
            font-stretch: normal;
            line-height: 1.42;
            letter-spacing: normal;
            color: #d0021b;
            margin-top: 12px;
            margin-bottom: 18px; }
            html body > div section.plans .plan .plan-top .caution.gray {
              color: #808080; }
        html body > div section.plans .plan > ul {
          list-style: none;
          padding: 24px 0;
          margin: 9px 0 0 0;
          max-width: 100%;
          border-top: 1px solid #e0e0e0; }
          html body > div section.plans .plan > ul li {
            padding: 0 0 0 32px;
            background: url(../img/check-medium.svg) left 0 top 0 no-repeat;
            background-size: 24px auto;
            margin-bottom: 16px;
            width: auto;
            text-align: left;
            font-size: 14px;
            font-weight: bold;
            font-style: normal;
            font-stretch: normal;
            line-height: 1.5;
            letter-spacing: normal;
            color: #4d4d4d; }
            html body > div section.plans .plan > ul li .notify-end-date {
              font-size: 11px;
              font-weight: normal; }
            html body > div section.plans .plan > ul li .campaign-benefit {
              font-size: 11px;
              font-weight: bold; }
        html body > div section.plans .plan .blue {
          width: 100%;
          background-color: #0062ff; }
          html body > div section.plans .plan .blue:hover {
            background-color: #0A42C4; }
        html body > div section.plans .plan .green {
          width: 100%;
          background-color: #0cb258; }
          html body > div section.plans .plan .green:hover {
            background-color: #087239; }
        html body > div section.plans .plan .black {
          width: 100%;
          background-color: #222222; }
          html body > div section.plans .plan .black:hover {
            background-color: #4D4D4D; }
        html body > div section.plans .plan .adjuster {
          margin-top: 5px; }
        html body > div section.plans .plan .spacer {
          margin-left: 12px; }
      @media screen and (min-width: 769px) {
        html body > div section.plans #plans {
          margin: 0 auto;
          padding: 0;
          max-width: 1440px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 16px;
          flex-wrap: wrap; } }
      @media screen and (max-width: 768px) {
        html body > div section.plans #plans {
          margin: 0 auto;
          padding: 0;
          max-width: 343px; }
          html body > div section.plans #plans .feature {
            height: 48px;
            position: relative; }
            html body > div section.plans #plans .feature > img {
              left: 0;
              right: 0;
              margin: 0 auto;
              position: absolute;
              top: 32px; }
          html body > div section.plans #plans .not-feature {
            height: 0px; }
          html body > div section.plans #plans .plan {
            padding: 32px 8px; }
          html body > div section.plans #plans .adjuster {
            margin-top: 0; } }
      html body > div section.plans .other-plans {
        padding: 56px 0 56px 0;
        text-align: center;
        font-size: 16px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        letter-spacing: normal;
        color: #ffffff; }
        html body > div section.plans .other-plans h2 {
          margin-bottom: 16px;
          font-size: 26px; }
        html body > div section.plans .other-plans .other-plans-element {
          display: table;
          margin-left: auto;
          margin-right: auto; }
        html body > div section.plans .other-plans .other-plan {
          padding-left: 15px;
          padding-right: 15px;
          font-size: 21px;
          margin-top: 24px;
          margin-bottom: 10px;
          border-radius: 4px; }
          @media screen and (min-width: 769px) {
            html body > div section.plans .other-plans .other-plan {
              display: table-cell; } }
          @media screen and (max-width: 768px) {
            html body > div section.plans .other-plans .other-plan {
              font-size: 20px;
              display: flex;
              background-color: #484848;
              height: 56px;
              align-items: center; } }
          @media screen and (max-width: 375px) {
            html body > div section.plans .other-plans .other-plan {
              font-size: 18px; } }
          @media screen and (max-width: 360px) {
            html body > div section.plans .other-plans .other-plan {
              font-size: 16px; } }
          html body > div section.plans .other-plans .other-plan .student {
            display: table-cell;
            text-align: left; }
            @media screen and (max-width: 768px) {
              html body > div section.plans .other-plans .other-plan .student {
                width: 270px; } }
          html body > div section.plans .other-plans .other-plan .team-plan {
            display: table-cell;
            text-align: left; }
            @media screen and (max-width: 768px) {
              html body > div section.plans .other-plans .other-plan .team-plan {
                width: 270px; } }
          html body > div section.plans .other-plans .other-plan .chevron {
            margin: 0;
            display: table-cell;
            padding-left: 10px; }
        html body > div section.plans .other-plans span {
          vertical-align: middle; }
        html body > div section.plans .other-plans img {
          vertical-align: middle;
          height: 21px; }
    html body > div section.books {
      padding: 40px 32px;
      text-align: center;
      background-color: #000;
      color: #fff; }
      html body > div section.books > div {
        max-width: 100%; }
        html body > div section.books > div h1 {
          font-size: 40px;
          margin: 0 0 52px; }
          html body > div section.books > div h1 .premium {
            font-size: 16px; }
        html body > div section.books > div .book-list {
          height: 270px;
          margin-bottom: 50px;
          background: black url("../img/img-books.png") repeat-x center;
          background-size: cover;
          -webkit-animation: slide-horizontal 1200s linear infinite; }

@-webkit-keyframes slide-horizontal {
  from {
    background-position: 0 0; }
  to {
    background-position: -72000px 0; } }
        html body > div section.books > div a {
          width: 100%; }
  html body > div footer {
    padding: 40px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    text-align: center; }
    html body > div footer .logo {
      width: 108px;
      margin-bottom: 40px; }
    html body > div footer .button {
      background-color: #0062ff; }
      html body > div footer .button:hover {
        background-color: #0A42C4; }
    html body > div footer .social {
      display: flex;
      justify-content: space-between;
      width: 250px;
      margin: 0 auto;
      padding: 32px 0 32px 0; }
      html body > div footer .social a {
        display: inline-block;
        width: 40px;
        height: 40px; }
        html body > div footer .social a img {
          width: 100%;
          height: 100%; }
    html body > div footer .link {
      color: #fff;
      text-decoration: none; }
      html body > div footer .link:hover {
        text-decoration: underline; }
    html body > div footer .copyright {
      margin: 15px; }
  @media screen and (max-width: 1023px) {
    html body > div header .header div a {
      font-size: 12px;
      width: 136px;
      height: 32px;
      line-height: 30px; }
    html body > div header .wrapper .pc-banner {
      display: inline-block; }
    html body > div header .wrapper .mobile-banner {
      display: none; }
    html body > div header .wrapper .title .pc-title {
      display: inline-block; }
    html body > div header .wrapper .title .mobile-title {
      display: none; }
    html body > div header .wrapper .description .pc-description {
      display: block; }
    html body > div header .wrapper .description .mobile-description {
      display: none; }
    html body > div header .wrapper .wrapper-cover {
      display: block; }
    html body > div header .wrapper .wrapper-cover-mobile {
      display: none; }
    html body > div .floating-footer .register .pc-banner {
      height: auto;
      width: 90%; } }
  @media screen and (max-width: 768px) {
    html body > div header .header div {
      padding: 0 8px; }
    html body > div header .wrapper .pc-banner {
      display: none; }
    html body > div header .wrapper .mobile-banner {
      display: block;
      width: 100%;
      max-height: 60vh;
      object-fit: cover; }
    html body > div header .wrapper .title {
      text-align: center; }
      html body > div header .wrapper .title .pc-title {
        display: none; }
      html body > div header .wrapper .title .mobile-title {
        display: block;
        width: 100%; }
    html body > div header .wrapper .description .pc-description {
      display: none; }
    html body > div header .wrapper .description .mobile-description {
      display: block; }
    html body > div header .wrapper .wrapper-cover {
      display: none; }
    html body > div header .wrapper .wrapper-cover-mobile {
      display: block; }
    html body > div section .pc-element {
      display: none; }
    html body > div section .mobile-element {
      display: block; }
    html body > div section.text-book .text-books {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-evenly; }
      html body > div section.text-book .text-books > div {
        width: 50%;
        margin-bottom: 40px;
        padding: 0 18px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: -0.58px;
        color: #111111; }
        html body > div section.text-book .text-books > div > img {
          width: 100%; }
      html body > div section.text-book .text-books .coming-soon {
        display: none; }
      html body > div section.text-book .text-books .coming-soons {
        display: block; }
    html body > div section.featured {
      padding: 0px 5%; }
      html body > div section.featured .description .category {
        flex-direction: column;
        text-align: center; }
        html body > div section.featured .description .category .separator {
          width: 60px;
          height: 2px;
          margin: 32px auto 24px; }
        html body > div section.featured .description .category .category-description {
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
          line-height: 1.88;
          letter-spacing: 0.64px;
          max-width: 100%;
          margin-bottom: 40px; }
    html body > div section.featured-list .featured-contents {
      justify-content: center;
      padding: 60px 0px 0px 0px; }
      html body > div section.featured-list .featured-contents .content {
        width: 360px;
        margin-left: 0px;
        margin-bottom: 24px; }
        html body > div section.featured-list .featured-contents .content .content-link {
          text-decoration: none; }
        html body > div section.featured-list .featured-contents .content .title {
          margin-top: 24px; }
    html body > div section.featured-list .futured-content-footer a {
      width: 100%;
      margin: 0px 0px 80px 0px; }
    html body > div section.plans {
      padding: 0 7px 36px; }
      html body > div section.plans .not-feature {
        height: 0px; }
      html body > div section.plans .plan-action:hover {
        transform: translate(0, 0); } }
  @media screen and (max-width: 479px) {
    html body .button {
      height: 48px;
      line-height: 48px;
      border-radius: 24px;
      font-size: 18px;
      min-width: 200px; }
    html body > div section.featured-list {
      margin: 0;
      padding: 0 7px;
      background-color: #121212; }
      html body > div section.featured-list .featured-content-head {
        margin: 0;
        padding-top: 81px;
        margin-bottom: 0px; }
      html body > div section.featured-list .featured-contents {
        margin-top: 0px;
        padding-top: 0; }
        html body > div section.featured-list .featured-contents .content-link {
          text-decoration: none; }
        html body > div section.featured-list .featured-contents .banner {
          margin-top: 0px;
          padding-top: 0; }
      html body > div section.featured-list .futured-content-footer {
        padding: 0 17px; }
        html body > div section.featured-list .futured-content-footer a {
          width: 100%; }
    html body > div section.services {
      padding: 56px 7px 16px 7px; }
      html body > div section.services .services-wrapper h1 {
        font-size: 28px; }
      html body > div section.services .services-wrapper .service-footer {
        padding: 48px 17px 80px 17px; }
        html body > div section.services .services-wrapper .service-footer a {
          width: 100%; }
      html body > div section.services .services-wrapper .pick-wrapper .pick-card {
        flex-direction: column;
        margin: 0px 0px 24px 0px; }
        html body > div section.services .services-wrapper .pick-wrapper .pick-card:nth-child(even) {
          flex-direction: column; }
        html body > div section.services .services-wrapper .pick-wrapper .pick-card:nth-child(1) .text {
          margin-left: 0px; }
        html body > div section.services .services-wrapper .pick-wrapper .pick-card:nth-child(2) .text {
          margin-right: 0px; }
        html body > div section.services .services-wrapper .pick-wrapper .pick-card .image {
          text-align: center; }
          html body > div section.services .services-wrapper .pick-wrapper .pick-card .image img {
            margin: 0;
            padding: 0;
            width: 100%; }
        html body > div section.services .services-wrapper .pick-wrapper .pick-card .text {
          display: inline-block; }
          html body > div section.services .services-wrapper .pick-wrapper .pick-card .text > div {
            padding: 24px 0px 24px 0px; }
            html body > div section.services .services-wrapper .pick-wrapper .pick-card .text > div p {
              flex: 0 0 auto; }
      html body > div section.services .services-wrapper > div {
        display: block;
        text-align: center; }
        html body > div section.services .services-wrapper > div .card {
          margin: 0 0 20px 0;
          width: auto; }
          html body > div section.services .services-wrapper > div .card .image {
            text-align: center; }
            html body > div section.services .services-wrapper > div .card .image img {
              margin: 0;
              padding: 0;
              width: 100%; }
          html body > div section.services .services-wrapper > div .card > div p {
            flex: 0 0 auto; }
    html body > div section.plans {
      padding: 0 7px 36px; }
      html body > div section.plans .feature span {
        display: inline-block;
        text-align: middle;
        width: 120px;
        height: 24px;
        font-size: 16px;
        padding: 2px 12px;
        border-radius: 16px;
        text-decoration: bold;
        color: #fff;
        transition: .4s;
        transform: translate(0, 35px); }
      html body > div section.plans .feature .black-feature {
        background-color: #4d4d4d; }
      html body > div section.plans .feature .green-feature {
        background-color: #0cb258; }
      html body > div section.plans .feature img {
        display: none; }
      html body > div section.plans .not-feature {
        height: 0px; }
    html body > div section.special > div .contents .content .book {
      display: block; }
      html body > div section.special > div .contents .content .book .cover {
        text-align: center;
        margin: 0 auto 20px; }
        html body > div section.special > div .contents .content .book .cover img {
          margin: 0; }
      html body > div section.special > div .contents .content .book .title {
        font-size: 24px; }
        html body > div section.special > div .contents .content .book .title .subtitle {
          font-size: 14px;
          font-weight: normal;
          margin-left: 16px;
          vertical-align: middle; }
    html body > div section.special > div .contents .content .author {
      display: block; }
      html body > div section.special > div .contents .content .author .shadow img {
        width: 90px;
        height: auto;
        margin: 0 10px 0 0;
        vertical-align: middle; }
      html body > div section.special > div .contents .content .author .name {
        display: none; }
      html body > div section.special > div .contents .content .author .name-sp {
        font-size: 14px;
        font-weight: bold;
        display: inline-block; }
    html body > div section.special > div .notice {
      display: block; }
    html body > div section.special > div .register {
      padding: 0 15px;
      min-width: 280px; }
    html body > div section.books {
      padding: 40px 0; }
      html body > div section.books > div h1 {
        font-size: 28px; }
    html body > div .floating-footer .pc-banner {
      display: none; }
    html body > div .floating-footer .mobile-banner {
      display: block;
      width: 100%; }
    html body > div .floating-footer .wrapper-cover-mobile {
      display: block;
      width: 100%; }
    html body > div .floating-footer .close {
      height: 25%;
      top: 15%;
      right: 1%; }
    html body > div footer {
      padding: 40px 40px 120px 40px; } }
  html body .dialog {
    font-size: 14px; }
    html body .dialog input {
      border: solid 1px #ddd;
      width: 90%;
      font-size: 14px;
      max-width: 300px;
      padding: .5em;
      margin-top: 1em; }

html dialog::backdrop {
  background: rgba(0, 0, 0, 0.6); }

html #dialog[open] {
  border: none;
  border-radius: 8px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  html #dialog[open] .dialog-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 150%;
    margin-bottom: 12px;
    color: #222;
    text-align: center; }
  html #dialog[open] .dialog-caution {
    font-size: 14px;
    line-height: 150%;
    margin: 0 16px 16px;
    color: #222;
    width: 100%; }
  html #dialog[open] .dialog-button {
    border-radius: 4px;
    background-color: #146AF5;
    color: #fff;
    min-height: 40px;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    margin-bottom: 8px;
    width: 100%; }
  html #dialog[open] .dialog-cancel-button {
    border: 1px solid rgba(22, 22, 22, 0.16);
    border-radius: 4px;
    background-color: #fff;
    color: #222;
    min-height: 40px;
    width: 326px;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    margin-bottom: 8px;
    width: 100%; }
    html #dialog[open] .dialog-cancel-button :hover {
      cursor: pointer; }