@charset "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');
@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);


/* mobile style */
*{-webkit-text-size-adjust:none}
html {font-family:'Noto Sans JP',sans-serif;-webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}
body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, th, td, input, textarea,button,select{margin:0;padding:0; font-family:'Noto Sans JP', 'Noto Sans KR', 'nanumsquare' , 'Malgun Gothic','?? ??',dotum,'MS Pゴシック',sans-serif;}
body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0); margin:0 auto; background-color: mintcream;}
li{list-style:none}
a{text-decoration:none; color:inherit;}
address, caption, em, var{font-style:normal;font-weight:normal}
input, textarea, select{letter-spacing:normal}
ol, ul, dl{list-style:none}
fieldset, img{border:0}
legend, caption{display:none; border:0;padding:0;}
img{border:0;vertical-align:top;}
hr{display:none}
table{border-collapse:collapse;border-spacing:0}
br{letter-spacing:normal}
p{letter-spacing:normal;}
input{vertical-align:middle}
input[type="text"], input[type="password"]{-webkit-appearance:none;}
input[type="checkbox"]{-webkit-appearance:;-webkit-border-radius:0}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}
input[type="radio"]{border:none;-webkit-appearance:}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{-webkit-appearance:button;border-radius:0}
textarea{-webkit-appearance:none}
select{-webkit-appearance:none; -moz-appearance:none; appearance:none; color:#666; }
input[type="file"] {display: none;}
input:checked {}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}[hidden]{display:none;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:'Noto Sans JP', sans-serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}

