@charset "utf-8";

/*
*   Styles
*/
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

    index.html

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ------------------------------------------------------------------

    common.cssをoverride

------------------------------------------------------------------- */

#main input {
    border: none;
}

div#content {
    background: none;
}

div#main {
    width: 900px;
}

/* ------------------------------------------------------------------

    common

------------------------------------------------------------------- */

.wrapper {
    background: url(../img/bg_more.gif) no-repeat 50px bottom;
}

#step1 {
    height: 322px;
}

/* ------------------------------------------------------------------

    greenTab

------------------------------------------------------------------- */

.greenTab {
    background: url(../img/bg_recommend.gif) no-repeat left top;
    float: left;
    width: 438px;
    height: 322px;
}

.greenTab h3 {
    height: 44px;
}

.greenTab ul {
    padding: 3px 0 6px 11px;
    margin: 0;
    width: 434px;
}

.greenTab ul li {
    display: block;
    float: left;
    margin: 0 11px 1px 0;
    _margin: 0 9px 0 0;
    padding: 9px 0;
}

.greenTab ul li a {
    display: block;
    width: 199px;
    height: 47px;
    zoom: 100%;
    overflow: hidden;
}

.greenTab ul li a:hover {
    background: url(../img/bg_recommend_list.gif) left top no-repeat;
}

.greenTab span.checkLabel {
    padding-left:32px !important;
    background-position: left 8px !important;
    zoom: 100%;
}

/* ------------------------------------------------------------------

    orangeTab

------------------------------------------------------------------- */

.orangeTab {
    background: url(../img/bg_color.gif) no-repeat left top;
    float: left;
    width: 211px;
}

.orangeTab h3 {
    height: 44px;
}

.orangeTab ul {
    padding: 5px 1px 8px 11px;
	_padding-bottom: 5px;
}

.orangeTab ul li{
    float: left;
    list-style: none;
    height: 37px;
    width: 183px;
    margin: 0 0 1px;
}

.orangeTab ul li a {
    display: block;
}

.orangeTab span.checkLabel {
    background-position: left 4px !important;
    padding-top: 6px;
    padding-left: 32px !important;
}

/* ------------------------------------------------------------------

    blueTab

------------------------------------------------------------------- */

.blueTab {
    background: url(../img/bg_price.gif) no-repeat left top;
    float: left;
    width: 191px;
    height: 322px;
}

.blueTab h3 {
    height: 44px;
}

.blueTab ul {
    padding: 4px 1px 8px 11px;
}

.blueTab ul li {
    float: left;
    list-style: none;
    height: 37px;
    width: 183px;
    margin: 0px 11px 1px 0;
}

.blueTab ul li a {
    height: 25px;
    width: 183px;
    display: block;
    margin: 6px 0;
}

/* ------------------------------------------------------------------

    selectbox

------------------------------------------------------------------- */
div.selectboxArea{
    margin:8px 20px 34px 10px;
}
div.selectbox {
    background:#fff;
    border:solid 1px #59493f;
    width:90px;
    padding:1px;
    margin:4px 4px 3px 4px;
    float:left;
    position:absolute;
}
div.selectbox a{
    display: block;
    outline:none;
}
div.selectbox img{
    vertical-align:bottom;
}

.slct1 div.selectbox{
    z-index:1;
}
.slct2 div.selectbox{
    z-index:0;
}
div.selLabel {
    padding-top:3px;
    padding-left:100px;
}

div.selectbox a.select {
    /* cursor: default; */
    position:relative;
    display:block;
    width:100%;
}

div.selectbox a.select span {
    display: block;
}

div.selectbox div.pulldown {
    overflow: hidden;
}

.onFocus{
    background:url(../img/select_box_bg.gif) no-repeat left top !important;
    margin:0 !important;
    border:none !important;
    padding:6px !important;
}
.selectArrow{
    position:absolute;
    right:0;
    top:1px;
}

