@charset "UTF-8";
/*==================================================

** order
==================================================*/
#flowOrder .flowlist {
  position: relative; }
  #flowOrder .flowlist:before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #7a8581 0px, #7a8581 3px, transparent 3px, transparent 7px) repeat-y left top/100% 7px;
    position: absolute;
    top: 0;
    left: 84px; }
  #flowOrder .flowlist li {
    margin-left: 16px;
    width: 100%;
    display: grid;
    grid-template-columns: 136px 1fr;
    align-items: flex-start;
    gap: 0 40px;
    padding-bottom: 64px; }
    #flowOrder .flowlist li:last-child {
      background: #f6f7f3; }
  #flowOrder .flowlist .phtbox {
    background: #ddeee9;
    border-radius: 1000%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    position: relative; }
    #flowOrder .flowlist .phtbox:before {
      content: "0" counter(number);
      font: normal normal 700 4rem/1.6 "Lato", "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
      color: #008c6c;
      line-height: 1;
      position: absolute;
      top: -8px;
      left: -16px; }
    #flowOrder .flowlist .phtbox img {
      width: 56px; }
  #flowOrder .flowlist .txtbox h2 + * {
    margin-top: 24px; }

@media screen and (max-width: 767px) {
  #flowOrder .flowlist {
    margin-top: 64px; }
    #flowOrder .flowlist:before {
      left: 50%;
      transform: translateX(-50%); }
    #flowOrder .flowlist li {
      background: #f6f7f3;
      margin-left: 0;
      grid-template-columns: 1fr;
      padding: 40px 0 32px; }
      #flowOrder .flowlist li + li {
        margin-top: 48px; }
    #flowOrder .flowlist .phtbox {
      width: 120px;
      margin: auto; }
      #flowOrder .flowlist .phtbox:before {
        font-size: 3.6rem;
        top: -12px;
        left: 0; }
      #flowOrder .flowlist .phtbox img {
        width: 48px; }
    #flowOrder .flowlist .txtbox {
      margin-top: 24px; } }