/* ★fixedCss(20140313)★ */
/*
==================================================
テーブル共通
==================================================
*/
table{
width:100%;
font-size:13px;
margin:10px 0;
border-collapse:collapse;
border-spacing:0px;
}
th{
background-color:#EBEBEB;
padding:0;
}
td{
background-color:#FFFFFF;
padding:0;
}
table,td,th{
border:solid 1px #CCC;
}
table#toptbl,table#toptbl td,table#toptbl th{
 border:none;
}
#menu .ritem td,#rmenu .ritem td{border:none;}
.rtitle{
height:44px;
text-align:center;
overflow:hidden;
padding:4px;
}
.rimg{
text-align:center;
}
.timg img{
max-width:200px;
height:auto;
}
.price{
color:#CC0000;
font-weight:bold;
}
.tdesc{
text-align:left;
vertical-align:top;
}
/*
==================================================
商品陳列型
==================================================
*/
.ritm{
background-color:#FFFFFF;
table-layout:fixed;
}
.ritm th,.ritm td{
padding:6px;
line-height:120%;
vertical-align:top;
text-align:center;
}
/*
==================================================
特定取引法に関する表記
==================================================
*/
.tokusho{
}
.tokusho th,.tokusho td{
padding:8px;
}
.tokusho th{
background-color:#E3E3E3;
width:30%;
}
/*
==================================================
商品説明
==================================================
*/
.ritm_desc{
}
.ritm_desc td{
vertical-align:top;
padding:10px;
}
.ritm_desc .title{
background-color:#EBEBEB;
padding:5px;
margin-bottom:8px;
text-align:left;
line-height:120%;
font-family:'HGP創英角ｺﾞｼｯｸUB','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W6',sans-serif;
font-weight:normal;
}
.ritm_desc .title a{
color:#333;
}
.ritm_desc .title a:hover{
color:#FF0000;
}
.ritm_desc .desc{
padding:20px;
}
.ritm_desc .price{
text-align:left;
padding:0px;
}
.ritm_desc .img{
width:20%;
}
.ritm_desc .more,.ritm_desc .price,.ritm_desc .review{
line-height:25px;
height:25px;
margin-right:5px;
margin-left:5px;
}
/*
==================================================
ランキングテーブル１
==================================================
*/
table.rnk1item{
table-layout:auto;
border:solid 1px #CCC;
}
.rnk1item td,.rnk1item th{
border:none;
border-bottom:dotted 1px #CCC;
}
.rnk1item th{
background-color:#FFF;
width:auto;
padding:5px;
width:60px;
vertical-align:middle;
}
.rnk1item td{
background-color:#FFFFFF;
vertical-align:top;
font-size:12px;
line-height:130%;
padding:15px 10px;
}
.rnk1item .ttitle{
font-size:18px;
font-weight:bold;
margin-bottom:12px;
line-height:130%;
}
.rnk1item th,.rnk1item td{
}
.rnk1item .timg{
width:auto;
padding-top:10px;
vertical-align:middle;
}
.rnk1item .alt th,.rnk1item .alt td{
}
/*
==================================================
ランキングテーブル２
==================================================
*/
table.rnk2item{
table-layout:auto;
border:solid 1px #CCC;
}
.rnk2item .timg,.rnk2item .tdesc{
padding:8px;
vertical-align:top;
}
.rnk2item th.ttitle{
padding:10px;
text-align:left;
font-size:16px;
}
.rnk2item td{
overflow:hidden;
}
.rnk2item td.tdesc{
width:100%;
}
.rnk2item td.timg{
width:auto;
}
.rnk2item td.tdesc,.rnk2item td.timg{
border:none;
}
.rnk2item .timg img{
padding-bottom:10px;
height:auto;
}
.rnk2item .tdesc{
line-height:150%;
}
table.rnk2item table.ttable{
width:101%;
margin:0px;
padding:0px;
border:none;
table-layout:fixed;
}
.ttable th,.ttable td{
padding:8px;
line-height:130%;
text-align:center;
border:none;
border-right:dotted 1px #CCC;
}
/*
==================================================
ランキングテーブル３
==================================================
*/
.rnk3item{
table-layout:auto;
border:solid 1px #CCC;
}
.rnk3item th{
text-align:left;
padding:8px;
font-size:17px;
}
.rnk3item th img{
vertical-align:bottom;
margin-right:6px;
}
.rnk3item td{
padding:10px;
border:none;
}
.rnk3item td.timg{
text-align:center;
width:auto;
}
.rnk3item .img-center{
width:auto;
display:inline;
}
.rnk3item th img{
float:left;
}
/*
==================================================
価格比較テーブル
==================================================
*/
.prc1item{
table-layout:auto;
}
.prc1item th{
padding:6px;
text-align:center;
}
.prc1item td{
text-align:center;
padding:6px;
}
.prc1item td{
text-align:center;
padding:6px;
}
.prc1item .alt td{
background-color:#F5F5F5;
}
.prc1item .price{
text-align:right;
width:100px;
font-size:15px;
}
/*
==================================================
項目説明型
==================================================
*/
.dsc1item,.dsc2item{
background-color:#CCCCCC;
table-layout:fixed;
}
.dsc1item th,.dsc1item td,.dsc2item th,.dsc2item td{
padding:6px;
}
.dsc1item th{
width:30%;
}
.dsc1item th,.dsc2item th{
text-align:center;
}
.dsc1item td,.dsc2item td{
vertical-align:top;
}
/*
==================================================
メニュー型
==================================================
*/
.tblmenu1item td{
font-size:12px;
line-height:130%;
vertical-align:top;
}
.tblmenu1item td .ttitle{
background-color:#EEEEEE;
font-weight:bolder;
padding:7px;
margin-bottom:8px;
font-size:13px;
}
/*
==================================================
スマートフォンへの最適化(不要な場合は下記を削除)
==================================================
*/
@media screen and (max-width:640px){
td,th,tr{
-moz-box-sizing:border-box;
box-sizing:border-box;
}
tr{
width:100%;
}
/* ランキング1 */
.rnk1item th,.rnk1item td{
width:100%;
display:block;
border:none;
}
.rnk1item tr{
border-bottom:solid 1px #CCC;
}
.rnk1item .timg,.rnk1item th,.rnk1item .timg p,.rnk1item th p{
text-align:center !important;
}
/* ランキング2 */
.rnk2item td.timg,.rnk2item td.tdesc{
display:block;
width:100%;
border-right:solid 1px #CCC;
}
.rnk2item td.timg{
text-align:center !important;
}
/* ランキング3 */
.rnk3item th,.rnk3item td{
display:block;
width:100%;
}
/* 特商ページ */
.tokusho td,.tokusho th{
display:block;
width:100%;
}
}
/*
==================================================
カラーの変更
==================================================
*/
table{
<% tableBackgroundColor %>
<% tableFontColor %>
}
td{
<% tdBackgroundColor %>
<% tdFontColor %>
}
th{
<% thBackgroundColor %>
<% thFontColor %>
}