@charset "UTF-8";
/* home
   ========================================================================== */
.main_visual {
  margin: 0 -10px 30px;
}
.main_visual .slider {
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbox {
  border: 1px solid #ddd;
  padding: 10px;
}
.topbox .news dd {
  padding: 0 0 8px;
  margin: 0 0 8px;
  border-bottom: 1px dashed #ddd;
}
.topbox .news dd:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.topbox .news img {
  vertical-align: middle;
}
@media only screen and (min-width: 600px) {
  .topbox .news dt {
    clear: left;
    float: left;
    width: 8em;
  }
  .topbox .news dd {
    padding-left: 9em;
  }
}

/* NEWS 商品紹介
   ========================================================================== */
#cl-page h3 {
  font-size: 18px;
  border-bottom: 2px dotted #6a4343;
  padding-bottom: 3px;
  margin-bottom: 5px;
}
#cl-page .lists {
  margin-bottom: 30px;
  overflow: hidden;
}
#cl-page .lists .date {
  text-align: right;
}
#cl-page .lists .f_left {
  text-align: center;
  margin-bottom: 10px;
}
@media only screen and (min-width: 600px) {
  #cl-page .lists .f_left {
    text-align: left;
    float: left;
    width: 27.027%;
  }
  #cl-page .lists .f_right {
    float: right;
    width: 71.621%;
  }
}
#cl-page .index_brand span {
  background-color: #45781C;
  color: #fff;
  padding: 5px 5px;
  margin-right: 5px;
}

/* paging
-----------------------------------*/
div.paging span.current,
div.paging span a.paging-text {
  margin: 0px 2px;
  padding: 3px 8px;
  color: #333;
  border: 1px solid #ccc;
  display: inline;
  zoom: 1;
  display: inline-block;
  overflow: hidden;
  text-decoration: none;
}

div.paging span.current {
  background: #4d5e2a;
  border: 1px solid #4d5e2a;
  color: #fff;
  display: inline;
  zoom: 1;
  text-decoration: none;
  display: inline-block;
}

div.paging span a.paging-text:hover {
  background: #4d5e2a;
  border: 1px solid #4d5e2a;
  color: #fff;
  display: inline;
  zoom: 1;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

/* gallery
-----------------------------------*/
.detail_photo {
  margin: 0 -10px 30px;
  overflow: hidden;
}
.detail_photo li {
  float: left;
  width: 50%;
  padding: 0 10px 20px;
}
.detail_photo li img {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 2px 3px #ccc;
  -webkit-box-shadow: 0 2px 3px #ccc;
  box-shadow: 0 2px 3px #ccc;
}
.detail_photo li img:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}
@media only screen and (min-width: 480px) {
  .detail_photo li {
    width: 33.333%;
  }
}

/* 額縁相談コーナー
   ========================================================================== */
/* flow
-----------------------------------*/
.flowbox {
  padding: 10px;
  margin-bottom: 50px;
  background: url(../images/common/bg_header.jpg);
  position: relative;
}
.flowbox:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 39px;
  height: 25px;
  margin-left: -20px;
  background: url(../images/orderframe/arrow_down.png) no-repeat left top;
}
.flowbox.fast {
  margin-bottom: 20px;
}
.flowbox.fast:before {
  position: static;
  background: none;
}
.flowbox.last {
  margin-bottom: 30px;
}
.flowbox.last:before {
  position: static;
  background: none;
}
.flowbox h4 {
  text-align: center;
  padding: 0 10px;
  margin: 0 0 10px;
  border: none;
}
.flowbox .columns {
  padding: 10px;
  margin: 0;
  -moz-box-shadow: inset 0 0 5px #666;
  -webkit-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
  background-color: #fff;
}
.flowbox .columns img {
  display: block;
  margin: 0 auto 10px;
}
@media only screen and (min-width: 600px) {
  .flowbox.fast:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -40px;
    width: 39px;
    height: 25px;
    margin-left: -20px;
    background: url(../images/orderframe/arrow_down.png) no-repeat left top;
  }
  .flowbox .columns {
    overflow: hidden;
  }
  .flowbox .columns img {
    float: left;
    margin: 0 10px 0 0;
  }
}

#contact_box {
  border: solid 5px #758d59;
  padding: 10px;
  background-color: #dcdac3;
}
#contact_box .photo {
  display: none;
}
@media only screen and (min-width: 600px) {
  #contact_box .photo {
    display: block;
  }
}

/* Q&A
   ========================================================================== */
.faq_box {
  padding-bottom: 5px;
  border-bottom: 3px solid #9da983;
}

.area_q {
  background: url(../images/qanda/ico_q.png) no-repeat left top;
  padding: 10px 0px 15px 50px;
  font-size: 120%;
  font-weight: 600;
  margin-bottom: 15px;
  border-bottom: 1px dashed #4e6028;
}

.area_a {
  background-image: url(../images/qanda/ico_a.png);
  background-repeat: no-repeat;
  padding: 10px 0px 15px 50px;
}

/* 会社概要
   ========================================================================== */
.cmn-table {
  width: 100%;
  margin: 0 auto 15px;
  border-top: #cccccc solid 1px;
  border-left: #cccccc solid 1px;
  font-size: 95%;
}

.cmn-table th {
  border-top: #fff solid 1px;
  border-right: #cccccc solid 1px;
  border-bottom: #cccccc solid 1px;
  border-left: #fff solid 1px;
  background: #4e6028;
  padding: 5px 10px;
  color: #fff;
}

.cmn-table td {
  border-right: #cccccc solid 1px;
  border-bottom: #cccccc solid 1px;
  padding: 5px 10px;
  background-color: #FFFFFF;
}

.cmn-table td.color {
  border-right: #cccccc solid 1px;
  border-bottom: #cccccc solid 1px;
  padding: 5px 10px;
  background-color: #edf9fd;
}

.googlemap {
  position: relative;
  padding-bottom: 55%;
  /*これが縦横比*/
  height: 0;
  overflow: hidden;
}

.googlemap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* お問い合わせ
   ========================================================================== */
.table_contact tr {
  display: inline;
}
.table_contact th, .table_contact td {
  display: block;
}
@media only screen and (min-width: 600px) {
  .table_contact {
    display: table;
  }
  .table_contact tr {
    display: table-row;
  }
  .table_contact th, .table_contact td {
    display: table-cell;
  }
  .table_contact td.photo, .table_contact th {
    width: 200px;
  }
}

.form75 {
  width: 10em;
}

.form300, .form400 {
  width: 100%;
}

input[type="text"], input[type="tel"], input[type="email"], textarea {
  padding: 5px;
  margin: 3px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input:focus[type="text"], input:focus[type="tel"], input:focus[type="email"], textarea:focus {
  padding: 5px;
  border: 1px solid #3d3d3d;
  border-radius: 4px;
  background-color: #FFFFF7;
}