@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:300&display=swap');

/*----- reset -----*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, 
u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, 
section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 16px;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

/*----- common -----*/
body { background-color: #fff; color: #333; font-family: 'Noto Sans JP', sans-serif; font-weight:400;font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
button, input, select, textarea {font-family : inherit;font-size : 100%;}
img{max-width: 100%;height: auto;width /***/:auto;}
::placeholder {color: #aaa;}

.clearfix:after{content:"";display:block;clear:both;}

sub{font-size:0.7em;}
.t_center,.textC{text-align:center;}
.t_right,.textR{text-align:right;}
.t_left,.textL{text-align:left;}
.t_bold {font-weight: bold;}
.img_left {float: left;margin: 5px 15px 5px 0;}
.img_right { float:right; margin:5px 0 5px 15px;}
.img_right p{ padding-bottom:5px;}
.nowrap,.tbl_nowrap{white-space: nowrap;}

article{width:calc(100% - 2em);max-width:800px;min-height:500px;margin:50px auto;}

h1{font-size:1.8em;text-align:center;margin: 50px auto;}
h2{font-size:1.2em;margin: 30px auto 0;}
table{width:100%;margin:20px auto;border-collapse: collapse;}
th,td{border:1px solid #555;padding:5px;white-space: pre-wrap;line-height: 1.5em;}
td a{margin-right: 1em;}
#tolist{margin:2em 0;text-align:center;}

#logout{margin-top:-50px;text-align:right;}
#logout a{display:inline-block;padding:10px 15px;text-decoration:none;color:#fff;background-color:#333;border-radius:4px;}

#login{width:100%;max-width: 500px; margin:80px auto;padding:30px 10px;background-color:#cce5ff;border-radius:10px;box-shadow:3px 3px 3px 1px #d8d8d8;}
#login h1{margin:0 0 20px;text-align:center;font-size:20px;font-weight:bold;}
#login dl{display:table;margin:20px auto;width: 100%;max-width: 440px;}
#login dt{display:table-cell;width:100px;text-align:right;}
#login dd{display:table-cell;}
#login dd input{width:100%;height:40px;text-indent:1em;border-radius:5px;}
#login dd input:focus{background-color:#fdeff2;}
#login input[type="submit"]{display: block;width:200px;margin:30px auto 0;padding:10px;font-size:20px;color:#fff;letter-spacing:3px;line-height: 1em; background-color: #25a;border:0px;border-radius:5px;}
#login .mes_area{color:#a00;text-align:center;}

.input_data{text-align: right;}
.input_data > a {display: inline-block;padding:10px;border:#333 1px solid;background-color: #ddd;text-decoration: none;color: #333;}
button{border: 1px solid #333;border-radius: 3px;background-color: #eee;color: #333;}

/*----- list -----*/
#list_table th,td.list_date,td.detail_link{white-space: nowrap;}
@media (min-width: 600px) {
	#list_table td{text-align: center;}
	#list_table td.list_customer{text-align: left;}
	td.detail_link button{padding:1px 10px;}
}
@media (max-width: 599px) {
	#list_table tr{border-top: #999 1px dotted; border-bottom:  #999 1px dotted;}
	#list_table td,#list_table th{display: inline-block;border: none;text-align: left;}
	.list_date{width: 50%;padding-bottom: 0;}
	.list_recorder{width: 50%;padding-bottom: 0;}
	.list_customer{width: 85%;padding-top: 0;}
	.detail_link{width: 40px;padding-top: 0;}
	td.detail_link button{padding: 5px;}
}
/*----- detail -----*/
#detail_table {margin-bottom: 5px;}
#cform {text-align: right;}
#cform textarea{width: 100%;height: 3.5em;border: #aaa 1px solid;padding: 0 0.3em;}
.athumb{display:inline-block; width: 100px;height:100px;margin-right:7px;}
.athumb img{width: auto;height: auto;object-fit: cover;aspect-ratio: 1/1;}
.lum-lightbox-inner img.lum-img { max-width: 100%;}
#confirmed_post {margin-bottom: 10px;}
#confirmed_post button{margin-top: 3px;padding:5px;}
#confirmed_post span{font-size: 80%;color: #a00;}
#comment_post button{margin-top: 3px;padding:5px;}
@media (min-width: 600px) {
	#detail_table th{width: 7em;}
}
@media (max-width: 599px) {
  #detail_table tr{border-top: #999 1px dotted;border-bottom: #999 1px dotted;}
  #detail_table th{display: block;border: none;text-align: left;line-height: 1;padding:10px;font-weight: bold;}
  #detail_table td{display: block;border: none;padding:0px 10px 10px;}
}
/*----- form -----*/
#form table{width:100%;margin:20px auto;}
#form th{vertical-align: middle;}
#form td{width: auto;}
#form input{border: #aaa 1px solid;}
#form input[type="text"]{width: 100%;}
#form textarea{width: 100%;height: 10em;border: #aaa 1px solid;}
#form input[type="file"]{margin:3px 0;width: 100%;}
#form button{display: block;margin: auto;padding:5px 30px;font-size: 18px;}

@media (max-width : 500px) {
  #form tr{border-bottom: #999 1px dotted;}
  #form th{display: block;border: none;text-align: left;line-height: 1;padding:20px 10px 10px;font-weight: bold;}
  #form td{display: block;border: none;padding:0px 10px 20px;}
}


/*----- admin -----*/
#userMNG input.uname{width: 6em;}
#userMNG input.email{width: 20em;}
#userMNG input.password{width: 8em;}



@media (max-width : 320px) {
}
@media (max-width : 375px) {
}
@media (max-width : 768px) {
}

@media (min-width: 769px) {
}