@media screen and (min-width: 960px) {
  /* PC */
  /* ----------  ---------- */
  .content-wrapper main section .section-header {
    margin-bottom: 1.35rem;
  }

  .content-wrapper main section .section-header p {
    color: var(--main-color-code);
  }

  .content-wrapper main section .section-header h2 {
    font-weight: 500;
    font-family: var(--noto-sans-jp);
  }

  .content-wrapper main section .section-content {
  }



  section.introduction .section-content .description {
    margin-bottom: 1rem;
  }

  section.problem .section-content p.lead-sentence {
    margin-bottom: 1.15rem;
  }

  section.problem .section-content .problem__content {
    border: 1px solid #dddddd;
    border-radius: 15px;
    padding: 1.15rem;
    margin-bottom: 1.15rem;
  }

  section.problem .section-content .problem__content .problem-item {
    display: flex;
    align-items: center;

    margin-bottom: 0.45rem;
  }
  section.problem .section-content .problem__content .problem-item:last-of-type {
    margin-bottom: 0;
  }
  
  section.problem .section-content .problem__content .problem-item svg {
    width: 1.35rem;
    aspect-ratio: 1 / 1;

    margin-right: 0.385rem;
  }
  
  section.problem .section-content .problem__content .problem-item p {
    font-weight: bold;
  }

  section.problem .section-content p.foot-sentence {
  }


  section.solution .section-header h2 {
    margin-bottom: 0.85rem;
  }

  section.solution .section-content .overview {
    margin-bottom: 1.05rem;
  }

  .solution__list {
  }

  .solution__list__item {
    width: 100%;

    display: flex;
    align-items: center;

    margin-bottom: 1.25rem;
  }
  .solution__list__item:last-of-type {
    margin-bottom: 0px;
  }

  .solution__list__item__icon {
    flex-shrink: 0;
    width: 2.85rem;
    aspect-ratio: 1 / 1;

    margin-right: 1.25rem;
  }


  .solution__list__item__content {
  }

  .solution__list__item__content h3 {
    font-weight: bold;
    margin-bottom: 0.25rem;
  }


  section.reasons .section-header h2 {
    margin-bottom: 0.85rem;
  }

  .reasons__list {
  }

  .reasons__list__item {
    width: 100%;

    display: flex;
    align-items: center;

    padding-top: 0.65rem;
    padding-bottom: 0.65rem;

    margin-bottom: 0.65rem;
  }
  .reasons__list__item:last-of-type {
    margin-bottom: 0;
  }

  .reasons__list__item__icon {
    width: 4.75rem;
    aspect-ratio: 1 / 1;

    margin-right: 1.5rem;
    flex-shrink: 0;
  }

  .reasons__list__item__content {
  }

  .reasons__list__item__content__title h3 {
    margin-bottom: 0.35rem;
  }

  .reasons__list__item__content__title h3 {
    font-weight: bold;
  }


  .reasons__list__item__content__detail .detail-body {
    display: flex;
    align-items: baseline;
  }

  .reasons__list__item__content__detail .icon {
    width: 0.875rem;
    height: 0.875rem;

    margin-right: 0.25rem;
  }

  .reasons__list__item__content__detail .item-content-info {
  }




  .pricing__overview {
    margin-bottom: 2.25rem;
  }
  
  .pricing__plan-card-list {
    margin-bottom: 2.25rem;
  }

  .pricing__plan-card-list__item {
    margin-bottom: 2.15rem;
  }

  .pricing__page-link {
  }

  .pricing__page-link a {
    text-decoration: underline;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }

  .pricing__page-link a:hover {
    opacity: 0.75;
  }


  .portfolio__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    grid-template-rows: minmax(150px, 1fr);
    grid-column-gap: 2.25rem;
    grid-row-gap: 2.25rem;
    grid-auto-rows: auto;

    margin-bottom: 2.25rem;
  }

  section.portfolio .portfolio__view-list-button-link {
    width: 300px;
    margin-right: auto;
    margin-left: auto;

    padding-top: 7.5px;
    padding-right: 15px;
    padding-bottom: 7.5px;
    padding-left: 15px;

    background-color: var(--main-color-code);
    color: #ffffff;
  }
  
  .workflow__diagram {
  }

  .workflow__diagram-item {
    margin-bottom: 1.5rem;
    box-shadow: 0px 0px 2px 0px darkgrey;
    border-radius: 7.5px;

    padding-top: 0.35rem;
    padding-right: 0.75rem;
    padding-bottom: 0.35rem;
    padding-left: 0.75rem;
  }
  .workflow__diagram-item:last-of-type {
    margin-bottom: 0;
  }

  .faq__list hr {
    background-color: var(--secondary-base-color-code);
  }


  .faq__list-item {
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
  }


  section.useful-guide {
    background-color: var(--main-color-code);

    padding-top: 3.5rem;
    padding-right: 5.5rem;
    padding-bottom: 3.5rem;
    padding-left: 5.5rem;

    text-align: center;
  }

  .useful-guide .main-sentence {
    margin-bottom: 3.55rem;
  }

  .useful-guide h2 {
    color: #ffffff;
    margin-bottom: 1.25rem;
  }

  .useful-guide p {
    color: #ffffff;
    padding-right: 3.75rem;
    padding-left: 3.75rem;
  }

  .useful-guide .guide-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .useful-guide .guide-buttons a {
    background-color: var(--accent-color-code);
    color: #ffffff;
  }

  .useful-guide .guide-buttons a:hover {
    filter: brightness(1.25);
  }

}

