ソースの表示

■ CSSjukug.htm ■
<!DOCTYPE HTML>
<HTML LANG="ja">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート 四字熟語ジェネレータ</TITLE>

<STYLE TYPE="text/css">
<!--

@keyframes pos-run-1 {
  from {
    --pos-run-1:0;
  }
  to {
    --pos-run-1:var(--n-chars);
  }
}

@keyframes pos-run-2 {
  from {
    --pos-run-2:0;
  }
  to {
    --pos-run-2:var(--n-chars);
  }
}

@keyframes pos-init-1 {
  from {
    --pos-init-1:0;
  }
  to {
    --pos-init-1:calc(var(--n-chars) - 1);
  }
}

@keyframes pos-init-2 {
  from {
    --pos-init-2:0;
  }
  to {
    --pos-init-2:calc(var(--n-chars) - 1);
  }
}

@keyframes prev-1 {
  to {
    visibility:visible;
  }
}

@keyframes prev-2 {
  to {
    visibility:visible;
  }
}

@keyframes mask {
  to {
    z-index:2;
  }
}

@property --pos-run-1 {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --pos-run-2 {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --pos-run-int-1 {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --pos-run-int-2 {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --pos-init-1 {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --pos-init-2 {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --pos-stop1-1 {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --pos-stop1-2 {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --pos-stop2-1 {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --pos-stop2-2 {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --quot-1 {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

@property --quot-2 {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

:root {
  --chars-1:"金大会大恐階一悪参金風手平苦如百一猪事海一報才物急一円窮迦信白厚名人詠晴珍和諸実公思針付千朝海感事柳閑小無懸常円自街洛先一無不三開放海前恒一進白浩朝寛高大時君一人頑三天自拍大画水苛手熟適苦同多黄感美冠栄名百朝多骨刻衆志手泰杯内泰各衣奮以新融屋感雲天士奇旗無曲門自無愚乱群陶孟垂質随忘内泰一雲自鏡起羊軽空円野無累屠衣徒不大風牛乱死雲背巧無悠薄異一挙箪月大安四秋日自不行意三輪掌十袖有泥異粗一面杓会牽質反危損屋出薪犬無医陣汚廓千勤珍悠自権胡困十一紫円青当父青三盤純多思猿学人開南大満気歓無放未老青山後遠謹円羊傾小明曳明糟一多粗甘無求胆四一荒一名天有時一大軽暗酒奇換雲焦時東維起皮九羊破伯採適良空同怨閑眉試冠一野独流是鬼天真優陽大蓋円和花一盛近古遠口時一無前精黒公掩二一千七多徹羽千眼広速純辺古確快開公失愛怪空馬一少情八共種一公勤面帰一栄規死権鏡千金脈汗正一千喜薬塗物泡一君採無文門雲孤一用南得温才岡賛神子有唯遠五怒百山有一脚千雄安亀用口頭既活諸栄徹四和一竹八意半震異多千複悪気南改錦純悪雲牽一老台希面未温特比熱一機悪終一先瓜新百短無嚢遮花免佳冥城勇一人不善小異極破奇一言少自欣燕才要匹大大開移意二海和妖弱華紅昼一薬救鎧無亡夜生得田前用臨万冠身天阿大後和縦修帰自真虚下抜亡名一既一愛百清国懐春越独意七無清蓋因鶴天燃鼓家千一加頂金興二不和家一衣門我容生因和十一克一年社無末古大一六雲苦暖緩越来四器博開傍剛生万大軽一危生矯知創一面多一安一挙戦千金情千黄無金主一迅形知疾飽理意美夢内道不自支有男一麻醇山首容一読一即一完物人眼不竜周一平感傍大九笑家音相盗平七外椀四武今源明南一益読再被敬大白益二粉冷矛文一無痛面金年首不群則相無粒平達一直面懇空鼓雲一刻無夫目水三遺一旧有酒破古公前天創黄烏浅一没異以精大天安伴尽全草経沈鯨大酔世猛股寸三唯妄驚右喜自獅犬神難大一津絶暗一合金半全良時解哀衆一巧抱張立鶏薄読寸一当隠有悪高無連一禍愚蓬屋寸一森表綾甲目電秀外良紅鶏以一面夏天四破生読肉造有山内縦直三危乳離八前出眼三問不誇懸力一開無放堅一口呉王意相永呑安怨因歓一片山多自知光一三油烏斬蛍寡不前波移極粗言一行自深本挙一安霊前竹当三舌衣閉金明鉛往含一漁大秋先鵬千談苦悪弊金堅情順橘抜口即気尋唯風一捲雲自孤天一公一群気武呉悪夢南意回疑石優品滅忍利断無流山中焚酒単温外以意面竹意欣汗日故四一暗一有一獅議堅異和常沈風万窮勧生三咳和外無柳我教常百私旭遠自一如辛落金千誠初幽四夜五奇心七口活外愚虚騎得不綱解難二機抑去錦口有心名清論一玩満自嘉易土水一安千一国加音三枝一読威二鶏千孤断暴胡門半盲勢神一葦極砲運千深喪肝無大取無率一自唇七人独合月局飛無確戴無丁百対強千年不他三面温一熟残安博衆大相阿海鉄空格窮天興朝意堂変不喧一十他百勇慢百一高好九広意理一上年鳩安九一回四臥三金四";
  --chars-2:"事敬連矩同羅説行虎朝顔顔知根世絡盆息決郎陳気練和場相果稽糠群涯胆道柔戦思者志馬気情強口楽剛態電軍難力触家牛唯地笑衣枝羊套声義附宅私束紫心腹反虎退許人風魂立色巷内百母分腕万臣畔威逆衣心耳面日措飯山書本風言風炉雲貨味蓮不労言涯石人雲手前味猛片二鼎眠馬路顔巧韻進学慮立位歯病百灯人事本中色魚平眼風遅物一子名家代首夫答帆目産諾同事前挙志雪交水盤雪私挙孔川頂是死唐壁否中力花忍衣覧者心明戦気合従福窓白六憂海蕩一大摩情人田意由地羅機壮戸集魂道求載因意味代事死進情夷語状炭崩談器逆怒文運分進死唾志日変詮転魚丁枚悼喜蝶目望唱燭善者軍骨発生茶下山羊量意戦心二苦体声隠成案首樹己切用色歌食鬼手実粒中旦減思品先助言骨念薪言股宿理棺酷離利仁誓海中中生書金念満衣断酒網味紙魚心毛画鼻己断手令汁公人命幻姿属材固鼓光論辛頭味龍者甲功事程人厚楽下底刀形為心蜜盤集神転明三件寸心居往書母息田余生由体子心下秋山寒里死情話所馬者中極憂食論木姓告方老薪佑宇言口越年門平戦寧終心雑非管天得律慈離楽食食錦志喝耳洋機知鉢目言死安路可古己高罰慨股下久山理喜常惜快意行張孫若古慮目盾舟題言業言工柔意厳途承猛疑味戦今花知言肉苦日雲物字角立子芸戸日唱読蛇千珍辞古人害泥網迫断言穏身通慮外願即常分所殺人言用毛良天源妻平頭人心沙髪肉循袖者場葉大拝煙紫人会殺機書正頭職機雲想牙輪法声攻誉魂中口器住目寸夫池世学学転来耕醒飲光煙山言子吐鳴生然中馬鏡眉頭互言根所風下飲十粒寛毅心刀孤刀枯碁少外薬所意易体身履泥身華尺隣賞床横害切木生読常象沫心邪冥貌問河卵前言編士土編翁書己為物頂尚位化利廉姿天茶筆従耳前風令柔魂馬尊憎家練百風郭製意過風平天即信城日差然陽武慮己悦操承城未廻蝿翼交十虚鳥存期給固中語盲水怪中食道部生明虚悠心炊水前子人廉禽里交言幻目外議進合着世小牛花六幅止種鏡縄影強犬向蒸卿清行別謀年往悪先汗中然論然溌日学九嚢情知小方死上奇者常末之満士上花目行行騎急中冠心真六節裏書数転殺空根世刀意顧方事願牛途鉄朝長暴氏林高戦策海耶子域合人陵暴一実里材思私我章手顧来人藍見子和刀間河尾善山牛亀突殿石為錦今急代立時理無大住忍眉食徒出頭我励哲奔速鼠常国暗聴文喜為事理清面舟気新分材情切歩花及成利兵名路濁嘩中耀謀種苦慮尽前者張行者口戦徹学面長日憂部雄老慨色倹肱鳥毛応大論千客慮尺謀津樹木多上兵乎病代竿子楽要業毒色差陽髪学関下智気害知序雀倶之流端手真誉備身紀事崖巻味屍胆従山塵言空舞族範髪後前覧聞武内塔雲身酒岐憾返致先挙刻処一散外烏変跡見持理三春光代天害育是路科意者白偏諾林夜儀天三直紘天信悠楽重球少生視敗年功頭城進口口耳子中勝風通捨壌鼠年住辰車勇炎期霜倹力鳥縁悟船山体耳気言竹衣海目砂三薄書婚行舌心腹角衣都問緒政否途事彩客尾老明頭寒肉途篇得偏全意衷質心頭履始狗簡国蘭若人穏腸衣故陵耳略論木飲面夫案是城子天事字";
  --chars-3:"白零不立浄之多頂定三疾不泰味啓亡躍相自愛三曲存良三八流軒之慶坊長之諾無直同奈無夜三茶晩欠捉月解過絶之之妄花一四当碧神童両一傾恒渇井半一暮多浮傾遠奮落無一制飛供之始無一腹深珍三世一伽地無小還之令端粗肉三龍之講玉盗之篤三効時千一乗石之隻無之鬼衆噛各一無之相天八攻断大北頓低無卓李之振順共分万皆利自無引一故自不必集説葬玉楽情一離怪霧半之一徒転外直之浅之幽大陸両万風之酌努五三喝大衝内暮入千三世多両自未息革比後紛通無桃無相果全算托今御盛自水帯腹阿滑勝実之奮不之千弾不上一五之高無内之無勘四環自文歳未好之苦消無明精万髪虎氷迎之蓋窺無汲相之多割青私凝哀之鳴之異北長尚外河落未登輔五同一添一抗仏累長直魁代概佳内一流多無牛奇偏万到九即雲之身堂暁無冬同定野衝反瓢尚百即刻万補相千一竿殺北狗骨守溌会之風自長之之尺三応謝分自水疾夢賊万中両試万教二相即浄破無流滅往代済一無争一適一砕八合流万連高両朝凡三満美空暖多舎息応主難術落飽抗孫百文節天全成十水雷求之之果道異一石本大模奉観霧居多与閑殺不之無束思可整身近苦補気十蒲万名東吉猛百一四無苦之非一花之無投之往之不遊狼痛之垢近薄不依合地貫之架近転無一無無無乾神恭不同暴阻大四来手両考撃木可自縦転鮮嫌同潔済不上一濫火牛相漢自合之傍三乱夢之貯無努学坐錯勉大万万千塗淘狼満之千充選鼎宝万主可独喪至錯之吐冷奪再添宰不山暦如錦協紙之周多三一怪不一撞小楼均銀蒼之動一転射有壮転商無止絶之回無之落兎糾懲空顕骨郎正制無南事朗失序一湯兼纏蛇絶九不一万見滅辛楽去万八有来同不氷鳴行浄遼乙独良粛蒙八不多同同両動進一妄雌不仏戴八無去発耳山成方奔一佳当末一日雑之之大楚墨一拙劣剛多骨高辛相壮永無併錬憎錯漠不苦同撞得手孤繍来貧堅危随玉者我自三遠丁正昇揚成反悪心流兼暗同無一無霧一照雀之秩戦年無夜得径自分棒不淡婦七縦透不軽塗一不即自一蜜社定未力恐休豹無両明強不千文不望楽雨薄一要実一価錯瓦津一太下発自亡無茶半八放一馬愛知守飛浦自馬放瓦清不名索栄同之肥韻百一玩団三浄非弾木矛之準吉翼紙方一不巷意泡相一非激半全恢無清哀尺応満変之迅団烈六万蒼後獣一気会転択木投先半必夢黒修卓暮精移誠一不坦千一東之済振正月進乱膏多雀挽専盗金一時重半弱生姑之専北無無無薄済塗架自之無猛警友北左冷令草小瞭秋即愚秀懸鳴投転十利分之短人成打折十洋一甘大之不之粗不事求麗之代女妙処無風自無足昨一満迅返暮利不之連一思不之之開大洋辞必事万四画択生評万実祈九之強堂辞春出入万風未兼西頻心一自果緩万黙心自潔致混三坑斉三依妄一恵無倒看之阿絶八美多万奇垂斉同扶索兄遅邪半集推玉三一半道徹無濫付徒白奮指思流両移撫狗寡正大異趣発千不之外工堅手自塞荒嘗飯層伏天鉄伯無復奇低必世無雑疎一徹日喜天連片叫直不斉非鴻肉一之平八接之男月之緑布乳竜背具閑滅無奄伝膏霧術保不坐野一寂騒賢求三勝光李妻過白熟";
  --chars-4:"夢抜願顔羅眉白止銘動呼卑日昔孫志揮中転句危倍仰舌魚番行倒想面子命省秋断双縛屋世胆際目栄触養心中考心茶頼盟慮蒙偏能鬼四恐得面致体道二在民壁身疑明横果非律範性党帆花味礼銭智差舞令如背易歩謝視客等飯効俗楽走鐘壁寂照小酒遅才机断人長張語会衡解麻斗嘆証計理万貫金磨異才欲背転金独流量帆墨城子寸分忠着計滅倒体妙主択知中出攻行衣雨尾命徹浄日様端意花恥袋弱折魔相繍三大終天里剛横事針想緒腸楽土才抜夢年雷枝党宝歳気寧段口夕闘棟街金仁歎成丈陰敗生通月数月造合行影厘顧言賞楽壁里累水明堂身音拠礼到申盲火猫制順尽下年伽急定船体句歩脱背風割山余命到水憂心変人誤明西地月没下死考弔同月苦琴源清岐誤悟畳味事肉清天懐漠報苦輪帰羅一得機直回仙銭好題満長鋭面言夢味生是策致牛珠面生養朗墨境揚女寿動落親様嘆識麗想極異過急弱遠才風世合戦足命愛屑大在祷皮苦兵敢猪窮然化万恨断結放足鶴敵動勢堂略色奇屋行洋色楼労呑闘亡土夕一性顧采固才角飯文形説沈着畏力楽華行里食底人水天土蓮変寂在交論嫉冠闘行黙代抜恥奄犯壁錐日苦励念羊人息幻明来用肴刻霊生生説苦道言市地方天美羊援友決食舞説蓬来党籍戒解奪然説決燥索才答説字備水契稽壊適苦寿千絶津消頭済非率意壌達谷人聞命木世志難風手明日拳量理足敵問信飯義句算起汰難夜里轄読四立祭異酌復臣入同志命悪労然急目交意水発噌発人鋭頭失亡抜若迅象語拝律勇戸路斗界草振獄切除然和到薬尊鬼列退固遇柄牢語罰狗秋飲照薬実雑歳決失躍合藍外盗芋山重帽事成里根発脚倒吟着易答公新千漢被帯地行信考用鳥中在径道傘民板労落動象私剛丈縄三乏一垢来薄論徹落益仲林裂説弁筆事乱地母遍就達双敵寸悪中縁紅皮字然供正論鶴踏実草城勝足毒木往木世温乏膚心実衰宝身断久天猿患直鐘隣蚊舟得眼動馬世量様紛私虎倒務喚昂地語諦飾離士業夷楽節盾曲宇源漠才鵠剣雁人休面白心憐議記市励句臥歌食士衷帯入礼労変手月抜速影命用割害体金短断絶明衰鳴民出恢行千会喪欠大揚策食死思長伝肴離安雲閣行礼弟水嘆小字木双功策衆管序条海散存下石病入平反睡力宝尾重月実迷成題伝陣健滅風生然釘麗城所尽賛進後起正月売患改術魂覚随散日翼泉果面二心菜転規風落裂目生日勢退定典比雨臭成食業多然客急度友語静低灰沈五情食車蔵陰若価水助観易息山益中爪行恥利棄病憂速辺儒源松目達失家心鶏綿笑人鼠土木惜郷非倹新声天臭想双閃国明番功理化胎大定皮躍友秋昧中懐賦断然通苦度語珠倍雄端髪長栄己食考早食心苦段吉凡結聞四尊観鴎耶蓄書骨災策劫歴怪存下辺金珠答夢伝妻火足満碍戒新離実省遷雨日生能生髄貫目踏来来視居眼快衣夫筆伝難水地進語道呂閑放扇賢長到灯友浦釈通態食縫領寒弛斎象活後食道離退心目同魔中心偉師生羊夢端令大物別生九正行舌毛諾放力却勝誉断神常実愛私苦誠悲災夢才壁食問用行駁鋭外茶中葉然語短塵値立池始剣変臥所退天居首倒別狽承徹熱中馬学嶺集上俗備決念節変謝実結夢語";
  --n-chars:1162;
}

body {
  background-color:#CCFFFF;
}

#title {
  color:#CC0000;
  font-size:large;
  font-weight:bold;
  text-align:center;
}

#start-1, #start-2, #start-init, #stop-1, #stop-2, #stop-init {
  display:none;
}

#base1 {
  width:220px;
  height:58px;
  margin-left:auto;
  margin-right:auto;
  background-color:#006600;
  font-size:36px;

  --pos-run-1:0;
}

#base2 {
  position:relative;

  --pos-run-2:0;
}

.char {
  position:absolute;
  top:4px;
  width:50px;
  height:50px;
  overflow:clip;

  --state-init-1:paused;
  --state-init-2:paused;
  animation:pos-init-1 var(--init-rnd) steps(var(--n-chars), jump-none) infinite var(--state-init-1),
            pos-init-2 var(--init-rnd) steps(var(--n-chars), jump-none) infinite var(--state-init-2);

  --w-1:calc(var(--pos-init-1) + var(--pos-run-1) + var(--pos-stop1-1) + var(--pos-adj-1));
  --w-2:calc(var(--pos-init-2) + var(--pos-run-2) + var(--pos-stop1-2) + var(--pos-adj-2));
  --quot-1:calc(var(--w-1) / var(--n-chars) + 0.5);
  --quot-2:calc(var(--w-2) / var(--n-chars) + 0.5);
  --pos-1:calc(var(--w-1) - var(--quot-1) * var(--n-chars));
  --pos-2:calc(var(--w-2) - var(--quot-2) * var(--n-chars));

  --pos-stop1-1:0;
  --pos-stop1-2:0;
  --pos-adj-1:0;
  --pos-adj-2:0;
}

#char-1 {
  left:4px;

  --pos-stop-to:3;
  --init-rnd:10s;
}

#char-2 {
  left:58px;

  --pos-stop-to:6;
  --init-rnd:11s;
}

#char-3 {
  left:112px;

  --pos-stop-to:9;
  --init-rnd:12s;
}

#char-4 {
  left:166px;

  --pos-stop-to:12;
  --init-rnd:13s;
}

.prev-char {
  position:absolute;
  left:0;
  top:0;
  width:50px;
  height:50px;
  overflow:clip;
  visibility:hidden;
  will-change:transform;  /* Google Chrome のため */
}

:is(.char, .prev-char)::before {
  position:absolute;
  left:0;
  top:0;
  width:50px;
  height:calc(7px + (var(--n-chars) + 2) * 50px);
  background-color:white;
  writing-mode:vertical-lr;
  padding-top:7px;
  letter-spacing:14px;
  line-height:50px;
  transform:translateY(calc(var(--pos) * 50px));
}

.char::before {
  will-change:transform;  /* Google Chrome のため */
}

:is(#char-1, #prev-char-1)::before {
  content:var(--chars-1);
}

:is(#char-2, #prev-char-2)::before {
  content:var(--chars-2);
}

:is(#char-3, #prev-char-3)::before {
  content:var(--chars-3);
}

:is(#char-4, #prev-char-4)::before {
  content:var(--chars-4);
}

#button {
  position:relative;
  width:6em;
  margin:0 auto;
  font-size:large;
  text-align:center;

  --start-alt:1;
  --stop-alt:1;
}

.button, .mask {
  position:absolute;
  left:0;
  top:0;
  width:6em;
  background-color:gainsboro;
  padding:6px 0;
  border-radius:3px;
  user-select:none;
}

.button {
  display:block;
  color:black;
}

.mask {
  color:gray;
}

.button:hover {
  background-color:lightgray;
}

#start-1-l {
  z-index:calc(var(--start-alt) * var(--stop-alt));
}

#start-2-l {
  z-index:calc((1 - var(--start-alt)) * (1 - var(--stop-alt)));
}

#stop-1-l {
  z-index:calc((1 - var(--start-alt)) * var(--stop-alt));
}

