/* -----------------------
  flow
----------------------- */
.flow {
  background: url(../img/flow_bg.png) no-repeat center top / 100% auto;
  padding-bottom: min(calc(162 /960 * 100vw),162px);
}

.flow .ttl-box {
  position: relative;
  padding-bottom: min(calc(200/960 * 100vw),200px);
}

.flow .ttl-box img {
  position: absolute;
  top: max(calc(-69/ 960 * 100vw),-69px);
}

.flow li {
  display: grid;
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.flow li img {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.flow-bnr-head .grid-box {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.flow-bnr-head .grid-01,
.flow-bnr-head .grid-02,
.flow-bnr-head .grid-03 {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.flow-bnr-head .grid-01 {
  z-index: 2;
}

.flow-bnr-head .grid-02 {
  align-self: start;
  z-index: 3;
}

.flow-bnr-head .grid-03 {
  align-self: end;
  z-index: 3;
}

.flow-bnr-txt {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.flow-bnr-txt .grid-01,
.flow-bnr-txt .grid-02 {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.flow-bnr-txt .grid-02{
  z-index: 2;
}

.flow-circle{
  position: absolute;
  width: min(calc(888/960 * 100vw),888px);
  top: min(calc(240/960 * 100vw),240px);
  animation: 15s linear infinite rotation;
  z-index: 1;
}