.qrcode-text {margin-top:-35px; margin-right:0; width:auto; height:3.5em; border: 1px solid #ccc; border-radius:5px !important;}
.qrcode-text-btn {display:inline-block; background:url(//dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg) 0% 0% no-repeat; height:3em; width:3em; margin-left:-3.5em; margin-top:30px; cursor:pointer}
.qrcode-text-btn > input[type=file] {position:absolute; overflow:hidden; width:1px; height:1px; opacity:0}
.gobut {background:#272964; color:#fff; padding:17px 15px; border-radius:10px !important; opacity:1; font-size:20px; margin-left:15px; margin-top:-35px;}
#footer {width:100%;  margin:0 auto; position:relative; bottom:0;top:0}
#footer div {margin:0 auto; position:relative;}
#footer .copyright {width:100%; ,margin:0 auto; font-size:10px;  background:#f5f5f5; color:#999; text-align:center; height:35px; position:absolute; bottom:0;line-height:35px;     top: 0;}
#footer .copyright div.copy {width:90%; margin:0 auto;}
.form-table th,
.form-table td {
  display: block;
  width: 100%;
  border-bottom: none;
}
/* buttons*/
.btn--large{
    padding: 20px 36px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 500;
}
.btn--medium{
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
	margin: 20ｐｘ;
}
.btn--primary{
    background-color: #eb8900;
    color: #fff;
}
.btn--primary.btn--outline{
    background-color: #fff;
    border: 2px solid #1d2a39;
    color: #1d2a39
}
.btn--secondary{
    background-color: #2b3c63;
    color: #fff;
}

#crm {width:100%; margin:0 auto; overflow:hidden; height:100%; text-align:center; position: relative;}
#crm h1 {width: 100%;
    font-size: 18px;
    font-family: 'Noto Sans JP', sans-serif;
    color: #e0c89b;
    height: 50px;
    padding: 0 0 0 20px;
    line-height: 50px;
    text-align: left;
    display: flex;
    max-width: auto;
    background-color: #6f4b3e;}
#crm #topline {border-bottom: 6px double #EB8900;}
/*#topline p {background:#EB8900; width:50%; float:right; height:5px;}*/
/*#crm table {width:50%; margin: 50px auto;}*/
#crm table {margin: 20px 25px 0 25px;}
#crm table tr {height:35px; padding:5px;color:#6f4b3e;}
#crm table tr.bar {border-top:1px dotted  #eb8900;color:#e0c89b;}
#crm table tr.bar th {width:50%;}
#crm table tr.bar td {text-align:right;}
#crm table tr.bar p {font-size:16px;font-family:'Noto Sans JP', sans-serif;margin-left:1em;}
#crm table tr.bar p.point {font-size:25px; font-family:'nanumsquare', sans-serif; color:#272964; font-weight:bold;margin-left:0.6em;}
/*#crm table tr.po {border-top:1px dotted #eeeeee}*/
#crm table tr.po input {background:#f9f9f9; border:1px solid #eee; color:#000000;}
#crm table tr.po th {width:%; padding:15px 0;}
#crm table tr.po td {padding:10px 0;}
#crm table tr.po p {font-family:'Noto Sans JP', sans-serif;}
#crm table tr.po p.point {font-size:30px; font-family:'nanumsquare', sans-serif; color:#6f4b3e; font-weight:bold;/*padding-left:100px;*/ display:inline-block; text-align:center;}
#crm table tr.po p.point input {width:50%; text-align: center;}
#crm table tr.po p.point span {margin-left:10px;}
#crm table tr.po p.hp01 {font-size:25px; color:#6f4b3e; /*padding-left:35px; display:inline-block;*/}
#crm table tr.po p.hp {font-size:30px; text-align: center; font-family:'nanumsquare', sans-serif; color:#6f4b3e; font-weight:bold; display:inline-block;}
#crm table tr.po p.hp02 {font-size:25px; position:relative;line-height:30px;color:#6f4b3e;}
#crm table th {width:; text-align:left; padding: 0 5px;color: #6f4b3e;}
/*#crm table td {border-bottom:1px dotted  #eb8900; width:27%; text-align:left; padding: 0 0 8px 5px;     font-size: 13px;}*/
#crm table td input {border:1px solid #d6d6d6; padding:5px; background:#eeeeee; width:95%;     font-size: 13px;}
#crm table td input[type="radio"] {width:auto;}
#crm table td input[type="checkbox"] {width:auto;}
#crm table td select {width:x; height:; padding:5px 20px 5px 5px; top: 3px; font-size: 13px;  position: relative;border:1px solid #d6d6d6;background:url('../img/down.png') 95% 50% no-repeat;}
#crm table td input.num {width:20%;}
#crm .ca1 {width:%;}
#crm .ca0 {width:%;}
#crm button {background:#EB8900; width:45%; margin:20px 10px 20px 10px; padding:10px 10px; color:#fff; text-align:center; border:0px ; border-radius:10px;}
#crm button.bbut02 {width:46%; margin:5px 5px; padding:10px 0%; color:#fff; text-align:center; border:0px ; border-radius:10px;}
#crm button.bbut {background:#EB8900; width:35%; margin:20px auto; padding:10px 15px; color:#fff; text-align:center; border:0px ; border-radius:10px;}
#crm button.bbut01 {background:#f5f5f5; width:auto; margin:10px 10px; padding:10px 30px; color:#444; text-align:right; border:0px ; border-radius:10px; border:1px solid #eee;}
#barcode {padding:5px; width:75%; border:1px solid #eee; border-radius:10px; margin:30px auto 20px;     display: inline-block;}

#camera{width:90%; margin:15px auto;border:0px solid #ccc; background:#fff;padding:15px 0; }
#camera p {vertical-align:middle;}

.qrcomment{
	color:#6f4b3e;
	border-top: 6px double #EB8900;
}


/*index*/
.index__wrap{
    height: 100%;
    /*padding: 24px;*/
	text-align: center;
	/*display: flex;*/
}
.index__title{
    font-size: 26px;
    font-weight: 600;
    line-height: 1.6;
	margin-bottom: 15px;
    padding-bottom: 10px;
    color:#e0c89b;
    border-bottom: 6px double #EB8900;
    display: flex;
    max-width: auto;
    background-color: #6f4b3e;
}
.index__btns{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	border-bottom: 6px double #EB8900;
	padding:30px 0 30px 0;
}
.index__btns > button,
.index__btns > a{
    display: block;
    min-width: 250px;
    margin-bottom: 24px;
}
.index__btns > *:last-child{
    margin-bottom: 0;
}

/*login*/
.login{
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
	color:#6f4b3e;
	display: block;

}
}
.login .login__input{
    margin-bottom: 24px;
    align-items: center;
}

.login__input label{
    display: block;
    font-weight: 500;
    margin-right: 8px;
	margin-top: 15px;
	color:#6f4b3e;
    width: 100px;
    text-align: center;
}
.login__input input{
    border: 1px solid #aaaa;
    border-radius: 4px;
    height: 45px;
    font-size: 18px;
    flex-grow: 2;
    transition: border 0.2s ease;
}
.login__input input:focus{
    border-color: #67c4dd;
}
.login__input .login__input--pw{
    display: flex;
    flex-grow: 2;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.login__input .login__input--pw input{
    width: 45px;
    text-align: center;
    padding: 0;
    flex-grow: 0;
}
.login__btn{
    width: 50%;
    margin-top: 35px;
}
.login_info{
	text-align: center;
}
.pwcheck_tel{
	padding-left: 60px;
	padding-right:35px;
	width:200px;
}
.pwcheck_name{
	padding-left: 60px;
	padding-right:35px;
	width:200px;
}
body {
	display: block;
	margin: 0 0 0 0;
	
}
.rgba{
	height: 100%;
 	background: rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-image: url(../img/gazou1.jpg);
	background-repeat: no-repeat;
	background-size:cover;
}
element.style {
    padding-left: 20px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}
header{
    display:flex;
    max-width:auto;
	background-color:#6f4b3e;
   
}
.all h1{
    font-size:20px;
    color: #e0c89b;
	margin-top: 10px;
}
h1{
    padding:0px 0px 10px 20px;
}
.favorite{
    padding: 5px 20px 10px 0px;
    position: absolute;
    right: 0%;
}
.top{
    text-align:center;
    max-width:auto;
    /*border-bottom: 6px double #EB8900;*/
}
.bar{
    padding:10px 10px 10px 10px;
	margin:0px 30px 30px 30px;
 	text-align:center;
	box-shadow: 8px 9px 1px #704B38;
}

.bar1{
    padding:10px 10px 10px 10px;
	/*margin:0px 30px 0px 30px;*/
 	text-align:center;
}

.bar h3{
    color: #6f4b3e;
    text-align:center;
    margin: 0px 10px 10px 10px;
    padding:0 0 5px 0;
}
.availablepoint{
    text-align:center;
    color: #ffffff;
    background:#eb8900;
	background-color: rgba(61,142,149);
	/*border-top: 6px double #EB8900;*/
    font-size: 62.5%;  /*font-size 1em = 10px on default browser settings */
	padding: 10px 10px 10px 75px;
}
span {
  font-size: 1.6em;
}
hp{
	width:50px;
}
ul {
  list-style: none;
}

.news{
	background-color:gold;
	color: #6f4b3e;
}

/* マーキーさせたい部分*/
.marquee {
	width: 375px;
	overflow: hidden;
	background-color:gold;
}

/* マーキーさせたい部分(内側)*/
.marquee-inner {
	width: 373px;
	padding-left: 373px;
	white-space: nowrap;

	animation-name: marquee;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	color: #6f4b3e;
}

/* マーキーアニメーション*/
@keyframes marquee {
	from    { transform: translate(0%); } 
    100%,to { transform: translate(-100%); }
}


.tuch1{
    color: #6f4b3e;
	font-weight: bold;
	padding:30px 0 0 0;
}
.tuch2{
    color: #6f4b3e;
	font-weight: bold;
}

.table1{
	border-collapse:collapse;
	table-layout:fixed;
	text-align:center;
}
.table2{
	border-collapse:collapse;
	table-layout:fixed;
	text-align:center;
}
.table3{
	border-collapse:collapse;
	table-layout:fixed;
	text-align:center;
}
.table4{
	border-collapse:collapse;
	table-layout:fixed;
	text-align:center;
}
.table5{
	border-collapse:collapse;
	table-layout:fixed;
	text-align:center;
}
.table3 td{
	padding:0 0 20px 0;
}
.table4 td{
	padding:0 0 20px 0;

}
.table5 td{
	padding:0 0 20px 0;

}
.sns_summarize1{
	color: #6f4b3e;
	font-weight: bold;
	padding:30px 0 0 0;
}
.sns_summarize2{
    color: #6f4b3e;
	font-weight: bold;
	border-bottom: 6px double #EB8900;
	padding:0 0 30px 0;
}
/*ポイント利用*/
.paid_point{
	border-collapse:collapse;
	table-layout:fixed;
	text-align:center;
}


/*クーポン発行*/
.coupon_button{
    color: #e0c89b;
    text-align:center;
    padding:10px 0 0 0;
}
/*scan*/
.scan__wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	font-size:20px;
    color: #bbbbbb;
}


.scan__title{
	text-shadow: 4px 4px 5px rgba(1,1,1,0.5);
}


/*
.scan__top{
    position: relative;
    overflow: hidden;
    height: 300px;
    flex-grow: 2;
}
*/
.scan__top--bg{
    width: 80%;
    height: 80%;
    object-position:50% 50%;
	padding: 10px;
}
.scan__top--barcode{
    position: absolute;
    width: 100%;
    text-align: center;
}
.scan__top--barcode img{
    width: 50%;
}
.scan__contents{
    padding: 4px 4%;
}
.scan__info{
    display: flex;
    margin-bottom: 16px;
    justify-content: space-between;
    align-items: center;
}
.scan__info .scan__info-tit{
    font-size: 18px;
    font-weight: 600;
}
.scan__info .scan__info-point{
    font-size: 24px;
    font-weight: 500;
}
.scan__info button{
    min-width: 100px;
}
/*
.scan__btns{
    display: flex;
    justify-content: space-between;
}
*/
.scan__btns button{
    width: 35%;
}
.scan__line{
    margin-top: 16px;
}
.scan__line button{
    background-color: #5bc540;
    color: #fff;
    width: 100%;
    height: 45px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
}
.scan__line .scan__line--entered{
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #5bc540;
	border-radius: 100px;
	height: 44px;
}
.scan__line .scan__line--title{
	color: #5bc540;
	font-weight: 600;
	font-size: 20px;
}
.scan__line .scan__line--id{
	font-size: 20px;
	font-weight: 600;
	margin-left: 16px;
}
.scan__camera{
    height: 36vh;
    border: 1px solid #e0c89b;
    margin: 0 4% 16px;
}
.footer{
    text-align:center;
    color: #CFB78B;
   /* padding:50px 0 10px 0; */
}

/*popup*/
.popup{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 300;
	background-color: rgba(0,0,0,0.7);
	left: 0;
	top: 0;
}
.popup .popup__box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 42px 30px 36px;
	width: 60%;
	max-width: 400px;
	min-width: 240px;
	text-align: center;
	background-color: #fff;
	border-radius: 4px;
}
.popup__input--full{
	width: 100%;
	border: 1px solid #aaa;
	border-radius: 4px;
	height: 50px;
	margin: 24px 0;
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	padding: 0;
}
.popup__contents b{
	font-size: 20px;
	font-weight: 500;
}
.popup__btns{
	display: flex;
	justify-content: center;
}
.popup__btns button + button{
	margin-left: 12px; 
}

@media only screen and (max-width: 460px) {
    .index__title{
        font-size: 20px;
    }
	.login .login__input{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .login__input label{
        font-size: 20px;
        margin-left: 25px;
        text-align: left;
        margin-bottom: 8px;
    }
    .login__input .login__input--pw{
        width: 100%;
    }
}
/*For devices under 360px*/
@media only screen and (max-width: 360px) {
    .index__title{
        font-size: 18px;
    }
    .scan__camera{
        height: 45vh;
    }
    
}

.po{
	text-align: center;
    border-bottom: 6px double #EB8900;
    border-bottom-width: 6px;
    border-bottom-style: double;
    border-bottom-color: rgb(235, 137, 0);
}


/*顧客登録(qrcode.php)*/

.form-table th,
.form-table td {
  display: block;
  border-bottom: none;
}

table {
  border-collapse: collapse;
}
 
p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
 
input[type="submit"],
input[type="text"],
select,
textarea,
button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
  border: none;
}
 
 
input[type="text"],
textarea {
  background: #f8f8f8;
  /*display: block;*/
  font-size: 16px;
  padding: 12px 15px;
  width: 480px;
  transition: 0.8s;
  border-radius: 0;
}
 
input[type="text"]:focus,
textarea:focus {
  background: #e9f5fb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
 
textarea[name="content"] {
  display: inline-block;
  width: 100%;
  height: 200px;
}
 
input::placeholder,
textarea::placeholder {
  color: #ccc;
}
 
::-webkit-input-placeholder {
  color: #ccc;
  opacity: 1;
}
 
::-moz-placeholder {
  color: #ccc;
  opacity: 1;
}
 
:-ms-input-placeholder {
  color: #ccc;
  opacity: 1;
}
 
.form-table {
  width: 80%;
}
 
.form-table th,
.form-table td {
  padding: 10px;
}
 
.form-table th {
  padding-left: 50px;
  position: relative;
  text-align: left;
  width: 300px;
}

select{
	font-size:14px;
}
input[name="address"]{
	width="300px"
	fontsize="16px"
}