/* Before login: all blue world */
body.allBlue {
	background-color: #4cc8ed;
	color: #fff;
}


/* Text -----------------------------------------------------------------------------------------------*/
body, textArea, input {
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size: 16px;
	color: #2d5059;
}
h1 {
	font-size: 1.25em;
	line-height: 1.5em;
	margin: 0 0 1.25em 0;
	font-weight: bold;
}
h2 {
	font-size: 1em;
	line-height: 1.5em;
	margin: 0 0 0.5em 0;
	font-weight: bold;
}
p {
	font-size: 16px;
	line-height: 1.75em;
	margin: 1.5em 0;
}
a {
	text-decoration: none;
}
a:link,
a:visited,
a:hover,
a:active {
	color: #2d5059;
}

text {
	pointer-events: none;
}


/* Button -----------------------------------------------------------------------------------------------*/
button {
	box-sizing: border-box;
	font-size: 1em;
	font-weight: bold;
	height: 40px;
	border-radius: 8px;
	padding: 0.5em 0;
	margin: 2em 0 2em 0;
}
.button:disabled {
	background-color:#C8C8C8;
}
.buttonBlueOne {
	width: 88vw;
	border: none;
	background-color: #4CC8ED;
	color: #fff;
}
.buttonDeepBlueOne{
	width: 88vw;
	border: none;
	background-color:#1d9cc2;
	color: #fff;
}
.buttonWhiteOne {
	width: 88vw;
	border: 1px solid #4CC8ED;
	background-color: #fff;
	color: #4CC8ED;
}
.buttonIom {
	width: 88vw;
	height: 70px; /*上書き*/
	border: none;
	margin: 0em 0 1em 0; /*上書き*/
	background-color: #4CC8ED;
	color: #fff;
	font-size: 18px;
}
.buttonBlueTwin {
	width: 42vw;
	border: none;
	background-color: #4CC8ED;
	color: #fff;
}
.buttonBlueTwin:disabled,
.buttonBunbunOne:disabled,
.buttonBunbunTwin:disabled{
	background-color:#C8C8C8;
}
.buttonWhiteTwin {
	width: 42vw;
	border: 1px solid #4CC8ED;
	background-color: #fff;
	color: #4CC8ED;
}
.buttonMini {
	font-size: 12px;
	font-weight: normal;
	color: #FFF;
	background-color: #4cc8ed;
	border: 1px solid #FFF;
	border-radius: 4px;
	height: auto;
	margin: 0.75em 0 0 0;
	padding: 0.25em 0.5em;
}

/* ログイン後TOP固有 */
.buttonTwinMain {
	width: 42vw;
	height: 60px;
	border: none;
	background-color: #4CC8ED;
	color: #fff;
	margin: 4vw 0 0 0;
	padding: 0 0 0 0;
}
.buttonTwinMainLabel {
	margin: 0px 0 2px 0;
	height: 16px;
}
.banner {
	width:88vw;
	border-radius: 8px;
	margin: 0 0 12px 0;
}


/* Header -----------------------------------------------------------------------------------------------*/
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 40px; /*☆*/
	background-color: #4cc8ed;
	border-bottom: 2px solid #FFF;
	z-index: 1000;
}
body.allBlue > header {
	border: none;
}
#tacLogo {
    margin: 12px 0 0 1em;
	width: 228px;
	height: 20px;
}
#tacLogo img {
	width: 228px;
}
#divNoticeButton{
	position: absolute;
	top: 0;
	right: 40px;
	height: 40px;
}
#divMenuButton{
	position: absolute;
	top: 0;
	right: 0;
	height: 40px;
}

/* Before login の index.html固有 */
#landingHeader {
	height: 162px; /*★*/
	text-align: center;
}
#landingHeader > img {
    margin: 20px auto 4px auto;
	width: 88vw;
}
#landingHeader > h1 {
	color: #FFF;
	font-size: 15px;
	margin-bottom: 0;
}
#landingHeader button {
	font-size: 14px;
	margin: 8px 0 0 0;
}


/* ボタンをボトムに固定する（index.html, notice.html, myact.html, likeit.html, thxhistory.html, allActs.html ）-----------------------------------------------------------------------------------------------*/
.bottomFix {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100vw;
	padding: 4vw 0 4vw 0;
	text-align: center;
	background-color: #d9f6ff;
	border-top: 2px solid #FFF;
}
.bottomFix button {
	margin: 0;
}

#aftLoginIndexBottomFix > div {
	/* margin-top: 4vw; */
}
#aftLoginIndexBottomFix > div img {
	width: 24px;
}


