html{background-color: white;}
body {background-color:#eee;margin:0 auto;font-size: 18pt;font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif !important;color: #444;font-size: 20pt;background-color: gray;position: relative;text-align: center;width: 800px;}
body.PC{width: auto;}

.PC #contents,.TB #contents{margin: auto;text-align: center;position: relative;}
.PC #contents img,.TB #contents img{margin: auto;text-align: center;width: 100%;}
.PC #contents>div,.TB #contents>div{position: absolute;bottom: 0;width: 100%;/*! left: 50%; */}
#contents .title{position: absolute;width: 100%;text-align: center;color: #ffffffe8;text-shadow: 2px 8px 5px rgb(0, 0, 0);font-weight: bold;bottom: unset;}
.PC #contents .title,.TB #contents .title{position: absolute;font-size: 9pt;top: 9pt;text-align: right;color: #ffffffe8;text-shadow: 2px 8px 5px rgb(0, 0, 0);font-weight: bold;bottom: unset;padding-right: 9pt;}
#contents .QR{background: url(../img/qr.png);float: left;margin: 10px;}
.PC #contents .QR,.TB #contents .QR{margin: auto;text-align: center;background: url(../img/qr.png);width: 60px;height: 60px;background-size: 60px;float: left;margin: 10px;}
.PC #contents .loginform,.TB #contents .loginform{width: 180px;overflow: hidden;margin-top: 30px;float: right;}
.PC #contents input,.TB #contents input{float: left;width: 110px;opacity: 0.6;}
.PC #contents button,.TB #contents button{float: left;width: 60px;opacity: 0.6;font-size: 12pt;height: 40px;margin: 0 4px;}

.SP #contents{margin: auto;text-align: center;position: relative;}
.SP #contents img{margin: auto;text-align: center;width: 100%;}
.SP #contents>div{bottom: 10px;width: 100%;}
.SP #contents .title{top: 20pt;font-size: 20pt;text-align: right;padding-right: 20pt;}
.SP #contents .QR{margin: auto;text-align: center;width: 120px;height: 120px;background-size: 120px;position: absolute;bottom: 30px;left: 10px;}
.SP #contents .loginform{float: left;width: 280px;font-size: 20pt;height: 60px;position: absolute;bottom: 40px;right: 0;}
.SP #contents input{float: left;width: 160px;font-size: 20pt;height: 60px;}
.SP #contents button{float: left;margin: 0 4px;}


contents{width:800px;display: block;margin: auto;background-color: white;}
contents.top{background: url(../img/top_pic800.jpg) no-repeat;height: 1200px;}

#topimg{margin: auto;text-align: center;}


h1,h2,h3,h4,h5,h6{margin: 0;font-size: 20pt;font-weight: bold;}
a{text-decoration: none;}
div,input{box-sizing: border-box;}
p{margin: 0;}

input,textarea{}
input,textarea{display: block;margin: auto;background-color: white;border: 1px solid blue;border-radius: 6px;font-size: 16pt;padding: 2px 8px;height: 40px;}
input-div{}
button,push-button{border: 1px solid #666;font-size: 16pt;height: 60px;display: block;text-align: center;/*! line-height: 60px; */width: 100px;/*! background-color: #fff4ca; */border-radius: 5px;box-sizing: border-box;background-color: #515151;color: #eee;}
button.disable{opacity: 0.4;color: gray;}
button.check_on{background: url(../img/check.png) no-repeat 10px;}
button.check_on,button.check_off{width: 60px;background-color: white;border: 6px solid #ffdc56;}

#contents-head{position: fixed;z-index: 1;width: 800px;background-color: #000000d6;padding: 6px 4px;}
#contents-head>div{}
#contents-head button,#contents-head>div>div{margin: 0 2px;float: right;width: 170px;}
#contents-body{padding: 70px 10px 10px;position: relative;z-index: 0;min-height: 800px;background-color: #0b2151;}
#contents-head_left{float: left;}
#contents-head_right{float: right;}
.no_thread{color: white;font-size: 18pt;padding: 20pt;}

#ctrl_panel{background-color: white;width: 500px;margin: 10px auto;border: 2px solid silver;text-align: left;font-size: 16pt;}

#ctrl_panel.exhg_pw{}
#ctrl_panel.exhg_pw .button_wrap{text-align: center;overflow: hidden;}
#ctrl_panel.exhg_pw .button_wrap button{margin: 0 auto;float: none;}
#ctrl_panel.exhg_pw>div{width: 100%;padding: 10px 20px;}
#ctrl_panel.exhg_pw>div>div{float: left;}
#ctrl_panel.exhg_pw>div>button{float: right;margin-top: 30px;}
#ctrl_panel.exhg_pw>div>div:last-child{padding-left: 10px;}
#ctrl_panel.exhg_pw>div>div:last-child>*{float: left;}
#ctrl_panel.exhg_pw button{width: 120px;}

#ctrl_panel.make_th{}
#ctrl_panel.make_th>div{width: 100%;/*! margin: 0 auto 30px auto; */float: none;padding: 10px;}

#ctrl_panel.make_th input{width: 100%;}

#ctrl_panel.exhg_pw input{width: 300px;margin-right: 10px;}
#ctrl_panel.make_th .push-button_wrap{width: 370px;margin: auto;}
#ctrl_panel.exhg_pw .push-button_wrap{width: 200px;margin: auto;}

#ctrl_panel ctrl_panel_foot{display: block;overflow: hidden;text-align: center;background-color: #e3e3e3;padding: 20px;}
.push-button_wrap push-button{margin: 0 4px;float: left !important;}

.thread{border: 2px solid silver;background-color: #4d5e84;margin: 10px 0;padding: 6px 0 0 0;border-radius: 8px;color: white;}
.test_thread{display: none;}
.bbs{text-align: left;}
.bbs>h3{padding-left: 20px;display: none;}
#bbs_body{background-color: #19387d;border: 1px solid gray;margin: 10px 4px;font-size: 14pt;color: white;border-radius: 8px;}
#bbs_body_ress>div{overflow-y: scroll;min-height: 200px;max-height: 600px;}
#bbs_body_ress{padding: 8px 0;clear: both;background-color: #2f3b55;border-radius: 8px;}
#bbs_body .res{clear: both; overflow: hidden;padding: 4px;margin: 8px 0;width: 100%;}
#bbs_body .res>div{width: 100%;overflow: hidden;}
#bbs_body+div{overflow: hidden;}
#bbs_body .res>div:first-child{width: 540px}
#bbs_body .res>div:last-child{width: 540px;}
#bbs_body .res.user>div:first-child{float: right; }
#bbs_body .res.user>div:last-child{float: right;}
#bbs_body .res.admin>div:first-child{float: left;}
#bbs_body .res.admin>div:last-child{width: 540px;}
#bbs_body .res.admin,#bbs_body .res.admin>div>div{float: left; }
#bbs_body .res.admin.del,#bbs_body .res.user.del{display: none;}
#bbs_body .res_select .res.admin.del,#bbs_body .res_select .res.user.del{display: block;}
#bbs_body .res.user,#bbs_body .res.user>div>div{float: right;}
#bbs_body .res.admin>div>div.mes{background-color: #ffff91;}
#bbs_body .res.admin.del>div>div.mes,#bbs_body .res.user.del>div>div.mes{background-color: gray;color: white;}
#bbs_body .res.user>div>div.mes{background-color: #aeffae;}
#bbs_body .res_opt{margin: 0 2px;}
#bbs_body_ress .check_off,#bbs_body_ress .check_on{display: none;}
#bbs_body_ress.res_select .check_off,#bbs_body_ress.res_select .check_on{display: block;}

#bbs_body .mes{border: 1px solid silver;padding: 4px;font-size: 18pt;min-height: 60px;color: #333;border-radius: 8px;float: left;width: 540px;}
#bbs_body .name{float: right;}
#bbs_body .adrs{float: right !important;}
#bbs_body .ip{float: left !important;}
#bbs_body .tm{float: left !important;}
#bbs_body .no{float: left !important;width: 60px;}
#bbs_body .no::before{content: '#';font-size: 0.8em;}

#bbs_body_ctrl{border-bottom: 1px solid gray;overflow: hidden;padding: 4px;border-radius: 8px 8px 0 0;background-color: #19387d;}
#bbs_body_ctrl button{float: left;margin: 2px;width: 160px;}
#bbs_body_ctrl_okcan>div{}
#bbs_body_ctrl_okcan>div:first-child{float: left;}
#bbs_body_ctrl_okcan>div:last-child{float: right;}

#greeting{/*! margin: 40px 10px 10px auto; */width: 420px;float: left;background-color: #19387d;margin: 0 4px;border: 1px solid silver;padding: 4pt;font-size: 16pt;line-height: 28pt;}
#postform{/*! margin: 40px 10px 10px auto; */width: 330px;float: left;}
#postform h3{}
#postform>div{/*! border: 1px solid silver; */margin: 10px 4px;}
#postform>div>div{font-size: 14pt;/*! float: left; */width: 100%;text-align: left;}
#postform>div>input{/*! float: right; */width: 330px;height: 50px;box-sizing: border-box;border-color: silver;}
#postform>div>textarea{/*! float: right; */width: 330px;height: 120px;box-sizing: border-box;border-color: silver;}
#postform>div>p{clear: both;font-size: 12pt;text-align: right;}
#postform button{margin: 0 auto;width: 140px;}

thread_head,thread_foot{overflow: hidden;display: block;clear: both;}
thread_head .no{float: left;width: 130px;text-align: left;padding-left: 6px;margin-top: 10px;}
thread_head .no::before{content: '#';font-size: 0.8em;}
thread_head .title{float: left;font-weight: bold;margin-top: 10px;}
thread_head button{width: 200px;float: right;margin: 0 3px 1px 0;height: 56px;}

thread_foot .tm{float: right;/*! margin: 0 20px; */font-size: 15pt;margin: -4px 8px 0 0;}
thread_foot .tm::before{content: '作成時間:';font-size: 0.7em;}
thread_foot .pcnt{float: left;margin: -4px 0 0 20px;font-size: 15pt;}
thread_head .pcnt::before{content: 'Include';margin-right: 8px;font-size: 0.8em;}
thread_foot .pcnt::after{content: 'photo(s)';margin-left: 8px;font-size: 0.8em;}

thread_pic,#thread_page .bbs{border: 1px solid silver;overflow: hidden;display: block;border-radius: 8px;margin: 4px;background-color: #2f3b55;}

#thread_list thread_pic>div>div{width: 151px;margin: 3px 1px;}
#thread_page thread_pic>div>div{width: 378px;}
thread_pic>div>div{float: left;border: 1px solid silver;font-size: 0;margin: 4px 1px;border-radius: 8px;background-color: white;}
#thread_list thread_pic img{width: 100%;margin: 0;}
#thread_page thread_pic img{width: 371px;}
thread_pic img{margin: 1px 2px 4px 2px;border-radius: 6px;}

#thread_page thread_pic > div > div:nth-child(2n+1){clear: both;}
thread_pic .pic_buttons,thread_pic .pic_buttons_del,thread_pic .pic_buttons_move{padding: 2px 2px 4px;overflow: hidden;background-color: #19387d;border-radius: 8px 8px 0 0;}
thread_pic .pic_buttons>button,thread_pic .pic_buttons_move>button{float: left;margin: 0 2px;}
thread_pic button.download{width: 158px;}
thread_pic button.view{width: 100px;}
thread_pic button.info{width: 100px;}
thread_pic button.left{width: 180px;font-size: 20pt;}
thread_pic button.right{width: 180px;font-size: 20pt;}
thread_pic .no_pic{}
thread_pic .no_pic>p{font-size: 16pt;padding: 30px;text-align: left;color: white;}

.pic_buttons{display: block;}
.pic_buttons_del{display: none;}
.pic_buttons_move{display: none;}
.admin_del .pic_buttons{display: none;}
.admin_del .pic_buttons_del{display: block;}
.admin_del .pic_buttons_move{display: none;}
.admin_mov .pic_buttons{display: none;}
.admin_mov .pic_buttons_del{display: none;}
.admin_mov .pic_buttons_move{display: block;padding-left: 5px;}
thread_pic>div>div:first-child button.left{opacity: 0.4;color: gray;}
thread_pic>div>div:last-child button.right{opacity: 0.4;color: gray;}

#picctrl_buttons{overflow: hidden;background-color: #19387d;padding: 4px;border-bottom: 1px solid silver;border-radius: 8px 8px 0 0;}
#picctrl_buttons .buttons,#picctrl_buttons .okcan_buttons{width: 100%;padding: 2px;border: none;float: right;/*! height: unset; *//*! overflow: unset; */background-color: transparent;border-radius: 0;margin: 1px;}
#picctrl_buttons .buttons::before{content: '写真操作';display: block;font-size: 16pt;float: left;margin: 26px 4px 0 4px;font-weight: bold;}
#picctrl_buttons .buttons>div,#picctrl_buttons .buttons>button,#picctrl_buttons input{width: 100px;float: left;height: 60px;margin: 0 2px;}
#picctrl_buttons .okcan_buttons>button{width: 140px;float: right;margin: 0 1px;}
#picctrl_buttons>p{width: 450px;float: left;text-align: left;font-size: 14pt;padding: 6px;}
#picctrl_buttons .okcan_buttons{width: 292px;background-color: transparent;}
#thread_page{}
#thread_page_buttons{}
#thread_page_buttons>*{float: left;margin-right: 4px;}
#thread_page_ctrl{border: 1px solid silver;background-color: #ffffa4;padding: 6px;}

.upload_progress{margin: 4px;position: relative;height: 30px;border: 1px solid silver;/*! background-color: #4444714d; */color: blue;}
.upload_progress.error{background-color: #ffeded;border: 1px solid #710000;color: red;}
.upload_progress.error p{margin-right: 4px;font-weight: bold;font-size: 14pt;}

.upload_progress>div{position: absolute;overflow: hidden;width: 100%;line-height: 30px;}
.upload_progress>div:first-child{}
.upload_progress>div:first-child>div{float: left;padding: 0 4px;}
.upload_progress>div:first-child>div:last-child{float: right;}
.upload_progress>div:first-child>div:last-child>div{float: right;}
.upload_progress>div:first-child>div:last-child>div:first-child{}
.upload_progress>div:first-child>div:last-child>div:last-child{}
.upload_progress>div:first-child>div:last-child>div:first-child::after{content: 'Bytes uploaded.';margin: 0 4px;font-size: 0.7em;}
.upload_progress>div:first-child>div:last-child>div:last-child::after{content: '% of';margin: 0 4px;font-size: 0.7em;}
.upfile_progress{}
.upfile_progress>div{height: 30px;background-color: #0000c426;border: 1px solid blue;/*! margin-top: 8px; */}

#upload_progres{font-size: 16pt;width: 100%; !important;}
#upload_progres>div:first-child{/*! overflow: hidden; */}
#upload_alert{overflow: hidden;padding: 10px;background-color: #ce0000cc;margin: 4px;color: white;font-weight: bold;}
#upload_alert>div{padding: 8px 0 0 100px;}
#upload_alert button{float: left;width: 260px;margin: 0 2px;}

push-button_upload{}
push-button_upload>*{position: absolute;/*! width: 160px; */}
push-button_upload input{opacity: 0;}