/* ===================
new clearfix
===================*/
.clearfix:after {
    visibility: hidden;
    height: 0;
    display: block;
    font-size: 0;
    content: "";
    clear: both;
}

* html .clearfix {
    zoom: 1;
} /* IE6 */
*:first-child + html .clearfix {
    zoom: 1;
} /* IE7 */

/* ===================
スクロールバーの有・無によるページのズレを防ぐ
===================*/
*html body {
    overflow-y: auto;
}

*+html body {
    overflow-y: auto;
}

body {
    overflow-y: scroll;
    margin: 0;
    overflow: hidden;
    background-color: white;
}

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Anton);
@import url(https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy);
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:900);
@import url(https://fonts.googleapis.com/css?family=Rock+Salt);
@import url(https://fonts.googleapis.com/css?family=Special+Elite);



/* --------------------------------------------- */
/* ▼mobile
/* --------------------------------------------- */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,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
 {
    font-family: "Noto Sans JP", sans-serif;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    text-align:left;
    clear: both;
    background:transparent
}

body {
    line-height: 1;
    -webkit-text-size-adjust: 100%;
}

article,
aside,
details,
figcaption,
figure,
hgroup,
menu,
nav,
section {
    margin: 10px auto;
    padding: 0 20px;
    display: block;
}
aside,details,figcaption,figure,hgroup,menu,nav,section {
    padding:10px 20px;
}
h1 {
    font-size:25px;
}
h2 {
    font-size:20px;
}
h3 {
    font-size:13px;
}
h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 5px;
}
h4{
    text-align:left;
}
p {
    font-size:12px;
    line-height: 15px;
    color:#666;
}
dt,dd,dd label{
    font-size:12px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align:left;
}

dt,dd,label,.button{
    font-family:"Noto Sans JP", sans-serif;

}
.tright{
    text-align:right;
}
.tcenter{
    text-align:center;
}
.tmargin{
    margin-top:20px;
}
.rmargin{
    margin-right:20px;
}

.top {
    height: 60px;
    background-position: top center; /* 中央 */
    background-size:100%;
    background-color: #4b5966;
} 

.bottom {
    height: 59px;
    background-position: bottom center; /* 中央 */
    background-size:100%;
    background-color: #4b5966;
} 
.middle {
    height: 41px;
    background-position: bottom center; /* 中央 */
    background-size:100%;
    background-color: #4b5966;
} 

a {
    color:#ABC900;
    margin:0;
    padding:0;
    font-size:11px;
    vertical-align:baseline;
    background:transparent;
    text-decoration:none
}


ins {
    background-color:#fff;
    color:#000;
    text-decoration:none
}

mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:700
}

del {
    text-decoration:line-through
}

abbr[title],dfn[title] {
    border-bottom:1px dotted;
    cursor:help
}

table {
    border-collapse:collapse;
    border-spacing:0
}


input,select {
    vertical-align:middle;
    padding-top:5px;
}


footer {
    margin: 50px 0 0 20px;
}

header {
    margin: 20px 0 0 20px;
}

.logo {
    margin: 0 5px 0 0;
    height: 50px;
    width: 50px;
    background-image: url("./img/logo.png"); /* ヘッダー用の画像を設定する */
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
}
.copy{
color#FFF;
margin-top:150px
}

canvas {
    display: block;
    height: 350px;
}
.clock,.date,.day{
  font-family:"Noto Sans JP", sans-serif;
  font-weight:bold;
  color:#FFF;
  font-size:20px;
  padding-top:5px;
  filter:alpha(opacity=10);
  -moz-opacity: 0.1;
  opacity: 0.1;
}
section {
    margin-top: 40px;
}


/* -------------------------------------------- */
/* ▼iphone */
/* -------------------------------------------- */
@media all and (min-width: 480px) {
canvas {
    display: block;
    height: 250px;
}
}


/* -------------------------------------------- */
/* ▼tablet */
/* -------------------------------------------- */
@media all and (min-width: 768px) {
.top {
    height: 250px;
    background-attachment: fixed; /* 固定配置} */
} 

.bottom {
    height: 300px;
    background-attachment: fixed; /* 固定配置} */
} 
.middle {
    height: 250px;
    background-attachment: fixed; /* 固定配置} */
}
article {
    padding:0px 40px;
}
canvas {
    display: block;
    height: 450px;
}


}

/* ------------------------------------ */
/* ▼PC */
/* ------------------------------------ */
@media all and (min-width: 920px) {
canvas {
    display: block;
    height: 550px;
}

}