#stop-2-l {
  z-index:calc(var(--start-alt) * (1 - var(--stop-alt)));
}

:is(#start-1, #stop-1):checked ~ #base1 {
  animation:pos-run-1 calc(var(--n-chars) * 300ms) linear infinite 200ms;  /* ディレイは Google Chrome のため */
}

:is(#start-2, #stop-2):checked ~ #base1 #base2 {
  animation:pos-run-2 calc(var(--n-chars) * 300ms) linear infinite 200ms;  /* ディレイは Google Chrome のため */
}

#stop-1:checked ~ #base1 {
  /* :is(#start-1, #stop-1):checked ~ #base1 の animation-play-state を上書きする */
  animation-play-state:paused;
  --pos-run-int-1:calc(var(--pos-run-1) + 0.5);  /* pos-run-1 の整数部 + 1 */
}

#stop-2:checked ~ #base1 #base2 {
  /* :is(#start-2, #stop-2):checked ~ #base1 #base2 の animation-play-state を上書きする */
  animation-play-state:paused;
  --pos-run-int-2:calc(var(--pos-run-2) + 0.5);  /* pos-run-2 の整数部 + 1 */
}

#start-init:checked ~ #base1 #base2 .char {
  --state-init-1:running;
}

#stop-1:checked ~ #base1 #base2 .char {
  --pos-stop1-1:var(--pos-stop-to);
  --pos-stop2-1:1;
  transition:--pos-stop1-1 calc(var(--pos-stop-to) * 300ms) linear,
             --pos-stop2-1 300ms linear calc(var(--pos-stop-to) * 300ms);
  --pos-adj-1:min(var(--pos-stop2-1), var(--pos-run-int-1) - var(--pos-run-1));

  --state-init-2:running;
}

