@charset "UTF-8";
* {
margin: 0;
padding: 0;
}

html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

body {
width: 100%;
height: 100%;

color: #333333;
font-size: 75%;
font-weight: normal;
line-height: 1.5;
font-family:"Hiragino Kaku Gothic Pro","Meiryo","MS UI Gothic",sans-serif;
margin: 0;
padding: 0;
}

* html body {/*IE6*/
font-family:"MS PGothic",sans-serif;
}

*:first-child + html body {/*IE7*/
font-family: "MS PGothic",sans-serif;

}

img {
border: none;
}

html {
height: 100%;
overflow-y: scroll;
}



a,
a:link {
color: #333333;
text-decoration: none;
}

a:visited {
color: #333333;
text-decoration: none;
}

a:hover,
a:active {
color: #777777;
text-decoration: none;
}

a:focus {
outline: none;
}


p.footnote
{
	font-size: 90%;
	font-weight: normal;
	margin-left:20px;
}


.footnote a{
color: #000000;
text-decoration: underline;
}

.footnote a:visited {
color: #333333;
text-decoration: underline;
}

.footnote a:hover,
a:active {
color: #0000ff;
text-decoration: underline;
}




p.footnotetop
{
	font-size: 90%;
	font-weight: normal;
	margin-left:40px;
	color:#666666;
}


/* =========================================================
wrapper
========================================================= */
#wrapper {
width: 100%;
position: relative;
min-height: 100%;
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#2cafe3', endColorstr='#e4f7ff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#2cafe3', endColorstr='#e4f7ff')"; /* IE8 */
}


/* =========================================================
wrap-top
========================================================= */
#wrap-top {


background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #e4f7ff), color-stop(0.55, #2cafe3));
background: -webkit-linear-gradient(top, #2cafe3 55%, #e4f7ff 100%);
background: -moz-linear-gradient(top, #2cafe3 55%, #e4f7ff 100%);
background: -o-linear-gradient(top, #2cafe3 55%, #e4f7ff 100%);
background: -ms-linear-gradient(top, #2cafe3 55%, #e4f7ff 100%);
background: linear-gradient(top, #2cafe3 55%, #e4f7ff 100%);

}

#wrap-top header {
background-image: url("img/bg_tile.jpg");
position: relative;
text-align: left;
width: 100%;
z-index: 5;
border-bottom: 1px solid #DDDDDD;
}

#wrap-top header hgroup {
max-width: 785px;
padding: 10px;
width: 70%;
}
/* =========================================================
navi
========================================================= */
#nav_top {
height: 24px;
min-width: 500px;
overflow: hidden;
}

#nav_top ul.clearfix {
}

#nav_top ul.clearfix li {
display: block;
float: left;
}

#nav_top ul.clearfix li a {
background-image: url("img/tab_unactive.png");
background-repeat: no-repeat;
display: block;
font-size: 140%;
font-weight: bold;
color:#939393;
height: 24px;
text-align: center;
width: 125px;
line-height: 170%;
}

#nav_top ul.clearfix li a.active {
background-image: url("img/tab_active.png");
background-repeat: no-repeat;
display: block;
font-size: 140%;
font-weight: bold;
color: #000000;
height: 24px;
text-align: center;
width: 125px;
line-height: 170%;
}
#nav_top ul.clearfix li a:hover {
background-image: url("img/tab_unactive_h.png");
color: #FFFFFF;
}
/* =========================================================
logo
========================================================= */
#logo {
background-image: url("img/logo.png");
background-repeat: no-repeat;
display: block;
float: left;
height: 80px;
margin-bottom: 1%;
}

#logo h1 
{
display: block;
height: 73px;
overflow: hidden;
width: 302px;
}

#logo h1 a {
display: block;
height: 75px;
text-indent: -9000px;
}

/* =========================================================
DLボタン
========================================================= */
#dlbtn{
float: right;
margin: 9px 0 6px;
}
/* =========================================================
content
========================================================= */

#content {
text-align: left;
max-width: 1000px;
min-height: 550px;
min-width: 480px;
width: 85%;
padding: 10px 10px 0 2%;
background-image: url("img/bg_pt.png");
-moz-box-shadow: 5px 0px 5px #4B4B4B;
-webkit-box-shadow: 5px 0px 5px #4B4B4B;
box-shadow: 5px 0px 5px #4B4B4B;
filter: progid:DXImageTransform.Microsoft.Shadow(strength = 5, direction = 90, color = '#4B4B4B');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 5, Direction = 90, Color = '#4B4B4B')";
}