/* hover */
.pulldown a:hover{
    background:no-repeat left top;
    text-indent:-9999px;
}
a.priceL0:hover { background-image:url(../img/pulldown_price_l0_on.gif); }
a.priceL1:hover { background-image:url(../img/pulldown_price_l1_on.gif); }
a.priceL2:hover { background-image:url(../img/pulldown_price_l2_on.gif); }
a.priceL3:hover { background-image:url(../img/pulldown_price_l3_on.gif); }
a.priceL4:hover { background-image:url(../img/pulldown_price_l4_on.gif); }
a.priceL5:hover { background-image:url(../img/pulldown_price_l5_on.gif); }

a.priceH0:hover { background-image:url(../img/pulldown_price_h0_on.gif); }
a.priceH1:hover { background-image:url(../img/pulldown_price_h1_on.gif); }
a.priceH2:hover { background-image:url(../img/pulldown_price_h2_on.gif); }
a.priceH3:hover { background-image:url(../img/pulldown_price_h3_on.gif); }
a.priceH4:hover { background-image:url(../img/pulldown_price_h4_on.gif); }
a.priceH5:hover { background-image:url(../img/pulldown_price_h5_on.gif); }

/* ------------------------------------------------------------------

    moreTab

------------------------------------------------------------------- */

#more {
    display: none;
    position: relative;
    zoom: 100%;
}

p.moreTab {
    background: url(../img/bg_tab_more.gif) no-repeat left top;
    margin: 0 20px 40px 50px;
    padding: 9px 0 0;
}

p.moreTab a {
	outline: none;
}

/* ------------------------------------------------------------------

    checkArea

------------------------------------------------------------------- */
div.checkArea{
    padding:20px 17px 0;
    width:796px;
    margin:0 20px 0 50px;
}

div.checkArea .pinkCol{
    width: 388px;
    float:left;
}
div.checkArea .pinkCol .flLeft{
    z-index:1;
}
div.checkArea .pinkCol .flRight{
    z-index:0;
}
div.checkArea .greenCol{
    width: 388px;
    float:right;
}

/* h3 */
div.checkArea h3{
    margin-bottom:10px;
}
div.checkArea input{
    vertical-align:middle;
    margin-right:5px;
}

/* dl */
div.checkArea dl{
    width: 174px;
    margin:0 10px 20px;
}
div.checkArea div.pinkCol dl{
    position:relative;
    width: 174px;
    margin:0 10px 20px;
}

div.checkArea dl.flRight {
	display: inline;
}

/* dt */
div.checkArea div.pinkCol dt{
    background:url("../img/ttl_bg_brown.gif") no-repeat left top #f5e4d0;
    padding:5px 5px;
}
div.checkArea div.greenCol dt{
    background:url("../img/ttl_bg_brown.gif") no-repeat left top #f5e4d0;
    padding:5px 5px;
    color:#59493f;
    font-weight:bold;
}
div.checkArea dt strong{
    color:#59493f;
    font-weight:bold;
}

/* dd */
div.checkArea dd{
    padding:3px 5px 3px 25px;
    display:block;
    text-indent:-18px;
}
div.checkArea dd.small{
    padding-left:0;
    text-indent:0;
}
/* dd add at 20100625 */
div.checkArea dd label, div.checkArea dd label input {
	cursor: pointer;
}

/* longColumn */
div.checkArea div.greenCol dl.longColumn dt{
    background-image:url(../img/ttl_bg_brown_long.gif); /* override */
}
div.checkArea dl.longColumn{
    width: 368px;
    margin-bottom:20px;
    clear: both;
    position:relative;
}
div.checkArea dl.longColumn dd{
    width: 144px;
}
div.checkArea dl.longColumn dd.rightCol{
    position: absolute;
    right:0;
    top:30px;
}
div.checkArea .block{
    position:absolute;
    right:-8px;
    top:-7px;
}
/* ------------------------------------------------------------------

    hatena & balloon

------------------------------------------------------------------- */

