@charset "UTF-8";

/* textbook-section */
@media all {
  .textbook-section-lead {
    text-align: center;
  }

  .textbook-ttl {
    font-weight: bold;
    color: var(--main-blue);
  }
  .textbook-figure-dt {
    margin-top: 1em;
    font-size: 14rem;
    font-weight: bold;
    color: var(--main-blue);
  }
  .textbook-figure-dd {
    position: relative;
    margin: 10rem auto 0;
    width: 230rem;
    font-weight: 600;
  }
  .textbook-figure-dd::after {
    content: "";
    position: absolute;
    bottom: -4rem;
    left: 0;
    display: block;
    width: 100%;
    height: max(1px, 1rem);
    background: linear-gradient(to right, #f00, #b507de, #00a2e7);
  }
  .price-num,
  .price-yen {
    color: var(--main-blue);
  }
  .price-taxin {
    font-weight: normal;
  }

  .price-num {
    font-size: 24rem;
  }
  .price-yen,
  .price-taxin {
    font-size: 14rem;
  }

  .buy-form .button {
    justify-content: center;
  }
  .textbook-content-notice {
    background-color: #ccdfec;
    color: var(--main-blue);
    text-align: center;
  }
  .textbook-content-notice .ttl {
    margin-bottom: 0.5em;
    font-weight: bold;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .textbook-content {
      margin-top: 70rem;
    }
    .textbook-content-img {
      margin: 0 auto;
      width: 220rem;
      box-shadow: 3rem 3rem 3rem rgba(0, 0, 0, 0.2);
    }
    .textbook-content-text {
      margin-top: 30rem;
      text-align: center;
    }
    .textbook-ttl {
      font-family: "Noto Sans JP", sans-serif !important;
      margin-top: 20rem;
      font-size: 20rem;
    }
    .textbook-ttl small {
      font-size: 14rem;
    }

    .buy-form {
      margin-top: 40rem;
    }
    .buy-form .button {
      width: 250rem;
      height: 60rem;
      font-size: 22rem;
    }
    .buy-form .button.rainbow::after {
      top: calc(50% - 10rem);
      width: 20rem;
    }
    .buy-form .button > img {
      margin-left: 5rem;
      width: 25rem;
    }

    .textbook-content-notice {
      margin-top: 80rem;
      padding: 18rem 15rem;
      font-size: 12rem;
      line-height: 20rem;
    }
    .textbook-content-notice .ttl {
      font-size: 14rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .textbook-section {
      margin-top: 100rem;
    }
    .textbook-section-lead {
      line-height: 2.5;
    }

    .textbook-content {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-top: 100rem;
    }

    .textbook-content-img {
      margin-left: 97rem;
      width: 354rem;
    }
    .textbook-content-img img {
      box-shadow: 5rem 5rem 5rem rgba(0, 0, 0, 0.2);
    }

    .textbook-content-text {
      width: 400rem;
    }
    .textbook-ttl {
      margin-top: 16rem;
      font-size: 22rem;
    }
    .textbook-ttl small {
      font-size: 16rem;
    }
    .textbook-figure-dd {
      margin-top: 22rem;
    }
    .buy-form {
      margin-top: 30rem;
    }
    .buy-form .button {
      width: 100%;
      height: 80rem;
      font-size: 22rem;
    }
    .buy-form .button > img {
      margin-left: 5rem;
      width: 25rem;
    }
    .textbook-content-notice {
      margin-top: 90rem;
      padding: 20rem 15rem;
      font-size: 14rem;
      line-height: 22rem;
    }
  }
}

/* trial-list */
@media all {
  .trial-item {
    background-color: var(--bg-lightblue);
  }
  .trial-header {
    font-family: var(--lineseed);
    font-weight: bold;
    color: var(--main-blue);
  }
  .trial-header-no {
    display: inline-block;
    color: #fff;
  }
  .trial-btn {
    text-align: right;
  }
  .trial-btn .button::before {
    top: -2rem;
    left: -2rem;
    width: calc(100% + 4rem);
    height: calc(100% + 4rem);
  }
  .trial-img img {
    width: 100%;
    height: 100%;
  }
  .trial-img,
  .trial-img::before,
  .trial-img span {
    padding: 0;
    border-radius: 0 !important;
  }
  .trial-img::before {
    background: linear-gradient(
      to bottom right,
      #ff0080,
      #da005f 13%,
      #7300db 45%,
      #003fbe 87%,
      #005eff 100%
    );
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .trial-list {
      margin-top: 80rem;
      margin-left: -25rem;
      width: 100vw;
    }
    .trial-item {
      display: flex;
      flex-direction: column-reverse;
      padding: 40rem 25rem;
    }
    .trial-item + .trial-item {
      margin-top: 40rem;
    }

    .trial-text {
      margin-top: 30rem;
    }
    .trial-header {
      font-size: 18rem;
    }
    .trial-header-no {
      padding: 7rem 15rem 7rem 10rem;
      clip-path: polygon(0 0, 100% 0, calc(100% - 10rem) 100%, 0 100%);
    }
    .trial-exp {
      margin-top: 30rem;
      line-height: 2.285;
    }

    .trial-btn {
      margin-top: 30rem;
    }
    .trial-btn .button {
      width: 198rem;
      height: 43rem;
      font-size: 16rem;
    }
    .trial-btn .button > span {
      padding-left: 30rem;
    }
    .button img.outgo {
      margin-left: 6rem;
      width: 18rem;
      transform: translate(3rem, 0);
    }

    .trial-img {
      width: 348rem;
      height: 245rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .trial-list {
      margin-top: 100rem;
    }
    .trial-item {
      display: flex;
      justify-content: space-between;
      margin-top: 40rem;
      padding: 40rem 50rem;
    }

    .trial-text {
      position: relative;
      width: 420rem;
    }
    .trial-header {
      font-size: 22rem;
    }
    .trial-header-no {
      padding: 10rem 20rem 10rem 10rem;
      font-size: 20rem;
      clip-path: polygon(0 0, 100% 0, calc(100% - 10rem) 100%, 0 100%);
    }
    .trial-exp {
      margin-top: 30rem;
      line-height: 2.5;
    }
    .trial-btn {
      position: absolute;
      bottom: 0;
      right: 0;
    }
    .trial-btn .button {
      font-size: 18rem;
    }
    .button img.outgo {
      margin-left: 10rem;
      width: 20rem;
      transform: none;
      transition: filter 0.3s;
    }
    .button:hover .outgo {
      filter: brightness(0) invert(1);
    }

    .trial-img {
      width: 398rem;
      height: 283rem;
    }
  }
}

/* tab-list */
@media all {
  .tab-list {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    font-weight: bold;
  }
  .tab-item-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    margin-left: 2rem;
    width: calc(100% - 4rem);
    height: calc(100% - 2rem);
    background-color: rgba(239, 239, 239, 1);
    color: var(--main-blue);
    transition:
      background-color 0.3s,
      color 0.3s;
  }
  .tab-item:not(.active) .tab-item-inner {
    cursor: pointer;
  }
  .active .tab-item-inner {
    color: #fff;
    background-color: rgba(239, 239, 239, 0);
  }

  .detail-list {
    background-color: #fff;
  }
  .detail-item {
    display: none;
  }
  .detail-item.active {
    display: block;
  }

  .feature-item-header,
  .feature-item-dt {
    font-family: var(--lineseed);
    color: var(--main-blue);
    font-weight: bold;
  }
  .feature-item-no {
    display: inline-block;
    color: #fff;
  }

  .feature-item-dt.button,
  .feature-item-dt.button::before,
  .feature-item-dt.button span {
    width: 100%;
    border-radius: 0;
  }
  .feature-item-dt.button::before {
    left: 0;
  }
  .feature-item-dt span {
    justify-content: center;
    padding: 0;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .detail-section {
      padding: 50rem 0;
    }
    .tab-list {
      padding: 0 25rem;
    }
    .tab-item {
      width: 108rem;
      height: 50rem;
      border-top-left-radius: 10rem;
      border-top-right-radius: 10rem;
    }
    .tab-item-inner {
      border-top-left-radius: 8rem;
      border-top-right-radius: 8rem;
      font-size: 18rem;
    }

    .detail-item {
      padding: 60rem 25rem;
    }

    .feature-item {
      margin-top: 70rem;
    }
    .feature-item-header {
      display: flex;
      margin-bottom: 20rem;
      font-size: 20rem;
    }
    .feature-item-no {
      flex-shrink: 0;
      padding: 5rem 0 5rem 14rem;
      width: 65rem;
      height: 32rem;
      font-size: 22rem;
      clip-path: polygon(0 0, 100% 0, calc(100% - 8rem) 100%, 0 100%);
    }
    .feature-item-ttl {
      margin-left: 10rem;
      line-height: 34rem;
    }

    .feature-item-dl + .feature-item-dl {
      margin-top: 40rem;
    }
    .feature-item-dt {
      height: auto;
      font-size: 18rem;
      line-height: 28rem;
    }
    .feature-item-dt > span {
      padding: 6rem 0;
    }
    .feature-item-dd {
      margin-top: 10rem;
      line-height: var(--txt-lineheight);
    }

    .feature-item-img {
      margin-top: 10rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .tab-list {
      width: 970rem;
    }
    .tab-item {
      width: 310rem;
      height: 60rem;
      border-top-left-radius: 10rem;
      border-top-right-radius: 10rem;
    }
    .tab-item-inner {
      border-top-left-radius: 8rem;
      border-top-right-radius: 8rem;
      font-size: 22rem;
    }
    .tab-item:not(.active) .tab-item-inner:hover {
      background-color: var(--table-lightblue);
      color: #fff;
    }

    .detail-section {
      margin-top: 100rem;
      padding: 60rem 0;
      background-position: left top;
    }

    .detail-item {
      padding: 80rem 50rem 100rem;
    }
    .fotorama-wrapper {
      margin: 0 auto;
      width: 665rem;
    }

    .feature-item {
      margin-top: 80rem;
    }
    .feature-item-header {
      margin-bottom: 35rem;
      font-size: 22rem;
    }
    .feature-item-no {
      padding: 5rem 0 5rem 14rem;
      width: 65rem;
      height: 32rem;
      clip-path: polygon(0 0, 100% 0, calc(100% - 8rem) 100%, 0 100%);
    }

    .feature-item-dl {
      width: 420rem;
    }
    .feature-item-dt {
      font-size: 20rem;
      height: 40rem;
    }

    .feature-item-dd {
      margin-top: 16rem;
      line-height: 2.5;
    }
    .feature-item-text {
      width: 480rem;
    }
    .feature-item-img {
      width: 396rem;
    }
  }
}

/* #summary & authors */
@media all {
  .summary-list {
    border-bottom: max(2px, 2rem) dotted var(--table-lightblue);
  }
  .summary-dt {
    position: relative;
    font-weight: bold;
    color: var(--main-blue);
    border-top: max(2px, 2rem) dotted var(--table-lightblue);
    line-height: 1.5;
  }
  /* .summary-dt:hover {cursor: pointer;} */
  /* .summary-dd-opener {position: absolute;} */
  .summary-dd-opener {
    display: none;
  }
  /* .summary-dd {
		display: none;
		line-height: 2;
	} */
  .summary-dd {
    line-height: 2;
  }

  .author-dl {
    display: flex;
    flex-wrap: wrap;
  }
  .author-dt {
    background-color: var(--bg-lightblue);
    font-weight: bold;
    color: var(--main-blue);
  }
  .author-dd p:last-child {
    font-weight: 500;
    color: var(--table-lightblue);
  }

  .author-dl {
    border-top: max(1px, 1rem) solid var(--table-lightblue);
  }
  .author-dt,
  .author-dd {
    border-bottom: max(1px, 1rem) solid var(--table-lightblue);
  }
  .author-dt {
    border-left: max(1px, 1rem) solid var(--table-lightblue);
  }
  .author-dd {
    border-right: max(1px, 1rem) solid var(--table-lightblue);
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .summary-dt {
      padding: 12rem 30rem 12rem 16rem;
      font-size: 16rem;
    }
    .summary-dd-opener {
      top: 16rem;
      right: 8rem;
      width: 16rem;
      font-size: 12rem;
    }
    /* .summary-dd-opener::before,
		.summary-dd-opener::after {top: -.5rem;} */
    .summary-dd {
      padding: 15rem 25rem;
    }

    .author-dl {
      line-height: var(--txt-lineheight);
    }
    .author-dt {
      padding: 10rem 0 10rem 10rem;
      width: 110rem;
    }
    .author-dd {
      padding: 10rem;
      width: calc(100% - 110rem);
    }
    .author-dd p:last-child {
      font-size: 14rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .summary-dt {
      padding: 12rem 40rem;
      font-size: 20rem;
      transition: opacity 0.3s;
    }
    /* .summary-dt:hover {opacity: .7;} */
    /* .summary-dd-opener {
			top: 16rem;
			right: 0;
			width: 20rem;
			font-size: 14rem;
		} */

    .summary-dd {
      padding: 0 40rem 20rem 90rem;
    }

    .author-dl {
      margin: 0 auto;
      width: 640rem;
      line-height: 25rem;
    }
    .author-dt {
      padding: 15rem 25rem;
      width: 160rem;
    }
    .author-dd {
      padding: 15rem 0 15rem 25rem;
      width: calc(100% - 160rem);
    }
    .author-dd p:last-child {
      font-size: 14rem;
    }
  }
}

/* buy-section */
@media all {
  .buy-section .buy-bonus {
    margin-top: 1em;
    text-align: center;
  }
  .buy-section .notice-dd {
    text-align: justify;
  }
  .sending-notice {
    margin-top: 0.75em;
    color: var(--txt-gray);
    line-height: 1.5;
    padding-left: 1em;
  }
  button:hover {
    cursor: pointer;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .page-main::after {
      content: "";
      display: block;
      width: 100%;
      height: 120rem;
    }
    .buy-section {
      /* margin-bottom: 140rem; */
      padding-top: 10rem;
      padding-bottom: 60rem;
      background: linear-gradient(
        to bottom,
        transparent 180rem,
        var(--bg-lightblue) 230rem
      );
    }
    .buy-section .buy-bonus {
      font-size: 12rem;
    }
    .buy-section .textbook-content-notice {
      margin-top: 60rem;
    }
    .buy-section .textbook-content-notice + .textbook-content-notice {
      margin-top: 0;
    }
    .sending-notice {
      position: relative;
      font-size: 12rem;
    }
    .sending-notice::before {
      content: "※";
      position: absolute;
      left: 0;
      width: 1em;
      height: 1em;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .buy-section {
      padding: 125rem 0 50rem;
      background: linear-gradient(
        to bottom,
        transparent 180rem,
        var(--bg-lightblue) 230rem
      );
    }
    .buy-section .textbook-content {
      margin: 0 auto;
      width: 755rem;
    }
    .buy-section .textbook-content-img {
      width: 220rem;
    }

    .buy-section .textbook-content-text {
      transform: translateY(24rem);
    }
    .buy-section .buy-form .button {
      height: 60rem;
      font-size: 18rem;
    }
    .buy-section .buy-bonus {
      font-size: 12rem;
    }

    .buy-section .textbook-content-notice {
      width: 50%;
    }
    .buy-section .textbook-content-notice:first-child {
      padding-left: 30rem;
      padding-right: 50rem;
    }
    .buy-section .textbook-content-notice:nth-child(2) {
      padding-right: 30rem;
      padding-left: 50rem;
    }

    .sending-notice {
      font-size: 12rem;
      text-align: center;
    }

    .site-footer {
      margin-top: 60rem;
    }
  }
}

/* template-section */
@media all {
  /* sp */
  @media only screen and (max-width: 767px) {
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
  }
}