@charset "utf-8";


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ● 収蔵品検索フォーム 専用CSS                           */
/*    ・ページ固有の処理を記述                             */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ContentsDivision
--------------------------------------------------- */
.ContentsDivision {
}




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   MessageBox                                     */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MessageBoxを上書き
--------------------------------------------------- */
.MessageBox{
  margin: 1em auto;
  width: 75%;
}
    /* options */
    .MessageBox.Error{
      padding: 25px;
      border-color: #f00;
    }
    .MessageBox.Error,
    .MessageBox.Error *{
      color: #000;
    }
    .MessageBox.Error .Heading .Icon::before{
      color: #f00;
    }






/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Button 等                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 共通設定 */
.Button{
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  position: relative;
  cursor: pointer;
  -webkit-transition: all .2s;
          transition: all .2s;
}

.ButtonGroup{
  text-align: center;
}
.ButtonGroup + .ButtonGroup{
  margin-top: 1.5em;
}


/* SimpleButton [ input type="button" ]
--------------------------------------------------- */
.SimpleButton,
input[type="button"]{
  color:   #333;
  border: 1px solid #ccc;
  background-color: #eee;
  background-image: linear-gradient( to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
  padding: 0 1em;
  vertical-align: middle;
  line-height: 2em;
  border-radius: 0.5em;
  margin: 0 auto;
}
.SimpleButton:hover,
input[type="button"]:hover{
  border-color: rgb(90,140,240);
}
    .SimpleButton .Label{
      line-height: 2em;
      padding: 0 1em;
    }


/* ToggleButton （SimpleButtonに追記）
--------------------------------------------------- */
.ToggleButton {
}
.ToggleButton .Icon::before{
  position: static;
}
.ToggleButton.Expanded .Icon::before{
  transform: rotate(45deg);
  color: #3cf;
}
.ToggleButton .Label::after{
  content: "を表示";
}
.ToggleButton.Expanded .Label::after{
  content: "を閉じる";
}




/* DefaultButton
--------------------------------------------------- */
.DefaultButton {
  color:        #fff;
  background-color: rgb(90,140,240);
  background-image: linear-gradient( to right, rgba(30,180,210,0), rgba(30,180,210,.75));
  margin: 0.5em 1em;
  padding: 1.25em 3em;
  border-radius: 3em;
}
.DefaultButton:hover,
.DefaultButton:focus {
  color: #fff!important;
  background: #222!important;
  border-color: #222!important;
}
.DefaultButton,
.DefaultButton > *{
  line-height: 1;
  vertical-align: middle;
}
    .DefaultButton .Icon{
      display: inline-block;
      color: inherit;
    }
    .DefaultButton .Icon::before{
      position: static;
    }
    .DefaultButton .Label{
      display: inline-block;
      font-weight: 600;
      min-width: 10em;
    }
    
    /* DefaultButton */
    .SmallDefaultButton {
      margin: 0.25em 0.25em;
      padding: 1em 2em;
    }
    .SmallDefaultButton .Label{
      min-width: 5em;
    }



        /* + + + + + レスポンシブ + + + + +  */
        
            /* bp2より狭いディスプレイ用 */
            body.rsbp-under-bp2 .DefaultButton{
              padding: 1.25em 1.5em;
            }




    /* - - カラーバリエーション - - */

    /* 白 */
    .DefaultButton.White {
      color:              #5ab5a9;
      background-color:   #fff;
      background-image:   none;
      border: 1px solid;
    }





/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   アイコン 等                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* アイコンに下線が付くのを回避 */
.MainContentsArea .Icon,
.MainContentsArea .Icon::before{
  text-decoration: none!important;
}


/* icon position left  */
.MainContentsArea .icon-pos-left{
  position: absolute;
  left: 0.5em;
  right: auto;
  top: 50%;
  margin: 0;
  margin-top: -0.5em;
}
.MainContentsArea [class^="icon-"].icon-pos-left:before,
.MainContentsArea [class*=" icon-"].icon-pos-left:before {
  margin: 0;
}
/* icon position right  */
.MainContentsArea .icon-pos-right{
  position: absolute;
  left: auto;
  right: 0.5em;
  top: 50%;
  margin: 0;
  margin-top: -0.5em;
}
.MainContentsArea [class^="icon-"].icon-pos-right:before,
.MainContentsArea [class*=" icon-"].icon-pos-right:before {
  margin: 0;
}


/* icon position top */
.MainContentsArea .icon-pos-top{
  display: block;
}
.MainContentsArea .icon-pos-top{
  font-size: 300%;
}
.MainContentsArea [class^="icon-"].icon-pos-top:before,
.MainContentsArea [class*=" icon-"].icon-pos-top:before {
  display: block;
  text-align: center;
  margin: 0.5em auto 0.25em;
}





/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Form Setting [Common]                          */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* FormItem （入力枠 1つ分）
--------------------------------------------------- */
.FormItem{
  margin: 0.25em 0;
}


    /* 入力枠の共通スタイル */
    .FormItem input[type='text'],
    .FormItem input[type='password'],
    .FormItem input[type='date'],
    .FormItem input[type='number'],
    .FormItem input[type='tel'],
    .FormItem input[type='mail'],
    .FormItem select,
    .FormItem textarea{
      max-width: 100%;
      border: 1px solid #ccc;
      border-radius: 0.5em;
      font-size: 100%;
      padding: 0.75em 0.75em;
      background: #fff;
      vertical-align: middle;
      margin:  0 0.25em;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .FormItem input[type='text'],
                    body.rsbp-under-bp2 .FormItem input[type='password'],
                    body.rsbp-under-bp2 .FormItem input[type='date'],
                    body.rsbp-under-bp2 .FormItem input[type='number'],
                    body.rsbp-under-bp2 .FormItem input[type='tel'],
                    body.rsbp-under-bp2 .FormItem input[type='mail'],
                    body.rsbp-under-bp2 .FormItem select,
                    body.rsbp-under-bp2 .FormItem textarea{
                      font-size: 112.5%;
                      -webkit-appearance: none;
                         -moz-appearance: none;
                              appearance: none;
                    }



    .FormItem select{
      padding: 0.375em 0.75em;
    }
    .FormItem input[type='number'] {
      width: 5em;
       -webkit-appearance: none!important;
          -moz-appearance:textfield!important;
    }


    .FormItem select{
      padding: 0.5em 0.75em;
      position: relative;
    }
    .FormItem textarea{
      width: 100%;
      height: 10em;
    }
    
    
    .FormItem.RadioButtonGroup label,
    .FormItem.CheckBoxGroup label{
      cursor:pointer;
      margin-right: 1em;
      white-space: nowrap;
      vertical-align: middle;
    }
    .FormItem input[type='checkbox'],
    .FormItem input[type='radio']{
      border: none;
      margin-right: 4px;
    }
            /* placeholder  */
            .FormItem ::-webkit-input-placeholder {
              color: #ccc;
              color: rgba(0,0,0,0.25);
              font-weight: normal!important;
            }
            .FormItem ::-moz-placeholder {
              color: #ccc; opacity: 1;
              color: rgba(0,0,0,0.25);
              font-weight: normal!important;
            }
            .FormItem :-ms-input-placeholder {
              color: #ccc;
              color: rgba(0,0,0,0.25);
              font-weight: normal!important;
            }
            /* focus時 */
            .FormItem input:not([readonly]):focus,
            .FormItem select:not([readonly]):focus,
            .FormItem textarea:not([readonly]):focus{
              border: 1px solid #aaf;
              box-shadow: 0 0 1em #aaf;
              outline: 0;
            }
            
            /* エラー時 */
            .FormItem .form-error{
              border: 2px solid #f00!important;
            }

            /* readonly */
            .FormItem input[readonly],
            .FormItem select[readonly],
            .FormItem textarea[readonly]{
              border: none!important;
              background: none!important;
            }


            /* invalid */
            .FormItem input[invalid],
            .FormItem select[invalid],
            .FormItem textarea[invalid]{
              color: #777!important;
              background: #ccc!important;
              box-shadow: none!important;
              border-color: #aaa;
            }



    /* 項目ごとのエラー文 */
    .FormItem .Caution{
      border-radius: 0.5em;
      font-size: 75%;
      color: #fff;
      background: #f00;
      padding: 0.5em 1em;
      margin: .5em 0 0;
      display: inline-block;
      white-space: nowrap;
    }








/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   SearchBlock                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* SearchBlock
--------------------------------------------------- */
.SearchBlock{
  background: rgba(255,255,255,1);
  padding: 30px;
  position: relative;
}

    .SearchBlock .BlockHeader{
    }
        .SearchBlock .BlockHeader .Heading{
          box-shadow: 0 0.125em 0.125em rgba(0,0,0,0.125);
          margin-bottom: 0px;
        }

    .SearchBlock .BlockContents,
    .SearchBlock .BlockFooter{
      font-size: 87.5%;
    }
    .SearchBlock .BlockContents{
      background: #eee;
      background: rgba(230,245,240,1);
      padding: 10px;
      margin: 10px auto;
      border-radius: 0.5em;
    }

    .SearchBlock .BlockFooter{
      text-align: center;
    }
    
                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .SearchBlock{
                      padding: 10px;
                    }




        /*  - - 検索用フォーム - - */
        .SearchBlock .FormGroup{
          display: -webkit-flex;
          display:         flex;
          -webkit-justify-content: space-between;
                  justify-content: space-between;
          -webkit-align-items: center;
                  align-items: center;
        }
        .SearchBlock .FormGroup .FormItem{
          flex-grow: 1;
          padding: 0.75em;
        }
        .SearchBlock .FormGroup .FormItem:nth-child(1){
          flex-grow: 3;
        }
        .SearchBlock .FormGroup .FormItem input{
        }
        .SearchBlock .FormGroup .FormItem .InputFreeWord{
          width: 100%;
        }
        .SearchBlock .FormGroup .FormItem .InputYear{
          width: 7em;
        }
        .SearchBlock .FormGroup .FormItem .InputCode{
          width: 10em;
        }
    
                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .SearchBlock .BlockContents .FormGroup{
                    -webkit-flex-direction: column;
                            flex-direction: column;
                    -webkit-align-items: stretch;
                            align-items: stretch;
                    }

                    body.rsbp-under-bp2 .SearchBlock .BlockContents,
                    body.rsbp-under-bp2 .SearchBlock .BlockFooter{
                      font-size: 75%;
                    }
                    body.rsbp-under-bp2 .SearchBlock .FormGroup .FormItem{
                      padding: 0.375em;
                    }
        
        /*  - - 開閉部 - - */
        .SearchBlock .AccordionParent{
          border-radius: 0.5em;
          padding: 5px 15px;
          margin: 0.25em 0 0;
      -webkit-transition: all .3s;
              transition: all .3s;
          background: rgba(215,235,230,1);
        }
        .SearchBlock .AccordionParent.Active{
          background: rgba(215,235,230,1);
        }
            .SearchBlock .AccordionParent .Heading{
              text-align: center;
              padding: 0.5em 0;
              position: relative;
            }
            .SearchBlock .AccordionParent .Heading .Attention{
              position: absolute;
              top:   5px;
              right: 5px;
              display: inline-block;
              background: rgba(255,255,105,0.75);
              color: #6a0;
              border-radius: 0.5em;
              padding: 0.5em;
              font-weight: normal;
              font-size: 75%;
              line-height: 1;
            }
            .SearchBlock .AccordionChild{
            }
            .SearchBlock .AccordionChild .ButtonGroup{
              margin: 1em auto;
              font-size: 75%;
            }
            .SearchBlock .AccordionChild table{
              width: 100%;
              margin: 0 auto;
              border-collapse: collapse;
            }
            .SearchBlock .AccordionChild table tr{
              border-top: 1px dotted #aab;
            }
            .SearchBlock .AccordionChild table th,
            .SearchBlock .AccordionChild table td{
              padding: 0.25em;
              width: 25%;
            }
            .SearchBlock .AccordionChild table th{
              text-align: left;
            }
            .SearchBlock .AccordionChild table select{
              width: 100%;
            }
            .SearchBlock .AccordionChild table thead th{
              background: rgba(205,225,220,1);
              font-size: smaller;
              color: #4ba;
            }

                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .SearchBlock .AccordionParent .Heading .Attention{
                      top: -1.5em;
                      right: -2em;
                    }
                    body.rsbp-under-bp2 .SearchBlock .AccordionChild table{
                      margin: 1em 0;
                    }
                    body.rsbp-under-bp2 .SearchBlock .AccordionChild table td{
                      display: block;
                      width: auto!important;
                    }
                    body.rsbp-under-bp2 .SearchBlock .AccordionChild table tr:not(:last-child) td{
                      padding-bottom: 0;
                    }
                    body.rsbp-under-bp2 .SearchBlock .AccordionChild table th{
                    }







/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   ResultBlock                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ResultBlock（共通）
--------------------------------------------------- */
.ResultBlock{
  position: relative;
  padding: 30px;
}
    .ResultBlock .BlockHeader{
    }
        .ResultBlock .BlockHeader .Heading{
          color: #fff;
          background: #5ab5a9;
          padding: 0.5em 0.75em;
          /*border-radius: 0.5em;*/
        }
        .ResultBlock .BlockHeader .DefaultText{
          margin: 0.75em 0;
          text-align: right;
          font-size: 75%;
        }
        .ResultBlock .BlockHeader .DefaultText .Number{
          font-size: 125%;
          font-family: Arial;
          font-weight: 600;
          padding: 0 0.125em;
          display: inline-block;
        }

    .ResultBlock .BlockContents{
      padding: 15px;
    }

    .ResultBlock .BlockFooter{
    }
        .ResultBlock .BlockFooter .pagination{
          font-size: 87.5%;
          background: none;
        }
    
                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .ResultBlock{
                      padding: 10px;
                    }
                    body.rsbp-under-bp2 .ResultBlock .BlockContents{
                      padding: 0px;
                    }







/* ResultBlock（リスト）
--------------------------------------------------- */
.ResultBlock.List{
  background: rgba(230,245,240,1);
  border: 10px solid #fff;
}

    /* 検索結果一覧 */
    .SearchResultListTable{
      border: 1px solid #5ab5a9;
      border-collapse: collapse;
      width: 100%!important;
      margin: 0 auto;
      font-size: 87.5%;
      background: #fff;
    }
        .SearchResultListTable tr:nth-child(even){
          background: #f5f5f5;
        }
        .SearchResultListTable th,
        .SearchResultListTable td{
          border: 1px solid #5ab5a9;
          padding: 10px;
          vertical-align: middle;
          text-align: left;
          transform: none;
          border-left-style: dotted;
          border-right-style: dotted;
        }
        .SearchResultListTable .ImageCell{
          width:  50px;
          padding: 2px;
          text-align: center;
        }
            .SearchResultListTable .ImageCell a{
              display: flex;
              flex-direction: column;
              justify-content: center;
              /*align-items:     center;*/
              width:  46px;
              height: auto;
              /*overflow: hidden;*/
            }
            .SearchResultListTable .ImageCell img{
              max-width: initial;
            }
            .SearchResultListTable .ImageCell img.Portrait{
              height: auto;
              width:  100%;
            }
            .SearchResultListTable .ImageCell img.Landscape{
            /*
              width: auto;
              height: 100%;
            */
              height: auto;
              width:  100%;
            }
            .SearchResultListTable .NameCell a{
              font-weight: bolder;
            }
            .SearchResultListTable .NameCell a:hover{
              color: #2a8579;
            }
        .SearchResultListTable .NumberCell{
          text-align: right;
          width: 100px;
        }
        .SearchResultListTable thead th{
          text-align: center!important;
          background: #a4d6d0;
          padding: 5px;
          font-size: 75%;
          color: #2a8579;
        }
        .SearchResultListTable tbody td{
          height: 50px;
        }

                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .SearchResultListTable{
                      width: 800px!important;
                    }







/* ResultBlock（詳細）
--------------------------------------------------- */
.ResultBlock.Detail{
  background: #fff;
}

    /* 検索結果詳細 */
    .SearchResultDetailTable{
      border: 1px solid #5ab5a9;
      border-collapse: collapse;
      width: 100%!important;
      margin: 0 auto;
      font-size: 87.5%;
      background: #fff;
    }
        .SearchResultDetailTable th,
        .SearchResultDetailTable td{
          border: 1px solid #5ab5a9;
          padding: 10px;
          vertical-align: middle;
          text-align: left;
          transform: none;
          border-right:   none;
          border-left:    none;
        }
        .SearchResultDetailTable th{
          width: 20%;
          background: #f2f2f2;
          
        }
        .SearchResultDetailTable td{
        }

                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .SearchResultDetailTable{
                      margin: 1em 0;
                    }
                    body.rsbp-under-bp2 .SearchResultDetailTable tr,
                    body.rsbp-under-bp2 .SearchResultDetailTable th,
                    body.rsbp-under-bp2 .SearchResultDetailTable td{
                      display: block;
                      width: auto!important;
                    }
                    body.rsbp-under-bp2 .SearchResultDetailTable td{
                      border: none;
                    }
                    body.rsbp-under-bp2 .SearchResultDetailTable th{
                      border-right:   none;
                      border-left:    none;
                      border-bottom:  none;
                    }
                    body.rsbp-under-bp2 .SearchResultDetailTable tr:first-child th{
                      border-top:   none;
                    }





/* スライダ付き 画像ギャラリー（bxslider）
--------------------------------------------------- */
.PhotoGallery {
  display: flex;
  margin-top: 10px;
  margin-bottom: 30px;
}

                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より広いディスプレイ用 */
                    body.rsbp-over-bp2 .PhotoGallery .bx-wrapper {
                      flex-grow: 4;
                      flex-basis: 770px;
                    }
                    body.rsbp-over-bp2 .PhotoGallery .SliderThumbnail {
                      flex-grow: 1;
                      flex-basis: 170px;
                    }
                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .PhotoGallery{
                     -webkit-flex-direction: column;
                             flex-direction: column;
                    }

    
    /* スライダ */
    .PhotoGallery .bx-wrapper {
      margin: 5px;
    }
    
    .PhotoGallery .Slider {
      list-style: none;
    }
    
    .PhotoGallery .Slider img {
      width: 100%;
      height: auto;
    }
    .PhotoGallery .Slider img.Landscape {
    }
    .PhotoGallery .Slider img.Portrait,
    .PhotoGallery .Slider img.Square {
    }
    
    /* サムネリスト */
    .PhotoGallery .SliderThumbnail {
      list-style: none;
      display: flex;
    }

                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より広いディスプレイ用 */
                    body.rsbp-over-bp2 .SliderThumbnail{
                     -webkit-flex-direction: column;
                             flex-direction: column;
                    }

                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .SliderThumbnail{
                    }
    
    .PhotoGallery .SliderThumbnail li {
      margin: 5px;
    }
    
            .PhotoGallery .SliderThumbnail li a{
              display: flex;
              flex-direction: column;
              justify-content: center;
              /*align-items:     center;*/
              /*overflow: hidden;*/
              cursor: pointer;
            }
            .PhotoGallery .SliderThumbnail li img{
              max-width: initial;
            }
            .PhotoGallery .SliderThumbnail li img.Landscape{
            /*
              width: auto;
              height: 100%;
            */
              height: auto;
              width:  100%;
            }
            .PhotoGallery .SliderThumbnail li img.Portrait{
              height: auto;
              width:  100%;
            }

                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より広いディスプレイ用 */
                    body.rsbp-over-bp2 .SliderThumbnail li a{
                      width:  150px;
                      /*height: 150px;*/
                    }

                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .SliderThumbnail li a{
                      width:  17.5vw;
                      /*height: 17.5vw;*/
                    }
    




/* bxslider を上書き
--------------------------------------------------- */
.bx-wrapper {
  margin: 0 auto;
  border: none;
  background: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.bx-wrapper .bx-viewport {
  border: none;
  background: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  left: auto;
  overflow: visible !important;
  /* 切替エフェクトはfade以外使用しないこと */
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  bottom: 0;
  padding: 2rem;
  text-align: right;
}