@charset "UTF-8";
html { -webkit-box-sizing: border-box; box-sizing: border-box; }

*, *::after, *::before { -webkit-box-sizing: inherit; box-sizing: inherit; }

html { -webkit-box-sizing: border-box; box-sizing: border-box; }

*, *::after, *::before { -webkit-box-sizing: inherit; box-sizing: inherit; }

html { -webkit-box-sizing: border-box; box-sizing: border-box; }

*, *::after, *::before { -webkit-box-sizing: inherit; box-sizing: inherit; }

html { -webkit-box-sizing: border-box; box-sizing: border-box; }

*, *::after, *::before { -webkit-box-sizing: inherit; box-sizing: inherit; }

/* ************************************************************************************** 　基本タグ ************************************************************************************ */
html, body { height: 100%; }

body { display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; box-orient: vertical; -webkit-box-direction: normal; box-direction: normal; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; min-width: 320px; min-height: 100vh; background-color: #f3f9fa; color: #494b4b; font-size: 18px; font-family: "メイリオ", Verdana, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

img { padding: 0; margin: 0; vertical-align: bottom; max-width: 100%; }

/* ************************************************************************************** 　ヘッダー ************************************************************************************ */
#wrapper-header { min-height: 70px; background-color: #d43f23; /* 共通 -------------------------------------------------------------- */ /* PC
-------------------------------------------------------------- */ /* TABLET以下 -------------------------------------------------------------- */ }
#wrapper-header #wrapper-kurukuru { position: absolute; top: 5px; left: 5px; -webkit-perspective: 200px; perspective: 200px; }
@-webkit-keyframes logos { from { -webkit-transform: rotateY(0); transform: rotateY(0); }
  to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } }
@keyframes logos { from { -webkit-transform: rotateY(0); transform: rotateY(0); }
  to { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } }
