/*flex*/
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: top;
}

  .flex.alignitems__center {
    align-items: center;
  }

  .flex.space__between {
    justify-content: space-between;
  }

  .flex.center {
    justify-content: center;
  }

  .flex.left {
    justify-content: left;
  }

  .flex.right {
    justify-content: right;
  }

.flex.divided2 .flex__list {
  flex-basis: 48%;
  margin-bottom: 4%;
}

  .flex.divided2 .flex__list:nth-child(even) {
    margin-left: 2%;
  }

.flex.divided3 .flex__list {
  flex-basis: 32%;
  margin-bottom: 4%;
}

  .flex.divided3 .flex__list:nth-child(3n-1) {
    margin-left: 1%;
    margin-right: 1%;
  }

.flex .flex__list.w20 {
  flex-basis: 20%;
}

.flex .flex__list.w25 {
  flex-basis: 25%;
}

.flex .flex__list.w30 {
  flex-basis: 30%
}

.flex .flex__list.w31 {
  flex-basis: 31%
}

.flex .flex__list.w32 {
  flex-basis: 32%
}

.flex .flex__list.w33 {
  flex-basis: 33%
}

.flex .flex__list.w35 {
  flex-basis: 35%
}

.flex .flex__list.w40 {
  flex-basis: 40%;
}

.flex .flex__list.w45 {
  flex-basis: 45%;
}

.flex .flex__list.w50 {
  flex-basis: 50%;
}

.flex .flex__list.w55 {
  flex-basis: 55%;
}

.flex .flex__list.w60 {
  flex-basis: 60%;
}

.flex .flex__list.w65 {
  flex-basis: 65%;
}

.flex .flex__list.w70 {
  flex-basis: 70%;
}

.flex__list a {
  text-decoration: none!important
}

@media only screen and (max-width:520px) {
  .flex.divided2 ,
  .flex.divided3  {
    margin-left: auto;
    margin-right: auto;
  }
  
  .flex.space__between {
    justify-content: center;
  }

  .flex .flex__list,
  .flex.divided2 .flex__list,
  .flex.divided3 .flex__list,
  .flex.divided2 .flex__list:nth-child(even),
  .flex.divided3 .flex__list:nth-child(even),
  .flex.divided3 .flex__list:nth-child(3n-1) {
    flex-basis: 100%;
    width: 100%;
    margin-bottom: 4%;
    margin-left: auto;
    margin-right: auto;
  }

  .flex .flex__list.w20,
  .flex .flex__list.w25,
  .flex .flex__list.w30 ,
  .flex .flex__list.w31,
  .flex .flex__list.w32,
  .flex .flex__list.w33,
  .flex .flex__list.w35,
  .flex .flex__list.w40,
  .flex .flex__list.w45,
  .flex .flex__list.w50,
  .flex .flex__list.w55 ,
  .flex .flex__list.w60,
  .flex .flex__list.w65 ,
  .flex .flex__list.w70 {
    flex-basis: 100%;
    margin-left: auto;
    margin-right: auto;
  }

}


/*wide*/
.w10 {
  width: 10%;
}

.w20 {
  width: 20%;
}

.w30 {
  width: 30%;
}

.w40 {
  width: 40%;
}

.w50 {
  width: 50%;
}

.w60 {
  width: 60%;
}

.w70 {
  width: 70%;
}

.w80 {
  width: 80%;
}

.w90 {
  width: 90%;
}

.w100 {
  width: 100%;
}


/* loading */
.loader-bg {
  position: fixed;
  /*inset: 0;  */
  width: 100vw;
  height: 100vh;
  z-index: 123456789;
  background-color: #fff;
  display: flex;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  /* JS が動かなかったときの保険：5秒たったら CSS だけで消す */
  animation: loader-failsafe 0.6s 5s forwards;
}

.loader-bg.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s, visibility 0s 0.6s; /* 待ち時間をなくし、0.6秒で消す */
}

.loader-bg.is-hidden .loader {
  opacity: 0;
  transition: opacity 0.3s;
}

.loader {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(to right, #999 10%, rgba(255, 255, 255, 0) 42%);
  animation: load3 1.4s infinite linear;
}

.loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background: #fff;
  border-radius: 100% 0 0 0;
}

.loader::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 75%;
  height: 75%;
  background: #fff;
  border-radius: 50%;
}

@keyframes load3 {
  to { transform: rotate(360deg); }
}

@keyframes loader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* 「視差効果を減らす」設定の人には回転アニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; }
}