@charset "UTF-8";
/* CSS Document */

/* basedesu ---------------------------- */
html, body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight: normal;
text-align: center;
line-height: normal;
background-color: #cc0000;
height: 100%;
width: 100%;
margin:0px;
padding:0px;
}
body, div, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, button, textarea, p, blockquote, th, td {
margin: 0px;
padding: 0px;
}
table {
border-collapse: collapse;
margin: 0px;
padding: 0px;
}
dl, dt, dd, ul, ol, li {
margin: 0px;
padding: 0px;
list-style-type: none;
}
form, input, img {
margin: 0px;
padding: 0px;
}
img, div {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
input, button, textarea, select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select { *font-size: 100%;
}
/* link ---------------------------- */
a, a:visited {
text-decoration: underline;
cursor:pointer;
}
a:hover, a:active { text-decoration: underline; }
/* headtag ---------------------------- */
h1 a, h2 a, h3 a {
font-size: 1px;
line-height: 1px;
text-align: left;
text-indent: -1000em;
display: block;
overflow: hidden;
}
/* container with Browzer font size controller ---------------------------- */
#container {
font-size: 12px;
line-height: 18px;
width:100%;
}
.firefox #container {
font-size: 11px;
line-height: 1.3em;
}
.minefield #container {
font-size: 11px;
line-height: 1.3em;
}
.chrome #container {
font-size: 11px;
line-height: 1.3em;
}
.msie #container {
font-size: 12px;
line-height: 1.4em;
}
.opera #container {
font-size: 12px;
line-height: 1.3em;
}
.safari #container {
font-size: 11px;
line-height: 1.3em;
}
.iphone #container {
font-size: 11px;
line-height: 1.3em;
}
/* container to contents ---------------------------- */
#container #wrap-main {
background-color: #FFF;
text-align: left;
margin: 0px;
padding: 10px 0 30px 0;
width: 100%;
height:auto;
}
/* header------------------------------------------------
------------------------------------------------------ */
#container #contents-head {
margin: 0px auto;
padding: 0px;
height: auto;
width: 950px;
}
#contents-head h1 {
display: block;
margin: 0px;
padding: 0px;
height: 40px;
width: 182px;
float:left;
}
#contents-head h1 a {
background-image: url(../images/header_combo.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 40px;
width: 182px;
}
#contents-head .number-count{
text-align: left;
margin: 0 0 0 30px;
float: left;
height: auto;
width: 100px;
overflow: hidden;
}
#contents-head .number-count a{
text-decoration: none;
}
.number-count a dt{
font-size: 1px;
line-height: 1px;
background-image: url(../images/header_combo.gif);
background-repeat: no-repeat;
background-position: -185px 0px;
text-indent: -1000em;
display: block;
height: 19px;
width: 100px;
overflow: hidden;
}
.number-count a dd{
font-size: 1.2em;
color: #131313;
font-weight: bold;
line-height: 1em;
background-image: url(../images/header_combo.gif);
background-repeat: no-repeat;
background-position: -185px -19px;
text-align: right;
display: block;
height: 21px;
width: 100px;
overflow: hidden;
}
.number-count a:hover dd{
color:#f30;
background-position: -285px -19px;
}
.number-count a dd span{
 padding:4px 28px 0 0;
 display:block;
}

