/*
リセット
-------------------------------------------------- */
body,div,dl,dt,dd,ul,li,h1,h2,h3,p{
margin: 0;
padding: 0;
}
div,h1,h2,h3,h4,p,address{
display: block;
}
h1, h2, h3{
font-size: 1.0em;
font-style: normal;
font-weight: normal;
line-height: 160%;
}
img{
border: none;
vertical-align: bottom;
margin: 0px;
padding: 0px;
}
p{
color: #464646;
line-height: 1.6;
}
/* list */
li,dt,dd{
line-height: 1.6;
list-style: none none outside;
}
/* body */
body{
color: #333333;
font-size: 80%;
font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
line-height: 160%;
text-align: center;
background: #f3f3f3 url(bg.gif) top center repeat-x;
}
/* link */
a{ color: #0000ff; text-decoration: underline; }
a:hover{ color: #ff6600; text-decoration: underline; }
/* clearfix */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0px;
font-size: 0px;
visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*----------------------------------------------------------------------
* 拡張設定
*
* HTMLで使いたい位置に、
* ××××
* と使うことで、それぞれが反映できます。
*
* 文中の強調テキストを太字にしたい場合 *
* .boldを使用
*
* 文中の強調を太字にします。
*
* といった使い方をして下さい。
*
*----------------------------------------------------------------------
*/
/*
テキストの太字
----------------------------------------------------------------------*/
.bold{ font-weight: bold; }
.normal{ font-weight: normal; }
/*
テキストのサイズ
----------------------------------------------------------------------*/
.fs09{ font-size: 0.9em; }
.fs10{ font-size: 1.0em; }
.fs11{ font-size: 1.1em; }
.fs12{ font-size: 1.2em; }
.fs13{ font-size: 1.3em; }
.fs14{ font-size: 1.4em; }
.fs15{ font-size: 1.5em; }
.fs16{ font-size: 1.6em; }
.fs17{ font-size: 1.7em; }
.fs18{ font-size: 1.8em; }
.fs19{ font-size: 1.9em; }
.fs20{ font-size: 2em; }
/*
テキストのカラー
----------------------------------------------------------------------*/
.red{ color: #ff0000; } /* 赤 */
.blue{ color: #0000ff; } /* 青 */
.green{ color: #009900; } /* 緑 */
.yellow{ color: #ffff00; } /* 黄 */
.navy{ color: #003399; } /* 紺色 */
.black{ color: #000000; } /* 黒 */
.gray{ color: #999999; } /* グレー */
.purple{ color: #9900cc; } /* 紫 */
.orange{ color: #ff6633; } /* 橙 */
.pink{ color: #ff00ff; } /* 桃 */
.white{ color :#ffffff; } /* 白 */
/*
テキストの背景
----------------------------------------------------------------------*/
.back-red{ background-color: #ff0000; } /* 赤 */
.back-blue{ background-color: #0000ff; } /* 青 */
.back-green{ background-color: #009900; } /* 緑 */
.back-yellow{ background-color: #ffff00; } /* 黄 */
.back-navy{ background-color: #003399; } /* 紺色 */
.back-black{ background-color: #000000; } /* 黒 */
.back-gray{ background-color: #999999; } /* グレー */
.back-purple{ background-color: #9900cc; } /* 紫 */
.back-orange{ background-color: #ff6633; } /* 橙 */
.back-pink{ background-color: #ff00ff; } /* 桃 */
.back-white{ background-color: #ffffff; } /* 白 */
/*
テキストのまつわる線
----------------------------------------------------------------------*/
.under{ text-decoration: underline; } /* 下線 */
.through{ text-decoration: line-through; } /* 打ち消し線 */
/*
テキストの位置配置
----------------------------------------------------------------------*/
.text-l{ text-align: left; } /* 左寄せ */
.text-c{ text-align: center; } /* 中央揃え */
.text-r{ text-align: right; } /* 右寄せ */
/*
マージンの位置配置
----------------------------------------------------------------------*/
.m0{ margin: 0px!important; } /*全margin無し*/
.mt-0{ margin-top: 0px!important; } /*上marginが0px*/
.mr-0{ margin-right: 0px!important; } /*右marginが0px*/
.mb-0{ margin-bottom: 0px!important; } /*下marginが0px*/
.ml-0{ margin-left: 0px!important; } /*左marginが0px*/
.m1{ margin: 1px!important; }
.mt-1{ margin-top: 1px!important; }
.mr-1{ margin-right: 1px!important; }
.mb-1{ margin-bottom: 1px!important; }
.ml-1{ margin-left: 1px!important; }
.m2{ margin: 2px!important; }
.mt-2{ margin-top: 2px!important; }
.mr-2{ margin-right: 2px!important; }
.mb-2{ margin-bottom: 2px!important; }
.ml-2{ margin-left: 2px!important; }
.m3{ margin: 3px!important; }
.mt-3{ margin-top: 3px!important; }
.mr-3{ margin-right: 3px!important; }
.mb-3{ margin-bottom: 3px!important; }
.ml-3{ margin-left: 3px!important; }
.m4{ margin: 4px!important; }
.mt-4{ margin-top: 4px!important; }
.mr-4{ margin-right: 4px!important; }
.mb-4{ margin-bottom: 4px!important; }
.ml-4{ margin-left: 4px!important; }
.m5{ margin: 5px!important; }
.mt-5{ margin-top: 5px!important; }
.mr-5{ margin-right: 5px!important; }
.mb-5{ margin-bottom: 5px!important; }
.ml-5{ margin-left: 5px!important; }
.m6{ margin: 6px!important; }
.mt-6{ margin-top: 6px!important; }
.mr-6{ margin-right: 6px!important; }
.mb-6{ margin-bottom: 6px!important; }
.ml-6{ margin-left: 6px!important; }
.m7{ margin: 7px!important; }
.mt-7{ margin-top: 7px!important; }
.mr-7{ margin-right: 7px!important; }
.mb-7{ margin-bottom: 7px!important; }
.ml-7{ margin-left: 7px!important; }
.m8{ margin: 8px!important; }
.mt-8{ margin-top: 8px!important; }
.mr-8{ margin-right: 8px!important; }
.mb-8{ margin-bottom: 8px!important; }
.ml-8{ margin-left: 8px!important; }
.m9{ margin: 9px!important; }
.mt-9{ margin-top: 9px!important; }
.mr-9{ margin-right: 9px!important; }
.mb-9{ margin-bottom: 9px!important; }
.ml-9{ margin-left: 9px!important; }
.m10{ margin: 10px!important; }
.mt-10{ margin-top: 10px!important; }
.mr-10{ margin-right: 10px!important; }
.mb-10{ margin-bottom: 10px!important; }
.ml-10{ margin-left: 10px!important; }
.m15{ margin: 15px!important; }
.mt-15{ margin-top: 15px!important; }
.mr-15{ margin-right: 15px!important; }
.mb-15{ margin-bottom: 15px!important; }
.ml-15{ margin-left: 15px!important; }
.m20{ margin: 20px!important; }
.mt-20{ margin-top: 20px!important; }
.mr-20{ margin-right: 20px!important; }
.mb-20{ margin-bottom: 20px!important; }
.ml-20{ margin-left: 20px!important; }
.m25{ margin: 25px!important; }
.mt-25{ margin-top: 25px!important; }
.mr-25{ margin-right: 25px!important; }
.mb-25{ margin-bottom: 25px!important; }
.ml-25{ margin-left: 25px!important; }
.m30{ margin: 30px!important; }
.mt-30{ margin-top: 30px!important; }
.mr-30{ margin-right: 30px!important; }
.mb-30{ margin-bottom: 30px!important; }
.ml-30{ margin-left: 30px!important; }
.m40{ margin: 40px!important; }
.mt-40{ margin-top: 40px!important; }
.mr-40{ margin-right: 40px!important; }
.mb-40{ margin-bottom: 40px!important; }
.ml-40{ margin-left: 40px!important; }
.m50{ margin: 50px!important; }
.mt-50{ margin-top: 50px!important; }
.mr-50{ margin-right: 50px!important; }
.mb-50{ margin-bottom: 50px!important; }
.ml-50{ margin-left: 50px!important; }
.m60{ margin: 60px!important; }
.mt-60{ margin-top: 60px!important; }
.mr-60{ margin-right: 60px!important; }
.mb-60{ margin-bottom: 60px!important; }
.ml-60{ margin-left: 60px!important; }
.m70{ margin: 70px!important; }
.mt-70{ margin-top: 70px!important; }
.mr-70{ margin-right: 70px!important; }
.mb-70{ margin-bottom: 70px!important; }
.ml-70{ margin-left: 70px!important; }
/*------------------------------------------------------------
padding
-------------------------------------------------------------*/
.p0{ padding: 0px!important; } /*全padding無し*/
.pt-0{ padding-top: 0px!important; } /*上paddingが0px*/
.pr-0{ padding-right: 0px!important; } /*右paddingが0px*/
.pb-0{ padding-bottom: 0px!important; } /*下paddingが0px*/
.pl-0{ padding-left: 0px!important; } /*左paddingが0px*/
.p1{ padding: 1px!important; }
.pt-1{ padding-top: 1px!important; }
.pr-1{ padding-right: 1px!important; }
.pb-1{ padding-bottom: 1px!important; }
.pl-1{ padding-left: 1px!important; }
.p2{ padding: 2px!important; }
.pt-2{ padding-top: 2px!important; }
.pr-2{ padding-right: 2px!important; }
.pb-2{ padding-bottom: 2px!important; }
.pl-2{ padding-left: 2px!important; }
.p3{ padding: 3px!important; }
.pt-3{ padding-top: 3px!important; }
.pr-3{ padding-right: 3px!important; }
.pb-3{ padding-bottom: 3px!important; }
.pl-3{ padding-left: 3px!important; }
.p4{ padding: 4px!important; }
.pt-4{ padding-top: 4px!important; }
.pr-4{ padding-right: 4px!important; }
.pb-4{ padding-bottom: 4px!important; }
.pl-4{ padding-left: 4px!important; }
.p5{ padding: 5px!important; }
.pt-5{ padding-top: 5px!important; }
.pr-5{ padding-right: 5px!important; }
.pb-5{ padding-bottom: 5px!important; }
.pl-5{ padding-left: 5px!important; }
.p6{ padding: 6px!important; }
.pt-6{ padding-top: 6px!important; }
.pr-6{ padding-right: 6px!important; }
.pb-6{ padding-bottom: 6px!important; }
.pl-6{ padding-left: 6px!important; }
.p7{ padding: 7px!important; }
.pt-7{ padding-top: 7px!important; }
.pr-7{ padding-right: 7px!important; }
.pb-7{ padding-bottom: 7px!important; }
.pl-7{ padding-left: 7px!important; }
.p8{ padding: 8px!important; }
.pt-8{ padding-top: 8px!important; }
.pr-8{ padding-right: 8px!important; }
.pb-8{ padding-bottom: 8px!important; }
.pl-8{ padding-left: 8px!important; }
.p9{ padding: 9px!important; }
.pt-9{ padding-top: 9px!important; }
.pr-9{ padding-right: 9px!important; }
.pb-9{ padding-bottom: 9px!important; }
.pl-9{ padding-left: 9px!important; }
.p10{ padding: 10px!important; }
.pt-10{ padding-top: 10px!important; }
.pr-10{ padding-right: 10px!important; }
.pb-10{ padding-bottom: 10px!important; }
.pl-10{ padding-left: 10px!important; }
.p15{ padding: 15px!important; }
.pt-15{ padding-top: 15px!important; }
.pr-15{ padding-right: 15px!important; }
.pb-15{ padding-bottom: 15px!important; }
.pl-15{ padding-left: 15px!important; }
.p20{ padding: 20px!important; }
.pt-20{ padding-top: 20px!important; }
.pr-20{ padding-right: 20px!important; }
.pb-20{ padding-bottom: 20px!important; }
.pl-20{ padding-left: 20px!important; }
.p30{ padding: 30px!important; }
.pt-30{ padding-top: 30px!important; }
.pr-30{ padding-right: 30px!important; }
.pb-30{ padding-bottom: 30px!important; }
.pl-30{ padding-left: 30px!important; }
.p40{ padding: 40px!important; }
.pt-40{ padding-top: 40px!important; }
.pr-40{ padding-right: 40px!important; }
.pb-40{ padding-bottom: 40px!important; }
.pl-40{ padding-left: 40px!important; }
.p50{ padding: 50px!important; }
.pt-50{ padding-top: 50px!important; }
.pr-50{ padding-right: 50px!important; }
.pb-50{ padding-bottom: 50px!important; }
.pl-50{ padding-left: 50px!important; }
.p60{ padding: 60px!important; }
.pt-60{ padding-top: 60px!important; }
.pr-60{ padding-right: 60px!important; }
.pb-60{ padding-bottom: 60px!important; }
.pl-60{ padding-left: 60px!important; }
.p70{ padding: 70px!important; }
.pt-70{ padding-top: 70px!important; }
.pr-70{ padding-right: 70px!important; }
.pb-70{ padding-bottom: 70px!important; }
.pl-70{ padding-left: 70px!important; }
#framebox{
width: 800px;
margin: 0px auto;
text-align: left;
background: url(logo.gif) left top no-repeat;
}
h1{
position: absolute;
width: 780px;
top: 20px;
color: #fff;
text-align: right;
}
a img{
opacity: 1.0;
filter: alpha(opacity=100);
}
a:hover img{
opacity: 0.7;
filter: alpha(opacity=70);
}
/* ヘッダー
-------------------------------------------------- */
#header{
position: relative;
width: 800px;
height: 250px;
top: 60px;
margin: 0px 0px 70px;
background: url(header.gif) left top no-repeat;
}
#header img{
float: right;
display: inline;
margin: 25px 30px 0px 30px;
}
#header p.title{
padding: 60px 330px 0px 30px;
color: #232323;
font-size: 160%;
}
#header p.subtitle{
padding: 7px 350px 0px 50px;
color: #666;
}
/* パンくずナビ
-------------------------------------------------- */
p#bnav{
text-align: right;
margin: 0px 10px 10px;
font-size: 0.8em;
}
/* メインコンテンツフレーム
-------------------------------------------------- */
#mainframe{
width: 800px;
border-top: 1px #999 solid;
background: url(mainright.gif) left bottom no-repeat;
}
/* メインコンテンツ
-------------------------------------------------- */
#mainbox{
float: left;
width: 570px;
padding: 0px 0px 10px 0px;
}
#mainbox h2{
clear: both;
color: #fff;
font-size: 130%;
text-indent: 35px;
line-height: 50px;
background: url(h2.gif) left top no-repeat;
}
#mainbox h2 a{ color: #ffffff; text-decoration: none; }
#mainbox h2 a:hover{ color: #ffffff; text-decoration: none; }
#mainbox h3{
clear: both;
margin: 25px 0px 0px;
color: #141a22;
font-size: 130%;
text-indent: 35px;
line-height: 50px;
background: url(h3.gif) left top no-repeat;
}
#mainbox p{
margin: 25px 35px;
padding: 0px 0px 10px;
font-size: 1.1em;
}
#mainbox p.link{
padding-left: 20px;
font-size: 1.8em;
background: url(link.gif) left 10px no-repeat;
}
#mainbox .l{
float: left;
display: inline;
margin: 0px 15px 25px 0px;
}
#mainbox .r{
float: right;
display: inline;
margin: 0px 0px 25px 15px;
}
#mainbox ul{
margin: 25px 45px;
}
#mainbox ul li{
margin: 3px 0px 0px 25px;
color: #232323;
font-weight: bold;
list-style: circle none outside;
}
#mainbox dl{
margin: 25px 35px;
padding: 10px;
}
#mainbox dl dt{
margin: 10px 0px;
color: #232323;
font-size: 110%;
font-weight: bold;
text-indent: 10px;
border-bottom: 1px #232323 dotted;
}
#mainbox dl dd{
margin: 3px 20px;
}
#mainbox blockquote{
margin: 30px;
border: 1px #999 dotted;
border-left: 5px #232323 solid;
background-color: #efefef;
}
#mainbox blockquote p{
margin: 15px 10px 5px 30px;
color: #333;
font-size: 0.9em;
}
#mainbox table{
margin: 30px;
font-size: 1.0em;
empty-cells: show;
border-spacing: 0px;
border-collapse: collapse;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
background-color: #fff;
}
#mainbox table tr th{
margin: 1px;
padding: 7px;
font-weight: bold;
text-align: center;
color: #fff;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color: #232323;
}
#mainbox table tr td{
padding: 7px;
text-align: left;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#mainbox .ranking{
margin: 30px;
}
#mainbox .ranking dl{
margin: 10px 0px;
padding: 5px 10px 5px 0px;
border: 1px #232323 dotted;
}
#mainbox .ranking dl dt{
margin: 0px;
padding: 0px;
font-size: 1.4em;
font-weight: bold;
line-height: 50px;
text-indent: 0px;
border: none;
}
#mainbox .ranking dl.ranking-1 dt{ background: url(ranking-1.jpg) left top no-repeat; }
#mainbox .ranking dl.ranking-2 dt{ background: url(ranking-2.jpg) left top no-repeat; }
#mainbox .ranking dl.ranking-3 dt{ background: url(ranking-3.jpg) left top no-repeat; }
#mainbox .ranking dl dt.img{
float: right;
display: inline;
margin: 5px 10px 5px 20px;
padding: 0px;
background: none;
}
#mainbox .ranking dl dt.text{
margin: 10px 0px 0px 20px;
text-indent: 60px;
}
#mainbox .ranking dl dd{
margin: 10px 10px 10px 30px;
font-size: 0.9em;
}
#mainbox .review{
margin: 30px;
min-height: 250px;
border: 3px #232323 double;
}
/* 人物左側 */
#mainbox .person-l{ padding: 20px 30px 20px 120px; }
#mainbox .person-l-01{ background: url(person-l-01.gif) 20px 20px no-repeat; }
#mainbox .person-l-02{ background: url(person-l-02.gif) 20px 20px no-repeat; }
#mainbox .person-l-03{ background: url(person-l-03.gif) 20px 20px no-repeat; }
#mainbox .person-l-04{ background: url(person-l-04.gif) 20px 20px no-repeat; }
#mainbox .person-l-05{ background: url(person-l-05.gif) 20px 20px no-repeat; }
/* 人物右側 */
#mainbox .person-r{ padding: 20px 120px 20px 30px; text-align: right; }
#mainbox .person-r-01{ background: url(person-r-01.gif) right 10px no-repeat; }
#mainbox .person-r-02{ background: url(person-r-02.gif) right 10px no-repeat; }
#mainbox .person-r-03{ background: url(person-r-03.gif) right 10px no-repeat; }
#mainbox .person-r-04{ background: url(person-r-04.gif) right 10px no-repeat; }
#mainbox .person-r-05{ background: url(person-r-05.gif) right 10px no-repeat; }
#mainbox .review p{
display: inline;
margin: 0px;
font-size: 0.9em;
line-height: 200%;
}
#mainbox .review .person-2 p{ margin: 0px 100px 0px 0px; }
/* サイドボックス
-------------------------------------------------- */
#sidebox{
float: right;
display: inline;
width: 210px;
margin: 0px 10px;
}
#sidebox .box{
margin: 0px 0px 30px;
border-left: 1px #999999 solid;
border-right: 1px #999999 solid;
border-bottom: 1px #999999 solid;
background-color: #ffffff;
}
#sidebox .box p.title{
padding: 10px 0px;
color: #fff;
font-size: 110%;
background-color: #232323;
font-weight: bold;
text-align: center;
}
#sidebox .box ul{
padding: 5px 0px 10px;
}
#sidebox .box ul li{
margin: 5px 0px 0px 25px;
list-style: circle none outside;
}
#sidebox .box p{
padding: 10px 15px;
font-size: 90%;
}
/* フッター
-------------------------------------------------- */
#footer{
margin: 20px 0px 0px 0px;
padding: 20px 0px 0px;
background: url(footer.gif) left top no-repeat;
}
#footer p{
padding: 0px 20px 10px;
text-align: right;
}
#footer address{
color: #ffffff;
line-height: 40px;
text-align: center;
background: url(address.gif) left top no-repeat;
}
#footer address a{ color: #ffffff; text-decoration: none; }
#footer address a:hover{ color: #ffffff; text-decoration: none; }
#footer ul{
margin: 0px 0px 0px 10px;
text-align: right;
}
#footer ul li{
display: inline;
margin: 0px 5px 0px 0px;
font-size: 0.85em;
}
#footer ul li a{ color: #999; text-decoration: none;}
#footer ul li a:hover{ color: #999; }
#mainbox table td p {
margin: 5px 5px;
padding: 0px;
font-size: 1em;
}