@charset "UTF-8";
#flow .block {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto; }

.boxes_flow {
  display: flex;
  flex-direction: column;
  grid-gap: var(--space5) var(--space5);
  align-items: center;
  --arrowWidth:39px;
  --arrowHeight:16px; }
  .boxes_flow .box {
    display: flex;
    flex-direction: column;
    grid-gap: var(--space2);
    max-width: 480px;
    position: relative; }
    .boxes_flow .box .photo {
      width: calc( 100% + var(--cont_margin) * 2 );
      position: relative;
      left: calc( -1 * var(--cont_margin) );
      max-width: none; }
    .boxes_flow .box:not(:first-child)::before {
      width: var(--arrowWidth);
      height: var(--arrowHeight);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      content: "";
      position: absolute;
      bottom: calc( 100% + ( ( var(--space5) - var(--arrowHeight) ) ) / 2 );
      background: var(--secondaryColor);
      left: 0;
      right: 0;
      margin: auto; }
  @media (min-width: 768px) {
    .boxes_flow {
      flex-direction: row;
      align-items: flex-start;
      justify-content: center;
      flex-wrap: wrap;
      --arrowWidth:16px;
      --arrowHeight:39px; }
      .boxes_flow .box {
        width: calc( ( 100% - var(--space5) * 2 ) / 3 ); }
        .boxes_flow .box .photo {
          width: 100%;
          left: 0; }
        .boxes_flow .box:not(:first-child)::before {
          clip-path: polygon(0 0, 100% 50%, 0 100%);
          right: calc( 100% + ( ( var(--space5) - var(--arrowWidth) ) ) / 2 );
          left: auto;
          top: calc( ( 100% * 9 / 16  - var(--arrowHeight) ) / 2 );
          bottom: auto; }
        .boxes_flow .box .text {
          font-size: var(--fontSize_s); } }

#system {
  padding-top: calc( var(--space5) * 1.5 );
  position: relative; }
  #system::before {
    width: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #FFF;
    z-index: 0;
    right: 0;
    margin: auto; }
  #system > * {
    position: relative;
    z-index: 2; }
  #system .price_wrap {
    margin-top: var(--space4);
    background: var(--secondaryColor);
    color: #FFF;
    text-align: center;
    box-sizing: border-box;
    padding: var(--space2);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    grid-gap: 0px var(--space2);
    letter-spacing: 0.25rem; }
    #system .price_wrap > * {
      position: relative; }
      #system .price_wrap > * .num {
        font-size: 4rem;
        font-family: "Montserrat", "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal; }
      #system .price_wrap > * .unit {
        font-size: 2rem; }
      #system .price_wrap > * .opt {
        position: absolute;
        bottom: 2.7rem;
        right: 0; }
  #system .caption_wrap {
    display: flex;
    flex-direction: column;
    grid-row-gap: calc( var(--space1) / 2 );
    font-size: 0.75rem; }
  @media (min-width: 1280px) {
    #system::before {
      width: calc( 100% - var(--cont_margin) * 2 ); }
    #system .price_wrap > * .num {
      font-size: 6rem; }
    #system .price_wrap > * .unit {
      font-size: 2rem; }
    #system .price_wrap > * .opt {
      position: relative;
      bottom: 0;
      right: 0;
      font-size: 2rem; }
      #system .price_wrap > * .opt::before {
        content: "（"; }
      #system .price_wrap > * .opt::after {
        content: "）"; } }