#content p
{
margin-left:10px;
width: 90%;
margin-top: 5px;
}

/* =========================================================
ctitle
========================================================= */



.ctitle {
}

.ctitle h1 {
font-family: 'Josefin Slab',Georgia, serif;
text-shadow: 1px 1px 1px #fff;
font-size: 250%;
font-weight: bold;
display: block;
position: relative;
outline:none;
-webkit-transition:  color 0.2s ease-in-out;
-moz-transition:  color 0.2s ease-in-out;
-o-transition:  color 0.2s ease-in-out;
-ms-transition:  color 0.2s ease-in-out;
transition:  color 0.2s ease-in-out;
border-bottom: 1px solid #C7DEEF;
}

.qatitle h1 {
text-shadow: 2px 2px 3px #999999;
font-size: 200%;
display: block;
position: relative;
outline:none;
-webkit-transition:  color 0.2s ease-in-out;
-moz-transition:  color 0.2s ease-in-out;
-o-transition:  color 0.2s ease-in-out;
-ms-transition:  color 0.2s ease-in-out;
transition:  color 0.2s ease-in-out;
border-bottom: 2px solid #cccccc;
margin-bottom: 30px;
margin-top: 20px;
}

.qatitle h2 {
text-shadow: 2px 2px 5px #606060;
border-bottom: 2px solid #A7BCDD;
font-weight: normal;
margin-bottom: 15px;
margin-top: 30px;
font-size: 180%;
margin-left:10px;
}

.ctitle h2 {
text-shadow: 2px 2px 5px #606060;
border-bottom: 2px solid #A7BCDD;
font-weight: normal;
margin-bottom: 15px;
margin-top: 30px;
font-size: 180%;
margin-left:10px;
}

.ctitle h3 {
/*text-shadow: 1px 1px 2px #606060;*/
border-bottom: 1px solid #cccccc;
font-weight: bold;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}


.ctitle img {
}

.ctitle p {
}


/* === whc ======= */
.whc{
width:98%;
margin-bottom: 30px;
margin-top: 10px;
}
.whc_c {
float: left;
/*max-width: 53%;*/
min-width: 400px;
text-align: center;
}

.whc_beta {
float: left;
max-width: 550px;
text-align: center;
margin-left:50px;
}

.whc ol
{
	text-align:  left;
	margin-left: 60px;
	margin-top:10px;
	margin-bottom:10px;

}

.whc a,
.whc a:hover,
.whc a:active {
text-decoration: underline;
}



/* === table ======= */
table.ctable{
 	border-top:1px solid #cccccc;
 	border-right:1px solid #C7DEEF;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
    margin:10px 20px 20px 30px
	/*min-width: 400px;*/
    /*width: 74%;*/
}

.ctable th
{
	border-bottom:1px solid #cccccc;
	border-left:1px solid #C7DEEF;
    text-align:center;
    padding:5px 20px 5px 20px
}

.ctable .vv
{
	border-bottom:1px solid #C7DEEF;
    text-align:center;
}

.ctable td
{
	border-bottom:1px solid #cccccc;
	border-left:1px solid #C7DEEF;
    text-align:left;
    padding:5px 20px 5px 20px
	
}

.ctable ul
{
	text-align:  left;
	margin-left: 25px;
}

.ctable li
{
	text-align:  left;
	font-weight: normal;
}

/* === table ======= */
table.contactform{
 	border-top:1px solid #cccccc;
 	border-right:1px solid #C7DEEF;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
    margin:10px 20px 20px 30px
	/*min-width: 400px;*/
    /*width: 74%;*/
}

.contactform th
{
    text-align:left;
    padding:15px 20px 5px 20px
}

.contactform .vv
{
    text-align:right;
}

.contactform td
{

    text-align:left;
    padding:5px 0px 5px 10px
	
}



.ctable a:link {
color: #000000;
text-decoration: underline;
}

.ctable a:visited {
color: #333333;
text-decoration: underline;
}

.ctable a:hover,
a:active {
color: #0000ff;
text-decoration: underline;
}


.htc{
margin-left: 5%;
margin-top: 10px;
margin-bottom: 30px;
max-width: 850px;
min-width: 480px;
width: 95%;
}
.htc img{

margin-right: 8px;
margin-top: 10px;
width: 300px;
}
.htc h2{
border-bottom: 1px dotted #B6CBD6;
width: 95%;
}

.otherfeature a
{
	text-decoration: underline;
}


