position: absolute;
top: 0;
left: 0;
}*/
/*
.vote input[type="image"]:hover {<*×××input[type="image"].vote:hover×××*>
opacity: 0.50;
}*/
.vote a:hover {
opacity: 0.50;
}
/*受話器の操作(小)*/
.awlcallup {
position: relative;
}
.awlcallup .inn:hover:after {
cursor:pointer;
content: url(images/aw/callup.jpg);
position: absolute;
top: 0;
left: 0;
}
.awlcallup .inn:focus:after {
content: url(images/aw/callup2.jpg);
position: absolute;
top: 0;
left: 0;
}
.awlcalldown {
position: relative;
}
.awlcalldown .inn:hover:after {
cursor:pointer;
content: url(images/aw/calldown.jpg);
position: absolute;
top: 0;
left: 0;
}
.awlcalldown .inn:focus:after {
content: url(images/aw/calldown2.jpg);
position: absolute;
top: 0;
left: 0;
}
.awlcallmissed {
position: relative;
}
.awlcallmissed .inn:hover:after {
cursor:pointer;
content: url(images/aw/missed.jpg);
position: absolute;
top: 0;
left: 0;
}
.awlcallmissed .inn:focus:after {
content: url(images/aw/missed2.jpg);
position: absolute;
top: 0;
left: 0;
}
/*受話器の操作(大)*/
.callupB0 {
position: relative;
}
.callupB0 .inn:hover:after {
cursor:pointer;
content: url(images/myp0/callupB.jpg);
position: absolute;
top: 0;
left: 0;
}
.callupB0 .inn:focus:after {
content: url(images/myp0/callup2B.jpg);
position: absolute;
top: 0;
left: 0;
}
.callupB1 {
position: relative;
}
.callupB1 .inn:hover:after {
cursor:pointer;
content: url(images/myp1/callupB.jpg);
position: absolute;
top: 0;
left: 0;
}
.callupB1 .inn:focus:after {
content: url(images/myp1/callup2B.jpg);
position: absolute;
top: 0;
left: 0;
}
.callupB2 {
position: relative;
}
.callupB2 .inn:hover:after {
cursor:pointer;
content: url(images/myp2/callupB.jpg);
position: absolute;
top: 0;
left: 0;
}
.callupB2 .inn:focus:after {
content: url(images/myp2/callup2B.jpg);
position: absolute;
top: 0;
left: 0;
}
.calldownB0 {
position: relative;
}
.calldownB0 .inn:hover:after {
cursor:pointer;
content: url(images/myp0/calldownB.jpg);
position: absolute;
top: 0;
left: 0;
}
.calldownB0 .inn:focus:after {
content: url(images/myp0/calldown2B.jpg);
position: absolute;
top: 0;
left: 0;
}
.calldownB1 {
position: relative;
}
.calldownB1 .inn:hover:after {
cursor:pointer;
content: url(images/myp1/calldownB.jpg);
position: absolute;
top: 0;
left: 0;
}
.calldownB1 .inn:focus:after {
content: url(images/myp1/calldown2B.jpg);
position: absolute;
top: 0;
left: 0;
}
.calldownB2 {
position: relative;
}
.calldownB2 .inn:hover:after {
cursor:pointer;
content: url(images/myp2/calldownB.jpg);
position: absolute;
top: 0;
left: 0;
}
.calldownB2 .inn:focus:after {
content: url(images/myp2/calldown2B.jpg);
position: absolute;
top: 0;
left: 0;
}
/*ログイン画面*/
.cp_iptxt {
position: relative;
width: 100%;
margin: 7px 0px 7px 0px;/*40px 3%;*/
}
.cp_iptxt input[type='text'] {
font: 15px/24px sans-serif;
box-sizing: border-box;
width: 100%;
letter-spacing: 1px;
padding-left: 140px;/*4em;*/
}
.cp_iptxt input[type='password'] {
font: 15px/24px sans-serif;
box-sizing: border-box;
width: 100%;
letter-spacing: 1px;
padding-left: 140px;/*4em;*/
}
.cp_iptxt input[type='text']:focus {
outline: none;
}
.cp_iptxt input[type='password']:focus {
outline: none;
}
.cp_iptxt .ef {
padding: 7px 5px 7px 0px;/*[上][右][下][左]*/
transition: 0.4s;
border: 1px solid #008080;/*#1b2538;*/
background: transparent;
}
.cp_iptxt .ef ~ .focus_line:before,
.cp_iptxt .ef ~ .focus_line:after {
position: absolute;
top: -1px;
left: 50%;
width: 0;
height: 0px;/*線の太さ*/
content: '';
transition: 0.4s;
background-color: #008080;/*#da3c41;*/
}
.cp_iptxt .ef ~ .focus_line:after {
top: auto;
bottom: 0;
}
.cp_iptxt .ef ~ .focus_line i:before,
.cp_iptxt .ef ~ .focus_line i:after {
position: absolute;
top: 50%;
left: 0;
width: 0px;/*線の太さ*/
height: 0;
content: '';
transition: 0.6s;
background-color: #008080;/*#da3c41;*/
}
.cp_iptxt .ef ~ .focus_line i:after {
right: 0;
left: auto;
}
.cp_iptxt .ef:focus ~ .focus_line:before,
.cp_iptxt .ef:focus ~ .focus_line:after,
.cp_iptxt.ef ~ .focus_line:before,
.cp_iptxt.ef ~ .focus_line:after {
left: 0;
width: 100%;
transition: 0.4s;
}
.cp_iptxt .ef:focus ~ .focus_line i:before,
.cp_iptxt .ef:focus ~ .focus_line i:after,
.cp_iptxt.ef ~ .focus_line i:before,
.cp_iptxt.ef ~ .focus_line i:after {
top: -1px;
height: 100%;
transition: 0.6s;
}
.cp_iptxt .ef ~ label {
position: absolute;
z-index: -1;
top: 10px;
left: 14px;
width: 100%;
transition: 0.3s;
letter-spacing: 0.5px;
color: #545454;/*#aaaaaa;*/
}
.cp_iptxt .ef:focus ~ label,
.cp_iptxt.ef ~ label {
font-size: 16px;
font-family: 'Kosugi Maru', 'ＭＳ ゴシック';/*追加*/
letter-spacing: 1px;/*追加*/
top: -20px;
left: 0;
transition: 0.3s;
color: #545454;/*#da3c41;*/
}
[id^="pop-up3i"] { /*各答弁者(0~39)ノ＋*/
display: none;
}
[id^="pop-up3i"] + .overlay {
display: none;
}
[id^="pop-up3i"]:checked + .overlay {
display: block;
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0);
}
[id^="stsMyFavorite"] a:hover {
opacity: 0.50;
}
.countdown {
padding: 20px;
text-align: center;
border-radius: 5px;
font-size: 2rem;
color: #fff;
background-color: #000;
}
.onoff {
position: relative;
padding-right: 5px;
}
.onoff:hover {
cursor:pointer;
opacity: 0.50;
}
.onoff:focus:after {
content: url(images/onoff2.png);
position: absolute;
top: 0;
left: 0;
}
.osu2 {
position: relative;
}
.osu2:hover {
cursor:pointer;
opacity: 0.50;
}
.osu2:focus:after {
content: url(images/osumae2a.png);
position: absolute;
top: 0;
left: 0;
}
.osu3 {
position: relative;
}
.osu3:hover {
cursor:pointer;
opacity: 0.50;
}
.osu3:focus:after {
content: url(images/osumae3a.png);
position: absolute;
top: 0;
left: 0;
}
/* https://gorigoricode.com/css-fadein/ */
.fade {
animation-name: fadeIn;/*keyname*/
animation-duration: 5s;/*再生時間*/
/*animation-iteration-count:infinite; 繰り返し*/
}
@keyframes fadeIn { /*animation-nameで設定した値を書く*/
0% { opacity: 0; transform: translateY(-100px); } /*アニメーション開始時は不透明度0%*/
100% { opacity: 1; transform: translateY(0); } /*アニメーション終了時は不透明度100%*/
}
/* 青赤ボタン */
.toggle-button-cover {
display: table-cell;
position: relative;
width: 200px;
height: 70px;/*140*/
box-sizing: border-box;
}
.button-cover {
height: 55px;/*100*/
margin: 11px;/*20*/
/*background-color: #fff;*/
/*box-shadow: 0 10px 20px -8px #c5d6d6;*/
border-radius: 4px;
}
.button-cover:before {
counter-increment: button-counter;
content: counter(button-counter);
position: absolute;
right: 0;
bottom: 0;
color: #d7e3e3;
font-size: 12px;
line-height: 1;
padding: 5px;
}
.button-cover,
.knobs,
.layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.button {
position: relative;
top: 50%;
width: var(--haba);/*74px;*/
height: 36px;
margin: -20px auto 0 auto;
overflow: hidden;
}
.button.r,
.button.r .layer {
border-radius: 100px;
}
.button.b2 {
border-radius: 2px;
}
.checkbox {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 3;
}
.knobs {
z-index: 2;
}
.layer {
width: 100%;
background-color: #BAD3FF;/*ebf7fc*/
transition: 0.3s ease all;
z-index: 1;
}
#button-10 .knobs:before,
#button-10 .knobs:after,
#button-10 .knobs span {
position: absolute;
top: 4px;
width: var(--wi);/*20px;*/
height: var(--he);/*10px;*/
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 9px 4px;
border-radius: 2px;
transition: 0.3s ease all;
}
#button-10 .knobs:before {
content: "";
left: 4px;
background-color: #03a9f4;
}
#button-10 .knobs:after {
content: ""; /*NO*/
right: 4px;
color: #4e4e4e;
}
#button-10 .knobs span {
display: inline-block;
left: 4px;
color: #fff;
z-index: 1;
}
#button-10 .checkbox:checked + .knobs span {
color: #4e4e4e;
}
#button-10 .checkbox:checked + .knobs:before {
left: 42px;
background-color: #f44336;
}
#button-10 .checkbox:checked + .knobs:after {
color: #fff;
}
#button-10 .checkbox:checked ~ .layer {
background-color: #fcebeb;
}
/*黒:受話器の操作(小)*/
.aglcallup {
position: relative;
}
.aglcallup .inn:hover:after {
cursor:pointer;
content: var(--callup);
/*content: url(images/ag/callup.jpg);*/
position: absolute;
top: 0;
left: 0;
}
.aglcallup .inn:focus:after {
content: var(--callup2);
/*content: url(images/ag/callup2.jpg);*/
position: absolute;
top: 0;
left: 0;
}
.aglcalldown {
position: relative;
}
.aglcalldown .inn:hover:after {
cursor:pointer;
content: var(--calldown);
/*content: url(images/ag/calldown.jpg);*/
position: absolute;
top: 0;
left: 0;
}
.aglcalldown .inn:focus:after {
content: var(--calldown2);
/*content: url(images/ag/calldown2.jpg);*/
position: absolute;
top: 0;
left: 0;
}
.aglcallmissed {
position: relative;
}
.aglcallmissed .inn:hover:after {
cursor:pointer;
content: var(--missed);
/*content: url(images/ag/missed.jpg);*/
position: absolute;
top: 0;
left: 0;
}
.aglcallmissed .inn:focus:after {
content: var(--missed2);
/*content: url(images/ag/missed2.jpg);*/
position: absolute;
top: 0;
left: 0;
}
/*
ではクリックでカーソルが表示される 参)は問題なし*/
.caretx {
border: 1px solid #999;
}
.caretx td{
border: 1px solid #999;
padding: 3px;
}
.carety td{
border: 1px solid rgba(200,200,200,0.0);
padding: 0px;
}
.bg-checkbox {
/*
margin-bottom: 1rem;*/
}
.bg-checkbox input[type=checkbox] {
position: relative;
cursor: pointer;
width: 11px;
height: 11px;
margin-top: 0px;/*1→0で上に1px間ができたものの問題なし*/
border-radius: 3px;
background-color: #ddd;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
transition: .3s;
}
.bg-checkbox input[type=checkbox]:checked {
background: #439fc6;
}
.bg-checkbox input[type=checkbox]:checked::before {
position: absolute;
padding: 4px;
color: white;
/*
font-family: "Font Awesome 5 Free";*/
font-weight: 900;
font-size: 10px;
/*
content: '\f00c';*/
content: '';
}
/*Ads*/
.adsFly {
cursor:pointer;
content: url(images/ads/fly.gif);
width: 80px;
height: 44px;
}
.adsSeven {
cursor:pointer;
content: url(images/ads/ladybug.gif);
width: 80px;
height: 16px;
}
.adsFrog {
cursor:pointer;
content: url(images/ads/frog.gif);
width: 80px;
height: 31px;
}
.adsFly, adsSeven, adsFrog a {
text-decoration: none;
}