div.hatena * {
	zoom: 100%;
}

div.hatena{
    display:inline-block;
    *display:inline;
	margin-left: 3px;
    position:relative;
    cursor:pointer;
    text-indent:0;
}
.hatena img{
	vertical-align: bottom;
}
div.balloon{
    background:url(../img/balloon.png) no-repeat left bottom;
    width:174px;
    padding-bottom:20px;
    position:absolute;
    right:-147px;
    bottom:-10px;
    z-index:1;
    display:none;
}
div.balloonTop{
    background:url(../img/balloon.png) no-repeat left top;
    position:relative;
    top:-10px;
    padding:10px;
}
div.balloon h4{
    color:#513422;
    font-weight:bold;
}


/* ------------------------------------------------------------------

    step2

------------------------------------------------------------------- */
#step2{
    position:relative;
}
.tabStep2 {
    position:absolute;
    top:-118px;
    left:0;
}
#step2 ul{
    height:355px;
    padding:11px 11px 0 17px;
    background:url(../img/bg_step2.gif) no-repeat left top;
    margin-left:60px;
}
#step2 ul li{
    display:block;
    width:162px;
    height:160px;
    list-style:none;
    float:left;
    padding-bottom:5px;
    zoom:100%;
    overflow:hidden;
}
.textStep2 {
    position:absolute;
    right:7px;
    _right:5px;
    bottom:0;
    *bottom:1px;
    width:279px;
}
.textStep2 a.checkbox span.checkLabel img{
    padding-top:6px;
}

.textStep2 a.checkbox span.checkLabel {
    background:url("../img/check_off_pink.gif") no-repeat left top;
}

.textStep2 a.checkbox span.on{
    background-image:url("../img/check_on_pink.gif");
}

/* ------------------------------------------------------------------

    step2

------------------------------------------------------------------- */

#step3 {
    margin: 37px 0 40px;
    position: relative;
}

.step3arrow {
    position: absolute;
    left: 0;
    top: -68px;
}

#step3 p {
	text-align: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

    table.html

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* yellowbox */
div.yellowbox {
    background:url("../img/bg_yellowbox.gif") no-repeat left top;
	margin-bottom: 10px;
}

div.yellowbox p.text {
    background:url("../img/bg_yellowbox.gif") no-repeat left bottom;
	float: left;
	margin-top: 30px;
    padding:0 25px 30px 25px;
	width: 621px;
}

div.yellowbox p.print {
    background:url("../img/bg_print.gif") no-repeat left top;
	float: right;
	margin-top: 15px;
	padding: 11px 10px 11px 12px;
	width: 192px;
}

/* showTable */
div.showTable{
    background:url(../img/bg_dotline.gif) left bottom no-repeat;
    margin-bottom:19px;
	padding-bottom: 30px;
}
div.hide {
    display: none;
}
div.showTable td.hide {
    display: none;
}

/* orangeTable */
table.orangeTable{
    border:double 1px #ffc763;
    margin-top:10px;
    table-layout:fixed;
    width:100%;
    background:#f8e49b;
}
table.orangeTable th,
table.orangeTable td {
    border:double 1px #ffc763;
    text-align:center;
    background:#fff;
    word-wrap: break-word;
    padding: 5px 10px;
}
table.orangeTable th{
    background:#fff9eb;
    text-align:left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
    width:132px;
    *width:110px;
}
table.orangeTable th.leftTop{
    background:#fce5ad;
}

table.orangeTable td{
}
table.orangeTable td img{
}

/* select */
table.orangeTable tr.select th{
    background:#ffe7a6;
}
table.orangeTable tr.select td{
    background:#fff2c9;
}

/* tabArea */
table.tabArea {
    background: url(../img/bg_table_btm.gif) right bottom no-repeat;
	border-collapse: collapse;
    width: 100%;
}

table.tabArea th, table.tabArea td {
    padding: 5px;
    text-align: center;
}

table.tabArea th, table.tabArea td img {
	vertical-align: top;
}

