/* ==========================================================================
   MATCHA css
   ========================================================================== */

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* common */
html,body {
  margin: 0;
  padding: 0;
  /*background: url(../img/common/bg.png);*/
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  height: 100%;
}
a {
    text-decoration: none;
}


/* header */
header {
    /*background-color: rgba(255, 255, 255, 0.6);*/
    clear: both;
    height: 72px;
    position: fixed;
    width: 100%;
    z-index: 6;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
    border-bottom: 1px solid #c0c0c0;
}
header a {
    color: #222;
    text-decoration: none;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    transition: 0.4s;
}
header a:hover {
    color: #b1b717;
}
.header_logo {
    left: 10px;
    position: fixed;
    top: 10px;
    z-index: 3;
}
.header_logo img {
    width: 180px;
}

.header_icon {
    position: fixed;
    right: 10px;
    top: 16px;
    z-index: 15;
}
.header_icon div {
    float: left;
    margin: 5px;
    padding: 5px 0 10px 10px;
    z-index: 1;
}
.header_icon img {
    width: 24px;
}
.login img {
    width: 28px;
}
.lang_icon {
    border: 1px solid #ddd;
    padding: 5px 0 !important;
    position: relative;
    top: -5px;
    z-index: 0 !important;
}
.language img {
    width: 24px;
}
.login > a {
    font-size: 14px;
}
#language {
    background: rgba(177, 183, 23, 0.9) none repeat scroll 0 0;
    color: #fff;
    position: absolute;
    right: 80px;
    width: 180px;
    padding: 0;
}
.language_item {
    font-size: 14px;
    margin: 0 !important;
    padding: 10px 0 10px 25px !important;
    width: 155px;
    color: #fff;
}
.language_item img {
    /* display: none; */
    padding-right: 5px;
    position: relative;
    top: 7px;
    width: 38px !important;
}
.language_item:hover {
    background: #c0c545 none repeat scroll 0 0;
    color: #fff;
    width: 155px;
}
.language_item a {
    color: #fff;
}
.language_item a:hover {
    color: #fff;
}
.language_mobile {
    display: none;
}

#area {
    background: rgba(177, 183, 23, 0.9) none repeat scroll 0 0;
    color: #fff;
    position: absolute;
    right: 0;
    width: 180px;
    padding: 0;
    margin: 5px;
}
#area_icon img {
    width: 25px;
}
.area_item {
    padding: 10px 0 !important;
    text-align: center;
    width: 100%;
    margin: 0 !important;
    list-style: outside none none;
    display: block;
    transition: none;
    font-size: 14px;
}

input[type="checkbox"].on-off{
    display: none;
}

#area ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
}
input[type="checkbox"].on-off + ul{
    max-height: 0;
    overflow: hidden;
    margin: 0;
}
input[type="checkbox"].on-off:checked + ul{
    max-height: 300px;
}
.area_item:hover {
    background:#c0c545;
    color: #fff;
}
#area li {
    background: #d0d373 none repeat scroll 0 0;
    padding: 8px 0;
    text-align: center;
}
#area li:hover {
    background: rgba(177, 183, 23, 0.9) none repeat scroll 0 0;
}

form {
    margin-left: auto;
    max-width: 500px;
    right: 0;
}
input {
  display: none;
}
label {
  cursor: pointer;
  display: inline-block;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
.panel {
  -webkit-transition: .3s ease;
  transition: .3s ease;
  padding: 0 10px !important;
  position: fixed;
  top: -100px;
  width: 100%;
  background: #fff none repeat scroll 0 0;
  left: 0;
}
input:checked + .panel {
  top: -5px;
  margin: 0;
}
.search_text {
    border: medium none;
    color: #666;
    display: block;
    float: left;
    font-size: 32px;
    max-width: 360px;
    padding: 10px;
    margin-top: 10px;
    outline: medium none;
}
.searchBtn {
    display: block;
    position: absolute;
    top: 31px;
    right: 75px;
    width: 24px;
}
#searchform > label {
    top: 24px !important;
}

/* top image_slider */
#owl-demo .item img {
    display: block;
    height: auto;
    opacity: 0.4;
    position: absolute;
    top: -180px;
    width: 100%;
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: 0.8s;
}
#owl-demo .item img:hover {
    opacity: 0.6;
}

.select-wrap{
position:relative;
overflow:hidden;
display:inline-block;
background-color:#ffffff;
background-image:-webkit-linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
background-image:linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
border:1px solid #c0c0c0;
color:#333;
display: none;
}

.select-wrap select{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
position:relative;
z-index:2;
display:block;
width:100%;/* fallback non calc support */
margin:0;
padding:11px 35px 11px 11px;
padding:.6875rem 2.1875rem .6875rem .6875rem;
background:transparent;
border:0;
outline:none;
font-size:16px;
line-height:1.5;
}

.entypo-down-open-mini:before{
/* content:''; 今回のサンプルはCDNを使っているため指定していないけど指定する必要があります。 */
font-family:'entypo',sans-serif;
position:absolute;
z-index:1;
top:50%;
right:12px;
right:.75rem;
margin-top:-8px;
margin-top:-.5rem;
font-size:16px;
font-size:1rem;
line-height:1;
color:#333;
}

@media screen and (max-width: 960px) {
  /* header */
  header {height: 50px;}
  .header_logo {width: 100%; text-align: center; left: 0; top: 8px ;}
  .header_logo img {width: 140px;}
  .header_icon {top: 8px;}
  .header_icon div { margin: 0 5px; padding: 4px 0 10px 10px;}
  form {margin: 0 auto; max-width: 100%;}
  .lang_icon {display: none;}
  .language_mobile {display: block;}
  .search_text {font-size: 24px; max-width: 960px; padding: 5px 10px; width: 60%;}
  .area_icon {display: none;}
  .select-wrap {display: block;}
  /* top image_slider */
  .top_img_tittle {font-size: 20px;}
  .top_img_dis {display: none;}
  .searchBtn {top: 18px;}
  #searchform > label {top: 12px !important;}
  }