/* Android 用にウェブフォントをインポート */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

/* メンバーカラーを定義 */

:root
{
	--karen  : #f3c;
	--mayu   : #0c0;
	--serina : #07f;
	--manaka : #90f;
	--asahi  : #cc0;
	--harm-karen  : #f6c;
	--harm-mayu   : #3c3;
	--harm-serina : #09f;
	--harm-manaka : #73d;
	--harm-asahi  : #ca0;
}

/* 一般 */

body   { background:#000 ; color:#ccc ; font-size:xx-large ; }
h1     {                   color:#fff ; }
ul     { font-size:small ; }
a      { color:#f99 ; }
/* 本文とは関係のない情報 */.info  { font-size:small ; background:#333 ; }
/* メロ・サビ区分 */		section{}
/* メロ・サビ区分見出し */	h2     { font-size:0.5em ; font-family:sans-serif ;            color:#666 ; }
/* 歌詞段落 */				p      { font-size:1em   ; font-family:'Noto Serif JP',serif ; line-height:1.5em ; }
/* 歌詞コーラスパート */	span   {}
/* その他コーラスパート */  i      { font-size:0.8em ; font-family:cursive ; font-style:oblique ; vertical-align:super ; line-height:1em ;white-space:nowrap; color:#333 ; }
p,i {text-shadow:0px 0px 0.1em #000;}

/**************************/
/* コーラス（字ハモ以外） */
/* 厳密な区別はしない */

/* 歌詞文字追いかけ */               i.follow   {font-style:normal ; font-family:'Noto Serif JP',serif ; }
/* フェイク */                       i.fake     {font-style:italic ;                                     vertical-align:baseline   ; }
/* 合いの手 */                       i.shout    {                    font-family:sans-serif;             display:inline-block ; transform:rotate(-10deg) ; }
/* 伴奏（ウーアー、ベース）*/        i.back     {                                      font-size:0.6em ; display:inline-block ; position:absolute ; margin-top:1.6em ;  }
/* 被せ（後方のフレーズがかぶる） */ .overwrap  {                                                        display:inline-block ; position:absolute ; }
/* 音源限定パート */                 .limited::before{ display:inline ; content:"!" ; vertical-align:super ; line-height:0.8em ; color:#f90 ; text-shadow:0 0 4px #000;}
                                     .unknown::after { display:inline ; content:"?" ; vertical-align:super ; line-height:0.8em ; color:#f33 ; text-shadow:0 0 4px #000;}

/****************/
/* メインパート */
/* 文字色 */

.karen  {color:var(--karen);}
.mayu   {color:var(--mayu);}
.serina {color:var(--serina);}
.manaka {color:var(--manaka);}
.asahi  {color:var(--asahi);}

/* ユニゾン・主副の区別が難しいハモリ */

/* 2人 */
.karen.mayu   { color:var(--karen) ;text-shadow: 0.1em 0.1em 0 var(--mayu)   ; }
.karen.serina { color:var(--karen) ;text-shadow: 0.1em 0.1em 0 var(--serina) ; }
.karen.manaka { color:var(--karen) ;text-shadow: 0.1em 0.1em 0 var(--manaka) ; }
.karen.asahi  { color:var(--karen) ;text-shadow: 0.1em 0.1em 0 var(--asahi)  ; }
.mayu.serina  { color:var(--mayu)  ;text-shadow: 0.1em 0.1em 0 var(--serina) ; }
.mayu.manaka  { color:var(--mayu)  ;text-shadow: 0.1em 0.1em 0 var(--manaka) ; }
.mayu.asahi   { color:var(--mayu)  ;text-shadow: 0.1em 0.1em 0 var(--asahi)  ; }
.serina.manaka{ color:var(--serina);text-shadow: 0.1em 0.1em 0 var(--manaka) ; }
.serina.asahi { color:var(--serina);text-shadow: 0.1em 0.1em 0 var(--asahi)  ; }
.manaka.asahi { color:var(--manaka);text-shadow: 0.1em 0.1em 0 var(--asahi)  ; }

/* 3人 */
.karen.mayu.serina  { color:var(--karen)  ; text-shadow:0.1em 0.1em 0 var(--mayu)  ,0.2em 0.2em 0 var(--serina) ; }
.karen.mayu.manaka  { color:var(--karen)  ; text-shadow:0.1em 0.1em 0 var(--mayu)  ,0.2em 0.2em 0 var(--manaka) ; }
.karen.mayu.asahi   { color:var(--karen)  ; text-shadow:0.1em 0.1em 0 var(--mayu)  ,0.2em 0.2em 0 var(--asahi)  ; }
.karen.serina.manaka{ color:var(--karen)  ; text-shadow:0.1em 0.1em 0 var(--serina),0.2em 0.2em 0 var(--manaka) ; }
.karen.serina.asahi { color:var(--karen)  ; text-shadow:0.1em 0.1em 0 var(--serina),0.2em 0.2em 0 var(--asahi)  ; }
.karen.manaka.asahi { color:var(--karen)  ; text-shadow:0.1em 0.1em 0 var(--manaka),0.2em 0.2em 0 var(--asahi)  ; }
.mayu.serina.manaka { color:var(--mayu)   ; text-shadow:0.1em 0.1em 0 var(--serina),0.2em 0.2em 0 var(--manaka) ; }
.mayu.serina.asahi  { color:var(--mayu)   ; text-shadow:0.1em 0.1em 0 var(--serina),0.2em 0.2em 0 var(--asahi)  ; }
.mayu.manaka.asahi  { color:var(--mayu)   ; text-shadow:0.1em 0.1em 0 var(--manaka),0.2em 0.2em 0 var(--asahi)  ; }
.serina.manaka.asahi{ color:var(--serina) ; text-shadow:0.1em 0.1em 0 var(--manaka),0.2em 0.2em 0 var(--asahi)  ; }

/* 4人 */
.karen.mayu.serina.manaka { color:var(--karen) ; text-shadow:0.1em 0.1em 0 var(--mayu)  ,0.2em 0.2em 0 var(--serina),0.3em 0.3em 0 var(--manaka) ; }
.karen.mayu.serina.asahi  { color:var(--karen) ; text-shadow:0.1em 0.1em 0 var(--mayu)  ,0.2em 0.2em 0 var(--serina),0.3em 0.3em 0 var(--asahi)  ; }
.karen.mayu.manaka.asahi  { color:var(--karen) ; text-shadow:0.1em 0.1em 0 var(--mayu)  ,0.2em 0.2em 0 var(--manaka),0.3em 0.3em 0 var(--asahi)  ; }
.karen.serina.manaka.asahi{ color:var(--karen) ; text-shadow:0.1em 0.1em 0 var(--serina),0.2em 0.2em 0 var(--manaka),0.3em 0.3em 0 var(--asahi)  ; }
.mayu.serina.manaka.asahi { color:var(--mayu)  ; text-shadow:0.1em 0.1em 0 var(--serina),0.2em 0.2em 0 var(--manaka),0.3em 0.3em 0 var(--asahi)  ; }

/* 5人 */
.karen.mayu.serina.manaka { color:var(--karen) ; text-shadow:0.1em 0.1em 0 var(--mayu)  ,0.2em 0.2em 0 var(--serina),0.3em 0.3em 0 var(--manaka),0.4em 0.4em 0 var(--asahi) ; }

/************/
/* コーラス */
/* メイン以外 */

/* 1人コーラス */
.harm-karen  {background:linear-gradient(transparent, var(--harm-karen)  ,transparent);}
.harm-mayu   {background:linear-gradient(transparent, var(--harm-mayu)   ,transparent);}
.harm-serina {background:linear-gradient(transparent, var(--harm-serina) ,transparent);}
.harm-manaka {background:linear-gradient(transparent, var(--harm-manaka) ,transparent);}
.harm-asahi  {background:linear-gradient(transparent, var(--harm-asahi)  ,transparent);}

/* 2人 */

.harm-karen.harm-mayu   { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-mayu)  ,transparent) ; }
.harm-karen.harm-serina { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-serina),transparent) ; }
.harm-karen.harm-manaka { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-manaka),transparent) ; }
.harm-karen.harm-asahi  { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-asahi) ,transparent) ; }
.harm-mayu.harm-serina  { background:linear-gradient(transparent,var(--harm-mayu)  ,var(--harm-serina),transparent) ; }
.harm-mayu.harm-manaka  { background:linear-gradient(transparent,var(--harm-mayu)  ,var(--harm-manaka),transparent) ; }
.harm-mayu.harm-asahi   { background:linear-gradient(transparent,var(--harm-mayu)  ,var(--harm-asahi) ,transparent) ; }
.harm-serina.harm-manaka{ background:linear-gradient(transparent,var(--harm-serina),var(--harm-manaka),transparent) ; }
.harm-serina.harm-asahi { background:linear-gradient(transparent,var(--harm-serina),var(--harm-asahi) ,transparent) ; }
.harm-manaka.harm-asahi { background:linear-gradient(transparent,var(--harm-manaka),var(--harm-asahi) ,transparent) ; }

/* 3人 */

.harm-karen.harm-mayu.harm-serina  { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-mayu)  ,var(--harm-serina),transparent) ; }
.harm-karen.harm-mayu.harm-manaka  { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-mayu)  ,var(--harm-manaka),transparent) ; }
.harm-karen.harm-mayu.harm-asahi   { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-mayu)  ,var(--harm-asahi) ,transparent) ; }
.harm-karen.harm-serina.harm-manaka{ background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-serina),var(--harm-manaka),transparent) ; }
.harm-karen.harm-serina.harm-asahi { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-serina),var(--harm-asahi) ,transparent) ; }
.harm-karen.harm-manaka.harm-asahi { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-manaka),var(--harm-asahi) ,transparent) ; }
.harm-mayu.harm-serina.harm-manaka { background:linear-gradient(transparent,var(--harm-mayu)  ,var(--harm-serina),var(--harm-manaka),transparent) ; }
.harm-mayu.harm-serina.harm-asahi  { background:linear-gradient(transparent,var(--harm-mayu)  ,var(--harm-serina),var(--harm-asahi) ,transparent) ; }
.harm-mayu.harm-manaka.harm-asahi  { background:linear-gradient(transparent,var(--harm-mayu)  ,var(--harm-manaka),var(--harm-asahi) ,transparent) ; }
.harm-serina.harm-manaka.harm-asahi{ background:linear-gradient(transparent,var(--harm-serina),var(--harm-manaka),var(--harm-asahi) ,transparent) ; }

/* 4人 */

.harm-karen.harm-mayu.harm-serina.harm-manaka { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-mayu)  , var(--harm-serina),var(--harm-manaka),transparent) ; }
.harm-karen.harm-mayu.harm-serina.harm-asahi  { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-mayu)  , var(--harm-serina),var(--harm-asahi) ,transparent) ; }
.harm-karen.harm-mayu.harm-manaka.harm-asahi  { background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-mayu)  , var(--harm-manaka),var(--harm-asahi) ,transparent) ; }
.harm-karen.harm-serina.harm-manaka.harm-asahi{ background:linear-gradient(transparent,var(--harm-karen) ,var(--harm-serina), var(--harm-manaka),var(--harm-asahi) ,transparent) ; }
.harm-mayu.harm-serina.harm-manaka.harm-asahi { background:linear-gradient(transparent,var(--harm-mayu)  ,var(--harm-serina), var(--harm-manaka),var(--harm-asahi) ,transparent) ; }

/* ユニゾン、上ハモ、下ハモ、オクターブユニゾン を区別するなら別のアプローチか、 JavaScript で動的に適用した方が良い */