html{ height: 100%; }
body{ margin:0 auto; padding-bottom: 15px; width: 100%; height: 100%; font-family:'Noto Sans TC', Helvetica, Arial, sans-serif; word-wrap: break-word; -webkit-text-size-adjust: none; background-attachment: fixed;
  padding-left: constant(safe-area-inset-left); /* iX */
  padding-right: constant(safe-area-inset-right);
  padding-bottom: calc(15px + constant(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: calc(15px + env(safe-area-inset-bottom));
}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
a { text-decoration: none; color: #3466bc; }
a:hover,a:focus { text-decoration:; }
img{ vertical-align: middle; }

.TOP_CONTENT{ margin: 0 auto; padding: 30px 0 10px; width: 94%; max-width: 700px; text-align:center; }
.CONTENT{ margin: 0 auto; padding: 10px 0 10px; width: 94%; max-width: 700px; text-align:center; }

.TITLE{ min-width: 200px; position: relative; display: inline-block; margin: 1rem auto; padding: 5px 0 5px 70px; text-align: left; font-size: 1.7rem; font-weight: bold; color: #ff006a; line-height: 1.9rem; }
.LOGO{ position: absolute; left: 0; width: 60px; border: 1px solid #cccccc; border-radius: 20%; }

/* one download btn */
.BTN{ margin: 10px auto; z-index: 1; white-space: nowrap; }
.BTN .QRCODE{ margin: 10px 0; display: inline-block; text-align: center; }
.BTN .QRCODE img{ width: 200px; border: 1px solid #f2f2f2; }
.BTN .BTN_DOWNLOAD{ display: inline-block; margin: 15px auto 0; padding: 10px 0; width:270px; text-align: center; border-radius: 10px; }
.BTN .BTN_DOWNLOAD{ font-weight: bold; font-size: 1.4rem; min-width: 200px; cursor: pointer; color: #ffffff; }
.BTN .BTN_DOWNLOAD.YET{ background-color: #eeeeee; color: #666666; cursor: default; }

/* two download btns */
.BTN_FOR2{ margin: 10px auto; z-index: 1; white-space: nowrap; }
.BTN_FOR2:after{ content:""; display: block; clear: both; }
.BTN_FOR2 .BLOCK{ /*float: left;*/ width: 47%; max-width: 200px; display: inline-block; text-align: center; }
.BTN_FOR2 .BLOCK:first-child{ margin-right: 3%; }
.BTN_FOR2 .BLOCK .BTN_DOWNLOAD{ display: inline-block; margin: 15px auto 0; padding: 8px 0; width: 100%; text-align: center; border-radius: 10px; font-weight: bold; font-size: 1.3rem; color: #ffffff; }
.BTN_FOR2 .BLOCK .QRCODE{ position: relative; width: 100%; margin: 10px 0; }
.BTN_FOR2 .BLOCK .QRCODE img{ width: 100%; height: auto; }
.BTN_FOR2 .BLOCK.ANDROID .QRCODE:after, .BTN_FOR2 .BLOCK.IOS .QRCODE:after{ content: ""; position: absolute; width: 30px; height: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%,-50%); }
.BTN_FOR2 .BLOCK.ANDROID .QRCODE:after{ background: url(images/ic_android.png) no-repeat; background-size: contain; }
.BTN_FOR2 .BLOCK.IOS .QRCODE:after{ background: url(images/ic_ios.png) no-repeat; background-size: contain; }


.MEMO{ width: 94%; max-width: 700px; margin: 15px auto; padding: 15px 15px 25px 15px; background-color: rgba(255, 255, 255, 0.4); border: 1px solid #ffffff; }
.MEMO h4{ margin: 0; font-size: 1.2rem; line-height: 2rem; text-align: left; }
.MEMO p{ margin: 16px 0; padding: 0; line-height: 1.4; }
.INFO{ display: inline-block; margin-bottom: 0; font-weight: bold; font-size: 0.8rem; line-height: 1.5; text-align: left; }
.INFO img{ vertical-align: text-top; padding-left: 2px; }
ul.INFO{ list-style: none; padding: 0; margin: 0; }
ul.INFO li:before{ content: "※"; margin-left: -1em; padding-right: 4px; }
ul.INFO li{ margin-top: 5px; padding-left: 1em; }

.MEMO .MEMO_STEP{ display: inline-block; padding: 4px 16px 4px 8px; margin-bottom: 8px; font-size: 14px; line-height: 1; color: #666666; border: 1px solid #999999; border-radius: 0 30px 30px 0; background-color: #ffffff; }
.ic_setting,.ic_safari,.ic_chrome{ width: 28px; }
.ic_check{ width: 16px; }
.MEMO h4{ display: inline-block; border-bottom: 3px solid rgba(0, 0, 0, 0.5) }
.MEMO .BTN{ background-color: #e91e63; color: #ffffff; font-size: 14px; padding: 4px 8px; border-radius: 4px; }
.MEMO_LINK{ display: block; margin: 0; padding: 8px 0;  color: #0088cc; border: 0px solid #0088cc; }
.MEMO_IMG{ width: 100%; border: 1px solid #dddddd; }

.TAB_MENU{ margin: 20px 0; }
.TAB_MENU .TAB_BTN,.TAB_MENU .TAB_BTN_ON{ width: 50%; display: inline-block; padding: 10px 0; border: 1px solid #cccccc; border-radius: 5px 5px 0 0; cursor: pointer; }
.TAB_MENU .TAB_BTN{ background-color: #e6e6e6; color: #555555; }
.TAB_MENU div:nth-child(1){ border-right: 0px; }
.TAB_MENU .TAB_BTN_ON{ background-image: linear-gradient( 0deg, rgba(255, 255, 255, 0) 0%, #ffffff 80%); border-bottom: 0px;  }