.ch_c{
border: 1px solid #CCCCCC;
float: left;
margin: 0 auto 25px 4px;
min-width: 400px;
padding: 4px;
width: 45%;
}
.ch_c img{
float: left;
margin-right: 10px;
}
.ch_c h3{
border-bottom: 2px solid #2AA1F5;
color: #8F8F8F;
display: block;
font-size: 85%;
font-weight: normal;
margin: 0 auto 0 131px;
width: 50%;

}



.explaintop
{
	text-align:left;
	margin-bottom:10px;
}

.explaintop img
{
	padding-left:10px; 
	padding-right:10px
}


/*==============membership===================*/
#memshipul
{
	text-align:  left;
	font-weight: normal;
	margin-left: 50px;
	margin-top:10px;
}

.sitemessage p
{
	font-size:190%;
}

#siteErrormessage
{
	color:#ff0000;
}

/* =========================================================
Message in Top Page
========================================================= */
#topMessage1 {
display: block;
font-size: 140%;
line-height: 150%;
text-align: center;
text-shadow: 2px 2px 5px #606060;
margin-top: 5px;
}

#topMessage2 {
display: block;
font-size: 220%;
line-height: 150%;
text-align: center;
text-shadow: 2px 2px 5px #606060;
margin-top: 5px;
margin-bottom: 15px;
}

.topMessageText {
font-size: 110%;
text-align: left;
text-shadow: 1px 1px 2px #cccccc;
margin-top: 5px;
font-weight:normal;
}

.topMessageText p {
text-indent:10px;
margin-bottom: 8px;
}

/* =========================================================
sentence
========================================================= */
#sentence001 {
display: block;
font-size: 118%;
line-height: 150%;
min-width: 480px;
text-align: center;
text-shadow: 2px 2px 5px #606060;
margin-top: 5px;
}
.sentence002 {
display: block;
float: left;
font-size: 100%;
line-height: 150%;
margin-top: 5px;
max-width: 480px;
padding-right: 6%;
text-shadow: 1px 1px 3px #7B7B7B;
}

.explain {
float: left;
font-size: 100%;
line-height: 150%;
margin-top: 5px;
width:80%;
margin-left: 20px;
}

.explain ul
{
	margin-left:50px;
}

.explain img {
padding-left: 30px;
}

.dlcontents ul.gallery {
float: left;
width: 300px;
margin-right: 2%;
}

.htc ul.gallery {
float: left;
}
/* =========================================================
dl_btn
========================================================= */
.dl_btn {
margin: 0px auto 0;
text-align: center;
}

.dl_btn img {
margin: 0px auto 0;
text-align: center;
}

.dl_btn p 
{
	margin-top:5px;
	font-size:140%;
	text-align: center;
}


.dl_btn a:link {
color: #000000;
text-decoration: underline;
}

.dl_btn a:visited {
color: #000000;
text-decoration: underline;
}

.dl_btn a:hover,
a:active {
color: #0000ff;
text-decoration: underline;
}

/* === whc ======= */
.qa{
width: 95%;
margin-bottom: 30px;
margin-top:15px;
}

.qalink
{
	font-size:140%;
}

.qalink a:link {
color: #000000;
text-decoration: underline;
}

.qalink a:visited {
color: #000000;
text-decoration: underline;
}

.qalink a:hover,
a:active {
color: #ff0000;
text-decoration: underline;
}

.qalink ul
{
	margin-left:50px;	
}


.linkbanner{
display: block;
text-align: left;
padding-top: 15px;
padding-left:15px;
width:300px;
min-height:190px;
float:left;
}

.linkbanner p{
text-align: center;
font-size:120%;
}

.mobileicon{
display: block;
text-align: left;
padding-top: 15px;
padding-left:15px;
width:210px;
float:left;
}

.mobileicon p{
text-align: center;
font-size:120%;
}

.mobileicon img{
width: 200px;
}

.storebutton img {
height: 80%;
margin: 4% 0 2%;
width: 80%;
}

.storebutton {
margin-bottom: 12%;
}


/* =========================================================
clearfix
========================================================= */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px;
}

.clarmargin {
min-height: 1px;
height: 80px;
}


.clearmargin_n {
min-height: 1px;
height: 20px;
}
.clearmargin_n:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}


* html .clearfix {
height: 1px;
/*\*//*/
height: auto;
overflow: hidden;
/**/
}


/* =========================================================
cha
========================================================= */
#cha {
bottom: -7px;
height: 410px;
left: 68%;
position: fixed;
width: 260px;
z-index: 30;
}

#cha img {
}

/* =========================================================
gotop
========================================================= */
#gotop {
background-color: #222222;
bottom: 24px;
display: block;
float: left;
height: 25px;
position: relative;
text-align: center;
width: 80px;
line-height: 215%;
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border-radius: 15px 15px 0px 0px;
border-radius: 15px 15px 0px 0px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/

}

