main.css

@charset "UTF-8";

body{
   font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
   color:#323232;
}
h1,h2{
   display: inline-block;
    padding: 0.5em 1em;
    text-align: center;
    text-decoration: none;
    background: #323232;
    color: #FFF;
    border-bottom: solid 4px #161616;
    border-radius: 3px;
    
}

input[type=text],input[type=password]{
   border:0;
   padding:10px;
   font-size:1.3em;
   font-family:Arial, sans-serif;
   color:#161616;
   border:solid 1px #ccc;
   margin:0 0 20px;
   width:300px;
   -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

input[type=submit],button{
   border:solid 1px #ccc;
padding:15px 30px;
margin:0 0 20px;
font-family:Arial, sans-serif;
font-size:1.2em;
text-transform:uppercase;
font-weight:bold;
color:#323232;
cursor:pointer;
}

input:focus {
   border:solid 1px rgb(74, 229, 234);
}

.login {
   width: 60%;
   margin: auto;
   text-align: right;
}

/* -------------------- */
/* ▼メニューバーの装飾 */
/* -------------------- */
ul.ddmenu {
   margin: 0px;               /* メニューバー外側の余白(ゼロ) */
   padding: 0px 0px 10px 10px; /* メニューバー内側の余白(左に15px) */
   background-color: #ec1399; /* バーの背景色(濃い赤色) */
}

/* -------------------------- */
/* ▼メインメニュー項目の装飾 */
/* -------------------------- */
ul.ddmenu li {
   width: 100px;           /* メニュー項目の横幅(125px) */
   display: inline-block;  /* ★1:横並びに配置する */
   list-style-type: none;  /* ★2:リストの先頭記号を消す */
   position: relative;     /* ★3:サブメニュー表示の基準位置にする */
}
ul.ddmenu a {
   background-color: #ec1399; /* メニュー項目の背景色(濃い赤色) */
   color: white;              /* メニュー項目の文字色(白色) */
   line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
   text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
   text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
   font-weight: bold;         /* 太字にする */
   display: block;            /* ★4:項目内全域をリンク可能にする */
}
ul.ddmenu a:hover {
   background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
   color: #ec1399;            /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}


ul.ddmenu ul {
    display: none;       /* ★1:標準では非表示にする */
    margin: 0px;         /* ★2:サブメニュー外側の余白(ゼロ) */
    padding: 0px;        /* ★3:サブメニュー内側の余白(ゼロ) */
    position: absolute;  /* ★4:絶対配置にする */
 }
 
 /* ---------------------------------- */
 /* ▼サブメニューがある場合に開く処理 */   /* ※サブメニューが1階層しか存在しない場合の記述 */
 /* ---------------------------------- */
 ul.ddmenu li:hover ul {
    display: block;      /* ★5:マウスポインタが載っている項目の内部にあるリストを表示する */
 }

 ul.ddmenu ul li {   /* ※A */
    width: 200px;               /* サブメニュー1項目の横幅(135px) */
    border-top: 1px solid pink; /* 項目上側の枠線(ピンク色で1pxの実線) */
 }
 ul.ddmenu ul li a {   /* ※B */
    line-height: 35px;   /* サブメニュー1項目の高さ(35px) */
    text-align: left;    /* 文字列の配置(左寄せ) */
    padding-left: 5px;   /* 文字列前方の余白(5px) */
    font-weight: normal; /* 太字にはしない */
 }
 ul.ddmenu ul li a:hover {   /* ※C */
    background-color: #ffff80; /* サブメニュー項目にマウスが載ったときの背景色(淡い黄色) */
    color: #005500;            /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
 }

 canvas {
    margin:none;
 }

#canvas_wrapper {
	float: right;
}

a.eval {
   display: inline-block;
   text-align: center;
   max-width: 590px;
   padding: 10px;
   background-color: #323232;
   color: #FFF;
   text-decoration: none;
   font-weight: bold;
   position: relative;
   overflow: hidden;
   z-index: 1;
}
a.eval:after{
   width: 100%;
   height: 0;
   content:"";
   position: absolute;
   top: 50%;
   left: 50%;
   background : #FFF;
   opacity: 0;
   transform: translateX(-50%) translateY(-50%);
   transition: .5s;
   z-index: -1;
}
a.eval:hover{
   color: #161616;
}
a.eval:hover:after{
   height: 240%;
   opacity: 1;
}
a.eval:active:after{
   height: 340%;
   opacity: 1;
}
a.eval1 { font-size: 12px; }
.eval2 { font-size: 18px; }
.eval3 { font-size: 24px; }
.eval4 { font-size: 48px; }
.eval5 { font-size: 64px; }

.excite:hover{
   color: #f79b23 !important;
}

.relax:hover{
   color: #7ed168 !important;
}
.fear:hover{
   color: #be4eff !important;
}
.sad:hover{
   color: #5e76ff !important;
}
.anger:hover{
   color: #b10000 !important;
}

/* 評価の丸 */
input[type=button].circleBtn{
   width: 35px;
   height: 35px;
   border: solid;
   border-radius: 50%;
}
input[type=button].clickableCircleBtn:hover{
   border-style: hidden;
}
#circleBtnExcite {
   background-color: #f79b23;
   color: #FFF;
}
#circleBtnRelax {
   background-color: #7ed168;
   color: #FFF;
}
#circleBtnFear {
   background-color: #be4eff;
   color: #FFF;
}
#circleBtnSad{
   background-color: #5e76ff;
   color: #FFF;
}
#circleBtnAnger{
   background-color: #b10000;
   color: #FFF;
}

 table{
    padding: 100px;
    text-align: center;
 }
 td{
   text-align: center;
   width: 100px;
   height: 100px;
 }