@charset "UTF-8";

html, body {
margin:0;
padding:0;
background:#fff;
font-family:'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, Verdana, 'Droid Sans', Roboto, sans-serif;
line-height:1.8em;
}

ul, dl, dt, dd {
margin:0;
padding:0;
}

ul {
list-style-type:none;
}

img {
width:100%;
}

img.app_icon {
width:40px;
height:auto;
vertical-align:middle;
border:1px solid #ccc!important;
border-radius: 20px;
position: relative;
display: inline-block;
margin:0 5px;
padding:0;
}

.goods a {
position:relative;
vertical-align: middle;
padding:0 0 0 20px;
display:inline-block;
}
.goods a:before,
.goods a:after {
position:absolute;
content:"";
top:0;
left:0;
vertical-align:middle;
}

.goods a:before {
top:14px;
left: 4px;
width: 8px;
height: 2px;
background: #16a085;
}
.goods a:after {
top:12px;
left: 6px;
width: 4px;
height: 4px;
border-top: 2px solid #16a085;
border-right: 2px solid #16a085;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.goods a:hover:before {
background:#fd8a00;
}

.goods a:hover:after {
border-color:#fd8a00;
}

input {
font-size:0.85em;
}

/* clearfix */
#header:after,
#contents:after,
#g_list:after,
.p_list:after,
dl#new:after,
#h_nav:after,
.p_box:after {
content: "";
display: block;
clear: both;
}

h1 {
/*padding:20px;
border:1px solid #16a085;*/
position:relative;
}

h1 span {
display:none;
padding:1em;
background:#fff;
float:right;
position:absolute;
right:1em;
top:-2em;
font-size:0.5em;
}

h2 {
padding:.5em;
background:#fafafa;
border-bottom:1px solid #ddd;
border-right:1px solid #ddd;
}

h1, h2, h3 {
clear:both;
}

#contents > h1 {
position:absolute;
color:#fff;
top:-2.8em;
left:0;
}

h2, h3 {
margin-top:3em;
}

h1 + p.goods {
text-align:center;
}

/*
h2:before, h2:after {
position: absolute;
bottom: -2px;
left: 0;
content: '';
height: 2px;
}
h2:before {
z-index: 2;
width: 15%;
}
h2:after {
width: 100%;
background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #c9637d 2px, #c9637d 6px);
background: repeating-linear-gradient(45deg, #fff, #fff 2px, #c9637d 2px, #c9637d 6px);
}
*/


#h1_top {
display:none;
}

a {
color:#16a085;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

a img {
border:none!important;
}

#header, #contents, #footer, #header #h_cont {
margin:0 auto;
padding:1em 4em;
max-width:100%;
position:relative;
}

#header {
padding:1em 0 .5em 0;
border-bottom:6.5em solid #16a085;
background:#f5f5f5;
background:url(../img/gear.png) no-repeat 0 -100px #f7f7f7;
}

#header #h_cont {
position:relative;
}

#site_title {
width:200px;
}

#h_nav {
margin:0;
list-style-type:none;
width:32em;
display:block;
position:absolute;
right:0;
top:1em;
z-index:9999;
text-align:right;
}

#h_nav li {
display:inline-block;
min-width:6em;
text-align:center;
line-height:1em;
}

#h_nav a {
color:#000;
}

#h_nav a:hover {
text-decoration:none;
color:#fd8a00;
}

#h_nav li span {
font-size:0.7em;
}

#menu {
display:none;
}

#contents {
clear:both;
min-height:95%;
z-index:1;
}

#contents, #header #h_cont {
max-width:1024px;
padding:1em 0;
width:90%;
}

#g_list {
width:100%;
margin-top:0;
font-size:1.3em;
}

#g_list dt {
overflow:hidden;
width:100%;
height:350px;
white-space:nowrap;
position:relative;
z-index:4;
clear:both;
margin-bottom:2em;
}

#g_list dd {
width:50%;
margin-top:-11em;
position:relative;
z-index:10;
}
#g_list dd span {
display:inline-block;
font-size:0.7em;
margin-left:1em;
}

