@charset "utf-8";

/* --- タイプ2 レイアウト --- */


/* --- 全体の背景・テキスト --- */
body {
width: 100%;
background-color: #ffffff; /* 全体の背景色 */
color: #000000; /* 全体の文字色 */
font-size: 80%; /* 全体の文字サイズ */
}

/* --- 全体のリンクテキスト --- */
a:link { color: #0000ff; }
a:visited { color: #000090; }
a:hover { color: #ff8000; }
a:active { color: #ff0000; }

a:hover img{
filter: alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
}


/* --- ▼ヘッダ内の設定開始 --- */

/* --- ヘッダ --- */
#header{
  text-align: center;
  margin:0 auto;
  border-top: 10px #c0c0c0 solid; /* ヘッダの上境界線 */
  border-bottom: 1px #c0c0c0 solid; /* ヘッダの下境界線 */
}

#header hr.none {
display: none; /* 表示形式（なし） */
}

/* --- サイトタイトル --- */
#header h1{
font-size: 1.2em;
max-width: 880px;
margin:0 auto;
text-align: left;
padding-top: 5px;
}

#header img {
width: 100%;
height: auto;
max-width: 880px;
}

/* --- ガイドメニュー --- */
.guide{
max-width: 880px;
margin:0 auto;
text-align: right;
}

/* --- ▲ヘッダ内の設定終了 --- */


/* --- ▼コンテンツ内の設定開始 --- */

/* --- コンテンツ --- */
#content {
padding-top: 10px;
max-width: 880px;
margin: 0 auto;
padding-bottom: 20px;
}


/* --- ▼メインカラム内の設定開始 --- */

/* --- メインカラム --- */
#main {
  margin: 0px auto;
  width: 90%;
}

/* --- 強調セクション --- */
#main div.emphasis {
/* border: 1px #c0c0c0 solid; */ /* セクションの境界線 */
margin-top: 10px;
}
 /* 見出し */
#main div.emphasis h2 {
margin: 10px 0 10px; /* 見出しのマージン（上、左右、下） */
font-size: 130%; /* 見出しの文字サイズ */
color: #ff8000; /* 見出しの文字色 */
}
 /* 段落 */
#main div.emphasis p {
margin: 0 0 1em; /* 段落のマージン（上、左右、下） */
line-height: 150%; /* 行の高さ */
}

/* --- 標準セクション --- */
/* 背景 */
.rank-back {
/*background-color: #f0f0f0;*/
border-top: 6px solid #ffa500;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: 3px solid #c0c0c0;
padding: 10px 10px 10px 10px;
margin-bottom: 40px;
}
.rank-back img {
width: 100%;
height: auto;
max-width: 468px;
}
/* 見出し */
.rank1 {
background-image: url(http://xn--hckqz4aa3lzfge9d3eu946drr8a.com/images/m01.png);
background-repeat: no-repeat;
background-size:24px;
font-size:22px;
padding-left: 26px;
height: 20px;
margin-bottom: 10px;
}
.rank2 {
background-image: url(http://xn--hckqz4aa3lzfge9d3eu946drr8a.com/images/m02.png);
background-repeat: no-repeat;
background-size:24px;
font-size:22px;
padding-left: 26px;
height: 20px;
margin-bottom: 10px;
}
.rank3 {
background-image: url(http://xn--hckqz4aa3lzfge9d3eu946drr8a.com/images/m03.png);
background-repeat: no-repeat;
background-size:24px;
font-size:22px;
padding-left: 26px;
height: 20px;
margin-bottom: 10px;
}
.rank4 {
background-image: url(http://xn--hckqz4aa3lzfge9d3eu946drr8a.com/images/m04.png);
background-repeat: no-repeat;
background-size:24px;
font-size:22px;
padding-left: 26px;
height: 20px;
margin-bottom: 10px;
}
.rank5 {
background-image: url(http://xn--hckqz4aa3lzfge9d3eu946drr8a.com/images/m05.png);
background-repeat: no-repeat;
background-size:24px;
font-size:22px;
padding-left: 26px;
height: 20px;
margin-bottom: 10px;
}

/* 説明文 */
.setsumei {
background-color: #ffd8e3;
padding: 10px 10px 10px 10px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 140%;
}
/* 説明文2 */
.setsumei2 {
float: left;
background-color: #d7fefe;
padding: 10px 10px 0px 10px;
max-width: 350px;
line-height: 140%;
}
/* 詳細はこちらボタン */
.button {
float: right;
text-align: right;
margin-right: 10px;
}
/* 説明見出し */
#main div.normal h3 {
font-size: 140%; /* 見出しの文字サイズ */
color: #ff6347;
font-weight: 900;
margin: 10px 0px 10px 0px;
}
/* 見出し */
#main div.normal h2 {
margin: 0 0 1em; /* 見出しのマージン（上、左右、下） */
padding: 5px 8px; /* 見出しのパディング（上下、左右） */
background-color: #e0e0e0; /* 見出しの背景色 */
font-size: 140%; /* 見出しの文字サイズ */
}
/* 段落 */
#main div.normal p {
margin: 0 5px 1em; /* 段落のマージン（上、左右、下） */
line-height: 160%; /* 行の高さ */
}


/* --- ▲メインカラム内の設定終了 --- */


/* --- ▼サイドバー内の設定開始 --- */

/* --- サイドバー --- */
#nav {
  margin: 0px auto;
  width: 90%;
}

#nav ul {
list-style: none;
margin-top: 10px;
}

