@charset "utf-8";

/* --- web fonts --- */
@font-face {
  font-family: 'arrow';
  src:  url('<?php bloginfo('url'); ?>/static/font/arrow.eot?4uculh');
  src:  url('<?php bloginfo('url'); ?>/static/font/arrow.eot?4uculh#iefix') format('embedded-opentype'),
    url('<?php bloginfo('url'); ?>/static/font/arrow.eot?4uculh') format('truetype'),
    url('<?php bloginfo('url'); ?>/static/font/arrow.eot?4uculh') format('woff'),
    url('<?php bloginfo('url'); ?>/static/font/arrow.eot?4uculh#arrow') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* --- reset css --- */
dl, dt, dd, ol, ul, li
{ margin:0; padding:0; border:0; outline:0 ; vertical-align:baseline; }
button, input, select, textarea { outline:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }


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

/* レイアウト */
.inner { width:auto; padding:0 15%; position:relative; }

/* ヘッダー検索 */
#header_search, #index_header_search { display:block; width:100%; padding:80px 0 20px 0; background:rgba(36,36,45,0.9); }
#header_search { display:none; position:absolute; top:60px; left:0; z-index:9; }
#header_search form, #index_header_search form { display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-pack:flex-end; -webkit-justify-content:flex-end; justify-content:flex-end }
#inner_search_button {  display:block; width:100%; padding:0 0 20px 0; background:rgba(36,36,45,0.9); }
.header_search_inputs, form .header_search_inputs { width:50%; margin:0 10px 0 10px; }
.header_search_button, form .header_search_button { width:100%; margin:0; text-align:center; }
.header_search_inputs input, .header_search_inputs select { width:100%; height:50px; padding:18px 16px; font-size:14px; line-height:1; color:#24242d; background:#fff; border:none; border-radius:3px; }
.header_search_inputs select { padding:15px 16px; }
.header_search_inputs select option { width:100%; color:#24242d; }
.header_search_inputs select:focus { color:#8b6d62; }
#header_search_submit { padding:0; color:#fff; background:transparent; border:1px solid #fff; border-radius:25px; cursor:pointer; width:225px; background:#24242d; }
#header_search_submit:hover { background-color:#8b6d62; }
.header_search_keywords { position:relative; }
.header_search_keywords #header_search_keywords { padding-right:57px; }
.header_search_keywords ul.search_keywords_operator { display:none; }
.header_search_keywords ul.search_keywords_operator { width:42px; height:50px; overflow:hidden; border-radius:0 3px 3px 0; position:absolute; top:0; right:0; }
.header_search_keywords ul.search_keywords_operator li { height:25px; line-height:25px; font-size:12px; text-align:center; color:#24242d; background:#fff; border-left:1px solid #ccc; cursor:pointer;
 -webkit-user-select:none; -moz-user-select:-moz-none; -ms-user-select:none; user-select:none;
}
.header_search_keywords ul.search_keywords_operator li.active { color:#fff; background:#ccc; }
.header_search_inputs .chosen-container { font-size:14px; }
.header_search_inputs .chosen-with-drop .chosen-single span { color:#8b6d62; }
.header_search_inputs .chosen-results li[data-option-array-index="0"] { color:#fff; background:#8b6d62 !important; border-color:#8b6d62; margin:-1px -1px 0 -1px; position:relative; left:-1px; }


/*　検索メニューボタン　*/
.search-menu {
  position: relative;
}

.search-menu-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #8b6d62;
  border-radius:25px;
}

/*
.search-menu-btn span {
  position: absolute;
  content: '';
  width: 9px;
  height: 0;
  top: calc(50% + 7px);
  left: calc(50% + 3px);
  border-top: solid 2px #fff;
  transform: rotate(45deg);
}
*/

.search-menu-btn::before {
  font-family: 'arrow';
  content: "\e91a"; /*アイコンのunicode*/
  font-size: 2em;
  color: #fff;
  position: absolute;
}

/*
.search-menu-btn::after {
  position: absolute;
  content: '';
  width: 9px;
  height: 0;
  top: calc(50% + 7px);
  left: calc(50% + 3px);
  border-top: solid 2px #fff;
  transform: rotate(45deg);
}
*/

/*
#search-menu-btn-check:checked ~ .search-menu-btn span {
  position: absolute;
  content: '';
  width: 32px;
  height: 32px;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  border-top: solid 2px #fff;
  transform: rotate(-45deg);
}
*/

#search-menu-btn-check:checked ~ .search-menu-btn::before {
  font-family: 'arrow';
  content: "\e91b"; /*アイコンのunicode*/
  font-size: 2em;
  color: #fff;
  position: absolute;
}

/*
#search-menu-btn-check:checked ~ .search-menu-btn::after {
  position: absolute;
  content: '';
  width: 32px;
  height: 32px;
  top: calc(50% - 5px);
  left: calc(50% - 27px);
  border-top: solid 2px #fff;
  transform: rotate(45deg);
}
*/

#search-menu-btn-check {
  display: none;
}
.search-menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
}

.search-menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: -100%;/*topの値を変更してメニューを画面上へ隠す*/
  z-index: 80;
  transition: all 0.5s;/*アニメーション設定*/
}

#search-menu-btn-check:checked ~ .search-menu-content {
  top: 0;/*メニューを画面内へ*/
}

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

/* レイアウト */
.inner { width:auto; padding:0 5%; position:relative; }

/* ヘッダー検索 */
#header_search, #index_header_search { width:100%; padding:80px 0 1px 0; background:rgba(36,36,45,0.9); }
#header_search { display:none; position:absolute; top:60px; left:0; z-index:9; }
#header_search form, #index_header_search form { display:block; }
#inner_search_button {  display:block; width:100%; padding:0 0 20px 0; background:rgba(36,36,45,0.9); }
.header_search_inputs, form .header_search_inputs { width:100%; margin:0 0 20px 0; }
.header_search_button, form .header_search_button { width:100%; margin:0; text-align:center; }

/*　検索メニューボタン　*/
.search-menu {
  position: relative;
}

.search-menu-btn {
  position: fixed;
  top: 10px;
  left: 0px;
  display: flex;
  height: 32px;
  width: 32px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #8b6d62;
  border-radius: 0px;
}

/*
.search-menu-btn span {
  position: absolute;
  content: '';
  width: 8px;
  height: 4px;
  top: calc(50% + 4px);
  left: calc(50% + 1px);
  border-top: solid 2px #fff;
  transform: rotate(45deg);
}
*/

.search-menu-btn::before {
  font-family: 'arrow';
  content: "\e91a"; /*アイコンのunicode*/
  font-size: 1.8em;
  color: #fff;
  position: absolute;
}

/*
.search-menu-btn::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 4px;
  top: calc(50% + 4px);
  left: calc(50% + 1px);
  border-top: solid 2px #fff;
  transform: rotate(45deg);
}

#search-menu-btn-check:checked ~ .search-menu-btn span {
  position: absolute;
  content: '';
  width: 22px;
  height: 22px;
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  border-top: solid 2px #fff;
  transform: rotate(-45deg);
}
*/

#search-menu-btn-check:checked ~ .search-menu-btn::before {
  font-family: 'arrow';
  content: "\e91b"; /*アイコンのunicode*/
  font-size: 1.8em;
  color: #fff;
  position: absolute;
  }

/*
#search-menu-btn-check:checked ~ .search-menu-btn::after {
  position: absolute;
  content: '';
  width: 22px;
  height: 22px;
  top: calc(50% - 4px);
  left: calc(50% - 18px);
  border-top: solid 2px #fff;
  transform: rotate(45deg);
}
*/

#search-menu-btn-check {
  display: none;
}

.search-menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
}

.search-menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: -100%;/*topの値を変更してメニューを画面上へ隠す*/
  z-index: 80;
  transition: all 0.5s;/*アニメーション設定*/
}

#search-menu-btn-check:checked ~ .search-menu-content {
  top: 0;/*メニューを画面内へ*/
}

}