@charset "utf-8";

/*
Theme Name: Original Theme
Theme URI: http://freeplan.info/
Description: ONDRECORDS Original Theme.
*/

/* 基本設定 ---------------------------------------------*/

* {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
list-style: none;
-webkit-text-size-adjust: none;
}

body {
text-align: center;
font-size: 75%;
font-family:'メイリオ', Meiryo, Verdana, 'MS Pゴシック', 'MS PGothic', Arial, Helvetica, sans-serif;
line-height: 1.7;
color: #333333;
background:#f6f7f7 url(img/bg.jpg) center 0 repeat-y;
background:#ffffff url(img/bg.jpg) center 0 repeat-y;
letter-spacing:0.1em;
}

img{
	-ms-interpolation-mode: bicubic;
	border:none; vertical-align: middle;}
h1 img{ width:280px; height:auto; margin:0 20px;}
h2{ background:url(img/work_icon.jpg) 0 0 no-repeat; padding:22px 0 0 0; background:url() 0 0 no-repeat; padding:0; color:#00A0E9; font-size:120%; text-align:left; margin:0 20px 10px;}

.cf{zoom:1;}
.cf:before,.cf:after{ content:""; display:table;}
.cf:after{ clear:both;}
.mb10{ margin-bottom:10px;}

#wrapper{ width:100%; border-top:5px solid #00a0e9; margin:0 auto; padding-top:1px;}
#header{ width:100%; padding:20px 0 60px; text-align:left;}
ul#mobileNavi{ margin:40px 0 0;}
ul#mobileNavi li{ float:left; width:25%; text-align:center;}
ul#mobileNavi li a{display:block; color:#00A0E9; text-decoration:none;}

#primary,#secondary{ float:none; width:100%;}

ul#shop{ margin:0 0 20px 0;}
ul#shop li{width:278px; border:1px solid #eee;  margin:0 auto 10px auto;}
ul#shop li img{ width:100%; height:auto;}
ul#shop li div{ display:none; }

ul#etc{ margin:0 0 20px 0;}
ul#etc li{width:278px; border:1px solid #eee;  margin:0 auto 10px auto;}
ul#etc li img{ width:100%; height:auto;}
ul#etc li div{ display:none; }

ul#web{ margin:0 0 20px 0;}
ul#web li{width:278px; border:1px solid #eee;  margin:0 auto 5px auto;}
ul#web li img{ width:100%; height:auto;}

ul#web2{ margin:0 0 20px 0;}
ul#web2 li{width:278px; border:1px solid #eee;  margin:0 auto 5px auto;}
ul#web2 li img{ width:100%; height:auto;}


#toTopWrapper img{ position:relative; right:20px; top:0; cursor:pointer; display:none;}
#footerWrapper{ background:#D3EDFB; width:100%; padding:20px 0 20px; text-align:left; position:static;}
#footer{ width:100%; margin:0 auto 0;}
ul#footerUl{ margin:20px 20px 20px;}
ul#footerUl li{ color:#00A0E9; margin-bottom:10px; font-size:80%;}

#footer h1{ margin-top:0;}
#copy{ font-size:60%; margin:0 20px;}

.toTopWrapperMobile{ text-align:center; margin-bottom:60px;}

#ad01h2{ display:none;}
#ad01{ display:none;}
#ad02{ display:none;}



/*タブレット用CSS*/
@media only screen and (min-width:481px) and (max-width:768px) {

#wrapper{ width:760px; border-top:5px solid #00a0e9; margin:0 auto;}
h1 img{ width:329px; height:25px; margin:0 0 0 10px;}
h2{ margin:0 0 10px;}

#wrapper{ width:100%; border-top:5px solid #00a0e9; margin:0 auto;}
ul#mobileNavi{ display:none;}

#primary{ float:left; width:490px; text-align:left; padding-bottom:60px; padding-left:10px;}
#secondary{ float:right; width:250px; text-align:left; padding-bottom:60px; padding-right:10px;}

ul#shop{ margin:0 0 60px 0;}
ul#shop li{ float:left; width:153px; border:1px solid #eee; margin:0 5px 5px 0; position:relative;}
ul#shop li img{ width:100%; height:auto; cursor:pointer;}
ul#shop li div{ display:none; padding:19px; border-top:10px solid #00A0E9; border-bottom:1px solid #00A0E9; border-left:1px solid #00A0E9; border-right:1px solid #00A0E9; background:#FFF; color:#231815; z-index:10000; position:absolute; top:155px; width:275px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 4px #777;
-moz-box-shadow: 0 1px 4px #777;
box-shadow: 0 1px 4px #777;
}


ul#etc{ margin:0 0 60px 0;}
ul#etc li{ float:left; width:153px; border:1px solid #eee; margin:0 5px 5px 0; position:relative;}
ul#etc li img{ width:100%; height:auto; cursor:pointer;}
ul#etc li div{ display:none; padding:19px; border-top:10px solid #00A0E9; border-bottom:1px solid #00A0E9; border-left:1px solid #00A0E9; border-right:1px solid #00A0E9; background:#FFF; color:#231815; z-index:10000; position:absolute; top:155px; width:275px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 4px #777;
-moz-box-shadow: 0 1px 4px #777;
box-shadow: 0 1px 4px #777;
}


