@charset "UTF-8";

/* 変数定義 */
:root {
	--main-color: rgb(8, 152, 199);
	--main-bgcolor: rgb(16,63,95);
	--main-textcolor: rgb(245, 245, 245);
	--main-textcolor2: rgb(51, 49, 56);
	--main-accentcolor: rgb(18, 184, 223);
}

/*
#103f5f
#c36172
#12b8df
#0898c7
*/

* {
	margin: 0; padding: 0; -webkit-text-size-adjust: 100%; font-size: 13px; line-height: 1.4; box-sizing: border-box;
	font-family: "Meiryo UI", "Helvetica", "Arial", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "Verdana", sans-serif;
}

body { background-color: var(--main-bgcolor); color: var(--main-textcolor); }
a:link, a:visited, a:active { color: rgb(103, 129, 221); }
a:hover { color: rgb(236, 141, 101); }

.red { color: rgb(204, 51, 51); }
.bold { font-weight: bold;}
.mb100 { margin-bottom: 100px !important; }

div.header { width: 100%; height: 70px; display: flex; justify-content: center; align-items: center; background-color: var(--main-color); color: rgb(255, 255, 255); text-shadow: 1px 1px 1px rgb(51, 51, 51); font-size: 150%; font-weight: bold; text-align: center; line-height: 80px; margin-bottom: 20px; box-shadow: 2px 2px 4px rgb(170, 170, 170); }
img.logo { max-height: 60px; max-width: 70%; border: 0; }

div.item { width: 90%; max-width: 700px; margin: 0 auto; font-size: 115%; font-weight: bold; color: rgb(255, 255, 255); text-shadow: 1px 1px 1px rgb(51, 51, 51); background-color: var(--main-color); text-align: center; padding: 6px 2px; box-shadow: 2px 2px 4px rgb(51, 51, 51); }
div.text { width: 90%; max-width: 700px; margin: 0 auto 40px auto; padding: 8px 8px 20px 8px; color: var(--main-textcolor2); background-color: rgb(255, 255, 255); text-align: center; box-shadow: 2px 2px 4px rgb(51, 51, 51); }

/* エラー画面 */
div.error_title { width: 90%; max-width: 700px; margin: 20px auto 0 auto; color: rgb(255, 255, 255); background-color: rgb(153, 0, 34); text-align: center; padding: 6px 2px; box-shadow: 2px 2px 4px rgb(51, 51, 51); font-weight: bold; }
div.error_msg { width: 90%; max-width: 700px; margin: 0 auto 40px auto; padding: 8px 4px 20px 4px; color: var(--main-textcolor2); background-color: rgb(255, 255, 255); text-align: center; box-shadow: 2px 2px 4px rgb(51, 51, 51); }

/* ログイン画面 */
#login p { max-width: 92%; margin: 0 auto; }
#login input[type="text"], #login input[type="password"] { appearance: none; -webkit-appearance: none; display: block; width: 100%; max-width: 350px; height: 30px; border-radius: 15px; border: 1px solid rgb(224, 224, 224); padding: 0 15px; margin: 0 auto 15px auto; outline: none; }
#login input[type="text"]::placeholder, #login input[type="password"]::placeholder { color: rgb(170, 170, 170); }
#login input[type="text"]:focus, #login input[type="password"]:focus { background-color: rgb(243, 243, 255); }
#login input[type="submit"] { appearance: none; -webkit-appearance: none; display: block; cursor: pointer; width: 60%; max-width: 320px; height: 2em; font-weight: bold; color: var(--main-textcolor); background-color: var(--main-accentcolor); margin: 0 auto 25px auto; border: 0; }

#login ul { width: 450px; max-width: 90%; padding: 0.3em 0; list-style-type: none; border: 0; margin: 0 auto; }
#login ul li { position: relative; padding: 0.3em 0 0.3em 1.8em; line-height: 1.4; text-align: left; font-size: 0.9em; }
#login ul li::after, #login ul li::before { content: ''; position: absolute; }
#login ul li::after { left: -0.2em; top: 5px; width: 15px; height: 15px; background-color: var(--main-accentcolor); border-radius: 50%; }
#login ul li::before { z-index: 2; left: 2px; top: 10px; width: 4px; height: 4px; border-right: 1px solid var(--main-textcolor); border-bottom: 1px solid var(--main-textcolor); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* 設定画面 */
div.did { width: 600px; max-width: 90%; height: 30px; line-height: 30px; font-weight: bold; margin: 8px auto; color: rgb(255, 255, 255); border-radius: 15px; background-color: var(--main-accentcolor); text-shadow: 1px 1px 1px rgb(51, 51, 51); }
div.info { display: flex; width: 540px; max-width: 80%; height: 24px; margin: 8px auto; border-radius: 15px; background-color: rgb(238, 238, 238); }
div.info div.item2 { width: 150px; max-width: 25%; height: 24px; line-height: 24px; font-weight: bold; color: rgb(255, 255, 255); border-radius: 15px; background-color: var(--main-accentcolor); }
div.info div.value2 { width: 100%; max-width: 100%; height: 24px; line-height: 24px; text-align: left; padding-left: 10px; border-radius: 15px; background-color: rgb(238, 238, 238); }

div.connected, div.not_connected { width: 210px; text-align: center; margin: 5px auto 10px auto; padding: 4px 10px; border-radius: 15px; font-weight: bold; color: rgb(255, 255, 255); text-shadow: 1px 1px 1px rgb(51, 51, 51); }
div.connected { background-color: rgb(102, 221, 102); }
div.not_connected { background-color: rgb(221, 85, 85); }

