/* ========================================
   ARTMAKE WAVE
   波型背景：ピンク系・ブルーグレー系
======================================== */

/* ----------------------------------------
   共通：背景ブロック
---------------------------------------- */
.artmake-wave,
.artmake-wave-bottom,
.artmake-wave-white,
.artmake-wave-bottom-white,
.artmake-wave-lightpink,
.artmake-wave-bottom-lightpink,
.artmake-wave-blue,
.artmake-wave-bottom-blue,
.artmake-wave-blue-white,
.artmake-wave-bottom-blue-white,
.artmake-wave-lightblue,
.artmake-wave-bottom-lightblue {
  position: relative;
}

/* ----------------------------------------
   共通：波の形状・配置
---------------------------------------- */
.artmake-wave::before,
.artmake-wave-bottom::before,
.artmake-wave-white::before,
.artmake-wave-bottom-white::before,
.artmake-wave-lightpink::before,
.artmake-wave-bottom-lightpink::before,
.artmake-wave-blue::before,
.artmake-wave-bottom-blue::before,
.artmake-wave-blue-white::before,
.artmake-wave-bottom-blue-white::before,
.artmake-wave-lightblue::before,
.artmake-wave-bottom-lightblue::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 53px;
  background-size: 100% 200px;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* ========================================
   PINK：カラーバリエーション
======================================== */

/* ----------------------------------------
   薄ピンク ⇔ ピンク
---------------------------------------- */
/* 上側：#FEF7F7 → #E5CBC4 */
.artmake-wave {
  background-color: #E5CBC4;
}
.artmake-wave::before {
  background-color: #FEF7F7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23E5CBC4'/%3E%3C/svg%3E");
}

/* 下側：#E5CBC4 → #FEF7F7 */
.artmake-wave-bottom {
  background-color: #FEF7F7;
}
.artmake-wave-bottom::before {
  background-color: #E5CBC4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23FEF7F7'/%3E%3C/svg%3E");
}

/* ----------------------------------------
   ホワイト ⇔ ピンク
---------------------------------------- */
/* 上側：#FFFFFF → #E5CBC4 */
.artmake-wave-white {
  background-color: #E5CBC4;
}
.artmake-wave-white::before {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23E5CBC4'/%3E%3C/svg%3E");
}

/* 下側：#E5CBC4 → #FFFFFF */
.artmake-wave-bottom-white {
  background-color: #FFFFFF;
}
.artmake-wave-bottom-white::before {
  background-color: #E5CBC4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* ----------------------------------------
   ホワイト ⇔ 薄ピンク
---------------------------------------- */
/* 上側：#FFFFFF → #FEF7F7 */
.artmake-wave-lightpink {
  background-color: #FEF7F7;
}
.artmake-wave-lightpink::before {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23FEF7F7'/%3E%3C/svg%3E");
}

/* 下側：#FEF7F7 → #FFFFFF */
.artmake-wave-bottom-lightpink {
  background-color: #FFFFFF;
}
.artmake-wave-bottom-lightpink::before {
  background-color: #FEF7F7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* ========================================
   BLUE GRAY：カラーバリエーション
======================================== */

/* ----------------------------------------
   淡いブルー ⇔ ブルーグレー
---------------------------------------- */
/* 上側：#F9FCFC → #A7BAC8 */
.artmake-wave-blue {
  background-color: #A7BAC8;
}
.artmake-wave-blue::before {
  background-color: #F9FCFC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23A7BAC8'/%3E%3C/svg%3E");
}

/* 下側：#A7BAC8 → #F9FCFC */
.artmake-wave-bottom-blue {
  background-color: #F9FCFC;
}
.artmake-wave-bottom-blue::before {
  background-color: #A7BAC8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23F9FCFC'/%3E%3C/svg%3E");
}

/* ----------------------------------------
   ホワイト ⇔ ブルーグレー
---------------------------------------- */
/* 上側：#FFFFFF → #A7BAC8 */
.artmake-wave-blue-white {
  background-color: #A7BAC8;
}
.artmake-wave-blue-white::before {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23A7BAC8'/%3E%3C/svg%3E");
}

/* 下側：#A7BAC8 → #FFFFFF */
.artmake-wave-bottom-blue-white {
  background-color: #FFFFFF;
}
.artmake-wave-bottom-blue-white::before {
  background-color: #A7BAC8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* ----------------------------------------
   ホワイト ⇔ 淡いブルー
---------------------------------------- */
/* 上側：#FFFFFF → #F9FCFC */
.artmake-wave-lightblue {
  background-color: #F9FCFC;
}
.artmake-wave-lightblue::before {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23F9FCFC'/%3E%3C/svg%3E");
}

/* 下側：#F9FCFC → #FFFFFF */
.artmake-wave-bottom-lightblue {
  background-color: #FFFFFF;
}
.artmake-wave-bottom-lightblue::before {
  background-color: #F9FCFC;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* ========================================
   SP：波を緩やかに調整
======================================== */
@media (max-width: 767px) {
  .artmake-wave::before,
  .artmake-wave-bottom::before,
  .artmake-wave-white::before,
  .artmake-wave-bottom-white::before,
  .artmake-wave-lightpink::before,
  .artmake-wave-bottom-lightpink::before,
  .artmake-wave-blue::before,
  .artmake-wave-bottom-blue::before,
  .artmake-wave-blue-white::before,
  .artmake-wave-bottom-blue-white::before,
  .artmake-wave-lightblue::before,
  .artmake-wave-bottom-lightblue::before {
    height: 35px;
    background-size: 100% 80px;
  }
}