#wrapper-header #wrapper-kurukuru #kurukuru { display: block; position: relative; width: 60px; height: 60px; margin: 0 auto; -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); transform: rotateX(0) rotateY(0) rotateZ(0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: logos 5s infinite linear; animation: logos 5s infinite linear; }
#wrapper-header #wrapper-kurukuru #efsf, #wrapper-header #wrapper-kurukuru #zeon { position: absolute; height: 60px; width: 60px; -webkit-backface-visibility: visible; backface-visibility: visible; }
#wrapper-header #wrapper-kurukuru #efsf { -webkit-transform: translateZ(20px); transform: translateZ(20px); }
#wrapper-header #wrapper-kurukuru #zeon { -webkit-transform: rotateY(180deg) translateZ(20px); transform: rotateY(180deg) translateZ(20px); }
#wrapper-header #header #logo a { display: block; width: 220px; height: 0; padding: 60px 0 0 70px; overflow: hidden; background-image: url("../img/common/logo.png"); background-repeat: no-repeat; background-position: right 10px; }
#wrapper-header #header #nav-main ul { list-style: none; }
#wrapper-header #header #nav-main a { color: #f3f9fa; }
@media screen and (min-width: 1200px) { #wrapper-header #header { display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; /* 　ロゴ */ /* 　ヘッダーメニュー */ }
  #wrapper-header #header #logo { margin-right: auto; }
  #wrapper-header #header #nav-main ul { display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; }
  #wrapper-header #header #nav-main ul li { margin-right: 2em; }
  #wrapper-header #hamburger { display: none; } }
@media screen and (max-width: 1199px) { #wrapper-header { /*
* 　ヘッダーメニュー
*/ }
  #wrapper-header #hamburger { /* 変数 */ width: 50%; height: 50px; position: fixed; bottom: 0; left: 0; padding: 12px; cursor: pointer; color: #f3f9fa; background-color: #199b73; z-index: 999; /* 展開時 -------------------------------------------------------------- */ }
  #wrapper-header #hamburger i { width: 36px; height: 2px; border-radius: 3px; display: block; -webkit-transition: all 0.3s; transition: all 0.3s; background-color: #f3f9fa; -webkit-transform: translateY(12px); transform: translateY(12px); float: left; margin-right: 10px; }
  #wrapper-header #hamburger i:before, #wrapper-header #hamburger i:after { content: ""; height: 2px; border-radius: 3px; display: block; -webkit-transition: all 0.3s; transition: all 0.3s; background-color: #f3f9fa; }
  #wrapper-header #hamburger i:before { -webkit-transform: translate(0px, -12px); transform: translate(0px, -12px); }
  #wrapper-header #hamburger i:after { -webkit-transform: translate(0px, 12px); transform: translate(0px, 12px); }
  #wrapper-header #hamburger.active i { background-color: #199b73; }
  #wrapper-header #hamburger.active i:before, #wrapper-header #hamburger.active i:after { background-color: #f3f9fa; }
  #wrapper-header #hamburger.active i:before { -webkit-transform: rotate(-45deg) translate(0, 0); transform: rotate(-45deg) translate(0, 0); }
  #wrapper-header #hamburger.active i:after { -webkit-transform: rotate(45deg) translate(-1px, -1px); transform: rotate(45deg) translate(-1px, -1px); }
  #wrapper-header #nav-main div { display: none; -webkit-box-align: end; box-align: end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; -ms-flex-align: end; position: fixed; top: 0; bottom: 50px; left: 0; width: 80%; background-color: rgba(0, 0, 0, 0.8); z-index: 999; }
  #wrapper-header #nav-main div.show { display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; }
  #wrapper-header #nav-main div ul { width: 100%; margin: 0; padding: 1em; }
  #wrapper-header #nav-main div ul li { display: block; width: 100%; margin-bottom: 1rem; border-bottom: 1px solid #7d878c; }
  #wrapper-header #nav-main div ul li a { padding-bottom: .5rem; display: block; } }

/* ************************************************************************************** 　コンテンツ部 ************************************************************************************ */
#wrapper-contents { margin: 0 auto; -webkit-box-flex: 1; box-flex: 1; -moz-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; /* PC -------------------------------------------------------------- */ /* TABLET以下 -------------------------------------------------------------- */ }
@media screen and (min-width: 1200px) { #wrapper-contents { width: 1200px; display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; /* 左ブロック(検索結果表示エリア) */ /* 右ブロック(サイドバー) */ }
  #wrapper-contents #column-left { width: 813px; -webkit-box-flex: 2.5; -ms-flex: 2.5; flex: 2.5; margin-right: 30px; background-color: #fdfefe; }
  #wrapper-contents #column-right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 2rem 1rem; background-color: #fdfefe; }
  #wrapper-contents #column-right #inner-right { position: -webkit-sticky; position: sticky; bottom: 0; } }
@media screen and (max-width: 1199px) { #wrapper-contents { padding-right: 0.5em; padding-left: 0.5em; width: 100%; /* 左ブロック(検索結果表示エリア) */ /* 右ブロック(サイドバー) */ }
  #wrapper-contents #column-left { width: 100%; margin-bottom: 2rem; }
  #wrapper-contents #column-right { padding: 2rem 1rem; background-color: #fdfefe; margin-bottom: 2rem; } }

/* ************************************************************************************** 　検索メニュー ************************************************************************************ */
#wrapper-search { /* 共通 -------------------------------------------------------------- */ /* PC -------------------------------------------------------------- */ /* Tablet以下 -------------------------------------------------------------- */ }
#wrapper-search ul { list-style: none; padding: 0; }
#wrapper-search ul li { margin: 0; border-bottom: 1px solid #7d878c; cursor: pointer; }
#wrapper-search ul li label span.s-label { display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; box-pack: justify; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 27px; }
#wrapper-search ul li label span.s-label .s-count { color: #7d878c; font-size: 0.85em; }
#wrapper-search ul li label span.s-label::before { position: absolute; top: 0.5rem; right: 5px; bottom: 0.5rem; left: 5px; content: ""; background-image: url("../img/common/check.png"); background-repeat: no-repeat; display: inline-block; width: 20px; height: 22px; }
#wrapper-search ul li label input[type="checkbox"] { display: none; }
#wrapper-search ul li label input[type="checkbox"]:checked + span { color: #f3f9fa; background-color: #199b73; }
#wrapper-search ul li label input[type="checkbox"]:checked + span .s-count { color: #f3f9fa; }
#wrapper-search ul li label input[type="checkbox"]:checked + span::before { background-position: left -22px; }
#wrapper-search h3 { height: 60px; white-space: nowrap; padding-left: 60px; line-height: 60px; background-repeat: no-repeat; background-position: left 7px; position: relative; cursor: pointer; }
#wrapper-search h3 .count { display: block; position: absolute; top: 5px; left: -5px; background-color: #199b73; color: #f3f9fa; font-size: 14px; line-height: 1em; padding: 3px; min-width: 18px; height: 18px; text-align: center; border-radius: 8px; }
#wrapper-search h3 .count.is_have { background-color: #e65a00; }
#wrapper-search h3#grade { background-image: url("../img/common/search_grade.png"); }
#wrapper-search h3#scale { background-image: url("../img/common/search_scale.png"); }
#wrapper-search h3#series { background-image: url("../img/common/search_series.png"); }
#wrapper-search h3#ms { background-image: url("../img/common/search_ms.png"); }
#wrapper-search h3#pilot { background-image: url("../img/common/search_pilot.png"); }
@media screen and (min-width: 1200px) { #wrapper-search.blog-side { display: none; }
  #wrapper-search #status-search { display: none; }
  #wrapper-search #form-search #wrapper-list div { display: none; }
  #wrapper-search #form-search #wrapper-list div.show { display: block; }
  #wrapper-search #form-search #wrapper-list div ul { width: 100%; } }
@media screen and (max-width: 1199px) { #wrapper-search #btn-search { font-size: 1rem; color: #f3f9fa; text-align: right; width: 50%; height: 50px; line-height: 50px; position: fixed; right: 0; bottom: 0; background-color: #d43f23; cursor: pointer; padding-right: 55px; padding-left: 0; background-image: url("../img/common/btn_search.png"); background-repeat: no-repeat; background-position: right center; z-index: 999; }
  #wrapper-search #status-search { position: absolute; top: 0; right: 0; padding: 1rem; color: #f3f9fa; width: 100%; text-align: right; }
  #wrapper-search #form-search { display: none; -webkit-box-align: end; box-align: end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; -ms-flex-align: end; position: fixed; top: 0; right: 0; bottom: 50px; width: 95%; background-color: rgba(0, 0, 0, 0.8); padding: 1em 1em 1em 0.5em; color: #f3f9fa; z-index: 999; }
  #wrapper-search #form-search.show { display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; }
  #wrapper-search #form-search #wrapper-list div { display: none; z-index: 9999; -webkit-box-align: end; box-align: end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; -ms-flex-align: end; position: absolute; top: 70px; right: 0; bottom: 0; left: 60px; background-color: rgba(0, 0, 0, 0.9); }
  #wrapper-search #form-search #wrapper-list div.show { display: -webkit-box; display: -moz-box; display: box; display: -moz-flex; display: -ms-flexbox; display: flex; }
  #wrapper-search #form-search #wrapper-list div ul { overflow-y: auto; width: 100%; max-height: 100%; padding: 1em; margin: 0; } }

/* ************************************************************************************** 　フッター ************************************************************************************ */
#wrapper-footer { color: #f3f9fa; background-color: #d43f23; /* PC -------------------------------------------------------------- */ }
#wrapper-footer #footer { text-align: center; }