:root {
    --fs-body-m: 0.875rem;
    --fs-body: 0.875rem;
    --fs-body-s: 0.75rem;
    --fs-body-xs: 0.625rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;
    --fs-h4: 1.125rem;
    --fs-h5: 1rem;
    --fs-h6: 0.875rem;
    --fs-hero: 0.875rem;
    --fs-ttl: 1.75rem;
    --fs-hero-l: 1.75rem;
    --fs-32-r: 1.5rem;
    --fs-28-r: 1.25rem;
    --fs-24-r: 1.125rem;
    --fs-20-r: 1rem;
    --fs-18-r: 0.875rem;
    --fs-sectionTtl: 3.75rem;
    --fs-point: 2.375rem;
    --price-h: 34px;
    --header-h:56px;
    --header-h-n:-56px;
    --hero-h:400px;
    --spc88-r: 24px;
    --spc64-r: 40px;
    --spc40-r: 24px;
    --spc24-r: 16px;
  }
  @media screen and (min-width: 769px) {
    :root {
      --fs-body-m: 1rem;
      --fs-hero: 1.125rem;
      --fs-hero-l: 2.5rem;
      --fs-32-r: 2rem;
      --fs-28-r: 1.75rem;
      --fs-24-r: 1.5rem;
      --fs-20-r: 1.25rem;
      --fs-18-r: 1.125rem;
      --fs-sectionTtl: 6.25rem;
      --fs-h2: 2rem;
      --fs-h3: 1.75rem;
      --fs-h4: 1.5rem;
      --fs-h5: 1.25rem;
      --fs-h6: 1.125rem;
      --fs-point: 3rem;
      --fs-ttl: 2.5rem;
      --header-h:111px;
      --header-h-n:-111px;
      --hero-h:536px;
      --spc88-r: 88px;
      --spc64-r: 64px;
      --spc40-r: 40px;
      --spc24-r: 24px;
    }
  }
  
  @keyframes reflect {
    0%, 75% {
      transform: rotate(45deg) scale(0);
      opacity: 1;
    }
    100% {
      transform: rotate(45deg) scale(100);
      opacity: 0;
    }
  }
  * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  
  [hidden] {
    display: none;
  }
  
  html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #ffffff;
  }
  
  body {
    overflow-y: scroll;
    line-break: normal;
    overflow-wrap: break-word;
  }
  
  section, nav, article, aside, hgroup,
  header, footer, figure, figcaption, details {
    display: block;
  }
  
  video, audio, canvas {
    display: inline-block;
  }
  
  audio:not([controls]) {
    display: none;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
  }
  
  hr {
    color: inherit;
    height: auto;
    box-sizing: content-box;
  }
  
  pre {
    font-family: monospace, sans-serif;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  
  li {
    list-style: none;
  }
  
  a:active {
    outline: none;
  }
  
  strong, b {
    font-weight: bold;
  }
  
  small {
    font-size: 0.83em;
  }
  
  q {
    quotes: none;
  }
  
  abbr[title] {
    border-bottom: 1px dotted;
  }
  
  code, samp, kbd {
    font-family: monospace, sans-serif;
  }
  
  mark {
    color: black;
    background-color: yellow;
  }
  
  sub, sup {
    font-size: 0.5em;
    line-height: 0;
  }
  
  sub {
    vertical-align: 0px;
  }
  
  sup {
    vertical-align: 0.8em;
  }
  
  img {
    border: 0;
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
    margin-top: 0px;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  svg:not(:root) {
    overflow: hidden;
  }
  
  table {
    border-collapse: collapse;
  }
  
  caption {
    text-align: left;
  }
  
  th, td {
    text-align: left;
    vertical-align: baseline;
  }
  
  fieldset {
    border: 0;
  }
  
  legend {
    border: 0;
  }
  
  input, button, select, textarea {
    font-family: inherit;
    font-size: 1em;
    color: inherit;
  }
  
  input, button {
    line-height: normal;
    vertical-align: inherit;
  }
  
  input::-moz-focus-inner,
  button::-moz-focus-inner {
    border: 0;
  }
  
  input[type=search] {
    -webkit-appearance: textfield;
       -moz-appearance: textfield;
            appearance: textfield;
  }
  
  input[type=search]:focus {
    outline-offset: -2px;
  }
  
  input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
            appearance: none;
  }
  
  input[type=checkbox],
  input[type=radio] {
    box-sizing: border-box;
  }
  
  input[type=submit],
  input[type=reset],
  input[type=button],
  button {
    cursor: pointer;
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }
  
  select {
    background-color: inherit;
    line-height: normal;
  }
  
  textarea {
    vertical-align: top;
    overflow: auto;
  }
  
  body {
    color: #141821;
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--fs-body);
    line-height: 1.5;
  }
  body::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    left: 0px;
    top: 0px;
    background-color: #EBEEF1;
    background-image: url(../images/bg_pattern_gray.webp);
    background-size: 96px 165.2px;
  }
  
  main {
    padding-top: var(--header-h);
  }
  
  h1, h2, h3, h4 {
    font-weight: 700;
  }
  
  mark {
    color: #141821;
    background-color: #FFED56;
  }
  mark.white {
    background-color: #ffffff;
  }
  
  a {
    text-decoration: underline;
  }
  @media screen and (min-width: 769px) {
    a:hover {
      text-decoration: none;
    }
  }
  
  small {
    display: inline-block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--fs-body-xs);
    color: #7F8288;
  }
  
  strong {
    font-weight: 500;
    color: #0087D2;
  }
  
  ul ul {
    font-size: 0.75rem;
    margin-top: 8px;
  }
  
  ul.-column2 {
    -moz-column-count: 2;
         column-count: 2;
  }
  
  .Button.-spFull img {
    width: 100%;
  }
  
  .point {
    color: #D03086;
  }
  
  .price {
    font-size: 24px;
    font-family: "Noto Serif JP", serif;
    vertical-align: -0.05em;
  }
  
  .fs {
    display: inline-block;
    font-weight: 400;
    font-size: 1.25em;
    color: inherit;
  }
  
  .pc {
    display: none;
  }
  @media screen and (min-width: 769px) {
    .pc {
      display: block;
    }
  }
  
  span.pc {
    display: none;
  }
  @media screen and (min-width: 769px) {
    span.pc {
      display: inline;
    }
  }
  
  @media screen and (min-width: 769px) {
    .sp {
      display: none;
    }
  }
  
  /*========= Banner =========*/
  .Banner {
    display: inline-block;
  }
  
  .Banner.-hoverBg {
    position: relative;
  }
  .Banner.-hoverBg::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(20, 24, 33, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  
  .Banner__container {
    width: 100%;
  }
  
  @media screen and (min-width: 769px) {
    .Banner.-hoverBg:hover::before {
      opacity: 1;
    }
  }
  
  .Banner.-typeA {
    background-color: #ffffff;
  }
  .Banner.-typeA .Banner__wrapper {
    display: flex;
    flex-direction: column;
  }
  @media screen and (min-width: 769px) {
    .Banner.-typeA .Banner__wrapper {
      flex-direction: row;
    }
  }
  
  .Banner.-typeB {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: column;
    position: relative;
    width: 100%;
    background: linear-gradient(152.24deg, #0B4368 12.68%, #007ABE 62.04%, #0087D2 86.14%);
  }
  @media screen and (min-width: 769px) {
    .Banner.-typeB {
      height: 304px;
      flex-direction: row;
    }
  }
  .Banner.-typeB::before {
    content: "";
    display: block;
    width: 100%;
    height: 140px;
    background-image: url(../images/PR_trainerlist_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  @media screen and (min-width: 769px) {
    .Banner.-typeB::before {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
    }
  }
  .Banner.-typeB::after {
    content: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(11, 67, 104, 0.6);
  }
  @media screen and (min-width: 769px) {
    .Banner.-typeB::after {
      content: "";
    }
  }
  .Banner.-typeB .Banner__title {
    font-size: 1.125rem;
    color: #ffffff;
  }
  @media screen and (min-width: 769px) {
    .Banner.-typeB .Banner__title {
      font-size: 1.25rem;
    }
  }
  .Banner.-typeB .Banner__body {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    z-index: 2;
    gap: 88px 16px;
    padding: 24px 24px 32px;
  }
  @media screen and (min-width: 769px) {
    .Banner.-typeB .Banner__body {
      flex-direction: row;
      align-items: flex-end;
      padding: 40px 6%;
    }
  }
  
  .Banner.-typeC {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 296px;
    border: none;
    background-color: transparent;
    background: url(../cta/CTA_ss_footer_sp.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  @media screen and (min-width: 769px) {
    .Banner.-typeC {
      height: 320px;
      background-image: url(../cta/CTA_ss_footer_pc.webp);
    }
  }
  @media screen and (min-width: 769px) {
    .Banner.-typeC:hover .Banner__button .Button {
      border-bottom: #E6D54E solid 0px;
    }
  }
  .Banner.-typeC .Banner__body {
    position: relative;
    z-index: 2;
  }
  .Banner.-typeC .Banner__title {
    width: 50%;
    text-align: left;
    margin-left: auto;
    font-size: 1.25rem;
    color: #141821;
  }
  .Banner.-typeC .Banner__button {
    margin-right: auto;
    margin-left: auto;
    max-width: 240px;
    margin-top: 40px;
  }
  @media screen and (min-width: 769px) {
    .Banner.-typeC .Banner__button {
      width: 50%;
      max-width: none;
      margin-left: auto;
      margin-right: 0px;
      margin-top: 24px;
    }
  }
  .Banner.-typeC .Banner__button .Button {
    pointer-events: none;
  }
  
  .Banner.-hasBg .Banner__wrapper {
    background-color: #EBEEF1;
    background-image: url(../images/bg_pattern_gray.webp);
    background-size: 96px 165.2px;
  }
  
  @media screen and (min-width: 769px) {
    .Banner__box.-image {
      flex-basis: 480px;
    }
  }
  .Banner__box.-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .Banner__box.-text {
    padding: 24px 24px 32px 24px;
  }
  @media screen and (min-width: 769px) {
    .Banner__box.-text {
      padding: 40px;
      flex-basis: 600px;
    }
  }
  
  .Banner__title {
    font-family: "Noto Serif JP", serif;
    font-size: var(--fs-24-r);
    color: #0087D2;
    font-weight: 500;
  }
  .Banner__title.-logo {
    max-width: 200px;
  }
  @media screen and (min-width: 769px) {
    .Banner__title.-logo {
      max-width: none;
    }
  }
  
  .Banner__text {
    font-family: "Noto Serif JP", serif;
    font-size: var(--fs-20-r);
    font-weight: 500;
    margin-top: 16px;
  }
  @media screen and (min-width: 769px) {
    .Banner__text {
      line-height: 2;
    }
  }
  .Banner__text.-normal {
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.5;
  }
  
  .Banner__button {
    margin-top: 24px;
  }
  
  /*========= BorderTable =========*/
  .BorderTable {
    border-collapse: collapse;
    width: 100%;
  }
  @media screen and (min-width: 769px) {
    .BorderTable {
      table-layout: fixed;
    }
  }
  .BorderTable td {
    display: block;
    padding-top: 16px;
  }
  @media screen and (min-width: 769px) {
    .BorderTable td {
      display: table-cell;
    }
  }
  
  .BorderTable__headline {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px 0px;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: #D1D4D7 solid 1px;
    width: 100%;
  }
  @media screen and (min-width: 769px) {
    .BorderTable__headline {
      flex-direction: row;
      padding-bottom: 24px;
    }
  }
  
  .BorderTable__price {
    position: relative;
    font-weight: 400;
  }
  @media screen and (min-width: 769px) {
    .BorderTable__price {
      padding-left: 40px;
    }
  }
  .BorderTable__price::before {
    content: none;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 20px;
    width: 1px;
    height: 34px;
    background-color: #D1D4D7;
    transform: rotate(45deg);
  }
  @media screen and (min-width: 769px) {
    .BorderTable__price::before {
      content: "";
    }
  }
  .BorderTable__price span {
    font-size: 1.5em;
    font-family: "Noto Serif JP", serif;
  }
  
  /*========= Button =========*/
  .Button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    width: 100%;
    height: 53px;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border: none;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
  }
  @media screen and (min-width: 769px) {
    .Button {
      max-width: 240px;
    }
  }
  
  .Button.-text {
    display: block;
    background-color: transparent;
    border: none;
    color: #0087D2;
    text-align: center;
    padding: 0px;
    width: auto;
    height: auto;
    font-weight: 500;
    white-space: nowrap;
  }
  .Button.-text.-posL {
    text-align: left;
  }
  .Button.-text.-posR {
    text-align: right;
  }
  
  .Button.-fill {
    background-color: #0087D2;
    color: #ffffff;
    transition: background-color 0.3s;
  }
  @media screen and (min-width: 769px) {
    .Button.-fill:hover {
      background-color: #006EAC;
    }
  }
  
  .Button.-fillW {
    font-weight: 500;
    background-color: #ffffff;
    color: #0087D2;
    transition: background-color 0.3s;
  }
  @media screen and (min-width: 769px) {
    .Button.-fillW:hover {
      background-color: #E7F3FA;
    }
  }
  
  .Button.-outline {
    background-color: #ffffff;
    font-weight: 500;
    color: #0087D2;
    border: #0087D2 solid 1px;
    transition: background-color 0.3s;
  }
  @media screen and (min-width: 769px) {
    .Button.-outline:hover {
      background-color: #E7F3FA;
    }
  }
  
  .Button.-onBg {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
  }
  
  .Button.-cta {
    background-color: #FFED56;
    color: #141821;
    border-bottom: #E6D54E solid 4px;
    transition: border 0.2s, transform 0.2s;
  }
  @media screen and (min-width: 769px) {
    .Button.-cta:hover {
      border-bottom: #E6D54E solid 0px;
    }
  }
  
  .Button.-movie {
    position: relative;
    border-radius: 0px;
  }
  .Button.-movie::before {
    content: "";
    display: block;
    width: 46px;
    height: 46px;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../images/icon_arrowRight_white.svg);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    border: #ffffff solid 1px;
    border-radius: 46px;
    pointer-events: none;
  }
  
  .Button.-large {
    max-width: 480px;
    font-size: 1.125rem;
    height: 79px;
  }
  @media screen and (min-width: 769px) {
    .Button.-large {
      font-size: 1.25rem;
      height: 94px;
    }
  }
  
  .Button.-medium {
    max-width: 160px;
    height: 49px;
  }
  @media screen and (min-width: 769px) {
    .Button.-medium {
      max-width: 320px;
      height: 75px;
    }
  }
  
  .Button.-small {
    max-width: 240px;
    height: 53px;
  }
  
  .Button.-SS {
    max-width: -moz-max-content;
    max-width: max-content;
    padding: 12px 16px;
    height: auto;
  }
  @media screen and (min-width: 769px) {
    .Button.-SS {
      max-width: 200px;
      padding: 16px;
    }
  }
  
  .Button.-XS {
    max-width: -moz-max-content;
    max-width: max-content;
    padding-left: 14px;
    padding-right: 14px;
    width: auto;
    height: 45px;
    line-height: 43px;
    white-space: nowrap;
  }
  
  .Button.-posL {
    margin-left: 0px;
  }
  
  .Button.-posR {
    margin-right: 0px;
  }
  
  .Button.-animate {
    position: relative;
    overflow: hidden;
  }
  .Button.-animate::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 10%;
    height: 150%;
    background: #ffffff;
    transform: rotate(45deg);
    animation: reflect 6s ease-in-out infinite;
  }
  
  .Button.-campaign, .Button.-pageTop, .Button.-free {
    height: 48px;
    border-radius: 0px;
  }
  @media screen and (min-width: 769px) {
    .Button.-campaign, .Button.-pageTop, .Button.-free {
      height: auto;
    }
  }
  
  .Button.-free {
    position: relative;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    color: #141821;
    width: 100%;
    font-family: "Noto Serif JP", serif;
    background-color: #FFED56;
  }
  @media screen and (min-width: 769px) {
    .Button.-free {
      font-size: 1rem;
      width: 144px;
      height: 144px;
      font-family: "Noto Sans JP", sans-serif;
      background-color: transparent;
    }
  }
  .Button.-free::after {
    content: none;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    background-color: #FFED56;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    transition: transform 0.2s;
  }
  @media screen and (min-width: 769px) {
    .Button.-free::after {
      content: "";
    }
  }
  @media screen and (min-width: 769px) {
    .Button.-free:hover::after {
      transform: scale(1.12);
    }
  }
  .Button.-free span {
    position: relative;
    z-index: 2;
  }
  
  .Button.-campaign {
    text-align: left;
    width: 100%;
    background-color: #0087D2;
    color: #ffffff;
    font-family: "Noto Serif JP", serif;
    font-size: 0.75rem;
  }
  
  .Button.-pageTop {
    background-color: #ffffff;
    width: 48px;
    flex-shrink: 0;
  }
  
  /*========= ColumnCard =========*/
  .ColumnCard {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 24px 16px;
  }
  @media screen and (min-width: 769px) {
    .ColumnCard {
      flex-direction: row;
      padding: 40px;
    }
  }
  
  @media screen and (min-width: 769px) {
    .ColumnCard.-pxS {
      padding: 24px 40px;
    }
  }
  
  .ColumnCard.-spc5 {
    gap: 40px;
  }
  
  .ColumnCard.-bgGray {
    background-color: #EBEEF1;
  }
  
  .ColumnCard.-bgBlue {
    background-color: #0087D2;
  }
  .ColumnCard.-bgBlue small:not([class]) {
    color: #ffffff;
  }
  
  .ColumnCard__item {
    flex-basis: auto;
  }
  .ColumnCard__item > * + * {
    margin-top: 16px;
  }
  .ColumnCard__item small {
    display: inline-block;
    margin-top: 8px;
  }
  
  /*========= ColumnArea =========*/
  .ColumnArea {
    padding: 24px 16px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea {
      padding: 40px;
    }
  }
  
  .ColumnArea.-flow {
    position: relative;
    padding: 16px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-flow {
      padding: 24px;
    }
  }
  .ColumnArea.-flow + .ColumnArea.-flow::before {
    content: "";
    display: block;
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background-image: url(../images/icon_arrowDown_black.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-flow + .ColumnArea.-flow::before {
      top: 50%;
      left: -22px;
      transform: translateY(-50%) rotate(-90deg);
    }
  }
  
  .ColumnArea.-point {
    border-width: 4px;
    border-style: solid;
    padding: 16px;
    text-align: center;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-point {
      padding: 24px;
    }
  }
  .ColumnArea.-point.-typeA {
    border-color: #0087D2;
  }
  .ColumnArea.-point.-typeB {
    border-color: #D03086;
  }
  
  .ColumnArea__unit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .ColumnArea__unit.-resp {
    flex-direction: row;
    text-align: left;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea__unit.-resp {
      flex-direction: column;
      text-align: center;
    }
  }
  
  .ColumnArea__sell {
    padding: 16px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea__sell {
      padding: 24px;
    }
  }
  .ColumnArea__sell + .ColumnArea__sell {
    border-top: #E7F3FA solid 1px;
  }
  
  .ColumnArea.-pNone {
    padding: 0px;
  }
  
  .ColumnArea.-pS {
    padding: 24px 12px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-pS {
      padding: 24px;
    }
  }
  
  .ColumnArea.-mtT {
    margin-top: 1px;
  }
  
  .ColumnArea.-pSS {
    padding: 16px;
  }
  
  .ColumnArea.-pXS {
    padding: 8px 16px;
  }
  
  .ColumnArea.-pbL {
    padding-bottom: 40px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-pbL {
      padding-bottom: 64px;
    }
  }
  
  .ColumnArea.-rounded {
    border-radius: 8px;
  }
  .ColumnArea.-rounded .-pXS {
    border-radius: 4px;
  }
  
  .ColumnArea.-hasBg {
    background-color: #ffffff;
  }
  .ColumnArea.-hasBg.-blue {
    background-color: #E7F3FA;
  }
  .ColumnArea.-hasBg.-gray {
    background-color: #EBEEF1;
  }
  .ColumnArea.-hasBg.-typeA {
    background-color: #0087D2;
  }
  .ColumnArea.-hasBg.-typeA small:not([class]) {
    color: #ffffff;
  }
  
  .ColumnArea.-hasLine {
    border: #EBEEF1 solid 8px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-hasLine {
      border: #EBEEF1 solid 16px;
    }
  }
  
  .ColumnArea.-hasLine.-thin {
    border-color: #D1D4D7;
    border-width: 1px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-hasLine.-thin {
      border-width: 1px;
    }
  }
  
  .ColumnArea.-hasLine.-normal {
    border: none;
    border-bottom: #ffffff solid 4px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-hasLine.-normal {
      border: #ffffff solid 4px;
    }
  }
  
  .ColumnArea.-hasLine.-price {
    border: #1287CD solid 1px;
    padding: 24px 16px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-hasLine.-price {
      padding: 24px;
    }
  }
  
  .ColumnArea.-hasLine.-typeA {
    border: #1287CD solid 1px;
    padding: 24px 16px 48px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-hasLine.-typeA {
      padding: 24px;
    }
  }
  
  .ColumnArea.-hasLine.-typeB {
    border: #D14271 solid 1px;
    padding: 24px 16px 48px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-hasLine.-typeB {
      padding: 24px;
    }
  }
  
  .ColumnArea.-hasLine.-typeC {
    border: #54AE3F solid 1px;
    padding: 24px 16px 48px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-hasLine.-typeC {
      padding: 24px;
    }
  }
  
  .ColumnArea.-hasLine.-typeD {
    border: #FF9000 solid 1px;
    padding: 24px 16px 48px;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea.-hasLine.-typeD {
      padding: 24px;
    }
  }
  
  .ColumnArea.-hasDeco {
    position: relative;
    background-color: #E7F3FA;
  }
  .ColumnArea.-hasDeco::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 14px;
    height: 24px;
    background-image: url(../images/symbol_single.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  .ColumnArea.-gradients {
    background: linear-gradient(270deg, #FFEDF6 12.83%, #FFFBDE 85.92%);
  }
  
  .ColumnArea__title {
    font-family: "Noto Serif JP", serif;
    font-size: var(--fs-24-r);
    font-weight: 500;
    text-align: center;
  }
  .ColumnArea__title + * {
    margin-top: 16px;
  }
  .ColumnArea__title.-en {
    font-family: "Cormorant Infant", serif;
    font-weight: 400;
    font-size: 1.5rem;
  }
  .ColumnArea__title.-spAL {
    text-align: left;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea__title.-spAL {
      text-align: center;
    }
  }
  
  .ColumnArea__subtitle {
    font-weight: 500;
    color: #0087D2;
    text-align: center;
  }
  .ColumnArea__subtitle + * {
    margin-top: 8px;
  }
  .ColumnArea__subtitle.-spAL {
    text-align: left;
  }
  @media screen and (min-width: 769px) {
    .ColumnArea__subtitle.-spAL {
      text-align: center;
    }
  }
  
  .ColumnArea__heading {
    font-family: "Noto Serif JP", serif;
    font-size: 1.25rem;
    font-weight: 500;
  }
  
  .ColumnArea__lead {
    font-size: var(--fs-body-m);
    font-weight: 500;
  }
  .ColumnArea__lead.-medium {
    font-size: 1.125rem;
  }
  
  .ColumnArea__figure {
    text-align: center;
    flex-shrink: 0;
  }
  
  /*========= ColumnInfo =========*/
  .ColumnInfo {
    border: #D1D4D7 solid 1px;
    padding: 16px;
    font-size: 0.75rem;
  }
  @media screen and (min-width: 769px) {
    .ColumnInfo {
      padding: 24px;
    }
  }
  
  .ColumnInfo.-resp .ColumnInfo__body {
    display: none;
  }
  @media screen and (min-width: 769px) {
    .ColumnInfo.-resp .ColumnInfo__body {
      display: block;
    }
  }
  .ColumnInfo.-resp .ColumnInfo__title::before, .ColumnInfo.-resp .ColumnInfo__title::after {
    content: "";
  }
  @media screen and (min-width: 769px) {
    .ColumnInfo.-resp .ColumnInfo__title::before, .ColumnInfo.-resp .ColumnInfo__title::after {
      content: none;
    }
  }
  .ColumnInfo.-resp .ColumnInfo__title.-opened::after {
    display: none;
  }
  .ColumnInfo.-resp .ColumnInfo__title.-opened + .ColumnInfo__body {
    display: block;
  }
  
  .ColumnInfo__title {
    position: relative;
    font-weight: 700;
    padding-right: 16px;
  }
  @media screen and (min-width: 769px) {
    .ColumnInfo__title {
      display: block;
    }
  }
  .ColumnInfo__title::before, .ColumnInfo__title::after {
    content: none;
    display: block;
    position: absolute;
    background-color: #0087D2;
  }
  .ColumnInfo__title::before {
    width: 15px;
    height: 1px;
    top: 7px;
    right: 0px;
  }
  .ColumnInfo__title::after {
    width: 1px;
    height: 15px;
    top: 0px;
    right: 7px;
  }
  
  .ColumnInfo__body {
    color: #7F8288;
  }
  .ColumnInfo__body > * {
    margin-top: 16px;
  }
  
  .ColumnInfo__cell {
    padding-top: 16px;
    border-top: #D1D4D7 solid 1px;
  }
  @media screen and (min-width: 769px) {
    .ColumnInfo__cell {
      padding-top: 0px;
      border: none;
    }
  }
  
  .ColumnInfo__heading {
    font-weight: 700;
  }
  @media screen and (min-width: 769px) {
    .ColumnInfo__heading {
      float: left;
    }
  }
  
  .ColumnInfo__data {
    margin-top: 4px;
  }
  @media screen and (min-width: 769px) {
    .ColumnInfo__data {
      margin-top: 0px;
      margin-left: 8em;
    }
  }
  
  /*========= CommonList =========*/
  .CommonList {
    font-size: var(--fs-body);
    text-align: left;
  }
  
  .CommonList.-spcHarf > * + * {
    margin-top: 4px;
  }
  
  .CommonList.-spc1 > * + * {
    margin-top: 8px;
  }
  
  .CommonList__item {
    position: relative;
    padding-left: 24px;
  }
  .CommonList__item::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 0.75em;
    left: 8px;
    width: 8px;
    height: 1px;
    background-color: #0087D2;
  }
  
  /*========= Container =========*/
  .Container {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }
  
  .Container.-large {
    max-width: 1200px;
  }
  
  .Container.-medium {
    max-width: 1080px;
  }
  
  /*========= CTASection =========*/
  .CTASection {
    padding-top: 40px;
    padding-bottom: 64px;
  }
  @media screen and (min-width: 769px) {
    .CTASection {
      padding-top: 64px;
    }
  }
  
  .CTASection.-hasBg {
    background-image: url(../cta/CTA_trainer_sp.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top 34%;
  }
  @media screen and (min-width: 769px) {
    .CTASection.-hasBg {
      background-position: right -20% center;
      background-image: url(../cta/CTA_trainer_pc.webp);
    }
  }
  @media screen and (min-width: 1025px) {
    .CTASection.-hasBg {
      background-position: right center;
    }
  }
  
  .CTASection.-ptS {
    padding-top: 40px;
  }
  
  .CTASection__banner {
    text-align: center;
  }
  
  .CTASection__subTitle {
    font-size: var(--fs-body-m);
    font-weight: 700;
  }
  @media screen and (min-width: 769px) {
    .CTASection__subTitle {
      text-align: center;
    }
  }
  
  .CTASection__title {
    font-size: var(--fs-24-r);
    font-weight: 500;
    font-family: "Noto Serif JP", serif;
  }
  @media screen and (min-width: 769px) {
    .CTASection__title {
      text-align: center;
    }
  }
  .CTASection__title mark {
    background-color: #0087D2;
    color: #ffffff;
  }
  
  .CTASection__ButtonBox {
    position: relative;
    gap: 16px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    text-align: center;
    max-width: 480px;
  }
  @media screen and (min-width: 769px) {
    .CTASection__ButtonBox {
      width: calc(100% - 220px);
    }
  }
  .CTASection__ButtonBox .Button {
    margin: 0px;
  }
  
  @media screen and (min-width: 769px) {
    .CTASection__Badge {
      position: absolute;
      top: 50%;
      right: -110px;
      transform: translateY(-50%);
    }
  }
  
  .CTASection__link {
    color: #0087D2;
    margin-top: 24px;
    text-align: center;
  }
  
  /*========= Grid =========*/
  .Grid {
    display: flex;
  }
  .Grid > * {
    flex-basis: 100%;
  }
  
  .Grid.-spColumn {
    flex-direction: column;
  }
  @media screen and (min-width: 769px) {
    .Grid.-spColumn {
      flex-direction: row;
    }
  }
  
  .Grid.-spRow {
    display: flex;
    align-items: center;
    flex-direction: row;
  }
  @media screen and (min-width: 769px) {
    .Grid.-spRow {
      display: block;
    }
  }
  
  .Grid.-wrap {
    flex-wrap: wrap;
  }
  .Grid.-wrap.-spc3 > .-harf {
    flex-basis: 100%;
  }
  @media screen and (min-width: 769px) {
    .Grid.-wrap.-spc3 > .-harf {
      flex-basis: calc(50% - 12px);
    }
  }
  
  .Grid.-buttonOuter > * {
    flex-basis: auto;
  }
  .Grid.-buttonOuter .Button {
    margin: 0px;
  }
  
  .Grid.-badgeCluster {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0px 16px;
    justify-content: center;
  }
  @media screen and (min-width: 769px) {
    .Grid.-badgeCluster {
      gap: 16px 2%;
    }
  }
  .Grid.-badgeCluster .Grid__item {
    text-align: center;
  }
  @media screen and (min-width: 769px) {
    .Grid.-badgeCluster .Grid__item {
      flex-basis: auto;
    }
  }
  
  .Grid.-iconTextCluster {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  @media screen and (min-width: 769px) {
    .Grid.-iconTextCluster {
      gap: 6%;
    }
  }
  .Grid.-iconTextCluster .Grid__item.Icon {
    flex-basis: 46%;
    max-width: 100px;
  }
  .Grid.-iconTextCluster .Grid__item.Icon.-large {
    max-width: 150px;
  }
  
  .Grid.-priceCluster {
    flex-direction: column;
    gap: 16px 4px;
  }
  @media screen and (min-width: 769px) {
    .Grid.-priceCluster {
      flex-direction: row;
    }
  }
  .Grid.-priceCluster.-parent {
    gap: 40px 24px;
  }
  
  .Grid.-contentEnd {
    justify-content: flex-end;
  }
  
  .Grid.-contentCenter {
    justify-content: center;
  }
  
  .Grid.-spcHarf {
    gap: 4px;
  }
  .Grid.-spcHarf.-vNone {
    gap: 0px 4px;
  }
  
  .Grid.-spc1 {
    gap: 8px;
  }
  .Grid.-spc1.-vNone {
    gap: 0px 8px;
  }
  .Grid.-spc1.-resp {
    gap: 8px;
  }
  @media screen and (min-width: 769px) {
    .Grid.-spc1.-resp {
      gap: 16px;
    }
  }
  
  .Grid.-spc2 {
    gap: 16px;
  }
  .Grid.-spc2.-vNone {
    gap: 0px 16px;
  }
  
  .Grid.-spc3 {
    gap: 16px;
  }
  @media screen and (min-width: 769px) {
    .Grid.-spc3 {
      gap: 24px;
    }
  }
  .Grid.-spc3.-spcAll {
    gap: 24px;
  }
  
  .Grid.-spc5 {
    gap: 16px;
  }
  @media screen and (min-width: 769px) {
    .Grid.-spc5 {
      gap: 40px;
    }
  }
  .Grid.-spc5.-spcNone {
    gap: 0px;
  }
  @media screen and (min-width: 769px) {
    .Grid.-spc5.-spcNone {
      gap: 40px;
    }
  }
  
  .Grid.-col2 > * {
    flex-basis: 50%;
  }
  .Grid.-col2.-spc3 > * {
    flex-basis: calc(50% - 8px);
  }
  
  .Grid.-col3 > * {
    flex-basis: 33.33%;
  }
  .Grid.-col3.-spc3 > * {
    flex-basis: calc(33.33% - 16px);
  }
  
  .Grid.-col4 > * {
    flex-basis: 25%;
  }
  
  .Grid.-colResp6_2 {
    flex-wrap: wrap;
  }
  .Grid.-colResp6_2 > * {
    flex-basis: 50%;
  }
  @media screen and (min-width: 769px) {
    .Grid.-colResp6_2 > * {
      flex-basis: 16.66%;
    }
  }
  
  .Grid.-alignCenter {
    align-items: center;
  }
  
  .Grid__item.-streach {
    display: flex;
    flex-direction: column;
  }
  .Grid__item.-streach > *:last-child {
    margin-top: auto;
  }
  
  .Grid__item.-price_ill_man {
    flex-basis: auto;
  }
  @media screen and (min-width: 769px) {
    .Grid__item.-price_ill_man {
      padding: 0px 24px;
    }
  }
  .Grid__item.-price_ill_man img {
    display: block;
    max-width: 126px;
    margin: 8px auto 16px;
  }
  @media screen and (min-width: 769px) {
    .Grid__item.-price_ill_man img {
      max-width: none;
      margin: 0px auto;
    }
  }
  
  .Grid__item.-wAuto {
    flex-basis: auto;
    max-width: 100%;
  }
  
  .Grid__item.-icon {
    flex-shrink: 0.4;
  }
  
  .Grid__item.-alignCenter {
    align-self: center;
  }
  
  @media screen and (min-width: 769px) {
    .Grid__item.-w648 {
      flex-basis: 648px;
    }
  }
  
  @media screen and (min-width: 769px) {
    .Grid__item.-w360 {
      flex-basis: 360px;
    }
  }
  
  @media screen and (min-width: 769px) {
    .Grid__item.-w260 {
      flex-basis: 360px;
    }
  }
  
  @media screen and (min-width: 769px) {
    .Grid__item.-w80p {
      flex-basis: 60%;
    }
  }
  
  .Grid__item.-reverse {
    order: -1;
  }
  
  .Grid__item.-spReverse {
    order: -1;
  }
  @media screen and (min-width: 769px) {
    .Grid__item.-spReverse {
      order: 0;
    }
  }
  
  .Grid__item.-textImageA {
    max-width: 240px;
    margin-top: 8px;
  }
  @media screen and (min-width: 769px) {
    .Grid__item.-textImageA {
      max-width: none;
      margin-top: 0px;
    }
  }
  
  .Grid__item.-textImageB {
    max-width: 280px;
    margin-bottom: 8px;
  }
  @media screen and (min-width: 769px) {
    .Grid__item.-textImageB {
      max-width: none;
      margin-bottom: 0px;
    }
  }
  
  /*========= Heading =========*/
  .Heading {
    font-family: "Noto Serif JP", serif;
    line-height: 1.5;
    font-weight: 500;
  }
  
  .Heading.-h2 {
    font-size: var(--fs-h2);
  }
  
  .Heading.-h3 {
    font-size: var(--fs-h3);
  }
  
  .Heading.-h4 {
    font-size: var(--fs-h4);
  }
  
  .Heading.-h5 {
    font-size: var(--fs-h5);
  }
  
  .Heading.-h6 {
    font-size: var(--fs-h6);
  }
  
  .Heading.-case {
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
  }
  .Heading.-case .Heading__item {
    margin-top: 0.6em;
  }
  .Heading.-case .Heading__item + .Heading__item {
    margin-top: 0.3em;
  }
  
  .Heading__item {
    display: block;
  }
  
  .Heading.-center {
    text-align: center;
  }
  
  .Heading.-hasBg {
    line-height: 1.8;
  }
  .Heading.-hasBg span {
    padding: 0px 0.3em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  
  .Heading.-hasBg.-white span {
    background-color: #ffffff;
  }
  
  /*========= Headline =========*/
  .Headline {
    position: relative;
    z-index: 2;
  }
  
  .Headline.-primary {
    text-align: center;
    background-color: #0087D2;
    padding-top: 16px;
    padding-bottom: 32px;
    background-image: url("../../ss_images/reasons_headBg.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  @media screen and (min-width: 769px) {
    .Headline.-primary {
      padding-top: 40px;
      padding-bottom: 64px;
    }
  }
  .Headline.-primary .PageSection__heading {
    color: #ffffff;
    font-size: 1.5rem;
  }
  @media screen and (min-width: 769px) {
    .Headline.-primary .PageSection__heading {
      font-size: 2rem;
    }
  }
  .Headline.-primary .PageSection__heading span {
    color: #ffffff;
    padding-bottom: 16px;
  }
  
  .Headline__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  @media screen and (min-width: 769px) {
    .Headline__wrapper {
      flex-direction: row;
    }
  }
  
  .Headline.-spRow .Headline__wrapper {
    flex-direction: row;
  }
  @media screen and (min-width: 769px) {
    .Headline.-spRow .Headline__wrapper {
      flex-direction: row;
    }
  }
  .Headline.-spRow .Headline__text {
    text-align: left;
  }
  
  .Headline.-column {
    flex-direction: column;
  }
  
  .Headline.-spcM .Headline__wrapper {
    gap: 24px;
  }
  @media screen and (min-width: 769px) {
    .Headline.-spcM .Headline__wrapper {
      gap: 40px;
    }
  }
  
  .Headline.-spcS .Headline__wrapper {
    gap: 0px 24px;
  }
  
  .Headline.-spcXS .Headline__wrapper {
    gap: 16px;
  }
  
  .Headline.-mtNone {
    margin-top: 0px;
  }
  
  .Headline.-secondary {
    margin-top: 64px;
  }
  @media screen and (min-width: 769px) {
    .Headline.-secondary {
      margin-top: 88px;
    }
  }
  .Headline.-secondary .Headline__wrapper {
    flex-direction: column-reverse;
  }
  @media screen and (min-width: 769px) {
    .Headline.-secondary .Headline__wrapper {
      flex-direction: row;
    }
  }
  .Headline.-secondary .Headline__icon {
    flex-basis: 320px;
    flex-shrink: 0;
  }
  
  .Headline__icon {
    flex-basis: auto;
    flex-shrink: 0;
    text-align: center;
  }
  .Headline__icon.-spM img {
    max-width: 105px;
  }
  @media screen and (min-width: 769px) {
    .Headline__icon.-spM img {
      max-width: none;
    }
  }
  .Headline__icon.-spS img {
    max-width: 79px;
  }
  @media screen and (min-width: 769px) {
    .Headline__icon.-spS img {
      max-width: none;
    }
  }
  
  .Headline__text {
    flex-basis: auto;
    text-align: center;
  }
  @media screen and (min-width: 769px) {
    .Headline__text {
      text-align: left;
    }
  }
  .Headline__text > * + * {
    margin-top: 16px;
  }
  .Headline__text.-left {
    text-align: left;
  }
  
  /*========= HeroArea =========*/
  .HeroArea.-single {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(94.41deg, #0087D2 0%, rgba(0, 135, 210, 0.3) 100%);
    height: 160px;
  }
  @media screen and (min-width: 769px) {
    .HeroArea.-single {
      height: 320px;
    }
  }
  
  .HeroArea__title {
    font-size: var(--fs-ttl);
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.3em;
    color: #ffffff;
  }
  .HeroArea__title::before {
    content: attr(data-subtitle);
    display: block;
    color: #99CFED;
    font-family: "Cormorant Infant", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0px;
  }
  
  .HeroArea__main {
    display: flex;
    position: relative;
    padding-top: 32px;
  }
  @media screen and (min-width: 769px) {
    .HeroArea__main {
      height: var(--hero-h);
      padding-top: 0px;
    }
  }
  .HeroArea__main::before, .HeroArea__main::after {
    content: "";
    position: absolute;
    z-index: 4;
    left: 0px;
    top: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #0087D2 transparent transparent transparent;
    opacity: 0.6;
  }
  .HeroArea__main::before {
    border-width: calc(var(--hero-h) / 2 - 32px) calc(var(--hero-h) / 4 - 16px) 0 0;
  }
  @media screen and (min-width: 769px) {
    .HeroArea__main::before {
      border-width: calc(var(--hero-h) - 80px) calc(var(--hero-h) / 2 - 40px) 0 0;
    }
  }
  .HeroArea__main::after {
    border-width: calc(var(--hero-h) / 2) calc(var(--hero-h) / 4) 0 0;
  }
  @media screen and (min-width: 769px) {
    .HeroArea__main::after {
      border-width: var(--hero-h) calc(var(--hero-h)/2) 0 0;
    }
  }
  
  .HeroArea__info {
    position: relative;
    margin: auto;
    z-index: 10;
    color: #ffffff;
    width: 100%;
  }
  
  .HeroArea__wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  @media screen and (min-width: 769px) {
    .HeroArea__wrapper {
      flex-direction: row;
      align-items: flex-end;
      gap: 40px;
    }
  }
  
  .HeroArea__box.-badge {
    align-self: center;
  }
  @media screen and (min-width: 769px) {
    .HeroArea__box.-badge {
      align-self: flex-end;
    }
  }
  
  .HeroArea__copy {
    font-family: "Noto Serif JP", serif;
    font-size: var(--fs-hero-l);
    font-weight: 500;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.3em;
  }
  
  .HeroArea__lead {
    font-size: var(--fs-hero);
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    margin-top: 8px;
  }
  @media screen and (min-width: 769px) {
    .HeroArea__lead {
      margin-top: 16px;
      line-height: 2;
    }
  }
  
  .HeroArea__button {
    margin-top: 64px;
  }
  
  .HeroArea__link {
    margin-top: 24px;
  }
  @media screen and (min-width: 769px) {
    .HeroArea__link {
      margin-top: 40px;
    }
  }
  
  .HeroArea__slider {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .HeroArea__videoBox {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: var(--hero-h);
  }
  .HeroArea__videoBox::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: var(--hero-h);
    background-color: rgba(20, 24, 33, 0.1);
  }
  
  .HeroArea__video {
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  /*========= Icon =========*/
  .Icon {
    display: inline-block;
    line-height: 1;
    font-size: 1.6em;
    vertical-align: -0.3em;
    flex-shrink: 0;
    pointer-events: none;
  }
  .Icon.-siz16 {
    vertical-align: 0em;
  }
  
  .Icon.-credit.-large {
    max-width: 48px;
  }
  @media screen and (min-width: 769px) {
    .Icon.-credit.-large {
      max-width: none;
    }
  }
  
  .Icon.-posR {
    margin-left: 8px;
  }
  
  .Icon.-posL {
    margin-right: 8px;
  }
  
  .Icon.-spS {
    max-width: 80px;
  }
  @media screen and (min-width: 769px) {
    .Icon.-spS {
      max-width: none;
    }
  }
  
  .Icon.-spM {
    max-width: 103px;
  }
  @media screen and (min-width: 769px) {
    .Icon.-spM {
      max-width: none;
    }
  }
  
  .Icon.-typeA {
    color: #0087D2;
  }
  
  .Icon.-typeB {
    color: #D03086;
  }
  
  .Button.-text .Icon, .Button.-xs .Icon {
    vertical-align: -0.24em;
  }
  
  @media screen and (min-width: 769px) {
    .Icon.sp {
      display: none;
    }
  }
  
  /*========= IconInfo =========*/
  .IconInfo {
    width: 16.6666666667%;
    font-size: 0.875rem;
    text-align: center;
    background-color: #E7F3FA;
    border-top: #ffffff solid 1px;
    padding: 16px 8px;
  }
  .IconInfo > * + * {
    margin-top: 4px;
  }
  .IconInfo + .IconInfo {
    border-left: #ffffff solid 1px;
  }
  .IconInfo a {
    color: #0087D2;
  }
  
  /*========= LinkCard =========*/
  .LinkCard {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    border-radius: 8px;
    background-color: #ffffff;
    font-family: "Noto Sans JP", sans-serif;
    overflow: hidden;
  }
  @media screen and (min-width: 769px) {
    .LinkCard {
      flex-direction: column;
    }
  }
  .LinkCard::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(20, 24, 33, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  @media screen and (min-width: 769px) {
    .LinkCard:hover::before {
      opacity: 1;
    }
  }
  .LinkCard a {
    text-decoration: none;
  }
  
  .LinkCard__desc {
    color: #54575F;
  }
  
  .LinkCard__title {
    font-size: var(--fs-h5);
    color: #0087D2;
    font-weight: 500;
  }
  
  .LinkCard__text {
    padding: 24px;
  }
  .LinkCard__text > * + * {
    margin-top: 8px;
  }
  
  .LinkCard__image {
    margin-top: auto;
  }
  
  .LinkCard__wrapLink::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
  }
  
  /*========= LinkItem =========*/
  .LinkItem small {
    margin-top: -6px;
  }
  
  .LinkItem.-single .LinkItem__wrapper {
    justify-content: center;
    border-bottom: none;
    border-left: #D1D4D7 solid 1px;
  }
  @media screen and (min-width: 769px) {
    .LinkItem.-single .LinkItem__wrapper {
      border-left: #D1D4D7 solid 1px;
    }
  }
  
  .LinkItem__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    height: 100%;
    text-decoration: none;
    transition: background-color 0.3s;
    border-bottom: #D1D4D7 solid 1px;
  }
  @media screen and (min-width: 769px) {
    .LinkItem__wrapper {
      flex-direction: column;
      padding-left: 24px;
      border-bottom: none;
      border-left: #D1D4D7 solid 1px;
    }
  }
  @media screen and (min-width: 769px) {
    .LinkItem__wrapper:hover {
      background-color: #E7F3FA;
    }
  }
  
  .LinkItem__inner {
    flex-basis: calc(100% - 99px);
  }
  @media screen and (min-width: 769px) {
    .LinkItem__inner {
      flex-basis: auto;
    }
  }
  
  .LinkItem__point {
    font-weight: 500;
    color: #0087D2;
    margin-top: 8px;
  }
  
  .LinkItem__arrow {
    text-align: center;
    margin-top: auto;
    margin-bottom: 8px;
    width: 100%;
  }
  
  .LinkItem__lead {
    font-size: var(--fs-body-m);
    padding-bottom: 16px;
  }
  
  /*========= Logo =========*/
  .Logo.-mv {
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 20px;
  }
  
  /*========= Modal =========*/
  .Modal {
    text-align: center;
  }
  
  .Modal__unit {
    position: relative;
    max-width: -moz-max-content;
    max-width: max-content;
    margin: 0px auto;
  }
  .Modal__unit::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(20, 24, 33, 0.5) 0%, rgba(20, 24, 33, 0) 45.31%);
  }
  .Modal__unit::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    bottom: -4px;
    right: -4px;
    width: 100%;
    height: 100%;
    background-color: #FF9000;
  }
  
  .Modal__open {
    border: none;
  }
  
  .Modal__thumbnail {
    position: relative;
    z-index: 1;
    max-width: 170px;
  }
  @media screen and (min-width: 769px) {
    .Modal__thumbnail {
      max-width: none;
    }
  }
  .Modal__thumbnail img {
    width: 100%;
  }
  
  .Modal__window {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(20, 24, 33, 0.6);
  }
  .Modal__window.-show {
    display: block;
  }
  
  .Modal__content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 10000;
    top: calc(5% + var(--header-h));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(90% - var(--header-h));
    max-width: -moz-max-content;
    max-width: max-content;
  }
  @media screen and (min-width: 769px) {
    .Modal__content {
      width: calc(100% - 32px);
    }
  }
  .Modal__content img {
    width: auto;
    max-height: 100%;
  }
  .Modal__content iframe {
    aspect-ratio: 16/9;
    width: 100%;
  }
  .Modal__content.-aspectFixed {
    top: calc(50% + var(--header-h));
    aspect-ratio: 16/9;
    height: 56.25%;
    transform: translate(-50%, calc(-50% - var(--header-h) / 2));
  }
  .Modal__content.-aspectFixed .Modal__contentInner {
    width: 100%;
  }
  
  .Modal__contentInner {
    position: relative;
  }
  @media screen and (min-width: 769px) {
    .Modal__contentInner {
      height: 100%;
      padding-right: 48px;
    }
  }
  
  .Modal__close {
    position: absolute;
    top: -42px;
    right: 0px;
    background-color: transparent;
    border: none;
  }
  @media screen and (min-width: 769px) {
    .Modal__close {
      top: 0px;
    }
  }
  .Modal__close img {
    width: 42px;
    height: 42px;
  }
  
  /*========= PageSection =========*/
  .PageSection {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  @media screen and (min-width: 769px) {
    .PageSection {
      padding-top: 88px;
      padding-bottom: 88px;
    }
  }
  .PageSection.-medium {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  @media screen and (min-width: 769px) {
    .PageSection.-medium {
      padding-top: 64px;
      padding-bottom: 64px;
    }
  }
  
  .PageSection.-pNone {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  
  .PageSection.-hasBg {
    background-color: #ffffff;
  }
  
  .PageSection__item.-pdX {
  
    padding-top: 64px;
    padding-bottom: 64px;
  }
  
  .PageSection__foot {
    margin-top: 64px;
  }
  @media screen and (min-width: 769px) {
    .PageSection__foot {
      margin-top: 40px;
    }
  }
  .PageSection__foot small {
    margin: 0px;
  }
  .PageSection__foot.-mtS {
    margin-top: 40px;
  }
  
  .PageSection__headItem {
    padding-top: 24px;
    padding-bottom: 40px;
  }
  @media screen and (min-width: 769px) {
    .PageSection__headItem {
      padding-top: 40px;
    }
  }
  
  .PageSection__item {
    padding-top: var(--spc64-r);
  }
  .PageSection__item.-pS {
    padding-top: 24px;
  }
  @media screen and (min-width: 769px) {
    .PageSection__item.-pS {
      padding-top: 40px;
    }
  }
  .PageSection__item.-pL {
    padding-top: 64px;
  }
  @media screen and (min-width: 769px) {
    .PageSection__item.-pL {
      padding-top: 88px;
    }
  }
  .PageSection__item.-pX {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  
  .PageSection__item.-hasBg {
    background-color: #ffffff;
  }
  .PageSection__item.-hasBg.-blue {
    background-color: #E7F3FA;
  }
  
  .PageSection__item.-hasDeco {
    position: relative;
    background-color: #ffffff;
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 64px;
    border-top: #0087D2 solid 2px;
  }
  .PageSection__item.-hasDeco::after {
    content: "";
    width: 60px;
    height: 120px;
    background-image: url(../images/symbol_double.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  @media screen and (min-width: 769px) {
    .PageSection__item.-hasDeco::after {
      width: 130px;
      height: 260px;
    }
  }
  .PageSection__item.-hasDeco .PageSection__head {
    margin-top: 40px;
    margin-left: 130px;
    margin-right: 130px;
  }
  
  .PageSection__title {
    font-size: var(--fs-sectionTtl);
    font-family: "Cormorant Infant", serif;
    font-weight: 400;
    color: #D1D4D7;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
  }
  
  .PageSection__topTitle {
    position: relative;
    z-index: 2;
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
    color: #54575F;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 40px;
  }
  
  .PageSection__heading {
    font-family: "Noto Serif JP", serif;
    font-size: var(--fs-28-r);
    font-weight: 500;
  }
  
  .PageSection__subheading {
    font-family: "Noto Serif JP", serif;
    display: block;
    color: #0087D2;
    font-size: var(--fs-24-r);
    font-weight: 500;
  }
  
  .PageSection__heading.-large {
    font-size: var(--fs-32-r);
  }
  
  .PageSection__heading.-hasIcon {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
  }
  @media screen and (min-width: 1025px) {
    .PageSection__heading.-hasIcon {
      flex-direction: row;
    }
  }
  .PageSection__heading.-hasIcon.pc {
    display: none;
  }
  @media screen and (min-width: 769px) {
    .PageSection__heading.-hasIcon.pc {
      display: flex;
    }
  }
  
  .PageSection__heading.-comment {
    position: relative;
    padding-left: 1em;
    padding-right: 1em;
    max-width: -moz-max-content;
    max-width: max-content;
  }
  .PageSection__heading.-comment::before, .PageSection__heading.-comment::after {
    content: "";
    display: block;
    width: 1.5px;
    height: 1em;
    position: absolute;
    z-index: 0;
    bottom: 0.1em;
    background-color: currentColor;
  }
  .PageSection__heading.-comment::before {
    left: 0.3em;
    transform: rotate(-18deg);
  }
  .PageSection__heading.-comment::after {
    right: 0.3em;
    transform: rotate(18deg);
  }
  .PageSection__heading.-comment.-thin::before, .PageSection__heading.-comment.-thin::after {
    width: 1px;
  }
  .PageSection__heading.-comment.-center {
    margin-left: auto;
    margin-right: auto;
  }
  
  .PageSection__heading.-typeA {
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--fs-20-r);
    font-weight: 700;
    color: #0087D2;
    text-align: center;
  }
  .PageSection__heading.-typeA.-thin {
    font-weight: 500;
    color: #141821;
  }
  
  .PageSection__heading.-typeB {
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--fs-18-r);
    line-height: 2;
    font-weight: 500;
    color: #141821;
  }
  .PageSection__heading.-typeB + * {
    margin-top: 24px;
  }
  
  .PageSection__heading.-typeC {
    font-size: var(--fs-20-r);
    font-weight: 500;
    color: #D03086;
  }
  .PageSection__heading.-typeC + * {
    margin-top: 16px;
  }
  
  .PageSection__heading.-center {
    text-align: center;
  }
  
  .PageSection__lead {
    font-size: var(--fs-body-m);
  }
  
  .PageSection__lead.-typeA {
    font-size: var(--fs-24-r);
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
  }
  
  .PageSection__lead.-typeB {
    font-size: 1.75rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
  }
  
  .PageSection__tableTitle {
    font-family: "Noto Serif JP", serif;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
  }
  .PageSection__tableTitle + * {
    margin-top: 24px;
  }
  
  .PageSection__customLead {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0px;
  }
  @media screen and (min-width: 769px) {
    .PageSection__customLead {
      font-size: 1.125rem;
      line-height: 2;
    }
  }
  .PageSection__customLead.-typeA mark {
    background-color: rgba(18, 135, 205, 0.1);
  }
  .PageSection__customLead.-typeB mark {
    background-color: rgba(209, 66, 113, 0.1);
  }
  .PageSection__customLead.-typeC mark {
    background-color: rgba(84, 174, 63, 0.1);
  }
  .PageSection__customLead.-typeD mark {
    background-color: rgba(255, 144, 0, 0.1);
  }
  
  .PageSection__userUnit {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  @media screen and (min-width: 769px) {
    .PageSection__userUnit {
      display: block;
    }
  }
  
  .PageSection__avatar {
    max-width: 80px;
  }
  @media screen and (min-width: 769px) {
    .PageSection__avatar {
      max-width: none;
    }
  }
  
  .PageSection__profile {
    font-weight: 500;
    font-size: 12px;
  }
  @media screen and (min-width: 769px) {
    .PageSection__profile {
      font-size: 14px;
    }
  }
  
  .PageSection__button {
    margin-top: var(--spc88-r);
  }
  
  .PageSection__figure {
    text-align: center;
  }
  .PageSection__figure img {
    max-width: 100%;
  }
  
  .PageSection__tableOuter {
    overflow: auto;
  }
  .PageSection__tableOuter table {
    min-width: 1080px;
  }
  
  .Grid__item.-streach .PageSection__heading.-typeB {
    padding-bottom: 24px;
  }
  .Grid__item.-streach .PageSection__heading.-typeB + * {
    margin-top: auto;
  }
  
  /*========= PriceCard =========*/
  .PriceCard {
    position: relative;
    text-align: center;
    width: 100%;
  }
  @media screen and (min-width: 769px) {
    .PriceCard {
      padding-top: var(--price-h);
      max-width: 280px;
    }
  }
  .PriceCard.-hasHead {
    padding-top: var(--price-h);
  }
  
  .Grid.-priceCluster .PriceCard.-hasHead {
    padding-top: 0px;
  }
  @media screen and (min-width: 769px) {
    .Grid.-priceCluster .PriceCard.-hasHead {
      padding-top: var(--price-h);
    }
  }
  .Grid.-priceCluster .PriceCard__body[data-head]::before {
    position: static;
  }
  @media screen and (min-width: 769px) {
    .Grid.-priceCluster .PriceCard__body[data-head]::before {
      position: absolute;
    }
  }
  
  .PriceCard.-typeB .PriceCard__body {
    border: none;
    padding: 0px;
  }
  
  .PriceCard__title {
    background-color: #E7F3FA;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 4px 0px;
  }
  
  .PriceCard__sell {
    padding: 16px 16px;
  }
  .PriceCard__sell + .PriceCard__sell {
    border-top: #E7F3FA solid 1px;
    padding: 8px 16px;
  }
  .PriceCard__sell:last-child {
    padding: 8px 16px 16px;
  }
  
  .PriceCard__body {
    border: 2px solid;
    border-radius: 8px;
    background-color: #ffffff;
    padding: 12px 16px 16px;
    border-color: #0087D2;
    height: 100%;
  }
  @media screen and (min-width: 769px) {
    .PriceCard__body {
      padding: 16px 24px 40px;
    }
  }
  .PriceCard__body[data-head] {
    border-radius: 0px 0px 8px 8px;
  }
  .PriceCard__body[data-head]::before {
    content: attr(data-head);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: var(--price-h);
    border-radius: 8px 8px 0px 0px;
  }
  .PriceCard__body.-typeA[data-head] {
    border-color: #D03086;
  }
  .PriceCard__body.-typeA[data-head]::before {
    background-color: #D03086;
  }
  .PriceCard__body.-typeB[data-head] {
    border-color: #0087D2;
  }
  .PriceCard__body.-typeB[data-head]::before {
    background-color: #0087D2;
  }
  .PriceCard__body.-pNone {
    padding: none;
  }
  
  .PriceCard__priceBox {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    gap: 12px;
  }
  @media screen and (min-width: 769px) {
    .PriceCard__priceBox {
      display: block;
      width: auto;
    }
  }
  
  .PriceCard__price {
    margin-top: 16px;
    line-height: 1.3;
  }
  @media screen and (min-width: 769px) {
    .PriceCard__price {
      display: block;
    }
  }
  
  .PriceCard__price.-point {
    color: #D03086;
  }
  
  .PriceCard__price.-before {
    display: flex;
    align-items: center;
    font-family: "Noto Serif JP", serif;
    line-height: 1;
  }
  @media screen and (min-width: 769px) {
    .PriceCard__price.-before {
      display: block;
    }
  }
  .PriceCard__price.-before::after {
    content: "";
    display: block;
    width: 16px;
    height: 14px;
    background-image: url(../images/icon_arrowDown_black.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transform: rotate(-90deg);
  }
  @media screen and (min-width: 769px) {
    .PriceCard__price.-before::after {
      margin: 16px auto 0px;
      transform: none;
    }
  }
  
  .PriceCard__price.-after {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Noto Serif JP", serif;
    line-height: 1;
  }
  
  .PriceCard__item.-main {
    font-size: 2rem;
    font-weight: 500;
    color: #D03086;
    margin-top: -4px;
  }
  @media screen and (min-width: 769px) {
    .PriceCard__item.-main {
      font-size: 3rem;
    }
  }
  
  .PriceCard__item.-num {
    font-size: 24px;
    font-family: "Noto Serif JP", serif;
  }
  
  .PriceCard__item.-terms {
    font-size: 0.875rem;
    writing-mode: vertical-lr;
  }
  @media screen and (min-width: 769px) {
    .PriceCard__item.-terms {
      font-size: 1.125rem;
    }
  }
  
  .PriceCard__itemBox {
    display: flex;
    flex-direction: column;
  }
  
  .PriceCard__item.-unit {
    font-size: 1rem;
  }
  @media screen and (min-width: 769px) {
    .PriceCard__item.-unit {
      font-size: 1.5rem;
    }
  }
  
  .PriceCard__item.-tax {
    font-size: var(--fs-body-xs);
    order: -1;
  }
  
  .PriceCard__text {
    font-size: 0.875rem;
  }
  .PriceCard__text.-disabled {
    color: #D1D4D7;
  }
  
  /*========= Stack =========*/
  .Stack.-spc1 > * + * {
    margin-top: 8px;
  }
  .Stack.-spc1.-resp > * + * {
    margin-top: 8px;
  }
  @media screen and (min-width: 769px) {
    .Stack.-spc1.-resp > * + * {
      margin-top: 16px;
    }
  }
  
  .Stack.-spc2 > * + * {
    margin-top: 16px;
  }
  
  .Stack.-spc3 > * + * {
    margin-top: var(--spc24-r);
  }
  .Stack.-spc3.-spcAll > * + * {
    margin-top: 24px;
  }
  
  .Stack.-spc5 > * + * {
    margin-top: var(--spc40-r);
  }
  .Stack.-spc5.-spcAll > * + * {
    margin-top: 40px;
  }
  
  /*========= Text =========*/
  .Text {
    font-size: 1rem;
  }
  
  .Text.-small {
    font-size: 0.75rem;
  }
  @media screen and (min-width: 769px) {
    .Text.-small {
      font-size: 0.875rem;
    }
  }
  
  .Text.-point {
    font-family: "Cormorant Infant", serif;
    font-size: var(--fs-point);
    font-weight: 500;
    line-height: 1;
  }
  .Text.-point span {
    font-size: 1.3em;
  }
  
  .Text.-typeA {
    color: #0087D2;
  }
  
  .Text.-typeB {
    color: #D03086;
  }
  
  .Text.-center {
    text-align: center;
  }
  
  .Text.-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 48px;
  }
  
  /*========= FixedArea =========*/
  .FixedArea {
    position: fixed;
    z-index: 10;
    width: 100%;
    padding: 16px;
    background-color: #EBEEF1;
    bottom: 0px;
    right: 0px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  @media screen and (min-width: 769px) {
    .FixedArea {
      width: auto;
      right: 16px;
      bottom: 16px;
      padding: 0px;
      background-color: transparent;
    }
  }
  .FixedArea.-show {
    pointer-events: auto;
    opacity: 1;
  }
  .FixedArea.-single {
    padding: 8px;
    background-color: transparent;
  }
  @media screen and (min-width: 769px) {
    .FixedArea.-single {
      display: none;
    }
  }
  
  .FixedArea__wrapper {
    display: flex;
    width: 100%;
  }
  @media screen and (min-width: 769px) {
    .FixedArea__wrapper {
      display: block;
    }
  }
  
  .FixedArea__button {
    width: 100%;
  }
  .FixedArea__button.-wAuto {
    width: auto;
  }/*# sourceMappingURL=common.css.map */
  
  .JPX_logo_container {
    position: absolute;
    z-index: 12;
    top: 0px;
    right: 0px;
  }
    
  .JPX_logo {
    margin-top: 20px;
    margin-right: 20px;
    max-height: 56px;
    min-height: 56px;
  }
  
  @media screen and (max-width: 320px) {
    .JPX_logo {
      max-height: 48px;
      min-height: 48px;
    }
  }