/* 共通の外枠 -----------------------------------------------------------------------------------------------*/
main {
	width: 88vw;
	margin: 64px 6vw 6vw 6vw;
	text-align: center;
}
/*landingHeaderとbottomFixを避ける*/
main.befLoginIndex{
	margin: 180px 6vw 42vw 6vw; /*★*/
}
/*ログイン後indexのbottomFixを避ける*/
main.aftLoginIndex{
	margin: 64px 6vw 32vw 6vw;
}
/*1段のbottomFixを避ける*/
main.keepAwayBottomFix {
	margin-bottom: 96px;
}

/* 個人情報取り扱い */
#divEula{
	position: absolute;
	left: 20px;
	right: 20px;
	top:60px;
	bottom: 20px;
	background-color:rgba(255,255,255,0.9);
	border-radius: 1em;
	color: #000;
}

#divEulaInside{
	position:absolute;
	top: 1.5em;
	bottom: 3em;
	left: 0.5em;
	right: 0.5em;
	overflow-y: scroll;
	text-align: left; 
	padding: 0.5em;
}

#divEulaCheckbox{
	position: absolute;
	bottom: 0.4em;
	height:1.5em;
	margin-left:1em;
	font-weight: bold;
}

#divCallEula{
	text-decoration:underline;
	margin-bottom: 0.3em;
}

#divEula li{
	margin-left: 2em;
}

#divCloseBtn{
	position:absolute;
	bottom: .7em;
	right: .7em;
	height: 1em;
	width: 1em;
	background-color: #fff;
	cursor: pointer;
}

#submitRegist:disabled {
    background-color: #C8C8C8;
}

/* 色とか揃えとか余白とか枠線とかの便利class -----------------------------------------------------------------------------------------------*/
.white{
	fill:#fff;
	color:#fff;
}
.red{
	fill:#f00;
	color:#f00;
}
.tacblue{
	fill:#4CC8ED;
	color:#4CC8ED;
}
.normal{
	font-weight: normal;
}
.bold{
	font-weight: bold;
}
.smallText{
	font-size: 12px;
}
.left{
	text-align: left;
	text-anchor: start;
}
.center{
	text-align: center;
	text-anchor: middle;
}
.right{
	text-align: right;
	text-anchor: end;
}
.bottom{
	vertical-align:bottom;
}
.baseline{
	vertical-align:baseline;
}
.margin0 {
	margin: 0;
}
.padding0 {
	padding: 0;
}
.noBorder {
	border: none;
}


/* image -----------------------------------------------------------------------------------------------*/
.radius {
	border-radius: 8px;
}


/* input -----------------------------------------------------------------------------------------------*/
/* lebelと入力フィールド（input, textArea etc.）をくくる箱 */
.inputBox {
	margin: 1em 0 1em 0;
	text-align: left;
}
label {
	font-size: 1em;
	margin-bottom: 0.5em;
	display: block;
}
input[type=text],
input[type=textarea],
input[type=password],
input[type=number],
textArea,
select {
	font-size: 1em;
	padding: 0.25em 0.5em;
	width: 100%;
	display: block;
	border: 1px solid #a5abad;
	border-radius: 2px;
	box-sizing: border-box;
	/* iPhoneのsafariで出ちゃう影を消す*/
	-webkit-appearance: none;
}
input:focus,
textArea:focus,
input:active,
textArea:active {
	outline: none;
	border: 2px solid #4CC8ED;
}
input:disabled,
textArea:disabled {
	background-color: rgb(228, 228, 228);
}
::placeholder {
  color: #a5abad;
}
/* input error */
input[type=text].input_error,
input[type=textarea].input_error,
input[type=password].input_error
{
	border: 2px solid #F00;
}
.errorMag {
	color:#FFF;
	background-color: #F00;
	margin: -4px 0 0 0;
	width: 88vw;
	text-align: center;
	font-size: 0.8em;
}
/* checkbox */
#divOption{
	margin: 0.5em 0 0 0;
}
#divOption input[type=checkbox]{
	display: inline;
}
#divOption .chb_label{
	display: inline;
}
.checkBox {
	width: 14px;
	height: 14px;
	margin: 0;
}
/* 「？」ボタン */
.inputBox > label img {
	width: 1em;
}


