/*CSS RESET*/
*{margin:0; padding:0;}
img{border:0;}

html{
  height:100%;
}

body{
        font-family:MyFont;
        font-size:12px;
        background:#fff;
        height:100%;
        margin:0;
}

@font-face{
        font-family:'MyFont';
        src:url(Mamelon.otf);
}
h1{
        font-size:100px;
}
h2{
  font-size:50px;
}
h3{
  font-size:25px;
}
h4{
  font-size:30px;
  border-bottom:solid 3px #87CEFA;
}
h5{
  font-size:20px;
}

h6{
  font-size:30px;
}

#container{
        width:100%;
        min-width:1024px;
        height:100%;
        min-height:768px;
        margin:0 auto;
        background:#000;
}

#TopPageContainer{
        width:100%;
        min-width:1024px;
        height:100%;
        min-height:768px;
        margin:0 auto;
        background-position:center center;
        background-image:url("images/sousyoku/toppage-03.png");
        background-repeat:no-repeat;
        background-size:cover;
}

#left{
        width:15%;
        min-width:157px;
        height:100%;
        min-height:768px;
        float:left;
        background:#FFD400;
        position:fixed;
        z-index:100;
}

#right{
        width:auto;
        min-width:85%;
        height:auto;
        min-height:100%;
        float:left;
        background:#F1EDE4;
        margin-left:15%;
}

#Intro{
        width:100;
        font-size:20px;
        color:#56514B;
        margin:20px auto 50px;
        background:rgba(211, 174, 111, 0.6);
        padding-top:30px;
        padding-bottom:20px;
}

#Intro a{
  font-size:25px;
  text-decoration:underline;
  color:#E3FEFE;
  text-shadow:2px 1px 0px #000;
}

#Intro a:link{
  text-decoration:underline;
  color:#E3FEFE;
}

#Intro a:hover{
  text-decoration:underline;
  color:#FFD400;
}

#SiteLogo{
        width:80%;
        height:auto;
        min-width:142px;
        min-height:142px;
        margin:30px auto 0;
        border:5px solid;
        border-color:#000;
        background-color:#000;
}

#Explanation{
        width:80%;
        height:auto;
        background:#D3AE6F;
        margin:10px auto 0;
        padding-top:10px;
        padding-bottom:20px;
        text-align:center;
        font-size:15px;
}

.navigation{
  
  height:auto;
  text-align:right;
  margin:0 auto;
}
.navigation li{
  margin-top:10px;
  margin-right:30px;
  font-size:14px;
  list-style:none;
}

.navigation li a{
  text-decoration:none;
  color:#616161;
  text-shadow:1px 2px 3px #FFF;
}

.navigation li a:link{
  text-decoration:none;
  color:#616161;
  text-shadow:1px 2px 3px #FFF;
}

.navigation li a:hover{
  text-decoration:none;
  color:#F8ABA6;
  text-shadow:1px 2px 3px #000;
}

#TasteGraph{
        margin:0 auto;
}

.Category{
  width:100;
  height:auto;
  position:absolute;
  top:30px;
  right:30px;
  padding-right:15px;
  padding-left:15px;
  text-align:right;
  background:#FFD400;
}

.SweetsTable{
  width:100;
  height:auto;
  margin:13% auto 0;
  font-size:30px;
}

.SweetPic{
  width:100;
  height:auto;
  margin:5px 50px 0;
  pointer-events:none;
}
.SweetPic a img{
  width:100;
  height:auto;
  border-radius:50%;
  border:solid 5px #000000;
  pointer-events:auto;
}
.SweetPic a img:hover{
  border-radius:50%;
  border:solid 5px #FFD400;
}

.CharaFace{
        width:121px;
        height:112px;
}

#CharaTable{
  width:100;
  height:auto;
  margin:10% auto 0;
}

#CharaBox{
  width:100;
  height:auto;
  margin-top:10%;
  margin-left:30px;
  float:left;
}

.SweetPic2{
  width:100;
  height:auto;
  margin:0;
  border-radius:50%;
}
.SweetPic2 img{
  border-radius:50%;
  border:solid 3px #000000;
}

.TeaName{
  height:auto;
  text-align:left;
  margin-left:50px;
  margin-bottom:30px;
  font-size:30px;
  border:5px solid;
  background-color:#FFF;
  border-color:#000;
  border-radius:10%;
}

.CharaMV2{
        width:100;
        height:auto;
        margin-right:200px;
        margin-bottom:100px;
}

.CharaInfo{
  width:400px;
  font-size:18px;
  position:absolute;
  top:400px;
  right:30px;
}

.Ex{
  font-size:15px;
}

.AllTeaName{
  font-size:20px;
  color:#754C24;
}

.displayTable{
  background-color:rgba(211,174,111,0.5);
  border-radius:10px;
}

/*中央寄せ*/
.Center1{/*自身と中身の左右中央寄せ*/
        margin-right:auto;
        margin-left:auto;
        text-align:center;
}
.Center2{/*中身の上下左右中央寄せ　幅と高さを指定するクラスと併用しなければならない
                               中身にdivタグがある場合はそのdivタグの左右のmarginにautoを指定しなければならない
                               このクラスのdiv自身を上下左右中央寄せするには、そのdivを新たなdivで挟み、新たなdivにクラスHelpC2を指定しなければならない*/
  display: table-cell;/*表の中の1枠みたいなもの*/
  text-align:center;
  vertical-align: middle;
}

.HelpC2{/*各タグにwidth追加、clearfixと共に(同じタグの中で)は使えない*/
  display:table;
  border-collapse:separate;
  border-spacing: auto 0;/*数字は「左右、上下」*/
  margin:0 auto;
}

.TopSize{
  margin:0 auto;
}

.absoluteParent{
  position:relative;
}

.clear{
  clear:both;
}

/*clearfixに関して*/
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */