@charset "utf-8";

* {font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;}

body {
 color: #333;
 line-height:1.5;
 font-size:0.9em;
 -webkit-text-size-adjust: 100%;
 background: #ccc;
}

img {
 max-width : 100% ;
 height : auto ;
} 

a{
 font-size:100%;
 color:#0e72c4;
 text-decoration:none;
}

a:hover, a:active{
 opacity:0.6;
 filter: alpha(opacity=60);
}

/* h
--------------------------------*/ 
h1{
 width:960px;
 margin:0 auto;
 color:#fff;
 font-size:0.9em;
 font-weight:normal;
}
h2{
 margin:0 0 20px 0;
 padding:5px 30px;
 font-size:2.5em;
 border:3px double #000;
 background:url(../img/common/h2-marker.gif) 10px 50% no-repeat;
}
h3{
 margin:0 0 20px 0;
 padding:5px 30px;
 font-size:1.8em;
 text-align:left;
 color:#fff;
 background:#000 url(../img/common/h3-marker.gif) 10px 50% no-repeat;
}
h4{
 margin:0 0 20px 0;
 padding:5px 10px;
 color:#fff;
 background:#000;
}
h5{
 margin:0 0 20px 0;
 padding:5px 10px;
 color:#fff;
 background:#999;
}

/* header
--------------------------------*/ 
header{
 overflow:hidden;
 border-bottom:3px solid #ddd;
 background: #fff;
}
#h1-outer{
 width:100%;
 background:#000;
}
#header-inner{
 width:960px;
 margin:10px auto 0 auto;
}
#header-inner:after {
 content: "";
 clear: both;
 display: block;
}

#sister{
 margin:20px 0 20px 0px;
 padding:0 0 5px 0;
 border:1px solid #000;
}
#sister:after {
 content: "";
 clear: both;
 display: block;
}
#sister p{
 margin:0 0 5px 0;
 color:#fff;
 font-size:0.9em;
 text-align:center;
 background:#000;
}
#sister img{
 margin:0 7px;
 float:left;
}
#sister img:hover {
 opacity: 0.6 ;
}
#sister div{
 width:226px;
 margin:0 7px 0 0;
 float:right;
}
#sister div img{
 margin:0;
}
#sister div img.down{
margin:0 0px 8px 0;
}

#title-outer{
 width:100%;
 margin:20px 0 0 0;
 background:#000;
 text-align:center;
 border-top:5px solid #999;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+60,333333+80,666666+100 */
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top,  #000000 0%, #000000 60%, #333333 80%, #666666 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #000000 0%,#000000 60%,#333333 80%,#666666 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #000000 0%,#000000 60%,#333333 80%,#666666 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
}

/* nav
--------------------------------*/ 
nav {
 width: 100%;
 height:40px;
 font-size:1.1em;
 border-bottom:1px solid #bbb;
 background: #fcfcfc; /* Old browsers */
 background: -moz-linear-gradient(top, #fcfcfc 0%, #f6f6f6 50%, #efefef 51%, #d6d6d6 100%); /* FF3.6-15 */
 background: -webkit-linear-gradient(top, #fcfcfc 0%,#f6f6f6 50%,#efefef 51%,#d6d6d6 100%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(to bottom, #fcfcfc 0%,#f6f6f6 50%,#efefef 51%,#d6d6d6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
}
nav ul li {
 width:137px;
 height:35px;
 text-align:center;
 float:left;
 border-left:1px solid #dbdbdb;
 border-right:1px solid #eee;
}
nav ul li a{
 height:33px;
 padding:8px 0 0 0;
 display:block;
 color:#000;
}
nav ul li a:hover{
 color:#fff;
 background: #999;
}
nav ul li:nth-child(7) {
 border-right:1px solid #dbdbdb;
}
#nav-inner{
 width:960px;
 margin:0 auto;
}
#nav-inner:after {
 content: "";
 clear: both;
 display: block;
}

/* wrapper,content,section
--------------------------------*/ 
#wrapper{
 width:960px;
 margin:0 auto;
 background: #fff;
}

#content{
 width:960px;
 margin:0 0 80px 0;
 padding:40px 20px 0 20px;
}

section{margin:0 0 80px 0;}
section:after {
  content: "";
  clear: both;
  display: block;
}
section.normal p{
 width:100%;
 margin:0 0 20px 0;
}

/* footer
--------------------------------*/ 
footer{}

#sitemap{background:#000;}
#sitemap-inner{
 width:960px;
 margin:0 auto;
 padding:15px 0;
 color:#ffa05b;
}
#sitemap-inner:after{
 content: "";
 clear: both;
 display: block;
}
#sitemap-inner ul{
 width:100%;
 font-size:0.9em;
 line-height:1;
}
#sitemap-inner li{
 margin:10px 50px 10px 0;
 text-align:left;
 float:left;
}
#sitemap-inner li:last-child {
 margin:10px 0px 10px 0;
}
#sitemap-inner li a{
 color:#fff;
}
#sitemap-inner li img{
 margin:0 5px 2px 0;
}
#sitemap-inner li ul li{
 margin:14px 0 0 4px;
 padding:0 0 0 10px;
 font-size:0.9em;
 line-height:1;
 float:none;
 background:url(../img/common/sitemap-marker-mini.gif) no-repeat;
}
#sitemap-inner li ul li:last-child {
 margin:14px 0 0 4px;
}

#menu-footer{
 width:960px;
 margin:0 auto;
 padding:15px 0;
 text-align:center;
}
#menu-footer li{
 text-align:center;
 font-size:0.9em;
 display:inline-block;
}

#footer-info{
/* Webkit系 */
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
/* Mozilla系 */
 background: -moz-linear-gradient(top, #fff, #ddd);
/* IE10+ */
 background: -ms-linear-gradient(top, #fff, #ddd);
}
#footer-info-inner{
 width:960px;
 margin:0 auto;
 padding:15px 100px;
}
#footer-info-inner ul{
width:100%;
 display:table;
 table-layout:fixed;
}
#footer-info-inner li{
 margin:0 0 0 40px;
 font-size:0.9em;
 display:table-cell;
}
#footer-info-inner li a{
 color:#333;
}

small{
 padding:10px 0 20px 0;
 text-align:center;
 font-size:0.8em;
 display:block;
 clear:both;
 background: #fff;
 border-top:1px solid #ccc;
}

#page-top {
 position: fixed;
 bottom:50px;
 right: 20px;
 font-size:1.3em;
}
#page-top a {
 background: #666;
 text-decoration: none;
 color: #fff;
 width: 80px;
 height:60px;
 padding:10px 0 0 0;
 text-align: center;
 display: block;
 border-radius: 5px;
 line-height:1;
 opacity:0.8;
 filter: alpha(opacity=80);
}
#page-top a:hover {
 text-decoration: none;
 background: #999;
}

/* type
--------------------------------*/
.type {}
section.type img{
 margin:0 0 20px 0;
}
.type ul{
 margin:0 0 20px 0;
}
.type p{
 margin:0 0 20px 0;
}

.type table {
width:100%;
font-size:0.9em;
}
.type td {
 padding:5px 5px;
 text-align:center;
 border: 1px solid #999; 
 vertical-align:middle;
}
.type td.td-01{
 background:#000;
 color:#fff;
 text-align:left;
}
.type td.td-02{
 background:#999;
 color:#fff;
 text-align:left;
}
.type td.td-03{
 width:18%;
}
.type td.td-04{
 width:8%;
 background:#ddd;
}
.type td.td-05{
 text-align:left;
}

.mesh{
 width:450px;
 margin:0;
 float:left;
 border: 1px solid #999;
}
.flat{
 width:450px;
 margin:0;
 float:right;
 border: 1px solid #999;
}
.mesh img, .flat img{
 margin:0 10px 10px 10px;
 float:left;
}

.btn-order{
 width:350px;
 margin:0 auto;
 color:#fff;
 font-weight:bold;
 font-size:2em;
 display:block;
 text-align:center;
 border: 1px solid #ccc;
 border-radius:8px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#063181+0,063181+35,365fab+65,365fab+100 */
background: #063181; /* Old browsers */
background: -moz-linear-gradient(top,  #063181 0%, #063181 35%, #365fab 65%, #365fab 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #063181 0%,#063181 35%,#365fab 65%,#365fab 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #063181 0%,#063181 35%,#365fab 65%,#365fab 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#063181', endColorstr='#365fab',GradientType=0 ); /* IE6-9 */
}
.btn-order a{
 padding:20px 50px;
 color:#fff;
 display:block;
}

section.material{}
section.material p.title{
 margin:0 0 10px 0;
 color:#d7002e;
 font-size:1.2em;
 font-weight:bold;
}

/* top
--------------------------------*/
#top-intro{
 margin:40px 0;
 text-align:center;
}
.top-bn{text-align:center;}
.top-bn p{
 margin:0 auto 40px auto;
 text-align:left;
}
.top-bn img{margin:0 0 60px 0;}

.top-type img{margin:0 0 20px 0;}
.top-type p{margin:0 auto 40px auto;}
.top-type a:nth-child(odd) {float:left;}
.top-type a:nth-child(even) {float:right;}

