@charset "utf-8";
/* ぱたぱたアニメ館 */
/* glassmorphism (glass plate)*/
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  GLASSMORPHISM
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.glass-plate {
  margin:20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.2);        /* 白の半透明 */
  backdrop-filter: blur(10px);                 /* 背後をぼかす（重要！） */
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);  /* 細いハイライト枠 */
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  Background-color box
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/* TWILIGHT SKY */
.line-twilight {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SUNSET OCEAN */
.line-sunset {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 50%, #f953c6 100%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MIDNIGHT FOREST */
.line-forest {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* DEEP ROMANCE */
.mesh-romance {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background-color: #ff9a9e;
  background-image: 
    radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* AURORA SOFT */
.mesh-aurora {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background-color: #a18cd1;
  background-image: 
    radial-gradient(at 0% 0%, hsla(190, 80%, 70%, 1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(260, 60%, 60%, 1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(320, 70%, 70%, 1) 0, transparent 50%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CYBER DARK */
.mesh-cyber {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 300px;
  margin: 20px auto;
  border-radius: 24px;
  overflow: hidden; 
  background-color: #0f172a;
  background-image: 
    radial-gradient(at 0% 100%, hsla(250, 100%, 50%, 0.3) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(180, 100%, 50%, 0.3) 0, transparent 50%), 
    radial-gradient(at 50% 50%, hsla(300, 100%, 50%, 0.2) 0, transparent 50%);
  /* .glass-plate を中央配置 */
  display: flex;
  align-items: center;
  justify-content: center;
}