@charset "utf-8";

/* ----- 全体共通スタイル ----- */

#NR-header-app-balloon {
  display: none;
}

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

  /* ----- ホーム画面に追加 ----- */

  /* ロゴエリアの枠線を消す */
  .NR-rwd #NR-header {
    position: relative;
  }

  #NR-header-app-balloon {
    display: block;
    position: absolute;
    top: 9px;
    left: 121px;
    bottom: 9px;
    right: 9px;
    padding: 11px 20px 11px 11px;
    border: 1px solid #969696;
    border-radius: 3px;
    background: white;
  }

  /* 吹き出しの矢印 */
  #NR-header-app-balloon:before {
    content: "";
    display: block;
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 6px;
    height: 6px;
    border: solid #969696;
    border-width: 0 0 1px 1px;
    z-index: 1;
    background: white;
    -webkit-transform: rotate(45deg);
  }

  /* 吹き出しのメッセージ */
  #NR-header-app-balloon-msg,
  #NR-header-app-balloon-msg a {
    line-height: 16px;
    font-size: 11px;
    color: #323232;
  }

  /* 閉じるボタン */
  #NR-header-app-balloon-close {
    position: absolute;
    display: block;
    box-sizing: content-box;
    margin: auto 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    padding: 10px;
    z-index: 1;
  }

  /* 閉じるボタンの線 */
  #NR-header-app-balloon-close:before,    
  #NR-header-app-balloon-close:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 1px;
    height: 10px;
    background: #969696;
  }

  #NR-header-app-balloon-close:before {
    -webkit-transform: rotate(45deg);
  }

  #NR-header-app-balloon-close:after {
    -webkit-transform: rotate(-45deg);
    right: 0;
  }


  /* ----- ヘッダー UI 変更 ----- */

  /* ロゴエリアの枠線を消す */
  .NR-rwd #NR-header-in {
    border-bottom: none;
  }

  /* SP メニューを非表示にする */
  .NR-rwd #NR-sp-menu {
    display: none !important;
  }

  /* --- ナビゲーション --- */

  .NR-rwd #NR-nav-main {
    position: relative;
    transition: none;
    width: 100%;
    max-height: 41px; 
    border-top: 1px solid #5f2013;
    overflow: hidden;
  }

  /* ナビゲーションの横スクロール化 */
  .NR-rwd #NR-nav-main-scrolling {
    position: relative;
    background-color: #9c4836;
    padding-top: 2px;
    padding-bottom: 8px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* ナビゲーションの横スクロール時にスクロールバーを非表示に (Safari では効かない) */
  .NR-rwd #NR-nav-main-scrolling::-webkit-scrollbar {
    -webkit-appearance: none;
    display: none;
    height: 30px;
  }

  /* ナビゲーションの下の枠線 (選択時のタブをかぶせるために :after 疑似要素で描画) */
  .NR-rwd #NR-nav-main-scrolling:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 100%;
    height: 1px;
    background: #5f2013;
  } 



  /* ナビゲーションのメニューを横並びにする */
  .NR-rwd #NR-nav ul{
    padding: 0 5px 0;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
  }

  .NR-rwd #NR-nav li {
    position: relative;  
    margin-top: 1px;
    border-bottom: none;
    z-index: 1;
  }

  /* ナビゲーションの区切り線 */
  .NR-rwd #NR-nav li:before,
  .NR-rwd #NR-nav li:last-child:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 35px;
    width: 1px;
    background-color: #5f2013;
  }


  /* 最後の項目の右側の区切り線 */
  .NR-rwd #NR-nav li:last-child:after {
    left: auto;
    right: 0;
  }

  /* 選択状態の時は区切り線を非表示にする (隣の区切り線も) */
  .NR-rwd #NR-nav li.NR-now + li:before,
  .NR-rwd #NR-nav li.NR-now:before,
  .NR-rwd #NR-nav li.NR-now:after {
    content: none;
  }

  /* メニューのスタイルをリセット */
  .NR-rwd #NR-nav li a,
  .NR-rwd #NR-nav li a:hover {
    display: block;
    padding: 10px 13px 14px;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
    color: white;
  }

  .NR-rwd #NR-nav li.NR-now a {
    padding: 14px 13px 10px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    background-color: white;
    border-color: #5f2013;
    color: black;
  } 


  /* ----- 検索フォーム ----- */

  .NR-rwd .NR-search-top {
    padding: 5px 0 20px;
  }

  .NR-rwd .NR-search-top form {
    padding: 0 10px;
  }

  .NR-rwd .NR-search-in {
    margin: 0;
  }

  /* 検索ボタンの角丸 */
  .NR-rwd .NR-search-in .NR-button {
    border-radius: 3px;
  }

  /* キャンセル */
  .NR-search-top .NR-search-top-cancel {
    display: none;
    margin-left: 5px;
    line-height: 45px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* テキストのクリアーボタン */
  .NR-rwd .NR-search-in .search-unit .NR-clear-search-text {
    display: none;
    position: absolute;
    box-sizing: content-box;
    right: 5px;
    margin: 0;
    width: 13px;
    height: 13px;
    padding: 5px;
    -webkit-transform: rotate(45deg);
    top: 0;
    bottom: 0;
    margin: auto 0;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);    
  }

  /* ×の線 */
  .NR-rwd .NR-search-in .search-unit .NR-clear-search-text:before,
  .NR-rwd .NR-search-in .search-unit .NR-clear-search-text:after {
    content: "";
    position: absolute;
    display: block;
    background: #646464;
  }

  .NR-rwd .NR-search-in .search-unit .NR-clear-search-text:before {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1px;
    height: 13px;
  }

  .NR-rwd .NR-search-in .search-unit .NR-clear-search-text:after {
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 13px;
    height: 1px;
  }

  /* --- 一致条件の選択 --- */


  .NR-rwd .NR-search-matching-rule {
    display: none;
    position: relative;
    overflow: hidden;
    height: 36px;
    margin-top: 3px;
    border-top: 1px solid #cfbea0;
    background-color: #f8f6ee;
  }

  /* 選択状態の下線を枠にかぶせさせるために after 疑似要素で指定 */
  .NR-rwd .NR-search-matching-rule:after {
    content: "";
    position: absolute;
    left: 0;
    top: 34px;
    width: 100%;
    height: 1px;
    background: #cfbea0;
  }

  /* 一致条件を横スクロール可能にする */
  .NR-rwd .NR-search-matching-rule-scrolling {
    position: relative;
    z-index: 1;
    padding-bottom: 8px; /* はみ出させてスクロールバーを隠す */
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  /* スクロールバー非表示 (Safari では効かない) */
  .NR-rwd .NR-search-matching-rule-scrolling::-webkit-scrollbar {
    display: none;
  }

  .NR-rwd .NR-search-matching-rule ul {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
  }

  .NR-rwd .NR-search-matching-rule ul li {
    position: relative;
    padding: 11px 9px 9px;
    border-top: 1px solid #e2ddc9;
    border-right: 1px solid #cfbea0;
    color: #65512a;
    white-space: nowrap;
  }

  .NR-rwd .NR-search-matching-rule ul li:last-child {
    border-right: none;
  }

  .NR-rwd .NR-search-matching-rule ul li.NR-now {
    border-bottom-color: #9c4836;
    color: #9c4836;
  }

  /* 選択状態の下線を枠にかぶせるために after 疑似要素で指定 */
  .NR-rwd .NR-search-matching-rule ul li.NR-now:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #9c4836;
  }  

  /* --- サジェストリスト --- */

  .suggest-unit {
    position: relative;
    top: auto;
    border-bottom: none;
  }

  .suggest-unit li {
    border-bottom: 1px solid #ccc;
    background: url("../img/icon_search.png") no-repeat 15px center;
    background-size: 16px auto;
  }

  .suggest-unit li a {
    padding: 14px 14px 14px 42px;
    position: relative;
    top: auto;
  }

  /* ホバー時のスタイルを上書き */
  .suggest-unit li a:hover {
    background: transparent;
    color: #111;
  }

  /* --- 検索モード --- */

  /* 画面右端がちょっとはみ出るのを防ぐ */
  body.NR-search-form-opened {
    width: 100%;
    overflow-x: hidden;
  }

  /* 検索フォーム以外すべて非表示に */
  body.NR-search-form-opened > *:not(#NR-page),
  body.NR-search-form-opened #NR-page > *:not(.NR-search-top) {
    display: none !important;
  }

  /* 検索フォームは表示 */
  body.NR-search-form-opened #NR-page > .NR-search-top {
    display: block;
  }

  /* 一致条件表示 */
  body.NR-search-form-opened #NR-page > .NR-search-top .NR-search-matching-rule {
    display: block;
  }

  /* 入力テキスト */
  body.NR-search-form-opened #NR-page > .NR-search-top .NR-search-in .search-unit {
    width: 59%;
  }

  /* クリアーボタン */
  body.NR-search-form-opened #NR-page > .NR-search-top .NR-search-in .search-unit .NR-clear-search-text {
    display: block;
  }  

  /* キャンセル */
  body.NR-search-form-opened #NR-page > .NR-search-top .NR-search-top-cancel {
    display: inline-block;

  }

}