#stop-2:checked ~ #base1 #base2 .char {
  --pos-stop1-2:var(--pos-stop-to);
  --pos-stop2-2:1;
  transition:--pos-stop1-2 calc(var(--pos-stop-to) * 300ms) linear,
             --pos-stop2-2 300ms linear calc(var(--pos-stop-to) * 300ms);
  --pos-adj-2:min(var(--pos-stop2-2), var(--pos-run-int-2) - var(--pos-run-2));

  --state-init-1:running;
}

#start-1:checked ~ #base1 #base2 .char {
  /* #stop-2:checked ~ #base1 #base2 .char の --state-init-1 を上書きする */
  --state-init-1:paused;
}

#start-2:checked ~ #base1 #base2 .char {
  /* #stop-1:checked ~ #base1 #base2 .char の --state-init-2 を上書きする */
  --state-init-2:paused;
}

/* 初期状態で「四字熟語」を表示するため */
#stop-init:checked ~ #base1 #base2 .char::before {
  --pos:calc(-1 - var(--n-chars));
}

#start-1:checked ~ #base1 #base2 .char::before {
  --pos:var(--pos-1);
}

#start-2:checked ~ #base1 #base2 .char::before {
  --pos:var(--pos-2);
}

#start-1:checked ~ #base1 #base2 .char .prev-char {
  animation:prev-1 500ms step-start;
  transform:translateY(calc(var(--pos-run-1) * 50px));
}