/* ACTをレポートする（up.html） */
#inputAct {
	box-sizing: border-box;
	width: 88vw;
	height: 10em;
	font-size: 1em;
	padding: 0.75em 1em;
}
/* THXをお店で使う（payInput.html）、送る（sendInput.html）、ぶんじポイントに変換する（exchangeInput.html） */
#inputThx {
	box-sizing: border-box;
	width: 88vw;
	text-align: right;
	font-size: 2em;
	padding: 0.125em 0.5em;
	border: 1px solid #4CC8ED;
}
/* Check!（確認） */
#divActCheck {
	background-color: #d9f6ff;
	box-sizing: border-box;
	border-radius: 4px;
	margin: 0 auto 0 auto;
	width: 88vw;
	padding: 1em;
	text-align: left;
	line-height: 1.5em;
}
#divIomCheck {
	background-color: #d9f6ff;
	box-sizing: border-box;
	border-radius: 4px;
	margin: 0 auto 0 auto;
	width: 88vw;
	padding: 1em;
	text-align: left;
	line-height: 1.5em;
}
#divSendCheck {
	background-color: #d9f6ff;
	box-sizing: border-box;
	border-radius: 4px;
	margin: 0 auto 0 auto;
	width: 88vw;
	padding: 1em;
	text-align: center;
	line-height: 1.5em;
}
#divBunbunCheck {
	background-color: #ffe6cc;
	box-sizing: border-box;
	border-radius: 4px;
	margin: 0 auto 0 auto;
	width: 88vw;
	padding: 1em;
	text-align: center;
	line-height: 1.5em;
}


/* THX Art（upDone.html） -----------------------------------------------------------------------------------------------*/
.thxArt {
	width:88vw;
	margin: 0 0 1.5em 0;
	border-radius: 8px;
}


/* THXの増減に関する数字・文字（upDone.html, payDone.html, sendDone.html, exchangeDone.html） -----------------------------------------------------------------------------------------------*/
.thxBox {
	margin: 0.5em 0;
}
.thxBoxP {
	margin: 0.25em 0 0 0;
	font-weight: bold;
	color: #4CC8ED;
}
#divThx {
	font-size: 3em;
	line-height: 1em;
	font-weight: bold;
	margin: 0 0 4px 0;
	color: #4CC8ED;
}
#divsendCheck img,
#divBunbunCheck img,
.thxBox img {
	width: 40px;
}

#dstName {
	font-size: 16px;
	font-weight: bold;
	margin: 1em 0;
}
#thxLog, #divThxChange {
	font-size: 16px;
	font-weight: bold;
	margin: 2em 0 1em 0;
	color: #4CC8ED;
}


/* お知らせ、TACについて（notice.html, about.html, aboutTac.html） -----------------------------------------------------------------------------------------------*/
article {
	padding: 1.5em 0;
	border-top: 1px solid #5a7880;
	text-align: left;
}
article.detail {
	padding: 0 0 1.5em 0;
	border: none;
}
article.detail h1 {
	margin: 0 0 0.5em 0;
}
article h2 {
	margin: 0 0 0.25em 0;
}
article p {
	margin: 0;
}
article img {
	margin: 0.75em 0;
	width: 88vw;
}
#notice img {
	border-radius: 8px;
}
article.detail div {
	text-align: center;
}

article span.readflag{
	font-size: 12px;
	color: red;
}

/* よく「いいね！」する人、してくれる人（myact.html, likeit.html） --------------------------------------------------------------------------------------------*/
#divLikeSrcs, #divLikeDsts{
	width: 88vw;
	margin: 0 auto 1.5em auto;
	padding: 0.75em 0 1em 0;
	text-align: center;
	background-color : #e6faff;
}
#divLikeSrcs h2, #divLikeDsts h2{
	font-size: 14px;
	margin: 0 0 12px 0;
}
.divLike{
	width: 29vw;
	font-size: 12px;
	font-weight: bold;
}
.divLike span{
	color: #00b7ed;
	font-size: 14px;
}
.likeNickname {
	margin: 0 0 0.5em 0;
	line-height: 1.2em;
}