ul#web{ margin:0 0 60px 0;}
ul#web li{width:248px; border:1px solid #eee;  margin:0 auto 5px auto;}
ul#web li img{ width:100%; height:auto;}

ul#web2{ margin:0 0 60px 0;}
ul#web2 li{width:248px; border:1px solid #eee;  margin:0 auto 5px auto;}
ul#web2 li img{ width:100%; height:auto;}


#toTopWrapper{ text-align:right; }
#footerWrapper{ background:#D3EDFB; width:100%; padding:0 0 20px; text-align:left; position:relative;}
#toTopWrapper img{ position:relative; right:0; top:-30px; cursor:pointer; display: inline;}
#footer{ width:760px; margin:0 auto;}
ul#footerUl{ margin:20px 0 20px 10px;}
ul#footerUl li{ color:#00A0E9; margin-bottom:10px; font-size:100%;}

#footer h1{ margin-top:-40px;}

#copy{ font-size:80%; margin:0 0 0 10px;}

.toTopWrapperMobile{ text-align:center; margin-bottom:0; display:none;}




#ad01h2{ display:block; background-image:none;}
#ad01h2 span{ display:none;}
#ad01{ display:block; padding:0; margin-bottom:60px; text-align:center;}
#ad02{ display:block; padding:0; margin-bottom:60px; text-align:center;}
}


/*パソコン用CSS*/
@media only screen and (min-width:769px){

h1 img{ width:329px; height:25px; margin:0;}
h2{ margin:0 0 10px;}

#wrapper{ width:900px; border-top:5px solid #00a0e9; margin:0 auto;}
ul#mobileNavi{ display:none;}

#primary{ float:left; width:640px; text-align:left; padding-bottom:60px;}
#secondary{ float:right; width:250px; text-align:left; padding-bottom:60px;}

ul#shop{ margin:0 0 60px 0;}
ul#shop li{ float:left; width:153px; border:1px solid #eee; margin:0 5px 5px 0; position:relative;}
ul#shop li img{ width:100%; height:auto; cursor:pointer;}
ul#shop li div{ display:none; padding:19px; border-top:10px solid #00A0E9; border-bottom:1px solid #00A0E9; border-left:1px solid #00A0E9; border-right:1px solid #00A0E9; background:#FFF; color:#231815; z-index:10000; position:absolute; top:155px; width:275px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 4px #777;
-moz-box-shadow: 0 1px 4px #777;
box-shadow: 0 1px 4px #777;
}


ul#etc{ margin:0 0 60px 0;}
ul#etc li{ float:left; width:153px; border:1px solid #eee; margin:0 5px 5px 0; position:relative;}
ul#etc li img{ width:100%; height:auto; cursor:pointer;}
ul#etc li div{ display:none; padding:19px; border-top:10px solid #00A0E9; border-bottom:1px solid #00A0E9; border-left:1px solid #00A0E9; border-right:1px solid #00A0E9; background:#FFF; color:#231815; z-index:10000; position:absolute; top:155px; width:275px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 4px #777;
-moz-box-shadow: 0 1px 4px #777;
box-shadow: 0 1px 4px #777;
}


ul#web{ margin:0 0 60px 0;}
ul#web li{width:248px; border:1px solid #eee;  margin:0 auto 5px auto;}
ul#web li img{ width:100%; height:auto;}

ul#web2{ margin:0 0 60px 0;}
ul#web2 li{width:248px; border:1px solid #eee;  margin:0 auto 5px auto;}
ul#web2 li img{ width:100%; height:auto;}


#toTopWrapper{ text-align:right; }
#footerWrapper{ background:#D3EDFB; width:100%; padding:0 0 20px; text-align:left; position:relative;}
#toTopWrapper img{ position:relative; right:0; top:-30px; cursor:pointer; display: inline;}
#footer{ width:900px; margin:0 auto;}
ul#footerUl{ margin:20px 0 20px;}
ul#footerUl li{ color:#00A0E9; margin-bottom:10px; font-size:100%;}

#footer h1{ margin-top:-40px;}

#copy{ font-size:80%; margin:0 0;}

.toTopWrapperMobile{ text-align:center; margin-bottom:0; display:none;}




#ad01h2{ display:block; background-image:none;}
#ad01h2 span{ display:none;}
#ad01{ display:block; padding:0; margin-bottom:60px; text-align:center;}
#ad02{ display:block; padding:0; margin-bottom:60px; text-align:center;}
}