:root{--white: #fff;--gray: #ddd;--darkblue: #19193f;--skyblue: #267299;--purple: #722699}*,*:before,*:after{box-sizing:border-box}html{font-size:16px}body{font-family:Arial,Hiragino Sans,Meiryo,sans-serif;letter-spacing:.05em;margin:0;background:linear-gradient(to top right,var(--purple),var(--darkblue),var(--skyblue));caret-color:transparent}#app{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center}.wrapper{position:relative;width:min(100% - 8vw,768px);margin-top:4vw;margin-bottom:min(16px,4vw);padding:min(64px,8vw)}.wrapper:before,.wrapper:after{content:"";position:absolute;width:100%;height:100%;border-radius:8px;mix-blend-mode:overlay;top:0;left:0}.wrapper:before{background:linear-gradient(to top right,var(--gray),#888 25% 75%,var(--gray))}.wrapper:after{box-shadow:0 0 0 2px #bbb inset}.h-m-s{position:relative;display:grid;grid-template-columns:repeat(10,1fr);align-items:flex-end;padding-bottom:min(32px,8vw)}.h-m-s:after{content:"";position:absolute;width:100%;height:2px;background-color:#bbb;mix-blend-mode:overlay;bottom:0;left:0}.h-m-s .seg-large{grid-column:1 / 9}.h-m-s .seg-medium{grid-column:9 / 11;height:50%}.y-m-d{display:flex;justify-content:space-between;align-items:center;padding-top:min(16px,4vw)}@media screen and (max-width: 480px){html{font-size:12px}}.seg-area{display:flex}.seg{position:relative;flex:1;aspect-ratio:9 / 16;margin-right:var(--seg-margin)}.seg-bar{position:absolute}.seg-a,.seg-d,.seg-g{width:calc(100% - var(--seg-weight) - var(--seg-gap));height:var(--seg-weight);clip-path:polygon(0 50%,var(--seg-half-a) 0,var(--seg-half-b) 0,100% 50%,var(--seg-half-b) 100%,var(--seg-half-a) 100%)}.seg-a{top:0;translate:-50% 0}.seg-d{bottom:0;translate:-50% 0}.seg-g{top:50%;translate:-50% -50%}.seg-a,.seg-d,.seg-g{left:50%}.seg-b,.seg-c,.seg-e,.seg-f{width:var(--seg-weight);height:calc(50% - calc(var(--seg-weight) / 2) - var(--seg-gap));clip-path:polygon(50% 0,100% var(--seg-half-a),100% var(--seg-half-b),50% 100%,0 var(--seg-half-b),0 var(--seg-half-a))}.seg-b,.seg-c{right:0}.seg-e,.seg-f{left:0}.seg-b,.seg-f{top:calc(var(--seg-half-a) + var(--seg-gap) / 2)}.seg-c,.seg-e{bottom:calc(var(--seg-half-a) + var(--seg-gap) / 2)}.seg0 .seg-bar:not(.seg-g){background-color:var(--white)}.seg1 :is(.seg-b,.seg-c){background-color:var(--white)}.seg2 .seg-bar:not(:is(.seg-c,.seg-f)){background-color:var(--white)}.seg3 .seg-bar:not(:is(.seg-e,.seg-f)){background-color:var(--white)}.seg4 :is(.seg-b,.seg-c,.seg-f,.seg-g){background-color:var(--white)}.seg5 .seg-bar:not(:is(.seg-b,.seg-e)){background-color:var(--white)}.seg6 .seg-bar:not(.seg-b){background-color:var(--white)}.seg7 :is(.seg-a,.seg-b,.seg-c){background-color:var(--white)}.seg8 .seg-bar{background-color:var(--white)}.seg9 .seg-bar:not(.seg-e){background-color:var(--white)}.colon{position:relative;margin-right:calc(var(--seg-margin) * 4)}.colon:before,.colon:after{content:"";position:absolute;width:var(--seg-margin);height:var(--seg-margin);background-color:var(--white);left:calc(100% + var(--seg-margin) * 2);translate:-50% 0}.colon:before{top:calc(var(--seg-margin) * 1.5)}.colon:after{bottom:calc(var(--seg-margin) * 1.5)}p{font-family:Zen Maru Gothic,sans-serif;color:var(--white);font-size:clamp(16px,6vw,40px);letter-spacing:.1em;line-height:1;margin:0}.lang{display:grid;grid-template-columns:1fr 1fr;margin-bottom:4vw}.lang-btn{position:relative;display:flex;justify-content:center;align-items:center;padding:1em 1.5em;color:var(--white);cursor:pointer}.lang-btn:has(input:checked){cursor:default}.lang-btn:before,.lang-btn:after{content:"";position:absolute;width:100%;height:100%;mix-blend-mode:overlay;top:0;left:0}.lang-btn:before{background-color:#afafaf}.lang-btn:has(input:checked):before{background-color:var(--gray)}.lang-btn:after{box-shadow:0 0 0 2px var(--gray) inset;opacity:0}.lang-btn:has(input:checked):after{opacity:1}.lang-btn input{appearance:none;-webkit-appearance:none;-moz-appearance:none;margin:0}.lang-btn:hover:has(input:not(:checked)):before{background-color:var(--gray)}.read-text{position:absolute;scale:0 0;bottom:0;left:50%;translate:-50% 0}