/* ACT List & THXの履歴リスト（index.html, myact.html, likeit.html, thxhistory.html, allActs.html） --------------------------------------------------------------------------------------------*/
ul.actList {
	font-size: 14px;
	text-align: left;
	line-height: 1.5em;
	margin: 0 0 100px 0;
	list-style: none;
}
li.act{
	margin-bottom: 16px;
}
.timeText{
	font-size: 10px;
	color: #667b80;
}
/* いいね！ */
img.likeIcon{
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
/* (thxhistory.html) */
img.thxTransferIcon{
	width: 32px;
	height: 32px;
	margin: -2px 0.5em 0 0;
	vertical-align: middle;
}
.thxHistory{
	margin: 0 0 16px 0;
}

/* It's on me の説明リスト（iomChoose.html） --------------------------------------------------------------------------------------------*/
.iomExplain {
	text-align: left;
	line-height: 150%;
	margin: 1.5em 0 0 1em;
}
.iomExplain li{
	padding-bottom: 0.5em;
}

/* It's on me のランキングリスト（iomPerson.html） --------------------------------------------------------------------------------------------*/
.iomPersonList {
	width: 100%;
	border-top: 1px solid #a5abad;
}
.iomPersonList td {
	border-bottom: 1px solid #a5abad;
}
.iomRank {
	padding: 0.75em 1em 0.75em 0;
	text-align: right;
	font-weight: bold;
}
.iomNickname {
	width: 80%;
	padding: 0.75em 1em 0.75em 0;
	text-align: left;
}
.iomNum {
	padding: 0.75em 0 0.75em 0;
	text-align: right;
}

/* やってみたい/やってみたの文字のスタイル-----------------------------------------------------------------

/* もう押してある */
.fbDone{
	font-size: 12px;
	color: #4CC8ED;
	font-weight: bold;
}

/* 押せる */
.fbOk{
	font-size: 12px;
	text-decoration:underline;
	cursor: pointer;
}

/* 押せない(自分のAct) */
.fbDisable{
	font-size: 12px;
	color: #999;
}


/* flex -----------------------------------------------------------------------------------------------*/
.flex-container {
	display: flex;
	justify-content: center;
}
.box-left {
	width: 42vw;
	margin-right: 2vw;
}
.box-right {
	width: 42vw;
	margin-left: 2vw;
}



/* Slide Menu -----------------------------------------------------------------------------------------------*/
#slideL {
  z-index: 9999;
  cursor: pointer;
  position: fixed;
  top: 0;
  right: -100vw;
  width: 100vw;
  height: 100vh;
  padding: 0 0 0 0;
}
#slideL .slide-inner {
  overflow: auto;
  overflow-x: hidden;
  background: #4CC8ED;
}
div.lineMenu{
	width: 100%;
	font-size: 1em;
	padding: .75em 0 .75em 2em;
}


/* QRスキャン関連（payQrscan.html, sendQrscan.html） -----------------------------------------------------------------------------------------------*/
/* カメラの枠 */
#canvas{
	width: 88vw;
	height: 88vw;
}
/* なんかこれが無いと動かないので、残しつつ表示は消してる */
#output {
	display: none;
}


/* 受けとり用QRコード（receive.html） -----------------------------------------------------------------------------------------------*/
#qrcode {
	margin: 3em 0 2em 0;
}


/* PAIDスタンプ（payStamp.html） -----------------------------------------------------------------------------------------------*/
#divPay{
	margin-top: 1em;
}
.noShadow{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
/* ローディング */
#divLoading{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,128,255,0.5);
	display: none;
}
#divLoading img{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 60px;
  margin: auto;
}


/* ユーザ情報（userInfo.html） -----------------------------------------------------------------------------------------------*/
.userInfoBox {
	text-align: left;
	margin: 1em 0 1.5em 0;
}
.userInfoLabel {
	margin: 0 0 0.25em 0;
}



/* 「お問い合わせ」固有 -----------------------------------------------------------------------------------------------*/
.contactList {
	list-style: none;
	font-size: 14px;
	line-height: 2em;
	margin: 1em 0 0 0;
}


/* 管理画面用 -----------------------------------------------------------------------------------------------*/
#divLog {
	margin:40px;
	font-size: 20px;
}
#divLog table {
	border-collapse: collapse;
}
#divLog td {
	border: 1px solid #333;
	padding: 4px;
}


/* iPad以上の screen width から上書きするスタイル -----------------------------------------------------------------------------------------------*/
@media (min-width: 768px) {

/* Before login の index.html固有 */
#landingHeader{
	height: 260px;
}
#landingHeader > img {
    margin: 36px auto 18px auto;
	width: 600px;
}
#landingHeader > h1 {
	font-size: 24px;
}
#landingHeader button {
	font-size: 16px;
}
/*ログイン前indexのbottomFixを避ける*/
main.befLoginIndex{
	margin: 300px 6vw 260px 6vw;
}
/*ログイン後indexのbottomFixを避ける*/
main.aftLoginIndex{
	margin: 64px 6vw 140px 6vw;
}
/*1段のbottomFixを避ける*/
main.keepAwayBottomFix {
	margin-bottom: 140px;
}
/* ボタンをボトムに固定する（index.html, notice.html, myact.html, likeit.html, thxhistory.html, allActs.html ）*/
.bottomFix {
	padding: 1.5em 0 1.5em 0;
}
/* flex */
.box-left {
	margin-right: 0.75em;
}
.box-right {
	margin-left: 0.75em;
}
/* ブラウザのスクロールバーを避ける */
#divNoticeButton{
	position: absolute;
	top: 0;
	right: 60px;
}
#divMenuButton{
	position: absolute;
	top: 0;
	right: 20px;
}

}