#g_list dd a {
display:block;
width:100%;
height:7em;
line-height:7em;
text-align:center;
white-space:nowrap;
}

#g_list  dd.p_detail {
float:left;
background:rgba(255,255,255,0.9);
}

#g_list dd.p_buy  {
float:right;
background:rgba(255,255,255,0.9);
border-left:1px solid #ccc;
}

#g_list dd a:hover {
background:#fff;
text-decoration:none;
}

.g_img img {
width:90%;
opacity:0.5;
vertical-align:top;
}

#g01 {
text-indent:-20%;
}

#g01 img {
margin-top:-7%;
}

#g02 {
text-indent:-60%;
}

#g02 {
text-indent:-15%;
}


#g02 img {
width:50%;
margin-top:-22%;
}

#g_list dd a:before{
  content: '';
  width: 18px;
  height: 18px;
  border: 0px;
  border-top: solid 6px #16a085;
  border-right: solid 6px #16a085;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right:10%;
  margin-top: -10px;
}

.rtxt {
margin:-3em 0 3em 0;
padding:0;
color:#fff;
text-align:center;
}

dl#new dt, dl#new dd {
float:left;
margin-bottom:1em;
}

dl#new dt {
clear:both;
font-weight:bold;
margin-right:1em;
}

.p_lk {
text-align:center;
border-bottom:1px solid #16a085;
padding:0 0 1em 0;
}

.p_lk li {
display:inline-block;
margin-right:5%;
}

.p_lk li a, .p_link a {
position:relative;
display:inline-block;
width:100%;
padding:.5em .5em .5em 1.5em;
margin-right:-.5em;
white-space:nowrap;
}

.p_lk li a:before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #16a085;
  border-right: solid 2px #16a085;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 50%;
  left:1.5em;
  margin-top: -5px;
}

.p_link {
}

.p_link a {
padding:1em;
width:50%;
margin:1em auto;
border:1px solid #16a085;
background:#f9f9f9;
/*border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;*/
text-align:center;
}

.p_link a:before{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px #16a085;
  border-right: solid 2px #16a085;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right:1em;
  margin-top: -5px;
}

.p_link a:hover {
text-decoration:none;
}

.p_list {
position:relative;
float:left;
margin-left:5%;
width:80%;
}

.p_list li {
position:absolute;
top:0;
left:0;
width:100%;
max-height:800px;
text-align:center;
display:none;
opacity:0;
}

.p_list li:first-child {
display:block;
opacity:1;
}

.p_list li img {
width:auto;
max-width:100%;
max-height:800px;
margin:0 auto;
}

.p_list li p {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
display:inline-block;
padding:0;
margin:1px auto;
font-size:.8em;
height:2em;
line-height:2em;
width:10%;
min-width:10em;
background:rgba(255,255,255,0.5);
text-align:center;
}

.p_th {
float:left;
width:12%;
max-width:200px;
}

.p_th li {
height:70px;
overflow:hidden;
margin-bottom:.5em;
border:1px solid #ccc;
}

.p_th li img {
cursor:pointer;
margin-top:-10px;
width:150%;
opacity:0.7;
}


/*
.sp-slide:hover {
cursor:default;
}

.sp-thumbnail:hover {
cursor:pointer;
}
*/

dl.desc dt {
font-weight:bold;
}

dl.desc dd {
margin-bottom:1em;
}

#footer {
clear:both;
background:#fff;
border-top:#aaa 1px solid;
padding:1em 0;
margin-top:4em;
}

#footer a {
color:#000;
}

#footer p {
margin:0;
text-align:center;
}

div#formInput {
line-height:2em;
clear:both;
text-align:left;
}

div#formInput * {
margin-top:10px;
}

span.label {
width:10em;
display:block;
float:left;
}

div#formInput p {
clear:both;
}

div#formInput .input {
margin-left:10em;
}

div#formInput .input input {
width:100px;
height:2em;
background:#fff;
border:1px solid #000;
font-weight:bold;
}