#start-2:checked ~ #base1 #base2 .char .prev-char {
  animation:prev-2 500ms step-start;
  transform:translateY(calc(var(--pos-run-2) * 50px));
}

#start-1:checked ~ #base1 #base2 .char .prev-char::before {
  --pos:var(--pos-2);
}

#start-2:checked ~ #base1 #base2 .char .prev-char::before {
  --pos:var(--pos-1);
}

/* 初期状態で「四字熟語」を表示するため */
#stop-init:checked ~ #base1 #base2 .char .prev-char::before {
  /* #start-1:checked ~ #base1 #base2 .char .prev-char::before の --pos を上書きする */
  --pos:calc(-1 - var(--n-chars));
}

#start-1:checked ~ #button {
  --start-alt:0;
}

#stop-1:checked ~ #button {
  --stop-alt:0;
}

#start-1:checked ~ #button #mask1-1 {
  animation:mask 500ms step-start;
}

#start-2:checked ~ #button #mask1-2 {
  animation:mask 500ms step-start;
}

#stop-1:checked ~ #button #mask2-1 {
  animation:mask calc(13 * 300ms) step-start;
}

#stop-2:checked ~ #button #mask2-2 {
  animation:mask calc(13 * 300ms) step-start;
}

-->
</STYLE>

</HEAD>