table.tabArea th {
    width: 125px;
}

/* head */
ul.head{
    background:url(../img/arrow.gif) no-repeat left bottom;
    display:block;
    width:130px;
    margin:auto;
}

ul.head li{
    list-style:none;
}

ul.head li.clearFix {
}

ul.head li.clearFix a.checkbox {
    background-image: url(../img/btn_delete.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	display: block;
	float: left;
	height: 30px;
	outline: none;
	text-indent: -9999px;
	width: 27px;
}

ul.head li.clearFix a.checkbox:hover {
	background-position: 0 -30px;
}

a.detailBtn{
    width:107px;
    display:block;
    margin:3px 0 0 23px;
}

p.moreBtn {
    padding:25px 0 10px;
    text-align:center;
}

.backBtn{
    margin-bottom:45px;
}

/* ------------------------------------------------------------------

    Tickbox

------------------------------------------------------------------- */

#TB_overlay {
	z-index: 20000 !important;
}

#TB_window {
	z-index: 20001 !important;
}

#TB_ajaxContent {
	overflow: visible !important;
	padding: 0 !important;
	position: relative;
}

div#TB_closeAjaxWindow {
	padding: 2px 3px 0 0;
}

div#TB_title {
	overflow: hidden;
}

a#TB_closeWindowButton {
    background-image: url(../img/btn_detail_close.gif);
	background-repeat: no-repeat;
	display: block;
	height: 23px;
	outline: none;
	text-align: left;
	text-indent: -9999px;
	width: 61px;
}

#TB_ajaxContent div.detailContent p {
	margin: 0 !important;
	padding: 0 !important;
}

#TB_ajaxContent div.detailContent p.button {
	position: absolute;
}

/* DELICIA */
#TB_ajaxContent div#detailDelicia p.button {
	left: 35px;
	top: 420px;
}

/* DELICIA 100V */
#TB_ajaxContent div#detailDelicia100v p.button {
	left: 35px;
	top: 405px;
}

/* Griller */
#TB_ajaxContent div#detailGriller p.button {
	left: 35px;
	top: 480px;
}

/* Udea */
#TB_ajaxContent div#detailUdea p.button {
	left: 427px;
	top: 383px;
}

/* Udea ef */
#TB_ajaxContent div#detailUdeaef p.button {
	left: 35px;
	top: 438px;
}

/* Safull */
#TB_ajaxContent div#detailSafull p.button {
	left: 53px;
	top: 355px;
}

/* Lisse */
#TB_ajaxContent div#detailLisse p.button {
	left: 432px;
	top: 345px;
}

/* Mytone */
#TB_ajaxContent div#detailMytone p.button {
	left: 427px;
	top: 409px;
}

/* Metal */
#TB_ajaxContent div#detailMetal p.button {
	right: 0;
	top: 357px;
}

/* ------------------------------------------------------------------

    common

------------------------------------------------------------------- */

.small{
    font-size: 85%;
}

.flLeft{
    float: left;
}

.flRight{
    float: right;
}

/* ------------------------------------------------------------------

    checkbox

------------------------------------------------------------------- */

a.checkbox {
    outline: none;
}

a.checkbox:hover {
	text-decoration: none;
}

a.checkbox span.checkLabel {
	display: block;
	background: url("../img/check_off.gif") no-repeat left top;
	padding-left: 28px;
	min-height: 27px;
	_height: 27px;
}

a.checkbox span.on{
    background-image: url("../img/check_on.gif");
}

/* ------------------------------------------------------------------

    Clear Fix

------------------------------------------------------------------- */

.clearFix {
    _height: 1px;
    min-height: 1px;

    /* Only Mac IE \*//*/
    height: auto;
    display: inline-table;
    /**/
}

.clearFix:after {
    content: ".";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
}

.z0{
z-index: 0;
}
.z1{
z-index: 1;
}
.z2{
z-index: 2;
}
.z3{
z-index: 3;
}