#contents-head form.fw {
width:445px;
height:19px;
display:block;
padding:0px;
float:right;
}
#contents-head form.fw h2 {
font-size: 1px;
line-height: 1px;
background-image: url(../images/header_combo.gif);
background-repeat: no-repeat;
background-position: -290px 0px;
text-indent: -1000em;
display: block;
margin: 0px;
padding: 0px;
float: left;
height: 19px;
width: 180px;
overflow: hidden;
}
#contents-head form.fw .txtbox {
background-image: url(../images/bg_fw_textbox.gif);
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 0px;
float: left;
height: 19px;
width: 180px;
}
#contents-head form.fw .txtbox input {
line-height: 19px;
background-color: #DBDBDB;
height: 19px;
width: 170px;
margin:0 0 0 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#contents-head form.fw .btn {
background-image: url(../images/btn_fw_search.gif);
background-repeat: no-repeat;
background-position: left top;
display: block;
margin: 0 0 0 5px;
padding: 0px;
float: left;
height: 19px;
width: 80px;
}
#contents-head form.fw .btn:hover, #contents-head form.fw .btn:focus { background-position: left bottom; }
#contents-head .package {
background-image: url(../images/dotline_header.gif);
background-repeat: repeat-x;
background-position: left bottom;
margin:0 0 5px 0;
padding:0 0 11px 0;
}
/* header account area */
#contents-head #account {
font-size: 10px;
margin: 0px;
padding: 5px 0;
height: auto;
width: auto;
float:left;
}
.msie #contents-head #account { font-size: 11px; }
#contents-head #account p.before { width: 100%; }
#contents-head #account p.after { width: 240px; }
/* contents area-----------------------------------------------------
------------------------------------------------------------------ */
/* base ---------------------------- */
#wrap-contents {
background-image: url(../images/bg_contents.gif);
background-repeat: repeat-x;
background-position: center top;
margin: 0px;
padding: 0px;
height: auto;
width: 100%;
}
#contents-main {
background-image: url(../images/bg_visual_contents.gif);
background-repeat: no-repeat;
background-position: center top;
margin: 0px;
padding: 0px;
height: auto;
width: 100%;
}
#contents-stage {
text-align: left;
width:950px;
height:auto;
margin:0 auto;
padding: 0 0 30px 0;
background-image: url(../images/bg_globalmenu.gif);
background-repeat: repeat-y;
background-position: left top;
}
#contents-stage #contents-pack {
margin: 0 0 0 30px;
float: right;
height: auto;
width: 730px;
}
#contents-pack #pack-head {
height: 80px;
width: 730px;
margin:0 0 20px 0;
}
#pack-head h2 {
font-size: 1px;
line-height: 1px;
background-repeat: no-repeat;
background-position: left bottom;
text-indent: -1000em;
display: block;
height: 80px;
overflow: hidden;
float:left;
}
#pack-head p.pankuzu {
font-size: 10px;
margin: 0px;
padding: 10px 0 0 0;
float: right;
text-align: right;
}
#pack-head p.pankuzu a, #pack-head p.pankuzu a:visited { text-decoration: underline; }
/* pack left */
#contents-pack #pack-left {
text-align: left;
float: left;
height: auto;
width: 510px;
position: relative;
}
#pack-left h3 {
font-size: 1px;
line-height: 1px;
background-repeat: no-repeat;
background-position: left top;
text-indent: -1000em;
width: 510px;
display: block;
overflow: hidden;
}
#pack-left p.lead a, #pack-left p.lead a:visited { text-decoration: underline; }
#pack-left p.error {
font-size: 14px;
line-height:20px;
}
#pack-left .pagetop-inpage {
height: auto;
width: 100%;
margin:0 0 20px 0;
}
#pack-left .pagetop-inpage a, #pack-left .pagetop-inpage a:visited {
font-size: 1px;
line-height: 1px;
background-image: url(../images/btn_pagetop_inpage.gif);
background-repeat: no-repeat;
background-position: left top;
text-indent: -1000em;
display: block;
height: 8px;
width: 59px;
overflow: hidden;
float:right;
}
#pack-left .pagetop-inpage a:hover, #pack-left .pagetop-inpage a:active { background-position: left bottom; }
/* categply indexpage style */
#pack-left #box-categoly-index { margin:30px 0 0 0; }
#pack-left #box-categoly-index h3 {
height: 62px;
width: 250px;
background-image: url(../images/hl_categoly_index.gif);
}
#box-categoly-index .categoly-link {
float: left;
height: auto;
width: 250px;
}
.categoly-link ul { }
.categoly-link li {
margin:0 0 15px 0;
display:block;
}
.categoly-link li a, .categoly-link li a:visited {
text-decoration: none;
display:block;
}
.categoly-link li a:hover, .categoly-link li a:active { text-decoration: underline; }
.categoly-link li a dl:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.categoly-link li a dl { zoom: 100%; }
.categoly-link li a dl { display: inline-table; }
/* Hides from IE-mac ￥*/
* html .categoly-link li a dl { height: 1%; }
.categoly-link li a dl { display: block; }
/* End hide from IE-mac */