<BODY>
<BR><BR>
<DIV ID="title">スタイルシート 四字熟語ジェネレータ</DIV>
<BR><BR>

<INPUT TYPE=RADIO NAME="start" ID="start-1">
<INPUT TYPE=RADIO NAME="start" ID="start-2">
<INPUT TYPE=RADIO NAME="start" ID="start-init" CHECKED>
<INPUT TYPE=RADIO NAME="stop" ID="stop-1">
<INPUT TYPE=RADIO NAME="stop" ID="stop-2">
<INPUT TYPE=RADIO NAME="stop" ID="stop-init" CHECKED>

<DIV ID="base1">
<DIV ID="base2">
<DIV ID="char-1" CLASS="char">
<DIV ID="prev-char-1" CLASS="prev-char"></DIV>
</DIV>
<DIV ID="char-2" CLASS="char">
<DIV ID="prev-char-2" CLASS="prev-char"></DIV>
</DIV>
<DIV ID="char-3" CLASS="char">
<DIV ID="prev-char-3" CLASS="prev-char"></DIV>
</DIV>
<DIV ID="char-4" CLASS="char">
<DIV ID="prev-char-4" CLASS="prev-char"></DIV>
</DIV>
</DIV>
</DIV>

<BR><BR>

<DIV ID="button">
<DIV ID="mask1-1" CLASS="mask">ストップ</DIV>
<DIV ID="mask2-1" CLASS="mask">ストップ</DIV>
<DIV ID="mask1-2" CLASS="mask">ストップ</DIV>
<DIV ID="mask2-2" CLASS="mask">ストップ</DIV>
<LABEL ID="start-1-l" FOR="start-1" CLASS="button">スタート</LABEL>
<LABEL ID="stop-1-l" FOR="stop-1" CLASS="button">ストップ</LABEL>
<LABEL ID="start-2-l" FOR="start-2" CLASS="button">スタート</LABEL>
<LABEL ID="stop-2-l" FOR="stop-2" CLASS="button">ストップ</LABEL>
</DIV>

</BODY>

</HTML>