#nav li {
margin-left: 10px;
margin-right: 10px;
padding-left:18px;
padding-top:17px;
padding-bottom:16px;
background:url(http://xn--wi-fi-qr4dllg7d.net/images/arrow40-010.gif) left 18px no-repeat;
border-bottom: 1px dotted #aaaaaa;
font-size:14px;
}

#nav li a {
text-decoration: none;
}

/* --- セクション（共通設定） --- */
#nav div.section {
margin-bottom: 10px; /* セクションの下マージン */
}
/* 見出し */
#nav div.section h2 {
margin: 0 0 0.7em; /* 見出しのマージン（上、左右、下） */
padding: 5px 8px; /* 見出しのパディング（上下、左右） */
font-size: 120%; /* 見出しの文字サイズ */
}
/* 段落 */
#nav div.section p {
margin: 0 10px 0.7em; /* 段落のマージン（上、左右、下） */
line-height: 130%; /* 行の高さ */
}

/* --- 強調セクション1（水色） --- */
#nav div.emphasis {
border: 1px #92c2dc solid; /* セクションの境界線 */
}
/* 見出し */
#nav div.emphasis h2 {
background-color: #a7dcfc; /* 見出しの背景色 */
}

/* --- 強調セクション2（オレンジ） --- */
#nav div.strong {
border: 1px #f4c24d solid; /* セクションの境界線 */
}
/* 見出し */
#nav div.strong h2 {
background-color: #ffce68; /* 見出しの背景色 */
}

/* --- ▲サイドバー内の設定終了 --- */


/* --- 罫線 --- */
#content hr.clear {
clear: both; /* 右フロートのクリア */
width: 100%;
margin: 0;
visibility: hidden; /* 非表示 */
}

/* --- ▲コンテンツ内の設定終了 --- */


/* --- ▼フッタ内の設定開始 --- */

/* --- フッタ --- */
#footer {
padding: 15px 0 20px; /* フッタのパディング（上、左右、下） */
background-color: #f9f9f9; /* フッタの背景色 */
border-top: 1px #c0c0c0 solid; /* フッタの上境界線 */
}

.container-foot {
max-width: 880px;
margin: 0 auto;
}

.container-foot ul{
text-align: center;
margin-bottom: 5px;
}

/* --- フッタメニュー --- */
/* --- アドレス・コピーライト --- */
#footer address {
font-style: normal;
text-align: center;
line-height: 140%; /* 行の高さ */
}

/* --- ▲フッタ内の設定終了 --- */


/* PC向けレイアウト指定：*/
@media only screen and (min-width: 640px) {
#main {
float: left;
width: 660px; /* メインカラムの幅 */
}

#main div.section {
margin: 0 20px 10px 0; /* セクションのマージン（上右下左） */
}

#main div.emphasis {
/* border: 1px #c0c0c0 solid; */ /* セクションの境界線 */
margin-top: 20px;
}

.rank1 {
background-image: url(http://xn--hckqz4aa3lzfge9d3eu946drr8a.com/images/m01.png);
background-repeat: no-repeat;
background-size:45px;
font-size:40px;
padding-left: 50px;
height: 45px;
margin-bottom: 10px;
}
.rank2 {
background-image: url(http://xn--hckqz4aa3lzfge9d3eu946drr8a.com/images/m02.png);
background-repeat: no-repeat;
background-size:45px;
font-size:40px;
padding-left: 50px;
height: 45px;
margin-bottom: 10px;
}
.rank3 {
background-image: url(http://xn--hckqz4aa3lzfge9d3eu946drr8a.com/images/m03.png);
background-repeat: no-repeat;
background-size:45px;
font-size:40px;
padding-left: 50px;
height: 45px;
margin-bottom: 10px;
}
.rank4 {
background-image: url(http://xn--hckqz4aa3lzfge9d3eu946drr8a.com/images/m04.png);
background-repeat: no-repeat;
background-size:45px;
font-size:40px;
padding-left: 50px;
height: 45px;
margin-bottom: 10px;
}
.rank5 {
background-image: url(http://xn--hckqz4aa3lzfge9d3eu946drr8a.com/images/m05.png);
background-repeat: no-repeat;
background-size:45px;
font-size:40px;
padding-left: 50px;
height: 45px;
margin-bottom: 10px;
}

#nav {
float: right;
width: 220px; /* サイドバーの幅 */
}

#nav li {
width: 180px;
margin-right: 0px;
}

}