#gotop a {
color: #FFFFFF;
}

/* =========================================================
wrap-btm
========================================================= */
#wrap-btm {
clear: both;
width: 100%;
height: 150px;
text-align: center;
background-image:url("img/bg_tile.jpg");
}

#wrap-btm footer {
height: 100px;
background-image: url("img/bg_tile.jpg");
text-align: left;
border-top: 1px solid #A2A2A2;
width: 100%;
}
#scb{
display: block;
float: left;
}
/* =========================================================
foot-inner
========================================================= */
#foot-inner {
padding: 10px;
}

footer .copyright {
color: #FFFFFF;
float: left;
margin-right: 75px;
margin-bottom: 16px;
}

footer a
{
	margin-right: 10px;
}

footer p
{
	margin-top: 5px;
	max-width: 700px; /*K񂪐܂ԂɂȂĂߊg*/
}

footer a:link {
color: #dddddd;
text-decoration: underline;
}

footer a:visited {
color: #999999;
text-decoration: underline;
}

footer a:hover,
a:active {
color: #ffffff;
text-decoration: underline;
}



/* =========================================================
product top table
========================================================= */

table.ptable{
 	border:0px;
    empty-cells:show;
    margin:0px;
	/*min-width: 400px;*/
    /*width: 74%;*/
    float: left;
}

.ptable th
{
	border:0px;
    text-align:center;
    padding:5px 20px 5px 20px;
}

.ptable td
{
	/*border-left:1px solid #C7DEEF;*/
    text-align:left;
    padding:0px 5px 0px 5px;
	width:160px;
}

.ptable ul
{
	text-align:  left;
	margin-left: 25px;
}

.ptable li
{
	text-align:  left;
	font-weight: normal;
}

p.pname
{
	color: #000000;
	font-size: 100%;
	font-weight: bold;
	margin:0px;
	padding:0px 0px 0px 0px;
	line-height:1em;
}



p.pcategory
{
	color: #000000;
	font-size: 80%;
	font-weight: normal;
	margin-bottom:3px;
	line-height:1.2em;
}

p.pinfo
{
	color: #555555;
	font-size: 80%;
	font-weight: normal;
	margin:0px;
	padding:0px 0px 0px 0px;
	line-height:1em;
}

p.pprice
{
	color: #FF0000;
	font-size: 100%;
	font-weight: normal;
	margin:0;
}


/* =========================================================
product top alltable
========================================================= */

table.palltable{
 	border:0px;
    empty-cells:show;
    margin:0px;
	/*min-width: 400px;*/
    width: 80%;
    float: left;
}

.palltable th
{
	border:0px;
    text-align:left;
    padding:5px 20px 5px 20px;
    border-bottom:1px solid #C7DEEF;
}

.palltable td
{
	/*border-left:1px solid #C7DEEF;*/
    text-align:left;
    padding:0px 5px 0px 5px;
    border-bottom:1px solid #C7DEEF;
}


.topmovie
{
    padding-top:80px;
	float: left;
}


/* =========================================================
navi(800px以下)
========================================================= */
@media screen and (max-width: 800px) {
#wrap-top header {
width:88.3%;
min-width: 505px;
border-bottom: 1px solid #989898;
}

#wrap-top header hgroup {
max-width: 785px;
padding: 10px;
text-align: center;
width: 96%;
}

#logo {
float: none;
margin: 0 auto;
width: 62%;
}

#dlbtn {
margin: 10px 0 6px;
padding-right: 5px;
float: none;
}

#nav_top {
background-color: #000000;
display: block;
height: auto;
min-width: 505px;
overflow: visible;
text-align: -moz-center;
width: 100%;
border-bottom: 1px solid #404040;
border-top: 1px solid #404040;
}

#nav_top ul.clearfix {
}

#nav_top ul.clearfix li {
display: block;
height: 30px;
margin: 0 -1px;
width: 50%;
}

#nav_top ul.clearfix li a {
background-image: none;
height: 100%;
line-height: 30px;
width: 100%;
}

#nav_top ul.clearfix li a.active {
background: none repeat scroll 0 0 transparent;
color: #FFFFFF;
height: 100%;
width: 100%;
}

#nav_top ul.clearfix li a:hover {
background: none repeat scroll 0 0 #4C8199;
}

#content {
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
filter:none;
-ms-filter:none;
min-width: 485px;
}

#wrap-btm {
min-width: 505px;
width: 100%;

}
}