@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Hind");
html { font-size: 16px; }

body { margin: 0; }

html { font-size: 16px; }

body { background-color: #FFF; font-family: "メイリオ", sans-serif; }

body, h1, h2, h3, h4, ul, li, dl, dt, dd, figure, form, p { margin: 0; padding: 0; }

textarea { box-sizing: border-box; width: 100%; }

p { line-height: 1.75; }

a { color: #0e5394; }

a.btn2top { line-height: 1.15; text-decoration: none; background-color: #82a35d; color: #fff; border-radius: 0.2em; padding: 1em 3em 1em 4em; text-align: center; position: relative; }
a.btn2top:after { content: ""; position: absolute; top: 0; bottom: .1em; left: 1.5em; margin: auto; width: 0.75em; height: 0.75em; border-bottom: .15em solid #fff; border-left: .15em solid #fff; transform: rotate(45deg); }
a.btn2top:hover { opacity: 0.75; }

#container { position: relative; }
#container > section { margin-left: 320px; }
#container > section article { margin-bottom: 2.5em; }
#container > section > article { margin-bottom: 3.5em; }
#container > section > article div, #container > section > article article, #container > section > article section { max-width: 100%; overflow: auto; }
#container > footer { text-align: center; }

#hsidebar { width: 300px; position: fixed; top: 0; left: 0; bottom: 0; overflow: auto; background-color: #FBFBFB; }
#hsidebar header { margin: 0; padding: 10px 10px 0; min-height: 48px; }
#hsidebar header p { margin: 0; font-size: 0.75rem; text-align: right; }
#hsidebar header h1 { float: left; }
#hsidebar header h1 img { max-width: 80px; height: auto; }
#hsidebar ul { list-style: none; }
#hsidebar > ul { padding: 0 0 10px 10px; }
#hsidebar > ul > li { margin-top: 10px; }
#hsidebar > ul > li p { margin: 0 0 5px -10px; padding-left: 10px; color: #000; background-color: #EAEEE3; }
#hsidebar > ul > li span { float: right; display: inline-block; color: #333; font-size: 0.75rem; padding: 7px 7px 0; line-height: 1; }
#hsidebar > ul > li > ul { padding-left: 10px; }
#hsidebar > ul > li > ul > li { font-size: 1rem; padding-left: 20px; padding-bottom: 5px; background-position: 0 2px; background-repeat: no-repeat; line-height: 1.25; color: #333; }
#hsidebar > ul > li > ul > li span { padding: 5px 5px 0; }
#hsidebar .now { color: #35A203; background-color: #EAEAC3; }
#hsidebar .form { padding: 0 10px 10px 10px; }
#hsidebar .form input[type="text"] { width: 80%; }
#hsidebar .form button { width: 20%; }
#hsidebar .form input[type="text"], #hsidebar .form button { box-sizing: border-box; font-size: 0.875rem; line-height: 1.2; padding: 3px; }

.searchform { border: 1px solid #999; margin: 0 auto; display: flex; width: 94%; border-radius: 5px; }
.searchform input, .searchform button { -webkit-appearance: none; box-sizing: border-box; font-size: 1rem; line-height: 1; padding: 5px; border: 0 none; }
.searchform input { margin: 0; width: 88%; border-radius: 5px; }
.searchform button { width: 12%; border-left: 1px solid #999; border-radius: 0 5px 5px 0; background: #EEE url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 98.4 98.5'%3E%3Cdefs%3E%3Cstyle%3E.cls-1{fill:%23666;}%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M37,9A28,28,0,1,1,9,37,28,28,0,0,1,37,9m0-8A36,36,0,1,0,73,37,36,36,0,0,0,37,1Z' transform='translate(-1 -1)'/%3E%3Crect class='cls-1' x='73.31' y='60.41' width='14' height='40' transform='translate(-34.34 79.34) rotate(-45)'/%3E%3C/svg%3E") center center no-repeat; background-size: 16px 16px; }

.addfilter { padding-top: 0.5em; font-size: 0.75rem; }
.addfilter:hover { color: #35A203; }

#uname, #gnav { position: absolute; top: 0; margin: 0; padding: 10px 0; line-height: 1.2; font-size: 1rem; width: 230px; }

#uname { right: 10px; text-align: right; }

#gnav { left: 10px; }
#gnav a { color: #333; text-decoration: none; display: block; background: url(../images/exit.svg) 0 0 no-repeat; background-size: 16px 16px; padding-left: 20px; min-height: 16px; }

#entrys > article > h3 { font-weight: normal; font-size: 1.25rem; border-bottom: 1px solid #AAA; padding: 0 0.25em; color: #333; background-position: 0 4px; background-repeat: no-repeat; padding-left: 20px; padding-right: 50px; padding-bottom: 5px; line-height: 1.2; margin-bottom: 10px; }
#entrys .contents { font-size: 0.875rem; }
#entrys .contents img { max-width: 100%; height: auto; }
#entrys .contents a:has(.bbImage) { display: block; width: 50%; }
#entrys .contents a:has(.bbImage) img { width: 100%; }
#entrys .contents h1, #entrys .contents h2, #entrys .contents h3 { font-size: 1.25rem; font-weight: normal; }
#entrys .contents h4, #entrys .contents h5 { font-size: 1.25rem; }
#entrys .contents ul { padding-left: 2em; }
#entrys .contents blockquote { border: 1px solid #AAA; padding: 1em; margin-right: 0; margin-left: 0; }
#entrys .contents pre { white-space: pre-wrap; }
#entrys .contents a { color: #40a8c8; }
#entrys .contents p { margin: 0 0 10px; }
#entrys .contents::after { content: ""; display: block; clear: both; }
#entrys .more { border-top: 1px solid #AAA; margin-top: 10px; font-weight: normal; font-size: 0.75rem; text-align: right; }
#entrys .more a { float: left; text-decoration: none; border: 1px solid #40a8c8; color: #40a8c8; line-height: 1; padding: 2px 4px; margin: 2px 0; display: inline-block; }
#entrys article { position: relative; padding-top: 5px; }
#entrys > article > button { position: absolute; top: 3px; right: 0; color: #999; border: none; padding: 4px 10px 5px 6px; line-height: 1; border-radius: 5px 0 0 5px; background-color: #f7f7f7; font-size: 1.125rem; }
#entrys > article > button:hover { color: #ffd519; background-color: #dbdada; }
#entrys > article > button.homing { position: fixed; }
#entrys > article.marked > h3 { color: #35A203; }
#entrys > article.marked > button { color: #ffbd07; }
#entrys > article.marked > button:hover { color: #ffd519; background-color: #dbdada; }
#entrys > article.viewed { opacity: 0.75; }
#entrys > article.viewed > h3 { color: #666; }
#entrys div.closer { height: calc(100vh - 100px - 100px); display: flex; justify-content: center; align-items: center; }
#entrys div.closer p { opacity: 0.5; }

select { padding: 3px; }

input[type="text"], input[type="password"] { -webkit-appearance: none; font-size: 1rem; line-height: 1.1; padding: 6px; border: 1px solid #999; }

input[type="submit"] { -webkit-appearance: none; background-color: #c8e2aa; border: 1px solid #82a35d; font-size: 1rem; border-radius: 5px; line-height: 1.1; padding: 6px 1em; }

dl dt { color: #58481c; margin-bottom: 0.25em; letter-spacing: 0.2em; }

dl dd { margin-bottom: 1em; }

dl dd.btnbox { text-align: center; }

dl dd.btnbox input { padding: 0.25em 0.75em; }

table { border-collapse: collapse; border-top: 2px solid #000; border-bottom: 2px solid #000; width: 100%; }

table thead th { border-bottom: 2px solid #000; }

table tbody th, table tbody td { border-bottom: 1px solid #000; text-align: center; }

#qrcode { margin-bottom: 2em; }
#qrcode canvas, #qrcode img { width: 100%; max-width: 320px; height: auto; margin-left: auto; margin-right: auto; }

#copyright { text-align: center; padding: 2em 0; color: #999; }

#loginform { margin: 15vh auto 0; width: 300px; }
#loginform h1 { text-align: center; margin-bottom: 2rem; }
#loginform h1 img { width: 140px; }
#loginform dl { margin-bottom: 2em; }
#loginform dt { font-size: 0.625rem; color: #777; margin-bottom: 0.5em; }
#loginform input { width: 100%; box-sizing: border-box; }
#loginform .btnbox input { padding: 10px 1em; }

#search input[type="submit"] { margin-left: 0.25em; }

#spare #sparebtn { margin-right: auto; margin-left: auto; text-align: center; }
#spare #sparebtn strong { text-decoration: underline; color: #0e5394; font-weight: normal; }
#spare h3, #spare p, #spare form { display: none; }
#spare.show #sparebtn { display: none; }
#spare.show h3, #spare.show p, #spare.show form { display: block; }

#genaratecal input[type="submit"] { margin-left: 0.25em; }

.unlock form, .receive form { text-align: center; }
.unlock p.shopname, .receive p.shopname { margin-top: 0; text-align: center; font-size: 0.875rem; }
.unlock input[type="password"], .receive input[type="password"] { display: block; margin: 0 auto 20px; }
.unlock .btnbox, .receive .btnbox { /*周りの凹み*/ display: inline-block; position: relative; text-decoration: none; color: rgba(3, 169, 244, 0.54); width: 240px; height: 240px; border-radius: 50%; text-align: center; background: #f7f7f7; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08); box-sizing: border-box; padding-top: 20px; }
.unlock .btnbox input[type="submit"], .receive .btnbox input[type="submit"] { box-sizing: border-box; width: 200px; height: 200px; line-height: 200px; border-radius: 50%; border: none; background-image: linear-gradient(#bcf365 0%, #a3c768 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px rgba(0, 0, 0, 0.19); border-bottom: solid 2px #7f9c50; }
.unlock .result, .receive .result { text-align: center; }
.unlock .err, .receive .err { text-align: center; color: #F00; }

.popwin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1ch; position: fixed; width: 100%; height: 100%; margin: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10; top: 0; }
.popwin dl { width: 100%; max-width: 640px; }
.popwin input { width: 100%; }
.popwin .btnremove { background-color: #F00; }

@media screen and (max-width: 700px) { #uname { display: none; }
  #gnav { width: 54px; }
  #gnav a { padding-left: 0; text-align: center; padding-top: 45px; background: url(../images/exit.svg) center 10px no-repeat; background-size: 32px 32px; font-size: 0.5rem; }
  #container { overflow: hidden; width: 100vw; }
  #container > section, #container section { margin-left: 0; }
  .popwin .btnremove { max-width: 300px; }
  #hsidebar { left: -300px; }
  #hsidebar::before, #hsidebar::after { content: ""; position: absolute; top: 10px; right: -32px; background-color: #F00; width: 32px; height: 32px; display: block; }
  .menupop #hsidebar { left: 0; } }