/* import.css で読み込み */

:root {

  /* 青海波（せいがいは） */
  /*  background: var(--bg-seigaiha-shiraai);*/

  /* 甕覗（かめのぞき｜#a2d7dd）の文様を変数として定義*/
  /* 藍染の中で最も薄い、藍甕をほんの少し覗いただけ、という名前の由来を持つごく淡い青色です。 */
  --c-kamenozoki: #a2d7dd;
  --bg-seigaiha-kamenozoki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cdefs%3E%3CradialGradient id='grad' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='9%25' stop-color='%23c1e8ea' /%3E%3Cstop offset='10%25' stop-color='%23a2d7dd' /%3E%3Cstop offset='19%25' stop-color='%23a2d7dd' /%3E%3Cstop offset='20%25' stop-color='%23c1e8ea' /%3E%3Cstop offset='29%25' stop-color='%23c1e8ea' /%3E%3Cstop offset='30%25' stop-color='%23a2d7dd' /%3E%3Cstop offset='39%25' stop-color='%23a2d7dd' /%3E%3Cstop offset='40%25' stop-color='%23c1e8ea' /%3E%3Cstop offset='49%25' stop-color='%23c1e8ea' /%3E%3Cstop offset='50%25' stop-color='%23a2d7dd' /%3E%3Cstop offset='59%25' stop-color='%23a2d7dd' /%3E%3Cstop offset='60%25' stop-color='%23c1e8ea' /%3E%3Cstop offset='69%25' stop-color='%23c1e8ea' /%3E%3Cstop offset='70%25' stop-color='%23a2d7dd' /%3E%3Cstop offset='79%25' stop-color='%23a2d7dd' /%3E%3Cstop offset='80%25' stop-color='%23c1e8ea' /%3E%3Cstop offset='89%25' stop-color='%23c1e8ea' /%3E%3Cstop offset='90%25' stop-color='%23a2d7dd' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle fill='url(%23grad)' cy='27' r='57' /%3E%3Ccircle fill='url(%23grad)' cx='100' cy='27' r='57' /%3E%3Ccircle fill='url(%23grad)' cx='50' cy='57' r='57' /%3E%3Ccircle fill='url(%23grad)' cy='87' r='57' /%3E%3Ccircle fill='url(%23grad)' cx='100' cy='87' r='57' /%3E%3C/svg%3E") center center / 5rem auto;

  /* 水色（みずいろ｜#bce2e8）の文様を変数として定義 */
  /* 澄んだ水のような、清涼感のある明るい青色です。*/
  --c-mizuiro: #bce2e8;
  --bg-seigaiha-mizuiro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cdefs%3E%3CradialGradient id='grad' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='9%25' stop-color='%23d6f0f5' /%3E%3Cstop offset='10%25' stop-color='%23bce2e8' /%3E%3Cstop offset='19%25' stop-color='%23bce2e8' /%3E%3Cstop offset='20%25' stop-color='%23d6f0f5' /%3E%3Cstop offset='29%25' stop-color='%23d6f0f5' /%3E%3Cstop offset='30%25' stop-color='%23bce2e8' /%3E%3Cstop offset='39%25' stop-color='%23bce2e8' /%3E%3Cstop offset='40%25' stop-color='%23d6f0f5' /%3E%3Cstop offset='49%25' stop-color='%23d6f0f5' /%3E%3Cstop offset='50%25' stop-color='%23bce2e8' /%3E%3Cstop offset='59%25' stop-color='%23bce2e8' /%3E%3Cstop offset='60%25' stop-color='%23d6f0f5' /%3E%3Cstop offset='69%25' stop-color='%23d6f0f5' /%3E%3Cstop offset='70%25' stop-color='%23bce2e8' /%3E%3Cstop offset='79%25' stop-color='%23bce2e8' /%3E%3Cstop offset='80%25' stop-color='%23d6f0f5' /%3E%3Cstop offset='89%25' stop-color='%23d6f0f5' /%3E%3Cstop offset='90%25' stop-color='%23bce2e8' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle fill='url(%23grad)' cy='27' r='57' /%3E%3Ccircle fill='url(%23grad)' cx='100' cy='27' r='57' /%3E%3Ccircle fill='url(%23grad)' cx='50' cy='57' r='57' /%3E%3Ccircle fill='url(%23grad)' cy='87' r='57' /%3E%3Ccircle fill='url(%23grad)' cx='100' cy='87' r='57' /%3E%3C/svg%3E") center center / 5rem auto;

  /* 白藍（しらあい｜ #ecf7ff）の文様を変数として定義 */
  /* 白に近いくらいごくごく淡い藍色です。背景の存在感を最小限にしたい場合に最適です。*/
  --c-shiraai: #ecf7ff;
  --bg-seigaiha-shiraai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cdefs%3E%3CradialGradient id='grad' cx='50%25' cy='50%25' r='50%25' fx='50%25' fy='50%25'%3E%3Cstop offset='9%25' stop-color='%23ffffff' /%3E%3Cstop offset='10%25' stop-color='%23ecf7ff' /%3E%3Cstop offset='19%25' stop-color='%23ecf7ff' /%3E%3Cstop offset='20%25' stop-color='%23ffffff' /%3E%3Cstop offset='29%25' stop-color='%23ffffff' /%3E%3Cstop offset='30%25' stop-color='%23ecf7ff' /%3E%3Cstop offset='39%25' stop-color='%23ecf7ff' /%3E%3Cstop offset='40%25' stop-color='%23ffffff' /%3E%3Cstop offset='49%25' stop-color='%23ffffff' /%3E%3Cstop offset='50%25' stop-color='%23ecf7ff' /%3E%3Cstop offset='59%25' stop-color='%23ecf7ff' /%3E%3Cstop offset='60%25' stop-color='%23ffffff' /%3E%3Cstop offset='69%25' stop-color='%23ffffff' /%3E%3Cstop offset='70%25' stop-color='%23ecf7ff' /%3E%3Cstop offset='79%25' stop-color='%23ecf7ff' /%3E%3Cstop offset='80%25' stop-color='%23ffffff' /%3E%3Cstop offset='89%25' stop-color='%23ffffff' /%3E%3Cstop offset='90%25' stop-color='%23ecf7ff' /%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle fill='url(%23grad)' cy='27' r='57' /%3E%3Ccircle fill='url(%23grad)' cx='100' cy='27' r='57' /%3E%3Ccircle fill='url(%23grad)' cx='50' cy='57' r='57' /%3E%3Ccircle fill='url(%23grad)' cy='87' r='57' /%3E%3Ccircle fill='url(%23grad)' cx='100' cy='87' r='57' /%3E%3C/svg%3E") center center / 5rem auto;

}