/* aboutus
--------------------------------*/
.aboutus p{
 width:100%;
 margin:0 0 20px 0;
}
.aboutus section{margin:0 auto 40px auto;}
.aboutus section h4{background:#888;}

.aboutus-pic p{margin:0 0 20px 0;}
.aboutus-pic img{
 margin:0 0 0 20px;
 float:right;
}

/* order
--------------------------------*/
.order {}
.order section{margin:0 auto 40px auto;}
.order p{
 width:100%;
 margin:0 0 20px 0;
}
.order h4{background:#888;}

/* measure
--------------------------------*/
.measure {}
.measure p {margin:0 0 40px 0;}
.measure section {
 margin:0 auto;
 padding:20px 20px;
 border-top: 1px solid #999;
}
.measure section img{
 margin:0 20px 0px 0;
 float:left;
}
.measure section h4{
 font-size:1.2em;
 padding:0 0 20px 0;
 color:#333;
 background:#fff;
 float:left;
}
.measure section p{
 width:600px;
 float:left;
}

.size section table {
 width:100%;
 font-size:0.9em;
}
.size section th {
 width:150px;
 padding:5px 0px;
 font-weight:normal;
 text-align:center;
 border: 1px solid #666; 
 background:#ddd;
 vertical-align:middle;
}
.size section th.bc-9 {
 color:#fff;
 background:#999;
}
.size section td {
 width:48px;
 padding:5px 5px;
 text-align:center;
 border: 1px solid #666; 
 vertical-align:middle;
}
.size section td.bc-9 {
 color:#fff;
 background:#999;
}

/* option
--------------------------------*/
.option{}
.option p{margin:0 0 10px 0;}
.option img{
 margin:0 0 0 20px;
 float:right;
}

/* shop
--------------------------------*/
.shop {
 width:100%;
 margin:0 auto 40px auto;
}
.shop p{
 width:100%;
 margin:0 0 40px 0;
}
.shop table{
 width:640px;
 margin:0 0 40px 0;
 float:left;
}
.shop th {
 width:30%;
 padding:5px 0px;
 font-weight:normal;
 text-align:center;
 border: 1px solid #999; 
 background:#ddd;
 vertical-align:middle;
}
.shop td {
 width:70%;
 padding:5px 15px;
 text-align:left;
 border: 1px solid #999; 
}
.shop img{float:right;}

.law table{
 width:100%;
 margin:0 0 40px 0;
 float:left;
}
.law th {
 width:25%;
 padding:5px 0px;
 font-weight:normal;
 text-align:center;
 border: 1px solid #999; 
 background:#ddd;
 vertical-align:middle;
}
.law td {
 width:75%;
 padding:5px 15px;
 text-align:left;
 border: 1px solid #999; 
}

/* contact
--------------------------------*/
.contact table{
 width:100%;
 margin:0 0 20px 0;
 border:solid 1px #999; 
 border-bottom:1px solid #999;
}
.contact table th {
 width:25%;
 padding:5px 0px;
 font-weight:normal;
 text-align:center;
 border-right: 1px solid #999; 
 border-bottom: 1px solid #999;
 background:#ccc;
 vertical-align:middle;
}
.contact table td {
 width:75%;
 padding:5px 15px;
 text-align:left;
 border-bottom: 1px solid #999; 
}

.w-ss{width:5%;}
.w-s{width:15%;}
.w-m{width:50%;}
.w-l{width:100%;}

/* !!!メールフォームCGIに埋め込まれているclassっぽい!!!クラス名変更不可 */
.msg { color:#ff0000; }

/* orderform
--------------------------------*/
.orderform-size p {
 margin:0 0 20px 0;
}
.orderform-size table{
 width:100%;
 margin:0 0 20px 0;
 border:solid 1px #999; 
 border-bottom:1px solid #999;
}
.orderform-size table th {
 width:11%;
 padding:5px 0px;
 font-weight:normal;
 text-align:center;
 border-right: 1px solid #999; 
 border-bottom: 1px solid #999;
 background:#ccc;
 vertical-align:middle;
}
.orderform-size table td {
 width:14%;
 padding:5px 15px;
 text-align:left;
 border-right: 1px solid #999;  
 border-bottom: 1px solid #999; 
}

/* 1特別企画
--------------------------------*/
/* 1特別企画
--------------------------------*/
.event-01 {}
.event-01 img{margin:0 0 40px 0;}
.event-01 ul{margin:0 0 20px 0;}
.event-01 p{margin:0 0 20px 0;}

table.event-01 {
 width:550px;
 font-size:0.9em;
 line-height:2;
 float:right;
}
table.event-01 th {
 width:100px;
 padding:5px 0px;
 font-weight:normal;
 text-align:center;
 border: 1px solid #666; 
 background:#ddd;
 vertical-align:middle;
}
table.event-01 th.bc-9 {
 color:#fff;
 background:#999;
}
table.event-01 td {
 width:450px;
 padding:5px 5px;
 text-align:left;
 border: 1px solid #666; 
 vertical-align:middle;
}
table.event-01 td.bc-9 {
 color:#fff;
 background:#999;
}

/* the classic
--------------------------------*/
.event-02 {}
.event-02 img{margin:0 0 20px 0;}
.event-02 img:nth-child(odd) {float:left;}
.event-02 img:nth-child(even) {float:right;}

/* drysuit
--------------------------------*/
.event-03 ul{
 margin:0 0 20px 0;
 padding:0 0 0 1.5em;
 list-style:decimal;
}
.event-03 li{margin:0 0 10px 0;}

/* others
--------------------------------*/
.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.clear {clear: both;}

.red{color:#ff0000;}

.f-l {float:left}
.f-r {float:right}

.fs-08{font-size:0.8em;}
.fs-09{font-size:0.9em;}
.fs-095{font-size:0.95em;}
.fs-11{font-size:1.1em;}
.fs-12{font-size:1.2em;}
.fs-15{font-size:1.5em;}
.fs-18{font-size:1.8em;}
.fs-20{font-size:2em;}

.ta-l{text-align:left;}
.ta-r{text-align:right;}
.ta-c{text-align:center;}

#opacity-06 img:hover{opacity: 0.6;}

.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}