@charset "UTF-8";

body {
    background:#5c5c5c;
    font-size:16px;
    font-family: "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro W3" ,"Hiragino Kaku Gothic Pro" , OSAKA ,メイリオ,Meiryo ,"ＭＳ Ｐゴシック" ,"MS PGothic" , "MS UI Gothic" , sans-serif;
    color: #464646;
    margin:0px;
    padding:0px;
    line-height:1.5em;
}
div, ul, li, dl, h1, h2, h3, h4, h5, h6, p {
	margin:0px;
	padding:0px;
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
}
address, em, strong {
	font-style:normal;
	font-weight:normal;
}
li {
	list-style:none;
}
img {
  border:0;
}
a {
	color: #336699;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
	transition: 0.3s;
	text-decoration: none;
}
a:hover {
	color: #ff6600;
	opacity: 0.6;
	text-decoration: none;
}
.fb036eb7 {
	color:#036eb7;
	font-weight:bold;
}
.fb087b00 {
	color: #087b00;
	font-weight:bold;
}
.fb403728 {
	color:#403728;
	font-weight:bold;
}
.fbee0000 {
	color:#ee0000;
	font-weight:bold;
}
.fbfe8500 {
	color:#fe8500;
	font-weight:bold;
}
.fcffffff {
	color:#ffffff;
}
.fcee0000 {
	color:#ee0000;
}

.fb { font-weight:bold; }
.fs10 { font-size: 10px; }
.fs11 { font-size: 11px; }
.fs12 { font-size: 12px; }
.fs13 { font-size: 13px; }
.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs17 { font-size: 17px; }
.fs18 { font-size: 18px; }
.fs19 { font-size: 19px; }
.fs20 { font-size: 20px; }
.fs21 { font-size: 21px; }
.fs22 { font-size: 22px; }
.fs23 { font-size: 23px; }
.fs24 { font-size: 24px; }
.fs25 { font-size: 25px; }
.fs26 { font-size: 26px; }
.fs27 { font-size: 27px; }
.fs28 { font-size: 28px; }
.fs29 { font-size: 29px; }
.fs30 { font-size: 30px; }

.center {
    text-align:center;
}

.left {
    text-align:left;
}

.right {
    text-align:right;
}

.clear {
    clear: both;
}

td.nowrap {
	white-space:nowrap;
}

td.right {
    text-align: right;
}

td.left {
    text-align: left;
}

td.center {
    text-align: center;
}



header, nav, article, section, footer {
    display:block;
    margin:0px;
}

header {
    padding:0px;
    margin:0px;
}

header .logo {
    display: block;
    width:100%;
    max-width:100%;
    height:auto;
}

.relative {
    position: relative;
}

.absolute {
    position:absolute;
    width:100%;
    bottom:10%;
    color:#ffffff;
}

.absolute p {
    font-size:4vw;
    text-align:center;
}


article {
    padding:20px 0px;
    margin:0px;
    background-color:#ffffff;
}

section {
    padding:10px 20px;
}

section.brand {
    padding:20px 20px;
}

section.brand li {
	float:left;
	list-style:none;
	text-align:center;
}
section.brand li.CAZAL {
    padding-bottom:20px;
}

section.product h1 {
    padding:10px 10px 20px 10px;
    	font-size:28px;
}

section.product h2 {
    padding:10px 10px 0 10px;
}

section.product form input[type=image] {
    vertical-align: bottom;
}

section.product form input[type=image]:hover {
    	opacity: 0.6;
}

section.product table.spec {
    margin:18px auto;
	border-collapse:collapse;
}
section.product table.spec td.L {
    padding:2px 10px;
	border:solid 1px #ccb8aa;
	background:#efefef;
	text-align:left;
    font-size:12px;
    	white-space:nowrap;
}
section.product table.spec td.R {
    padding:2px 10px;
	border:solid 1px #ccb8aa;
	background:#ffffff;
	text-align:left;
    font-size:12px;
    	color:#036eb7;
    	white-space:nowrap;
}

section.product {
    padding:30px 20px 10px 20px;
    margin-top:20px;
    border-top:1px solid #464646;
}

section.product img {
    vertical-align: bottom;
}

section.product li {
	float:left;
    padding:0;
	list-style:none;
	text-align:center;
}

p.notice {
    padding:2px;
    margin:20px 0 10px 0;
    background-color:#5c5c5c;
    color:#ffffff;
    font-size:14px;
    	text-align:center;
}

section.notice {
    padding:10px 20px;
    font-size:14px;
}
section.notice p {
    padding:0 0 0 19px;
    line-height:18px;
}

section.notice p.title {
    padding:0;
    	font-weight:bold;
}

footer {
    padding:15px 10px 5px 10px;
    margin:0px;
    background-color:#403728;  
    color:#ffffff;
}

footer .info {
	float:left;
	padding:10px 30px;
}

footer .navi {
	float:left;
	width:250px;
	padding:0px 30px;
}

footer .navi p {
	padding:3px 0px;
}

footer .navi a {
    color:#ffffff;
}

footer .navi a:hover {
	color: #ff6600;
}


.copyright {
	text-align:center;
	font-size:12px;
}

#get_adobe_reader {
    max-width:100%;
    height:26px;
	background:url(../image/get_adobe_reader.png) no-repeat;
	margin:10px 0 0 40px;
	padding-top:4px;
	padding-left:120px;
	font-size:12px;
}
#get_adobe_reader p {
    line-height:12px;
}


#page-top {
	position:fixed;
	bottom:20px;
	right:20px;
    font-size:30px;
}
#page-top a {
	background:rgba(66,66,66,0.6);
	text-decoration:none;
	color:#ffffff;
    -webkit-transition:0.3s;
	-moz-transition:0.3s;
	-o-transition:0.3s;
	-ms-transition:0.3s;
	transition:0.3s;
	width:60px;
	padding:17px 0;
	text-align:center;
	display:block;
	border-radius:60px;
	-webkit-border-radius:60px;
	-moz-border-radius:60px;
}
#page-top a:hover {
	text-decoration: none;
	background: #999999;
    	opacity: 0.6;
}

.close {
	width:95%;
	margin:-40px auto 5px auto;
	text-align:right;
}

@media screen and (min-width:1024px) {
    header {
        width:1024px;
        margin:0px auto;
    }
    .absolute {
        bottom:16%;
    }
    article {
        width:984px;
        padding:20px 20px;
        margin:0px auto;
    }
    footer {
        width:984px;
        margin:0px auto;
    }
    section {
        padding:10px 40px;
    }
    section.notice {
        padding:10px 60px;
    }
    section.brand li.CAZAL {
        padding:84px 134px 84px 84px;
    }
    section.product {
        padding:30px 40px 10px 40px;
    }
    section.product h1 {
        font-size:40px;
    }
    section.product table.spec {
        margin:18px 22px;
    }
    section.brand {
        padding:20px 40px;
    }
    footer {
        padding:35px 20px 5px 20px;
    }
    footer .info {
        padding:10px 70px 10px 50px;
    }
    footer .navi {
        width:250px;
        padding:10px 20px 10px 40px;
        border-left:1px dotted #ffffff;
    } 
    .close {
        width:690px;
    }
    .spritespin {
        width: 720px;
        margin:0 auto;
    }
}

@media screen and (max-width:1024px) {
    section.product li, section.brand li {
        width:100%;
    }
    .resize {
        max-width:100%;
        height:auto;
    }
}