div#formInput .input input#submit {
color:#16a085;
}

div#formInput .input input#reset {
color:#aaa;
}

.exp {
font-size:0.7em;
line-height:1.5em;
}

@media screen and (max-width:800px) { 
html, body {
text-align:left;
}

#header {
padding:.5em 0;
}

#site_title {
float:left;
margin-left:.5em;
}


.rtxt {
margin-top:-3em;
line-height:1em;
font-size:0.9em;
}


#g_list dt {
height:230px;
}

#g_list dd {
width:100%;
border:none!important;
float:none!important;
margin:0;
}
#g_list dd.p_detail {
margin-top:-9em;
}
#g_list dd a {
height:2.5em;
line-height:2.5em;
}
#g_list dd.p_detail a {
border-bottom:1px solid #ccc!important;
}
#g_list dd.p_buy {
margin-bottom:4em;
}

#menu {
display:block;
float:right;
color:#16a085;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-color:#fff;
padding:5px 20px;
font-weight:bold;
margin-right:.5em;
margin-top:0;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}

#h_nav {
width:100%;
display:none;
left:0;
top:3.2em;
background:#333;
margin:0;
}

#h_nav li {
width:100%;
clear:both;
float:none;
text-align:center;
padding:0;
margin:0;
border-bottom:1px solid #fff;
}
#h_nav a {
display:block;
width:100%;
height:2em;
padding:1em 0;
color:#fff;
}

#header, #contents {
padding-bottom:0;
}

#contents, #header #h_cont {
padding:0 0 1em 0;
width:90%;
}

#header #h_cont {
width:100%;
}

#header {
border-width:3.5em;
}
#contents > h1 {
top:-2.8em;
}

.p_lk {
margin-top:1.5em;
}

.gallery {
padding:1em;
}

div#formInput .input {
margin-left:0;
}

.p_box ul {
float:none!important;
max-width:100%!important;
width:100%!important;
clear:both!important;
}

.p_list {
margin-left:0;
}

.p_th li {
display:inline-block;
width:15%;
height:60px;
}

.p_th li img {
margin:0;
}


}

@media screen and (max-width:640px) { 

dl#new dt, dl#new dd {
float:none;
margin-bottom:0;
}
#header {
border-width:3em;
}
#contents > h1 {
top:-2.5em;
}

.p_lk {
margin-top:1.3em;
padding:0;
border-bottom:none;
}.p_lk li, .p_link a {
width:100%;
display:block;
}
.p_lk li a:hover {
background:#f7f7f7;
color:#16a085;
}
.p_lk li {
border-bottom:1px solid #16a085;
}
.p_lk li a, .p_link a {
padding-left:0;
padding-right:0;
}
.p_link a {
margin-bottom:.5em;
}

div#formInput textarea {
width:100%;
}
}

@media screen and (max-width:480px) { 
#g_list dt {
height:170px;
}
#g_list dd {
font-size:0.8em;
}
#g_list dd.p_detail {
margin-top:-8em;
}
#g_list dd a {
height:2.5em;
line-height:2.5em;
}
#g_list dd.p_detail a {
border-bottom:1px solid #ccc!important;
}
#g_list dd.p_buy {
margin-bottom:3em;
}

#g_list dd a:before{
  width: 6px;
  height: 6px;
  border-top: solid 2px #16a085;
  border-right: solid 2px #16a085;
  margin:-3px;
}

p.rtxt {
margin-top:-2.8em;
font-size:0.8em;
}

span.label {
float:none;
}

.p_th li {
height:40px;
}


}


/* 送信フォーム */
body.form {
text-align:left;
}
body.form dt, body.form dd {
float:left;
margin-bottom:1em;
}
body.form dt {
width:9em;
clear:both;
}

body.form a {
display:inline-block;
padding-right:10px;
position:relative;
}

body.form a:before {
  content: '';
  width: 4px;
  height: 4px;
  border: 0px;
  border-top: solid 2px #16a085;
  border-right: solid 2px #16a085;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right:0;
  margin-top: -2px;
}