@charset "utf-8";

/* ===================================================================
リセット
=================================================================== */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,textarea,p,blockquote,
th,td{margin:0;padding:0}
html{overflow-y:scroll}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ol,ul{list-style:none}fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
caption{text-align:left_side_menu}
address,caption,cite,code,dfn,strong,th,var{font-style:normal;font-weight:normal}
a:active,a:focus{outline:0}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ===================================================================
ここから
=================================================================== */


/* ==========================================================================
   1. 共通 ＆ スマホ用の基本設定（ベーススタイル）
========================================================================== */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: sans-serif;
}
iframe {
  border: 0;
  height: 100%;
  vertical-align: top;
}

/* 【スマホ時】結果画面（main）は後ろで100%全画面 */
#main {
  width: 100%;
  height: 100%;
}

/* 【スマホ初期状態】検索画面（search）は全画面表示 */
#search {
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 999;
  transition: left 0.6s ease; /* スルスル動くアニメーション */
  background: #ffffff;
}

/* JavaScriptで「.hidden」クラスがついたら左へ隠す */
#search.hidden {
  left: -100%;
}

/* メニューボタン（初期状態の検索表示中は display: none で隠す） */
.menu-trigger {
  display: none;
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1000;
  padding: 0 15px;
  height: 44px;
  background: rgba(0, 0, 0, 0.7);
  background: #DDDDFF;
  color: #333;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  user-select: none;
}

/* JavaScriptで「.show」クラスがついたらメニューボタンを表示する */
.menu-trigger.show {
  display: block;
}

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

  #main {
    /* ボタンの高さ分（約70px）だけ上部を押し下げて表示する */
    padding-top: 75px !important;
    box-sizing: border-box; /* 余白を含めて100%の高さにするお守り */
  }

}

/* ==========================================================================
   2. PC時の設定（画面幅が481px以上のときに上書き適用）
   ========================================================================== */
@media screen and (min-width: 481px) {

  body {
    display: flex !important;
  }

  #search {
    position: static; /* 浮いている状態を解除 */
    width: 360px !important;
    height: 100% !important;
    display: inline-block;
  }
  
  #main {
    flex: 1 !important;
    height: 100% !important;
  }
  
  .menu-trigger {
    display: none !important;
  }


}