@media (min-width: 768px) {
  h2 + p {
    margin-bottom: 32px !important; } }
@media (max-width: 767px) {
  h2 + p {
    margin-bottom: 7.5vw !important; } }
#situation {
  counter-reset: number 0; }
  #situation .as {
    margin-bottom: 2em; }
  #situation h3 {
    color: #ed7700; }
    #situation h3::before {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 2em;
      height: 2em;
      margin-right: 0.5em;
      background-color: #ed7700;
      color: #fff;
      content: "" counter(number);
      counter-increment: number 1; }

@media (min-width: 768px) {
  #situation .flex {
    margin-bottom: 32px; } }
@media (max-width: 767px) {
  #situation .flex {
    margin-bottom: 12.5vw; } }
@media (max-width: 767px) {
  #situation .flex#as-tool picture {
    order: 1; }
  #situation .flex#as-tool .text {
    order: 2; }
  #situation .flex#as-tool ul:not([class]) {
    order: 3; } }
#feature {
  counter-reset: point 0; }
  #feature .point {
    border: 2px solid #ed7700; }
    @media (min-width: 768px) {
      #feature .point {
        margin-bottom: 32px; } }
    @media (max-width: 767px) {
      #feature .point {
        margin-bottom: 12.5vw; } }
    @media (min-width: 768px) {
      #feature .point h3 {
        height: 3em; } }
    @media (max-width: 767px) {
      #feature .point h3 span {
        display: block;
        padding: 1em; } }
    @media (max-width: 767px) {
      #feature .point h3::before {
        padding: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; } }
    #feature .point .title {
      display: flex;
      flex-wrap: wrap;
      align-items: center; }
      #feature .point .title::before {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 10em;
        height: 100%;
        padding: 0.5em;
        background-color: #ed7700;
        color: #fff;
        content: "POINT" counter(point);
        counter-increment: point 1; }
      #feature .point .title h3 {
        width: calc(100% - 10em);
        min-width: 500px;
        height: 100%;
        margin: 0;
        padding: 0.5em;
        color: #422c16;
        font-size: 100%; }
    @media (min-width: 768px) {
      #feature .point .ncColumns {
        padding: 24px; } }
    @media (max-width: 767px) {
      #feature .point .ncColumns {
        padding: 0 5vw; } }
    #feature .point .ncColumns picture {
      border: 1px solid #ddd; }

#lineup .flex {
  align-items: center; }
  #lineup .flex dl {
    margin: 0; }
  #lineup .flex dt {
    color: #ed7700;
    text-align: center; }

@media (min-width: 768px) {
  #lineup .flex {
    margin-bottom: 24px; } }
@media (max-width: 767px) {
  #lineup .flex {
    margin-bottom: 10vw;
    border: 2px solid #ed7700; } }
@media (min-width: 768px) {
  #lineup .flex > * {
    width: 50%;
    padding: 24px; } }
@media (max-width: 767px) {
  #lineup .flex > * {
    padding: 5vw; } }
@media (min-width: 768px) {
  #lineup .flex:nth-of-type(even) {
    flex-direction: row-reverse; } }
@media (min-width: 768px) {
  #lineup .flex dl {
    border: 2px solid #ed7700; } }
@media (max-width: 767px) {
  #lineup .flex dl {
    padding-bottom: 0; } }
@media (max-width: 767px) {
  #lineup .flex dd {
    padding: 0; } }
@media (max-width: 767px) {
  #lineup .flex picture {
    padding-top: 0; } }
#type .flex picture {
  order: 1; }
#type .flex .text {
  order: 2; }

#cost .price {
  color: #ed7700; }
  #cost .price span {
    font-size: 200%; }