@media screen and (max-width: 959px) {
  /* Tablet and Mobile */
  /* ----------  ---------- */
  .content-wrapper main section .section-header {
    margin-bottom: 1.25rem;
  }

  .content-wrapper main section .section-header p {
    color: var(--main-color-code);
  }

  .content-wrapper main section .section-header h2 {
    font-weight: 500;
    font-family: var(--noto-sans-jp);
  }

  .content-wrapper main section .section-content {
  }


  section.introduction .section-content .description {
    margin-bottom: 1rem;
  }

  section.introduction .section-content .description p {
  }

  section.introduction .section-content a.contact-link {
  }


  section.problem .section-content p.lead-sentence {
    margin-bottom: 0.85rem;
  }

  section.problem .section-content .problem__content {
    border: 1px solid #dddddd;
    border-radius: 15px;
    padding: 0.75rem;
    margin-bottom: 0.85rem;
  }

  section.problem .section-content .problem__content .problem-item {
    display: flex;
    align-items: center;

    margin-bottom: 0.65rem;
  }
  section.problem .section-content .problem__content .problem-item:last-of-type {
    margin-bottom: 0;
  }
  
  section.problem .section-content .problem__content .problem-item svg {
    width: 1.35rem;
    aspect-ratio: 1 / 1;

    margin-right: 0.35rem;
    flex-shrink: 0;
  }
  
  section.problem .section-content .problem__content .problem-item p {
    font-weight: bold;
    font-size: var(--font-size-small);
  }


  section.problem .section-content p.foot-sentence {
  }


  section.solution .section-header h2 {
  }

  section.solution .overview {
    margin-bottom: 1.25rem;
  }

  section.solution .overview p {
  }

  .solution__list {
  }

  .solution__list__item {
    width: 100%;

    display: flex;
    align-items: center;

    margin-bottom: 1.25rem;
  }
  .solution__list__item:last-of-type {
    margin-bottom: 0px;
  }

  .solution__list__item__icon {
    flex-shrink: 0;
    width: 37.5px;
    aspect-ratio: 1 / 1;

    margin-right: 0.675rem;
  }


  .solution__list__item__content h3 {
    font-weight: bold;
    margin-bottom: 0.25rem;
  }
  
  .solution__list__item__content p {
  }

  section.reasons .section-header h2 {
    margin-bottom: 0.85rem;
  }



  .reasons__list {
  }

  .reasons__list__item {
    width: 100%;

    display: flex;
    align-items: center;

    margin-bottom: 1.15rem;
  }
  .reasons__list__item:last-of-type {
    margin-bottom: 0;
  }

  .reasons__list__item__icon {
    width: 3.375rem;
    aspect-ratio: 1 / 1;

    margin-right: 0.675rem;
    flex-shrink: 0;
  }

  .reasons__list__item__content {
  }

  .reasons__list__item__content__title h3 {
    margin-bottom: 0.25rem;
  }

  .reasons__list__item__content__title h3 {
    font-weight: bold;
  }


  .reasons__list__item__content__detail .detail-body {
    display: flex;
    align-items: baseline;
    line-height: normal;
  }

  .reasons__list__item__content__detail .icon {
    width: 0.875rem;
    height: 0.875rem;

    padding-top: 0.0825rem;

    margin-right: 0.25rem;
    flex-shrink: 0;
  }

  .reasons__list__item__content__detail .item-content-info {
  }




  .pricing__overview {
    margin-bottom: 1.25rem;
  }
  
  .pricing__plan-card-list {
    margin-bottom: 1.25rem;
  }

  .pricing__plan-card-list__item {
    margin-bottom: 2.15rem;
  }

  .pricing__page-link {
  }

  .pricing__page-link a {
    text-decoration: underline;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
  }

  .pricing__page-link a:hover {
    opacity: 0.75;
  }


  .portfolio__list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0px, 1fr));
    grid-template-rows: minmax(150px, 1fr);
    grid-column-gap: 1.55rem;
    grid-row-gap: 1.85rem;
    grid-auto-rows: auto;

    margin-bottom: 1.85rem;
  }

  section.portfolio .portfolio__view-list-button-link {
    width: 300px;
    margin-right: auto;
    margin-left: auto;

    padding-top: 7.5px;
    padding-right: 15px;
    padding-bottom: 7.5px;
    padding-left: 15px;

    background-color: var(--main-color-code);
    color: #ffffff;
  }

  .workflow__diagram {
  }

  .workflow__diagram-item {
    margin-bottom: 1.5rem;
    box-shadow: 0px 0px 2px 0px darkgrey;
    border-radius: 7.5px;

    padding-top: 0.25rem;
    padding-right: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.25rem;
  }
  .workflow__diagram-item:last-of-type {
    margin-bottom: 0;
  }


  .faq__list hr {
    background-color: var(--secondary-base-color-code);
  }


  .faq__list-item {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }


  section.useful-guide {
    background-color: var(--main-color-code);

    padding-top: 1.25rem;
    padding-right: 0.75rem;
    padding-bottom: 1.25rem;
    padding-left: 0.75rem;

    text-align: center;
  }

  .useful-guide .main-sentence {
    margin-bottom: 1.55rem;
  }

  .useful-guide h2 {
    color: #ffffff;
    margin-bottom: 0.75rem;
  }

  .useful-guide p {
    color: #ffffff;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .useful-guide .guide-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .useful-guide .guide-buttons a {
    background-color: var(--accent-color-code);
    color: #ffffff;
  }

  .useful-guide .guide-buttons a:hover {
    filter: brightness(1.25);
  }
}