@charset "utf-8";
/* CSS Document */

/*reset
====================================================================================================
*/

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
select,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0
}

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

fieldset,
img {
    border: 0
}

address,
button,
caption,
cite,
code,
dfn,
em,
input,
optgroup,
option,
select,
strong,
textarea,
th,
var {
    font: inherit
}

del,
ins {
    text-decoration: none
}

li {
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal
}

q:before,
q:after {
    content: ''
}

abbr,
acronym {
    border: 0;
    font-variant: normal
}

sup {
    vertical-align: baseline
}

sub {
    vertical-align: baseline
}

legend {
    color: #000
}
/*
====================================================================================================
*/
.pc {display:none;}
  
.sa {
opacity: 0;
transition: all .5s ease .3s;
}
.sa.show {
opacity: 1;
transform: none;
}

.sa--lr {
transform: translate(-100px, 0);
}

.sa--rl {
transform: translate(100px, 0);
}

.sa--up {
transform: translate(0, 75px);
}

.sa--down {
transform: translate(0, -75px);
}

.sa--scaleUp {
transform: scale(.5);
}

.sa--scaleDown {
transform: scale(1.5);
}

.sa--rotateL {
transform: rotate(180deg);
}

.sa--rotateR {
transform: rotate(-180deg);
}

#stt {
	position: fixed;
	bottom: 20px;
	right: 20px;
	height: 60px;
	width: 60px;
	z-index: 1000;
}
#stt img {
	width:100%;
	vertical-align:bottom;
}

.marker-animation.active{
    background-position: -100% .5em;
}
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s 100ms ease;
    font-weight: bold;
}
.m-blue {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(107, 182, 255, 0.24) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s 1500ms ease;
    font-weight: bold;
}
.m-green {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(151, 232, 154, 0.69) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 1s 300ms ease;
    font-weight: bold;
}
.m-red {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(255, 88, 88, 0.2) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 1s 1500ms ease;
    font-weight: bold;
}


.m-yellow {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(255, 242, 38, 0.8) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(255, 242, 38, 0.80.8) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(255, 242, 38, 0.2) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgba(255, 242, 38, 0.8) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(255, 242, 38, 0.8) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 1s 500ms ease;
    font-weight: bold;
}

@media only screen and (min-width: 680px) {
	.sp {display:none;}
	.pc {display:block;}
}