form.setting input[type="text"] { appearance: none; -webkit-appearance: none; display: block; width: 100%; max-width: 350px; height: 30px; border-radius: 15px; border: 1px solid rgb(224, 224, 224); padding: 0 15px; margin: 0 auto 8px auto; outline: none; }
form.setting input[type="text"]::placeholder { color: rgb(170, 170, 170); }
form.setting input[type="text"]:focus { background-color: rgb(243, 243, 255); }
form.setting input[type="radio"] { display: none; }
form.setting .crd { box-sizing: border-box; cursor: pointer; display: inline-block; padding: 3px 4px 1px 26px; position: relative; width: auto; }
form.setting .crd::before { background: rgb(255, 255, 255); border: 1px solid rgb(51, 51, 51); border-radius: 50%; content: ''; display: block; height: 12px; left: 4px; margin-top: -6px; position: absolute; top: 50%; width: 12px; }
form.setting .crd::after { background: rgb(62, 148, 253); border-radius: 50%; content: ''; display: block; height: 8px; left: 7px; margin-top: -3px; opacity: 0; position: absolute; top: 50%; width: 8px; }
form.setting input[type="radio"] + label { width: 400px; max-width: 90%; }
form.setting input[type="radio"]:checked + .crd { color: var(--main-color); }
form.setting input[type="radio"]:checked + .crd::after { opacity: 1; }
form.setting input[type="radio"]:disabled + label { color: rgb(170, 170, 170); }
form.setting input[type="submit"] { appearance: none; -webkit-appearance: none; display: block; cursor: pointer; width: 60%; max-width: 320px; height: 2em; font-weight: bold; color: var(--main-textcolor); background-color: var(--main-accentcolor); margin: 0 auto 25px auto; border: 0; }

































/*

div.caution { font-size: 11px; }

ul { display: table; width: 96%; margin: 5px auto 5px auto; padding-top: 5px; padding-left: 10px; background-color: rgb(255, 255, 224); }
ul li { list-style-type: decimal; display: table-row; }
ul li:before { display: table-cell; padding-right: 0.4em; text-align: right; }
ul li:after { content: ""; display: block; margin-bottom: 0.6em; }
ul li:last-of-type:after { padding-bottom: 0; }

table.table1 { border-collapse: collapse; width: 90%; max-width: 400px; margin: 10px auto;}
table.table1 tr td { border: 2px solid rgb(253, 170, 62); }
table.table1 tr td.did { text-align: center; padding: 3px 6px; font-weight: bold; background-color: rgb(254, 237, 221); }
table.table1 tr td.item { padding: 3px 6px; font-weight: bold; background-color: rgb(254, 237, 221); }
table.table1 tr td.value { padding: 3px 6px; text-align: left; }



form.setting input[type="radio"] { display: none; }
form.setting input[type="text"] { margin: 5px auto; padding: 5px 10px; border: 1px solid rgb(51, 51, 51); border-radius: 3px; box-shadow: 1px 1px 1px rgb(102, 102, 102); }
form.setting input[type="text"]::placeholder { opacity: 0.4; }
form.setting .crd { box-sizing: border-box; cursor: pointer; display: inline-block; padding: 3px 4px 1px 26px; position: relative; width: auto; }
form.setting .crd::before { background: rgb(255, 255, 255); border: 1px solid rgb(51, 51, 51); border-radius: 50%; content: ''; display: block; height: 12px; left: 4px; margin-top: -6px; position: absolute; top: 50%; width: 12px; }
form.setting .crd::after { background: rgb(62, 148, 253); border-radius: 50%; content: ''; display: block; height: 8px; left: 7px; margin-top: -3px; opacity: 0; position: absolute; top: 50%; width: 8px; }
form.setting input[type="radio"] + label { width: 400px; max-width: 90%; }
form.setting input[type="radio"]:checked + .crd { font-weight: bold; color: rgb(62, 148, 253); text-decoration: underline; }
form.setting input[type="radio"]:checked + .crd::after { opacity: 1; }
form.setting input[type="radio"]:disabled + label { color: rgb(170, 170, 170); }
form.setting input[type="text"].user_name { width: 90%; max-width: 300px; }
form.setting input[type="submit"] { height: 50px; font-weight: bold; appearance: none; -webkit-appearance: none; border-radius: 25px; background: transparent; margin-bottom: 10px; padding: 0 20px; color: rgb(253, 170, 62); border: 2px solid rgb(253, 170, 62); color: rgb(253, 170, 62); cursor: pointer; box-shadow: 1px 1px 2px rgb(102, 102, 102); }
form.setting input[type="submit"]:hover { background: rgb(253, 170, 62); border: 2px solid rgb(253, 170, 62); color: rgb(255, 255, 255); -webkit-transition: 0.4s; transition: 0.4s; }
form.setting p { margin: 6px auto; }
form.setting div.choice { width: 350px; max-width: 90%; margin: 0 auto 8px auto; padding-bottom: 4px; border-bottom: 1px solid rgb(221, 221, 221); }
form.setting div.choice span { font-size: 80%; }

a.share_to_bluesky {
	font-size: 13px; color: rgb(255, 255, 255); text-decoration: none; height: 24px; display: inline-block; padding: 4px 12px; margin: 0px; border-radius: 15px;
	background: -webkit-linear-gradient(top, rgb(10, 122, 255) 0%, rgb(89, 185, 255) 100%);
	background: linear-gradient(to bottom, rgb(10, 122, 255) 0%, rgb(89, 185, 255) 100%);
	box-shadow: 1px 1px 2px rgb(102, 102, 102);
}
a.share_to_bluesky img { width: 13.8px; height: 12.2px; margin: 1px 5px auto 2px; border: 0; padding: 0; }

*/