common.scss

common.scss

@charset 'UTF-8';

// css reset
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,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
}

html,
body,
form,
fieldset,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
  text-size-adjust: none;
}

html {
  font-family: -apple-system, "Helvetica Neue", Arial, "PingFang SC", "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

body {
  background: #eee;
  color: #1a1a1a;
  min-width: 320px;
  overflow-x: hidden;
  // -webkit-overflow-scrolling: touch;
}

a {
  background: transparent;
  color: #1a1a1a;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;

  &:active {
    color: #3990e6;
    outline: 0;
  }
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
  white-space: pre;
  word-wrap: break-word;
}

code,
kbd,
pre,
samp {
  font-family: "Ayuthata", monospace;
}

mark {
  background: #ff0;
  color: #1a1a1a;
}

dfn {
  font-style: italic;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

ul,
ol {
  list-style: none outside none;
}

h1,
h2,
h3,
strong {
  font-weight: 600;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}

button {
  border: 0;
  outline: none;
  overflow: visible;
}


button,
select {
  text-transform: none;
}


button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: border-box;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}


button,
input,
select,
textarea {
  font-family: -apple-system, "Helvetica Neue", Arial, "PingFang SC", "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #ccc;
}


input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #ccc;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #ccc;
}

html,
body {
  height: 100%;
}

// common
.border_box{
  box-sizing: border-box;
}


.fl {
  float: left;
}

.fr {
  float: right;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.break {
  word-break: break-all;
  word-wrap: break-word;
}

.clearfix:after {
  clear: both
  content: '\0020';
  display: block;
  height: 0;
}

.clearfix {
  *zoom: 1;
}


// mobile
@media only screen and (min-width: 359px){
  html {
    font-size: 22.5px * .8;
  }
}

@media only screen and (min-width: 374px){
  html {
    font-size: 23.5px * .8;
  }
}

@media only screen and (min-width: 401px){
  html {
    font-size: 25px * .8;
  }
}

@media only screen and (min-width: 428px){
  html {
    font-size: 26.75px * .8;
  }
}

@media only screen and (min-width: 481px){
  html {
    font-size: 30px * .8;
  }
}

@media only screen and (min-width: 569px){
  html {
    font-size: 35px * .8;
  }
}