@charset "UTF-8";
 
/* CSSリセット */
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{margin:0;padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;font-weight:normal;}
body{line-height:1}article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block}
ul{list-style:none}blockquote,q{quotes:none}blockquote:before,
blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;
font-size:100%;vertical-align:baseline;background:transparent}
del{text-decoration:line-through}abbr[title],dfn[title]
{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;
margin:1em 0;padding:0}input,select{vertical-align:middle}

@font-face {
    font-family:"JF-dot-ayu18";   /* フォント名 */
    letter-spacing: 0.1;
    src: url("font/JF-Dot-Ayu18.ttf") format("truetype");   /* フォントファイル */
}

/*共通設定*/
body{
    background: orange url(images/ホームページ背景.png);
    background-size: width 900px;
    font-size: 20px;
    font-family:"Impact";
    color: #666666;
}

a{
    color: #f0cc7a;
}

a:hover{
    color: #4080bf;
}

a:visited{
    color:  #f0cc7a;
}

#wrapper{
    background: cyan;
    width:900px;
    margin: 0 auto;
}

#wrapper h1{
    font-size: 125%;
    border-left: 10px #4080bf solid;
    padding-left: 10px;
    margin-bottom: 15px;
}

header{
    margin: 15px 0 15px;
    padding-left: 10px;
}

header p{
    padding-left: 10px;
    font-size: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

#inputscreen{
    width:900px;
    margin-top: 30px;
    margin-right: 30px;
}

.chipframe{
    width: 900px;
    padding-left: 10px;
    margin-bottom: 30px;
}

.chipframe p{
    margin-top: 15px;
    margin-bottom: 15px;
}

.chipname{
    width: 900px;
    padding-left: 10px;
    margin-bottom: 30px;
    overflow:  hidden;
}

.chipname p{
    margin-top: 15px;
    margin-bottom: 15px;
}

.imageup{
    width: 900px;
    padding-left: 10px;
    margin-bottom: 30px;
}

.imageup p{
    margin-top: 15px;
    margin-bottom: 15px;
}

.chipcode{
    width: 900px;
    padding-left: 10px;
    margin-bottom: 30px;
}

.chipcode p{
    margin-top: 15px;
    margin-bottom: 15px;
}

.element{
    width: 900px;
    padding-left: 10px;
    margin-bottom: 30px;
}

.element p{
    margin-top: 15px;
    margin-bottom: 15px;
}

.damage{
    width: 900px;
    padding-left: 10px;
    margin-bottom: 30px;
}

.damage p{
    margin-top: 15px;
    margin-bottom: 15px;
}

.message{
    width: 900px;
    padding-left: 10px;
    margin-bottom: 15px;
}

.message p{
    margin-top: 15px;
    margin-bottom: 15px;
}

#outputscreen{
    margin-top: 30px;
    width: 900px;
}

.chipresult{
    padding-left: 10px;
    float: left;
    /*position: relative;*/
}

.chipresult p{
    margin-top: 15px;
    margin-bottom: 15px;
}

#battlechipL{
    /*letter-spacing: -10%;*/
    font-stretch: ultra-condensed;
}

footer:before{
    content: "";
    display: table;
    clear: both;
}

footer p{
    background: #4080bf;
    width: 890px;
    margin: 50px auto 20px;
    padding: 5px;
    text-align: center;
    font-size: 80%;
}

footer p small{
    color: #f0cc7a;
    border: 1px #f0cc7a solid;
    padding: 20px;
    display: block;
}

footer a{
    color: #f0cc7a;
}

footer a:hover{
    color:#f3a600;
}