* {
margin:0;
padding:0;
border:0;
}
html{
height:100%;
}
body {
text-align:center;
height:100%;
color:#000000;
font-size:100%;
background-image:url(../../../common/img/background_grandaska5.gif);
}
ul,ol dl,li,dt,dd {
list-style:none;
}
p {
font-size:80%;
line-height:1.4;
text-align:left;
}
a:link,
a:visited,
a:active,
a:hover {
color:#CC0000;
}
/* レイアウト
----------------------------------*/
#wrap {
margin:0 auto;
width:900px;
height:100%;
min-height:100%;
}
body > #wrap {
height:auto;
}
#padeHeader {
width:900px;
}
#main {
width:900px;
text-align:left;
background-color:#FFFFFF;
}
* html #main {
height:700px;
}
#cont {
margin:0 auto;
width:900px;
position:relative;
}
.leftBlock {
float:left;
}
.rightBlock {
float:right;
}
.pagetop {
margin-top:30px;
text-align:right;
}
/* ヘッダー
----------------------------------*/
#header {
position:relative;
}
#header .btn {
position:absolute;
top:349px;
left:635px;
}
/* メインビジュアル
----------------------------------*/
#mainVisual {
position:relative;
background:url(img/mainvisual_bg.jpg) no-repeat;
width:900px;
height:400px;
}
#mainVisual h1 {
position:absolute;
top:158px;
left:399px;
z-index:0;
}
#mainVisual ul,
#mainVisual li,
#mainVisual img,
#mainVisual a {
margin:0px;
padding:0px;
line-height:0;
display:block;
}
#mainVisual .catch {
position:absolute;
top:61px;
left:747px;
z-index:15;
}
#mainVisual .lead {
position:absolute;
top:25px;
left:413px;
z-index:0;
}
#mainVisual .p01 .price {
position:absolute;
top:285px;
left:414px;
}
#mainVisual .cart {
position:absolute;
top:341px;
left:414px;
}
#mainVisual .p01 .detail {
position:absolute;
top:381px;
left:415px;
}
#mainVisual .p02 .price {
position:absolute;
top:285px;
left:647px;
}
#mainVisual .p02 .cart {
position:absolute;
top:341px;
left:647px;
}
#mainVisual .p02 .detail {
position:absolute;
top:381px;
left:648px;
}
#mainVisual .btn {
position:absolute;
top:348px;
left:634px;
}
/* ナビ
----------------------------------*/
#nav {
margin:14px 0 0 35px;
}
#nav ul {
margin-bottom:6px;
overflow:hidden;
}
#nav li {
float:left;
margin-right:6px;
font-size:0;
}
#nav .pdf {
margin-bottom:10px;
}
/* ボックス
----------------------------------*/
.lineBox {
margin:0 20px;
padding:0 10px 20px;
border-bottom:1px solid #CCCCCC;
clear:both;
zoom:1;
}
.lineBox:after {
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}
.lineBoxBg {
background:url(img/bg_line.gif) repeat-y 424px 0;
}
.lineBox h3 {
padding:15px 0;
}
.lineBox h4 {
color:#CC0033;
font-weight:bold;
}
/* ポイント
----------------------------------*/
#point {
position:relative;
margin-top:9px;
background:url(img/point_bg01.gif) repeat-x left bottom;
}
#point ul{
position:absolute;
top:25px;
left:587px;
font-size:0;
}
#point li{
margin-bottom:3px;
}
/* ポイント1
----------------------------------*/
#point1 {
margin-top:10px;
padding-right:10px;
}
#point1 .leftBlock {
width:395px;
}
#point1 .leftBlock .txt {
width:300px;
}
#point1 .rightBlock {
width:415px;
}
#point1 .rightBlock .txt {
width:315px;
}
#point1 h4 {
margin-bottom:15px;
}
#point1 .img {
float:left;
}
#point1 .txt {
float:right;
}
#point1 .txt p {
margin-top:6px;
}
#point1 .txt strong {
font-size:133%;
font-weight:bold;
}
#point1 .step {
margin:20px 0 0 95px;
}
/* ポイント2
----------------------------------*/
#point2 {
float:left;
width:405px;
}
#point2 .rightBlock {
width:228px;
padding-top:-3px;
}
#point2 .rightBlock p {
margin-bottom:15px;
}
#point2 .rightBlock p.spc {
margin-bottom:25px;
}
/* ポイント3
----------------------------------*/
#point3 {
float:right;
width:405px;
}
#point3 .rightBlock {
width:215px;
padding-top:-3px;
}
#point3 .rightBlock h4.spc {
letter-spacing:-1px;
}
#point3 .rightBlock p {
margin-bottom:15px;
}
#point3 .rightBlock p.spc {
position:relative;
height:53px;
margin-bottom:40px;
}
#point3 .rightBlock p.spc img {
position:absolute;
top:0px;
left:-70px;
}
* html #point3 .rightBlock p.spc img{ /* IE-expression (fix png alpha) */
behavior:expression(
this.style.filter = this.src.match(/\.png$/) ? "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')" :this.style.filter,
this.src = this.src.match(/\.png$/) ? this.src.slice(0, this.src.lastIndexOf("/")+1) + "ie6png.gif" :this.src,
this.style.behavior = "none"
);
}
/* ポイント4
----------------------------------*/
#point4{
clear:both;
}
#point4 .lineBox {
padding-top:0px;
}
#point4 .leftBlock {
width:207px;
}
#point4 .leftBlock p {
margin-bottom:5px;
}
#point4 .rightBlock {
width:605px;
}
#point4 .rightBlock p.img {
float:left;
width:134px;
margin-right:8px;
padding-top:10px;
font-size:66%;
}
#point4 .rightBlock p.img img {
margin-bottom:3px;
}
#point4 .rightBlock .txt01 {
float:left;
width:150px;
margin-right:10px;
padding-top:10px;
}
#point4 .rightBlock .txt02 {
float:right;
width:160px;
padding-top:10px;
}
#point4 .rightBlock .txt01 h4,
#point4 .rightBlock .txt02 h4 {
margin-bottom:10px;
color:#333333;
font-size:75%;
}
/* ポイント5
----------------------------------*/
#point5 {
float:left;
width:394px;
}
#point5 .leftBlock {
width:218px;
}
#point5 .rightBlock {
padding-top:15px;
}
/* ポイント6
----------------------------------*/
#point6 {
float:right;
width:410px;
}
#point6 .leftBlock {
width:260px;
}
#point6 .rightBlock {
padding-top:15px;
}
/* ポイント7
----------------------------------*/
#point7 {
float:left;
width:394px;
}
#point7 .leftBlock {
width:200px;
}
#point7 .rightBlock {
padding-top:15px;
}
/* ポイント8
----------------------------------*/
#point8 {
float:right;
width:410px;
}
#point8 .leftBlock {
width:288px;
}
#point8 .leftBlock p {
margin-bottom:10px;
}
#point8 .rightBlock {
padding-top:15px;
}
/* ポイント9
----------------------------------*/
#point9 .new {
margin:-310px 0 0 449px;
}
/* ポイント10
----------------------------------*/
#point10 {
position:relative;
width:840px;
margin-left:30px;
padding-top:15px;
}
#point10 h3 {
position:relative;
height:62px;
margin-bottom:-9px;
padding-bottom:0;
z-index:5;
}
#point10 p {
z-index:1;
}
#point10 .txt01 {
position:absolute;
top:128px;
left:0;
}
#point10 .txt02 {
position:absolute;
top:63px;
left:484px;
}
#point10 .btn {
position:absolute;
top:363px;
left:441px;
width:295px;
height:129px;
overflow:hidden;
}
#point10 .btn a {
display:block;
width:295px;
height:129px;
cursor:pointer;
background:url(img/point10_btn01.png) no-repeat;
text-indent:-9999px;
}
* html #point10 .btn a {
height:258px;
behavior:expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}
#point10 .btn a:hover {
background-position:0 -129px;
}
* html #point10 .btn a:hover {
margin-top:-129px;
}
#point10 .btn:active img {
visibility:hidden;
}
#point10 ul {
position:absolute;
top:247px;
left:517px;
font-size:0;
}
#point10 ul li{
float:left;
}
#point10img{
margin-bottom:20px;
}
#point10 .bgBox {
padding:12px 12px 12px 15px;
background:#F6D0C5;
}
#point10 .bgBox .leftBlock {
width:300px;
}
#point10 .bgBox .leftBlock p {
margin-top:10px;
}
#point10 .bgBox .leftBlock em {
color:#CC0033;
font-size:117%;
font-weight:bold;
font-style:normal;
}
/* Q&A
----------------------------------*/
#qa {
width:870px;
margin:30px 0 0 30px;
background:url(img/qa_bg01.jpg) no-repeat right top
}
#qa h2 {
margin-bottom:-20px;
}
#qa .clearfix {
width:558px;
margin-top:40px;
}
#qa .txtLeft {
float:left;
width:420px;
}
#qa .txtRight {
float:right;
width:433px;
}
#qa h4 {
margin-top:12px;
font-size:85%;
letter-spacing:-1px;
}
/* voice
----------------------------------*/
#voice {
width:840px;
margin-left:30px;
padding-top:30px;
}
#voice h2 {
margin-bottom:14px;
}
#voice h4 {
margin-bottom:2px;
color:#CC0033;
font-size:85%;
letter-spacing:-1px;
}
#voice .voice1 {
float:right;
width:527px;
}
#voice .voice1 .leftBlock {
float:left;
width:325px;
padding-top:20px;
}
#voice .voice1 .rightBlock {
float:right;
width:172px;
font-weight:bold;
padding-top:23px;
}
#voice .voice1 .rightBlock span {
font-size:86%;
font-weight:normal;
}
#voice .voice1 h3 {
margin-bottom:12px;
}
#voice .img1 {
float:left;
width:289px;
}
#voice .img1 img {
margin-bottom:3px;
}
#voice .voice2 {
margin-top:10px;
}
#voice .voice2 .line {
padding:17px 0 10px 19px;
border-right:1px solid #E26E8B;
border-bottom:1px solid #E26E8B;
border-left:1px solid #E26E8B;
}
#voice .voice2 .line .voiceBox {
float:left;
width:375px;
margin:0 20px 10px 0;
}
#voice .voice2 .line .voiceBox .rightBlock {
width:240px;
}
#voice .voice2 .line .voiceBox .leftBlock img {
margin-bottom:3px;
}
/* step
----------------------------------*/
#step {
margin:20px 30px 0;
padding:16px 0 0 20px;
background:url(img/step_bg01.jpg) repeat-x;
}
#step h2 {
position:relative;
height:65px;
margin-bottom:10px;
}
#step h2 img{
position:absolute;
top:0;
left:-3px;
}
#step h3 {
margin:15px 0 10px;
}
#step .stepBox {
float:left;
margin-right:5px;
}
#step .stepBox.w141 {
width:141px;
margin-right:0;
}
#step .stepBox.w138 {
width:138px;
}
#step .stepBox.w263 {
width:263px;
}
#step .stepBox .txt {
float:left;
width:122px;
margin-right:5px;
}
/* btm
----------------------------------*/
#btm {
padding-bottom:20px;
margin-top:40px;
background:#F6D0C5 url(img/btm_bg.jpg) no-repeat 0 0;
position:relative;
min-height:688px;
}
* html #btm {
width:900px;
height:720px;
}
#btm ul,
#btm li,
#btm img,
#btm a {
margin:0px;
padding:0px;
line-height:0;
display:block;
}
#btm h2 {
position:absolute;
top:12px;
left:422px;
z-index:45;
}
#btm .p01 .price{
position:absolute;
top:121px;
left:422px;
z-index:45;
}
#btm .p02 .price{
position:absolute;
top:121px;
left:655px;
z-index:45;
}
#btm .cart{
position:absolute;
top:184px;
left:422px;
z-index:45;
}
#btm .payArea {
position:relative;
z-index:30;
padding:240px 30px 10px 422px;
}
#btm .payArea .name {
margin-bottom:5px;
}
#btm .payArea h3 {
margin-bottom:5px;
}
#btm .payArea .txt01 li {
margin-left:1em;
text-indent:-1em;
font-size:68%;
line-height:1.2;
}
#btm .payArea .txt02 {
margin-bottom:5px;
padding:10px 10px 5px 10px;
border:1px solid #000;
background:#fff;
}
* html #btm .payArea .txt02 {
padding-bottom:0px !important;
}
#btm .payArea .txt02 li {
margin-bottom:5px;
font-size:68%;
line-height:1.2;
margin-bottom:5px;
border-bottom:1px dotted #990000;
}
#btm .payArea .txt02 li.end {
padding-top:5px;
margin-bottom:5px;
padding-bottom:0px;
border-bottom:none;
}
* html #btm .payArea .txt02 li.end {
margin-bottom:0px !important;
line-height:1;
}
#btm .payArea .txt02 li strong {
font-size:172%;
color:#900;
display:block;
margin-bottom:5px;
}
#btm .payArea .txt02 li.end strong {
margin-bottom:0px;
padding-bottom:0px;
}
#btm .payArea .txt03 li {
padding:0px;
font-size:72%;
line-height:1.2;
margin-bottom:5px;
}
#btm .cap{
position:absolute;
top:337px;
left:86px;
}
.toList {
float:right;
margin:10px 30px;
}
/*-- 使い方動画
--------------------------------------------------------------*/
#movie{
position: relative;
margin-top: 23px;
height: 416px;
}
#movieBox{
margin:0;
padding:0;
background:url(../img/movie_line.gif) left bottom no-repeat;
position:absolute;
width: 691px;
top: 0px;
left: 120px;
}
#movie .movieBtn01{
position: absolute;
top: 0px;
left: 603px;
}
#movie .movieBtn02{
position: absolute;
left: 603px;
top: 198px;
}
#movieBox p{
padding-top: 3px;
}
#movieBox h2{
position:absolute;
top:32px;
left:34px;
z-index:30;
}
#movieBox .movieArea{
padding:3px 0px 0px 380px;
width:480px;
position:relative;
z-index:15;
}
#movieBox .movieArea iframe{
width: 480px;
height: 405px;
}
#movieBox .movieArea p {
margin-top:5px;
width: 480px;
color:#121214;
}
#movieBox .ad01 {
position:absolute;
top:176px;
left:-100px;
z-index:0;
}
/* 共通
----------------------------------*/
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */