@charset "UTF-8";

/* ======================================
 *
 * BODYラッパー
 *
 * ====================================== */

.piyo-wrapper{
  width:100%;
  /* ここで設定した背景色が左右の余白に表示される */
  background-color:#6495ED;
}

/* ======================================
 *
 * ヘッダ
 *
 * ====================================== */

.piyo-header {
  position:relative;
  color:#ffffff;
  /* 背景画像の場合はURLを指定する */
  background-color: #6495ED;
  height:200px;

}

.piyo-header-title {
  font-size:3.2rem;
  width:100%;
}


.piyo-header-title h1 {
  padding:32px 0 0 32px;
  letter-spacing: 0.15rem;
  font-weight:bold;
}
.piyo-header-title h1 a {
  color:#fff9b8;
}

.piyo-header-text{
  margin-top:20px;
  padding-left:48px;
  letter-spacing: 0.2rem;
}

/* ================width: 100px;======================
 *
 * コンテンツバックグラウンド
 *
 * ====================================== */

.piyo-content {
  /* コンテンツの横幅 */
  max-width:1200px;
  /* コンテンツの左右パディング */
  padding: 0 20px;
  /* 中央寄せ */
  margin: 0 auto;
  /* 文字のセンタリング */
  text-align:center;
  /* コンテンツの背景色*/
  /background-color: #FFFFFF0;
  position:relative;
}

/* ======================================
 *
 * コンテンツヘッダ
 *
 * ====================================== */

.piyo-c-header{
    width:100%;
    /* 高さを固定にしたい場合はここをpx指定にする */
    height:auto;

    /* 上下の余白 */
    padding-top:10px;
    padding-bottom:10px;
 }

.piyo-c-header-title h1,
.piyo-c-header-title h2 {
   padding-top:10px;
   font-size:3.2rem;
 }

.piyo-c-header-text{
  margin-top:10px;
}

/* ======================================
 *
 * ナビゲーションバー
 *
 * ====================================== */

.piyo-navbar {
  width:100%;
  /* 高さを固定にしたい場合はここをpx指定にする */
  height:auto;
  background-color:#fff9b8;
}
.piyo-navbar ul li {
  float:left;
  padding: 5px 10px;
  font-size:2.0rem;
  font-weight:bold;
  /* 要素数に応じ */
  width : -webkit-calc(100% / 4) ;
  width : calc(100% / 4) ;
}
.piyo-navbar ul li a{
  display: block;


}
.piyo-navbar ul li:hover {
  background-color:white;
  opacity:0.8;
}
.f16 {
  font-size: 16px ;
}
td.td-link p {
    padding: 10px 0;
}
/*ここから新しくスタイル付ける＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.text-name {
  text-align: left;
  color: #603813;

}
table{
    width: 100%;
  border-color: #a08a46;
  border-style: solid;
  background: #fff; 
}
tbody{

}

#hzs-panel1-table1 td[class="td-link"] {
  font-weight:bold;
  padding: 7px 4px;
  text-align: center;
  
}

#hzs-panel1-table1 p[class="td-name"] {
  font-weight:bold;
  font-size: 13px;
  text-align: center ;
}

#hzs-panel1-table1 em {
  font-weight:bold;
}

.table-full td{
  text-align: -webkit-auto;
}

.icon_name{
    width: 75%;
}

.icon_names{
    height: auto;
}
.icon_names {
    width: 100%;
}
#hzs-rightpanel1 > .ranking:nth-child(2) > .ranking-image {

}

#hzs-panel1-table1 th {
  padding: 7px 10px;
  background-color: #e8e8e1;
  font-size:12px;

  vertical-align:middle;
  width: 15%;
}

#hzs-panel1-table1 td {

  font-size:14px;
  vertical-align:top;
  width:-webkit-calc(85% / 5);
  width:calc(85% / 5);
}

#hzs-panel1-table1 td:nth-child(2) {
  background: #ded6c0;
  padding: 0px px;
}

#hzs-panel1-table1 td img[class="icon_big"] {

}
td.adjustment{
    padding: 7px;
    font-weight: 500;
    text-align: center;
}
td.adjustment p {
    text-align: center;
    font-size: 16px;
}
.talign_center {
    width: 100%;
    text-align: center;
}
.icon_big{
    text-align: center;
    padding:10px;
}

.table-full p {
    font-weight: 500;
}

#hzs-rightpanel1 .ranking-title p {
   font-size:16px;
   font-weight:bold;
   text-decoration: underline;
   display:inline;
}

#hzs-rightpanel1 {
  float:left;
  padding:10px;
  border-style: solid;
  border-color: #806239;
  margin-bottom: 20px;
}
.hzs-medal{
    /*display: inline-block;
    width: 23%;*/
}
img.rank-medal{
   width: 86%;

}
div.title_rank p.title img{
    width: 100%;
}
div#hzs-rightpanel1{
    padding: 0;
}

.rank_order {
  padding: 10px;
}
.rightpanel_outline {
    display: inline-block;
    width: 305px;
}
.info_outline {
    display: table;
    border-style: solid;
    width: 100%;
    border-color: #806239;
    margin-top: 20px;
}

.site_info p {
    text-decoration: underline;
}

.ranking5 {
    padding: 10px 0 10px 0px;
}

.decoration1 {
    text-align: center;
}

.campaignbtn img{
    text-align: right;
}

.recommended{
    text-align: right;
}

.recommended a{
    color: #603813;
    font-size: large;
}

.correction{
    /*text-align: left;*/
}

a.detailbtn{
  font-weight:bold;
}

.kuchicomibtn{
    width: 10%;
}

.detailbtn {
    width: 40%;
    text-align: -webkit-auto;
  }

.campaignbtn {
    width: 35%;
    padding-left: 10%;
}

p.equality {
    text-align: left;
}

.point-no3 {
    margin-top: 10px;
}
/* ======================================
 *
 * コンテンツパネル
 *
 * ====================================== */

 .piyo-panel {
   width:100%;
   /* background-color:#fff9b8; */
   position:relative;
 }

 /* ======================================
 *
 * コンテンツパネル（2カラム）
 *
 * ====================================== */





/* ======================================
 *
 * コンテンツパネル（高さ）
 *
 * ====================================== */
.panel-fix-200px {
  min-height:200px;
 }

/* ======================================
 *
 * コンテンツパネル（上下余白）
 *
 * ====================================== */
.panel-padding-small{
  margin:5px auto;
}

.panel-padding-medium{
  margin:10px auto;
}

.panel-padding-large{
  margin:20px auto;
}

/* ======================================
 *
 * コンテンツパネル（影）マテリアルデザイン用
 *
 * ====================================== */
.panel-shadow {
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

/* ======================================
 *
 * コンテンツフッタ
 *
 * ====================================== */

.piyo-c-footer {
  width:100%;
  height:20px;
  background-color:brown;

}

/* ======================================
 *
 * フッタ
 *
 * ====================================== */
.piyo-footer {
  width:100%;
  background-color:#edeae9;
}

.piyo-footer-text{
  font-size:1rem;
  text-align:rgiht;
  padding-right: 10px;
}



.bold{
  font-weight:bold;
}