@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

.clay{background:var(--clay-background,rgba(0,0,0,.005));border-radius:var(--clay-border-radius,32px);box-shadow:var(--clay-shadow-outset,8px 8px 16px 0 rgba(0,0,0,.25)),inset var(--clay-shadow-inset-primary,-8px -8px 16px 0 rgba(0,0,0,.25)),inset var(--clay-shadow-inset-secondary,8px 8px 16px 0 hsla(0,0%,100%,.2))}

.back {
  display: flex;
  height: 30vh;
  align-items: center;
  justify-content: center;
  background-color: #d2dbee;
  color: #f1f1f1;
  font-family: "Roboto Mono", monospace;
}

.card01 {
  --clay-background: aliceblue;
  --clay-border-radius: 25px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  font-size: 10px;
}

.card {
  --clay-background: salmon;
  --clay-border-radius: 25px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  font-size: 10px;
}

.card2 {
  --clay-background: lightseagreen;
  --clay-border-radius: 25px;
  margin-left: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  font-size: 10px;
}

.card3 {
  --clay-background: #6667ab;
  --clay-border-radius: 25px;

  margin-left: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  font-size: 10px;
}

.outset {
  --clay-background: #6667ab;
  --clay-border-radius: 25px;
  --clay-shadow-outset: 5px 5px 10px green;
  margin-left: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  font-size: 10px;
}

.primary {
  --clay-background: #6667ab;
  --clay-border-radius: 48px;
  --clay-shadow-inset-primary: 5px 5px 5px green;
  --clay-shadow-inset-secondary: 5px 5px 5px white;
  margin-left: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  font-size: 10px;
}