.bg-seigaiha {
    background: var(--bg-seigaiha-shiraai);
}

.bg-shippo {
    background-image: radial-gradient(closest-side, transparent 99.9%, rgba(236, 236, 236, 0.8) 100%), radial-gradient(closest-side, transparent 99.9%, rgba(236, 236, 236, 0.8) 100%);
    background-color: rgba(250, 250, 250, 1);
    background-position: 0 0, 30px 30px;
    background-size: 60px 60px;
}

.bg-arare {
  /* 霰文様 */
  background-color: #fffaf5;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E    %3Ccircle cx='10' cy='10' r='2.5' fill='%23f0e1d3' fill-opacity='0.6' /%3E    %3Ccircle cx='40' cy='20' r='1.5' fill='%23f0e1d3' fill-opacity='0.4' /%3E    %3Ccircle cx='70' cy='30' r='2' fill='%23f0e1d3' fill-opacity='0.5' /%3E    %3Ccircle cx='20' cy='50' r='1.8' fill='%23f0e1d3' fill-opacity='0.7' /%3E    %3Ccircle cx='80' cy='60' r='1.2' fill='%23f0e1d3' fill-opacity='0.6' /%3E    %3Ccircle cx='30' cy='80' r='2' fill='%23f0e1d3' fill-opacity='0.5' /%3E    %3Ccircle cx='60' cy='90' r='1.5' fill='%23f0e1d3' fill-opacity='0.6' /%3E    %3Ccircle cx='90' cy='10' r='1.2' fill='%23f0e1d3' fill-opacity='0.6' /%3E  %3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}