.categoly-link li a dt {
font-size: 1px;
line-height: 1px;
background-repeat: no-repeat;
background-position: left top;
text-indent: -1000em;
display: block;
float: left;
height: 80px;
width: 90px;
}
.categoly-link li a:hover dt { background-position: left bottom; }
.categoly-link li a dd {
display: block;
float: left;
height: auto;
width: 160px;
}
.categoly-link li a dd strong {
font-size: 1px;
line-height: 1px;
background-repeat: no-repeat;
background-position: left top;
text-indent: -1000em;
display: block;
margin: 0 0 10px 0;
height: 15px;
width: 160px;
overflow: hidden;
}
.categoly-link li a:hover dd strong { background-position: left bottom; }
#box-categoly-index .categoly-illust {
float: left;
width: 240px;
margin:0 0 0 20px;
}
/* pack right */
#contents-pack #pack-right {
text-align: left;
float: left;
height: auto;
width: 190px;
margin:0 0 0 30px;
}
#pack-right h3, #pack-right h4 {
font-size: 1px;
line-height: 1px;
background-repeat: no-repeat;
background-position: left top;
text-indent: -1000em;
width: 190px;
display: block;
overflow: hidden;
}
#pack-right h3.freedial {
background-image: url(../images/banner_freedial.gif);
margin: 0px;
height: 104px;
}
#pack-right h3.freedial a {
width:190px;
height:84px;
display:block;
}
#pack-right dt.pr {
font-size: 1px;
line-height: 1px;
background-image: url(../images/body_pr.gif);
background-repeat: no-repeat;
background-position: left top;
text-indent: -1000em;
margin: 0px;
width: 190px;
height: 30px;
display: block;
overflow: hidden;
}
#pack-right dd { margin: 0 0 5px 0; }
/* guide */
#pack-right #box-guide {
width:190px;
height:auto;
margin:20px 0 0 0;
}
#pack-right #box-guide h3 {
background-image: url(../images/guide_combo.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 45px;
width: 185px;
margin:0 0 10px 0;
}
#pack-right #box-guide h3.after {
background-position: 0px -45px;
}
#pack-right #box-guide h4{
height: 31px;
background-image: url(../images/guide_combo.gif);
background-repeat: no-repeat;
}
#pack-right #box-guide h4.step1 {
width: 173px;
background-position: -190px 0px;
margin:0 0 10px 0;
}
#pack-right #box-guide h4.step2 {
width: 178px;
background-position: -190px -45px;
margin:20px 0 10px 0;
}
#pack-right #box-guide h4.step3 {
width: 190px;
background-position: -190px -90px;
margin:20px 0 10px 0;
}
#pack-right #box-guide dl { font-size:10px; }
#pack-right #box-guide dt {
float: left;
height: auto;
width: 110px;
}
#pack-right #box-guide dt p { margin:0 0 5px 0; }
#pack-right #box-guide dt a {
font-size: 1px;
line-height: 1px;
background-image: url(../images/btn_guide_more.gif);
background-repeat: no-repeat;
background-position: left top;
text-indent: -1000em;
display: block;
height: 15px;
width: 110px;
overflow: hidden;
}
#pack-right #box-guide dt a:hover { background-position: left bottom; }
#pack-right #box-guide dd {
float: left;
height: auto;
width: 60px;
margin:0 0 0 20px;
}
/* footer area-------------------------------------------------------
------------------------------------------------------------------ */
#container #wrap-foot {
background-image: url(../images/bg_footwrap.gif);
background-repeat: repeat-x;
background-position: center top;
}
#container #foot-contents {
text-align: left;
margin: 0px auto;
padding: 10px 0 20px 0;
height: auto;
width: 950px;
clear:both;
}
#container #foot-contents .box-left { float: left; }
#container #foot-contents .globalmenu {
line-height: 16px;
margin:0 0 5px 0;
}
#container #foot-contents .globalmenu a, #container #foot-contents .globalmenu a:visited { text-decoration: none; }
#container #foot-contents .copywrite {
font-size: 1px;
line-height: 1px;
background-image: url(../images/text_copyright.gif);
background-repeat: no-repeat;
background-position: left top;
text-indent: -1000em;
display: block;
height: 12px;
width: 235px;
overflow: hidden;
}
#container #foot-contents .pagetop {
float: right;
height: 12px;
width: 63px;
}
#container #foot-contents .pagetop a, #container #foot-contents .pagetop a:visited {
font-size: 1px;
line-height: 1px;
background-image: url(../images/btn_pagetop.gif);
background-repeat: no-repeat;
background-position: left top;
text-indent: -1000em;
display: block;
height: 12px;
width: 63px;
overflow: hidden;
}
#container #foot-contents .pagetop a:hover, #container #foot-contents .pagetop a:active { background-position: left bottom; }

/* IEPNG */
.icon img,#box-flash img{
behavior: url(/common/js/iepngfix.htc);
}
/* clearfix styles */
#contents-head #account:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#contents-head #account { zoom: 100%; }
#contents-head #account { display: inline-table; }
/* Hides from IE-mac ￥*/
* html #contents-head #account { height: 1%; }
#contents-head #account { display: block; }
/* End hide from IE-mac */

.pagetop-inpage:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.pagetop-inpage { zoom: 100%; }
.pagetop-inpage { display: inline-table; }
/* Hides from IE-mac ￥*/
* html .pagetop-inpage { height: 1%; }
.pagetop-inpage { display: block; }
/* End hide from IE-mac */


.package:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.package { zoom: 100%; }
.package { display: inline-table; }
/* Hides from IE-mac ￥*/
* html .package { height: 1%; }
.package { display: block; }
/* End hide from IE-mac */


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { zoom: 100%; }
.clearfix { display: inline-table; }
/* Hides from IE-mac ￥*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */



/* margin_class */
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 45px !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }