@charset "utf-8";

/* テーマカラー作成 */
:root {

  --color00: hsla(50,10%,90%,1); /* ベースカラー */
  --color01: hsla(324,33%,25%,1); /* メインカラー */
  --color02: hsla(324,22%,38%,1); /* メインカラー派生 */
  --color03: hsla(21,20%,70%,1); /* サブカラー */
  --color04: hsla(21,20%,80%,1); /* サブカラー派生 */
  --color05: hsla(44,0%,20%,1); /* 本文カラー */
  --color06: hsla(44,9%,41%,1); /* リンクカラー */
  --color07: hsla(44,80%,50%,1); /* リンクオーバーカラー */
  --color08: hsla(70,60%,50%,1); /* 見出しカラー */
  --color09: hsla(199,37%,71%,1); /* アクセントカラー */
  --color10: hsla(10,70%,60%,1); /* 必須カラー */

  --color11: hsla(51, 100%, 50%,1); /* カラースロット … マリーゴールド */
  --color12: hsla(216, 52%, 79%,1); /* カラースロット … スモーキーブルー */
  --color13: hsla(204, 100%, 97%,1); /* カラースロット … ペールアクア */
  --color14: hsla(324,22%,50%,1); /* カラースロット … レッドバイオレット*/
  --color15: hsla(10,90%,75%,1); /* カラースロット … 炎星*/
  --color16: hsla(360,100%,100%,1); /* カラースロット … */
  --color17: hsla(360,100%,100%,1); /* カラースロット … */
  --color18: hsla(360,100%,100%,1); /* カラースロット … */
  --color19: hsla(360,100%,100%,1); /* カラースロット … */
  --color20: hsla(360,100%,100%,1); /* カラースロット … */

  --gradation00: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color00) 100%) ;
  --gradation01: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color01) 100%) ;
  --gradation02: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color02) 100%) ;
  --gradation03: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color03) 100%) ;
  --gradation04: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color04) 100%) ;
  --gradation05: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color05) 100%) ;
  --gradation06: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color06) 100%) ;
  --gradation07: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color07) 100%) ;
  --gradation08: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color08) 100%) ;
  --gradation09: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color09) 100%) ;
  --gradation10: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color10) 100%) ;
  
  --gradation01B: linear-gradient(180deg, var(--color02) 0%, var(--color01) 100%);
  --gradation02B: linear-gradient(120deg, var(--color01) 0%, var(--color02) 33%, var(--color01) 66%, var(--color01) 100%);
  --gradation03B: linear-gradient(180deg, var(--color04) 0%, var(--color03) 100%);
  --gradation04B: linear-gradient(120deg, var(--color03) 0%, var(--color04) 33%, var(--color03) 66%, var(--color03) 100%);

  --gradation11: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color11) 100%) ;
  --gradation12: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color12) 100%) ;
  --gradation13: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color13) 100%) ;
  --gradation14: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color14) 100%) ;
  --gradation15: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color15) 100%) ;
  --gradation16: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color16) 100%) ;
  --gradation17: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color17) 100%) ;
  --gradation18: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color18) 100%) ;
  --gradation19: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color19) 100%) ;
  --gradation20: linear-gradient(180deg, hsla(0,100%,100%,1) 0%, var(--color20) 100%) ;
 
  --gradation21: linear-gradient(180deg, hsla(360,100%,100%,1) 0%, hsla(360,0%,0%,1) 100%);
  --gradation22: radial-gradient(hsla(360,100%,100%,1) 0%, hsla(360,0%,0%,1) 100%);
  
  --gradation27: linear-gradient(90deg,
  hsla(0,100%,50%,1) 0%,
  hsla(36,100%,50%,1) 10%,
  hsla(72,100%,50%,1) 20%,
  hsla(108,100%,50%,1) 30%,
  hsla(144,100%,50%,1) 40%,
  hsla(180,100%,50%,1) 50%,
  hsla(216,100%,50%,1) 60%,
  hsla(252,100%,50%,1) 70%,
  hsla(288,100%,50%,1) 80%,
  hsla(324,100%,50%,1) 90%,
  hsla(360,100%,50%,1) 100%
  );
}

.color-box2 {
	display: block;
	width: 500px;
	line-height: 36px;
	margin: 10px 0;
	padding: 0 10px 0;
	float:left;
	color: #fff;
	font-size: 18px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
	text-align: left;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.description2 {
	display: inline-block;
	width: 240px;
	line-height: 36px;
	margin: 10px 0 10px 10px;
	float:left;	
	font-size: 18px;
	text-align: center;
}

@media screen and (max-width:900px){
	.color-box2 { width:calc(100% - 20px); float:none; }
	.description2 { width:calc(100% - 2px - 2px); float:none; margin:10px 0 30px 0px; }
}

.theme_bg00 { background-color: var(--color00); }
.theme_bg01 { background-color: var(--color01); }
.theme_bg02 { background-color: var(--color02); }
.theme_bg03 { background-color: var(--color03); }
.theme_bg04 { background-color: var(--color04); }
.theme_bg05 { background-color: var(--color05); }
.theme_bg06 { background-color: var(--color06); }
.theme_bg07 { background-color: var(--color07); }
.theme_bg08 { background-color: var(--color08); }
.theme_bg09 { background-color: var(--color09); }
.theme_bg10 { background-color: var(--color10); }
.theme_bg11 { background-color: var(--color11); }
.theme_bg12 { background-color: var(--color12); }
.theme_bg13 { background-color: var(--color13); }
.theme_bg14 { background-color: var(--color14); }
.theme_bg15 { background-color: var(--color15); }
.theme_bg16 { background-color: var(--color16); }
.theme_bg17 { background-color: var(--color17); }
.theme_bg18 { background-color: var(--color18); }
.theme_bg19 { background-color: var(--color19); }
.theme_bg20 { background-color: var(--color20); }


.theme_tx00 { color: var(--color00); }
.theme_tx01 { color: var(--color01); }
.theme_tx02 { color: var(--color02); }
.theme_tx03 { color: var(--color03); }
.theme_tx04 { color: var(--color04); }
.theme_tx05 { color: var(--color05); }
.theme_tx06 { color: var(--color06); }
.theme_tx07 { color: var(--color07); }
.theme_tx08 { color: var(--color08); }
.theme_tx09 { color: var(--color09); }
.theme_tx10 { color: var(--color10); }
.theme_tx11 { color: var(--color11); }
.theme_tx12 { color: var(--color12); }
.theme_tx13 { color: var(--color13); }
.theme_tx14 { color: var(--color14); }
.theme_tx15 { color: var(--color15); }
.theme_tx16 { color: var(--color16); }
.theme_tx17 { color: var(--color17); }
.theme_tx18 { color: var(--color18); }
.theme_tx19 { color: var(--color19); }
.theme_tx20 { color: var(--color20); }


.theme_bd00 { border: 2px solid var(--color00); }
.theme_bd01 { border: 2px solid var(--color01); }
.theme_bd02 { border: 2px solid var(--color02); }
.theme_bd03 { border: 2px solid var(--color03); }
.theme_bd04 { border: 2px solid var(--color04); }
.theme_bd05 { border: 2px solid var(--color05); }
.theme_bd06 { border: 2px solid var(--color06); }
.theme_bd07 { border: 2px solid var(--color07); }
.theme_bd08 { border: 2px solid var(--color08); }
.theme_bd09 { border: 2px solid var(--color09); }
.theme_bd10 { border: 2px solid var(--color10); }
.theme_bd11 { border: 2px solid var(--color11); }
.theme_bd12 { border: 2px solid var(--color12); }
.theme_bd13 { border: 2px solid var(--color13); }
.theme_bd14 { border: 2px solid var(--color14); }
.theme_bd15 { border: 2px solid var(--color15); }
.theme_bd16 { border: 2px solid var(--color16); }
.theme_bd17 { border: 2px solid var(--color17); }
.theme_bd18 { border: 2px solid var(--color18); }
.theme_bd19 { border: 2px solid var(--color19); }
.theme_bd20 { border: 2px solid var(--color20); }

.theme_gr00 { background: var(--gradation00); }
.theme_gr01 { background: var(--gradation01); }
.theme_gr02 { background: var(--gradation02); }
.theme_gr03 { background: var(--gradation03); }
.theme_gr04 { background: var(--gradation04); }
.theme_gr05 { background: var(--gradation05); }
.theme_gr06 { background: var(--gradation06); }
.theme_gr07 { background: var(--gradation07); }
.theme_gr08 { background: var(--gradation08); }
.theme_gr09 { background: var(--gradation09); }
.theme_gr10 { background: var(--gradation10); }

.theme_gr01B { background: var(--gradation01B); }
.theme_gr02B { background: var(--gradation02B); }
.theme_gr03B { background: var(--gradation03B); }
.theme_gr04B { background: var(--gradation04B); }

.theme_gr11 { background: var(--gradation11); }
.theme_gr12 { background: var(--gradation12); }
.theme_gr13 { background: var(--gradation13); }
.theme_gr14 { background: var(--gradation14); }
.theme_gr15 { background: var(--gradation15); }
.theme_gr16 { background: var(--gradation16); }
.theme_gr17 { background: var(--gradation17); }
.theme_gr18 { background: var(--gradation18); }
.theme_gr19 { background: var(--gradation19); }
.theme_gr20 { background: var(--gradation20); }

.theme_gr21 { background: var(--gradation21); }
.theme_gr22 { background: var(--gradation22); }

.theme_gr27 { background: var(--gradation27); }

.bg_skew_dot01{
  background-color: var( --color09 );
  background-image:
    radial-gradient(hsla(199, 42%, 76%, 1) 20%, var( --color09 ) 20%),
    radial-gradient(hsla(199, 42%, 76%, 1) 20%, var( --color09 ) 20%);
  background-size: 80px 80px !important;
  background-position: 0 0, 10px 10px !important;
}

.bg_skew_dot02{
  background-color: hsla(210,0%,60%,1);
  background-image:
    radial-gradient( hsla(210,0%,70%,1) 20%, transparent 20% ),
    radial-gradient( hsla(210,0%,50%,1) 20%, transparent 20% ),
    radial-gradient( hsla(210,0%,55%,1) 20%, transparent 20% ),
    radial-gradient( hsla(210,0%,65%,1) 20%, hsla(210,0%,60%,1) 20% );
  background-size:120px 120px, 120px 120px, 120px 120px, 120px 120px !important;
  background-position:0px 0px, 60px 0px, 0px 60px, 60px 60px !important;
}

.bg_skew_dot03{
  background-color: hsla(150,80%,60%,1);
  background-image:
    radial-gradient( var( --color09 ) 20%, transparent 20% ),
    radial-gradient( var( --color10 ) 20%, transparent 20% ),
    radial-gradient( hsla(40,90%,90%,1) 20%, transparent 20% ),
    radial-gradient( hsla(150,80%,70%,1) 20%, hsla(150,80%,60%,1) 20% );
  background-size:120px 120px, 120px 120px, 120px 120px, 120px 120px !important;
  background-position:0px 0px, 60px 0px, 0px 60px, 60px 60px !important;
}