/*
Theme Name: shizunivlib
Author: shizuoka university library
Author URI: http://www.lib.shizuoka.ac.jp/
Description: 2018年12月公開予定の新HP
*/


/*-- ▼reset.css start --*/

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*-- ▲reset.css end --*/

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

a {text-decoration: none;}
a:link { color: black; } /*未訪問のリンク*/
a:visited { color: black; } /*訪問済みのリンク*/
a:hover {
  text-decoration:underline;
  /*text-decoration-lineだと、IEで適用されない*/
  } /*ポイント時のリンク*/

body {
  max-width:1140px;
  margin: 0 auto;
}

/*レスポンシブ対応*/
img {
  max-width:100%;
  height:auto;
}

header, .page-title {
  font-family : "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" ,
"ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" ,"HiraMinProN-W3",
"HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

header {
  margin-top:10px;
}

@media screen and (max-width:767px) {
header {
  margin-top:5px;
  }
}

.header-flex {
  height:75px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}


@media screen and (max-width:767px) {
.header-flex {
  height:55px;
  }
}

.header-title-desk{
  width:50%;
  /* 右側にmarginを入れる意味合いで、
  imgよりもpxを大きく取っている */
  height:100%;
  display:flex;
  align-items:flex-end;
  margin:0 auto 0 15px;
}

@media screen and (max-width:920px) {
.header-title-desk {
  margin:0 auto 0 5px;
  }
}

@media screen and (max-width:860px) {
.header-title-desk {
  margin:0 auto 0 5px;
  width:80%;
  }
}

@media screen and (max-width:767px) {
.header-title-desk {
  display:none;
  }
}


@media screen and (min-width:768px), print {
.header-title-smart {
  display:none;
  }
}

@media screen and (max-width:767px) {
.header-title-smart {
  display:flex;
  align-items:flex-end;
  margin:0 auto 0 5px;
  }
}

@media screen and (max-width:767px) {
.header-title-smart img{
  width:100%;
  /*460 × 0.8*/
  max-width:368px;
  }
}

.header-right {
  width:50%;
  height: 100%;
  display:flex;
  justify-content:space-around;
  align-items: flex-end;
}

@media screen and (max-width:860px) {
.header-right {
  display:none;
  }
}


.header-navi {
  height: 100%;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  font-weight:bold;
}

  /*display: table;*/
  /*table-layout: fixed;*/

.hnavi-link{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  height: 30px;
  margin-top:15px;
}

.hnavi-link li {
  display: inline-block;
  list-style-type: square;
  font-size: 14px;
  text-align:left;
}

.hnavi-link-resp {
  margin:30px auto;
  text-align:center;
  list-style:none;
}

.hnavi-link-resp li {
  margin-bottom:10px;
}

.hnavi-search, .hnavi-search-resp {
  height: 30px;
  padding-bottom:0;
}

.hnavi-search-resp {
  margin:30px auto;
}

.hnavi-searchform, .hnavi-searchform-resp {
  text-align: left;
  font-weight: normal;
  color:#000000;
  display:flex;
  flex-wrap:nowrap;
}

.hnavi-searchform-resp {
  justify-content:center;
}

.hnavi-searchbox {
  max-width:150px;
  min-width:80px;
  height:25px;
  padding:1px;
}

.hnavi-searchbutton {
  width:25px;
  height:25px;
}

.h-jpneng, .h-jpneng-resp {
  height:50%;
  background-color:#F2B33D;
  display:flex;
  align-self:center;
  align-items:center;
}

.h-jpneng-resp {
  width:90px;
  height:50px;
  margin:30px auto;
}

.h-jpneng [class*="current"] {
  background-color:gray;
}

.h-jpneng-resp [class*="current"] {
  background-color:gray;
}

.bogo-language-switcher {
  display:flex;
  height:100%;
  flex-direction:row-reverse;
}

.bogo-language-switcher li {
  width:45px;
  height:100%;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}

.bogo-language-switcher a {
  color:#fff;
}

.mylibrary-wrap, .mylibrary-wrap-resp {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  margin:0 20px 0 0;
  width:130px;
  height: 65px;
  background-color: #4261bd;
  text-align:center;
  align-items:center;
  text-decoration: none;
  border-bottom: solid 2px #11308c;/*少し濃い目の色に*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  -webkit-print-color-adjust: exact;
}

.mylibrary-wrap-resp {
  margin:30px auto;
}

.mylibrary-wrap:hover, .mylibrary-wrap-resp:hover {
  opacity: 1;
  -webkit-animation: flash 0.8s;
  animation: flash 0.8s;
  text-decoration:none;
}

.mylibrary {
  width:100%;
  color: white;
  /*ここでheight:100%とすると、テキスト垂直にならない。
  現状これだと、aのリンクがブロックいっぱいに広がってくれない*/
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif,serif,monospace;
  font-weight:bold;
}

.hamburger {
  display:none;
}


@media screen and (max-width:860px) {
.hamburger {
  display:flex;
  width:15%;
  justify-content:center;
  align-items:center;
  }
}

#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 20px 40px; /*メニュー内左右上下余白*/
    position: fixed;
    right: -300px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 300px; /*メニュー横幅*/
    z-index: 1000;
    overflow-y: auto;
}

#menu-background {
    background-color: #333; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
}

#menu-icon {
    background-color: #fff; /*アイコン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
    cursor: pointer;
    display: block;
    font-size: 50px; /*アイコン（フォント）サイズ*/
    height: 50px; /*アイコン縦高さ*/
    line-height: 50px; /*縦位置中央化*/
    right: 0;
    text-align: center;
    top: 0;
    width: 50px; /*アイコン横幅*/
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    z-index: 1000;
}

#menu-cb {
    display: none; /*チェックボックス本体は消しておく*/
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-300px); /*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}

.accordion-menu, .dropdownlink-sizudai {
  width: 100%;
  max-width: 350px;
  margin: 20px auto 20px;
  background: #fff;
  border-radius: 4px;
  list-style:none;
}
.accordion-menu li.open .dropdownlink {
  color: #37b0dc;
}
.accordion-menu li:first-child .dropdownlink, .dropdownlink-sizudai {
  border-top: 1px solid #ccc;
}

.dropdownlink, .dropdownlink-sizudai {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 45px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  color: #212121;
  position: relative;
  transition: all 0.4s ease-out;
}

.submenuItems {
  display: none;
  background: #c8dde6;
  li {
    border-bottom: 1px solid #B6B6B6;
  }
}

.submenuItems a {
  display: block;
  color: #727272;
  padding: 12px 12px 12px 25px;
  transition: all 0.4s ease-out;
  &:hover {
    background-color: #CDDC39;
    color: #fff;
  }
}

.rightmenu-resp {
  width:100%;
  border:1px solid #B6B6B6;;
}

.border-half {
  border-top: 3px #424142 solid;
  border-bottom:none;
  width:100%;
  margin:12px auto 0 auto;
}

/* パンくずリスト */

#breadcrumb {
  overflow: hidden;
  padding: 0;
  font-size: 15px;
}

#breadcrumb ul {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-image: none;
}

#breadcrumb li {
  float: left;
  margin-right: 5px;
  width: auto;
  /*以下がないとIEで文字が見切れる*/
  line-height:1.4;
}


/*ここからメインメニュー部分*/

#menu-global-navi {
  height: 100px;
  margin: 0 auto;
  padding: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  text-align: center;
  justify-content:center;
  align-items: center;
  align-content: space-around;
}

#menu-global-navi:before, #menu-global-navi:after{
  content: "";
  display: table;
}

#menu-global-navi li {
  position: relative;
  width: 18%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background: #fff;
}

#menu-global-navi li:after {
  clear:both;
}

#menu-global-navi > li {
  border-left: 1px solid #000;
}

#menu-global-navi > li:last-child {
  border-right: 1px solid #000;
}

#menu-global-navi li a {
  display: block;
  margin: 0;
  padding: 10px 0;
  background: #fff;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}

#menu-global-navi li a span {
  font-size:12px;
  font-weight:normal;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif,serif,monospace;
}

#menu-global-navi li:hover ul {
  overflow: visible;
  visibility: visible;
  opacity: .95;
}

/*#menu-global-navi li ul*/
.sub-menu {
  list-style: none;
  position: absolute;
  z-index: 100;
  top: 100%;
  margin: 0 -1px;
  padding: 0;
  visibility: hidden;
  opacity: 0;
  transition: 0s;
  border: 1px solid #424142;
}

#menu-global-navi li ul li {
  overflow: hidden;
  width: 100%;
}


#menu-global-navi li ul li a {
  visibility: hidden;
  opacity: .9;
  transition: .2s;
  padding: 13px 15px;
  background: #52658f;
  color: #fff;
  text-align: left;
  font-size: 14px;
  font-weight: normal;
}

#menu-global-navi li:hover > a {
  background: #333a56;
  color: #fff;
}
#menu-global-navi li:hover li a:hover {
  background: #333a56;
  color: #fff;
}

#menu-global-navi  li:hover ul li {
  overflow: visible;
  height: 45px;
}

#menu-global-navi  li:hover ul li a {
  visibility: visible;
  opacity: .9;
  height: 45px;
}

@media screen and (min-width:861px) and ( max-width:1000px) {
#menu-global-navi li {
  width:20%;
  }
}

@media screen and (max-width:860px) {
#menu-global-navi {
  display:none;
  }
}

.isDesktop {
  height:280px;
  display:flex;
  justify-content:center;
  align-items:center;
  background-size: cover;
  -webkit-print-color-adjust: exact;
  }


@media screen and (max-width:767px) {
.isHighSmart {
  height:180px;
  display:flex;
  justify-content:center;
  align-items:center;
  background-size: cover;
  }
}

.opac-windows {
  width: 55%;
  height: 50%;
  min-width:330px;
  padding: 0 10px;
  position:relative;
  background: rgba(45,45,45, 0.7);
}

@media screen and (max-width:767px) {
.opac-windows {
  height:55%;
  }
}

.opac-windows form {
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  display:flex;
  justify-content:flex-center;
}

.window-search {
  width:85%;
  min-width:250px;
  height:50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000000;
  font-size:16px;
  /*カーソルのスタート位置を調節*/
  padding-left:10px;
  margin:0 10px 0 15px;
}

/*placeholderの色を薄くする。上からchrome&Safari,firefox,IE用のコード*/

::-webkit-input-placeholder {
  color: #ccc;
}
::-moz-placeholder {
  color: #ccc; opacity: 1;
}
:-ms-input-placeholder {
  color: #ccc;
}

/*placeholderここまで*/

@media screen and (max-width:767px) {
.window-search {
  height:40px;
  }
.window-search::placeholder {
  font-size:12px;
  }
}

.window-search:focus{
  background:floralwhite;
}

.search-button {
  width:50px;
  height:50px;
  background-color:#4261bd;
  color:white;
  outline:1px solid #000000;
  font-size:16px;
  margin-right:15px;
}


@media screen and (max-width:767px) {
.search-button {
  width:40px;
  height:40px;
  }
}

.search-button:hover {
  opacity: 0.5;
  -webkit-animation: flash 1s;
  animation: flash 1s;
}

.detailed-opac {
  position:absolute;
  top: 90%;
  text-align:right;
  transform: translateY(-90%);
  -webkit- transform: translateY(-90%);
  width:100%;
  padding-right: 3%;
}

.detailed-opac a {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content:center;
  align-items:center;
  width:85px;
  height:35px;
  color:white;
  margin:0 2px 0 auto;
}

@media screen and (max-width:767px) {
.detailed-opac  {
  top: 95%;
  transform: translateY(-95%);
  -webkit- transform: translateY(-95%);
  }
}

@media screen and (max-width:767px) {
.detailed-opac a {
  height:25px;
  font-size:14px;
  }
}

.corona {
  height:80px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:5px 10px 10px 10px;
  border:solid;
  border-color:#FA6B75;
  border-width:1px;
  font-size:18px;
  font-weight:bold;
  color:#B4023E;
  background-color:#FBECEB;

}

@media screen and (max-width:767px) {
.corona {
  height:70px;
  margin:10px;
  font-size:14px;
  }
}


/*画像とOPACここまで*/

.top-main, #container {
  color:#333333;
  font-family:  'Hiragino Kaku Gothic Pro',ヒラギノ角ゴシック, 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif,serif,monospace;
}

/*NEWSからLINKまでここから*/

.twocolumn-wrapper {
  position:relative;
  display:flex;
/*メイン部分を中央寄せ*/
  margin:0 auto;
}


@media screen and (max-width:767px) {
.twocolumn-wrapper {
  display:inline;
  }
}

.twocolumn-wrapper hr {
  width:100%;
  margin:0px;
}

/*ここから左側*/

.wrapper-left {
  padding-top:25px;
  flex:1;
  max-width:788px;
}

.wrapper-left h2 {
  font-size:15px;
}

.news {
  width:100%;
  height:auto;
  margin-bottom:40px;
}


.news h2{
  display:inline-block;
}

.news-and-rss {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  }

.rss-icon {
  margin-right:5px;
}

.news-list{
  margin: 15px 0 15px 10px;
}

.news-list li{
  list-style: none;
  margin-top:18px;
}

@media screen and (max-width:767px) {
.news-list a {
  margin:8px 0;
  padding-bottom:12px;
  display:block;
  border-bottom:1px solid #E6E6E6;
  }
}

.news-link{
  text-align: right;
  margin:20px 15px 0 0;
}


.tools {
  height:250px;
  margin-bottom:20px;
}

@media screen and (max-width:767px) {
.tools {
  height:auto;
  }
}

.tools hr {
  margin-bottom:20px;
}

.tools-flex-parent {
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-around;
}

.tools-flex-parent a:hover {
  text-decoration:none;
}

@media screen and (max-width:767px) {
.tools-flex-parent {
  flex-wrap:wrap;
  }
}

.tools-block {
  width:250px;
  min-width:200px;
  height:65px;
  display:flex;
  border:1px solid #000;
  margin:5px 5px 20px 5px;
}

@media screen and (min-width:768px) and (max-width:824px) {
.tools-block  {
  width:220px;
  }
}

.tools-block:hover {
  opacity: 1;
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}

.tools-image {
  min-width:80px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.tools-name {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  line-height:1.4;
  margin-right:16px;
  text-align:center;
}

.tools-littlefont {
  line-height:none;
  font-size:12px;
}

/*以下はtoolsとlinkのhover用のコード*/

@-webkit-keyframes flash {
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

/*toolsとlinkのhover用ここまで*/

.pickup {
  height:400px;
}

@media screen and (max-width:1100px) {
.pickup {
  height:auto;
  }
}


.pickup hr {
  margin-bottom:25px;
}

.pickup-group {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-image: none;
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-around;
}

@media screen and (max-width:767px) {
.pickup-group {
  flex-wrap:wrap;
  }
}

.pickup-single{
  height:100%;
  width:25%;
  text-align:center;
  margin-bottom:20px;
}

@media screen and (max-width:767px) {
.pickup-single {
  width:50%;
  }
}

.pickup-single img{
  margin:5px 0;
  width:90%;
  height:90%;
  border-radius:50%;
  /*IEで画像の高さがpickupいっぱいになるのを防ぐ*/
  max-width:175px;
  max-height:175px;
}

@media screen and (max-width:767px) {
.pickup-single img {
  width:80%;
  height:80%;
  max-width:175px;
  max-height:175px;
  }
}


.pickup-single img:hover {
  -webkit-animation: flash 1.5s;
  animation: flash 1.5s;
}

.pickup-date {
  margin:5px 0;
  padding:0;
}

.pickup-title {
  margin:0 auto;
  width:90%;
}

/*ここから右側*/

.wrapper-right {
  padding-top:30px;
  margin-left:50px;
  width:312px;
  background-color:#424142;
}

@media screen and (min-width:768px) and (max-width:1000px) {
.wrapper-right {
  margin-left:10px;
  width:290px;
  }
}

@media screen and (max-width:767px) {
.wrapper-right {
  width:100%;
  margin:0;
  }
}

.wrapper-right h2 {
  color:white;
}

.todayopen {
  height:320px;
}

.todayopen-body {
  margin: 20px auto 10px auto;
  height:75%;
  background-color:#fff;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  padding-bottom:10px;
  width:250px;
  border-radius: 5px;
  -webkit-print-color-adjust: exact;
}

.todayopen-opening {
  background-color:#F2B33D;
  margin:0 10px;
  padding:8px 0;
  color:#fff;
}

.todayopen-mdw {
  font-size:25px;
}

.todayopen-now {
  padding:5px 0 0 15px;
}

.todayopen-hold {
  color:#ff3333;
}

.todayopen-satd {
  color:#3333ff;
}

.todayopen-shizu, .todayopen-hama {
  line-height:1.8;
  display:flex;
  justify-content:center;
}

.todayopen-to-table {
  width:100%;
  font-size:14px;
  text-align:right;
  padding-right:35px;
}

.todayopen-to-table a {
  color:#fff;
}

.sns {
  height:410px;
}

.sns hr {
  margin-bottom:20px;
}

.sns-icon {
  margin:15px 30px;
  display:flex;
  justify-content:space-around;
}


.twitter-wrap {
  text-align:center;
}

/* 20220819修正箇所 */

.twitter-timeline {
  margin-left: auto;
  margin-right: auto;
}

.link {
  height:330px;
  width:100%;
}


.link hr {
  margin-bottom:20px;
}

.link-flex-parent-test {
  display:flex;
  width:100%;
  flex-wrap:nowrap;
  justify-content:space-around;
}

.link-flex-parent-test a {
  color:#482c00;
  width:calc(100% - 16px);
}

.link-flex-parent {
  display:flex;
  width:100%;
  flex-wrap:nowrap;
  justify-content:space-around;
}

.link-flex-parent a {
  color:#482c00;
  width:calc(50% - 12px);
}

.link-flex-child {
  color:#482c00;
  background:#F7F7F7;
  margin-bottom:10px;
  height:70px;
  text-align:center;
  font-size:14px;
  border:none;
  outline: 1px solid #F2B33D; /* 線幅、線のスタイル、カラー */
        outline-offset: -5px; /* 対象の要素からの距離、マイナス(内側)にも対応 */
  display:flex;
  align-items:center;
  justify-content:center;
}

/*NEWSからLINKまでここまで*/

/*各固定ページのタイトル部分*/


.page-title h1{
  height:150px;
  width:100%;
  font-size:28px;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:15px 0;
}

@media screen and (max-width:767px) {
.page-title h1 {
  height:140px;
  font-size:24px;
  }
}

.page-title {
  background-size: cover;
}


/*カレンダー、セミナーで使用*/
.substitute-htitle {
  font-size: 20px;
  font-weight: bold;
  width:calc(100% - 20px);
  background-color: #f5f5f3;
  border: 2px solid #e6e6e5;
  border-left: 6px solid orange;
  margin:10px auto;
  padding: 13px 15px 13px 28px;
}

/*テスト中。おかしな部分があれば外す*/
.container {
  line-height:1.5;
}

.container h2 {
  display:flex;
  align-items:center;
  width:calc(100% - 20px);
  background: url(./image/h2.png) no-repeat left center;
  margin: 16px auto;
  padding: 6px 35px 4px;
  font-size: 24px;
  color: #1a1a1a;
  border-bottom: 2px solid #000;
  clear:both;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (     -o-min-device-pixel-ratio: 2/1),
       only screen and (        min-device-pixel-ratio: 2),
       only screen and (                min-resolution: 192dpi),
       only screen and (                min-resolution: 2dppx) {
  .container h2 {
    background-image: url("./image/h2@2x.png");
    background-size: 25px 25px;
  }
}

@media screen and (max-width:767px) {
.container h2 {
  font-size:18px;
  word-break:break-all;
  }
}

.container h3, .post h3{
  width:calc(100% - 20px);
  margin: 5px auto 10px auto;
  padding:10px 0px 10px 10px;
  display: flex;
  align-items:center;
  font-size: 19px;
  color: #1a1a1a;
  background: #f1f1f1;
  border-left: solid 5px #111;
}

@media screen and (max-width:767px) {
.container h3 {
  font-size:16px;
  padding:7px 0px 7px 10px;
  }
}

.container h4, .post h4{
  width:calc(100% - 20px);
  margin: 5px auto 10px auto;
  padding:5px 0px 5px 10px;
  display: flex;
  align-items:center;
  font-size: 16px;
  color: #1a1a1a;
}

@media screen and (max-width:767px) {
.container h4 {
  font-size:14px;
  padding:3px 0px 3px 5px;
  }
}


/*「電子ジャーナル」と「学生モニター」と「館長室にて」(center)で使用している*/
.bigtitle, .bigtitle-center, .bigtitle-journal, .bigtitle-database {
  margin:22px 0;
  width: calc(100% - 20px);
  display:flex;
  align-items:center;
  font-size:22px;
  font-weight: bold;
  color:#333333;
}

/*実質、「館長室にて」でしか使えない*/
.bigtitle-center {
  margin:0;
  padding:30px 0 20px 0;
  justify-content:center;
}

.bigtitle-journal, .bigtitle-database {
  font-size:18px;
}


@media screen and (max-width:767px) {
.bigtitle, .bigtitle-center, .bigtitle-journal, .bigtitle-database {
  font-size:16px;
  }
}

@media screen and (max-width:767px) {
.bigtitle-center {
  margin:22px;
  padding:0;
  }
}

.littledate {
  color: #009999;
}

.littletitle {
  color:#339900;
  font-weight:bold;
}

.line-enclosure {
  width:95%;
  margin: 10px 0 10px 20px;
  padding:10px;
  border:1px solid #999999;
}

@media screen and (max-width:767px) {
.line-enclosure {
  margin:10px;
  font-size:15px;
  }
}


.container p {
  margin: 10px 10px 10px 30px;
}

@media screen and (max-width:767px) {
.container p {
  margin:10px;
  font-size:15px;
  }
}

.container li,.container dl,.container dd {
  margin:10px 10px 10px 50px;
}

@media screen and (max-width:767px) {
.container li, .container dl,.container dd {
  margin:10px 10px 10px 25px;
  font-size:15px;
  }
}

.container a {text-decoration: underline;}

.container table {
  width: 95%;
  table-layout: auto;
  margin: 10px 30px;
  padding: 10px 20px;
  border: 3px #696969 solid;
  border-collapse: collapse;
  border-spacing: 0;
  text-align:center;
}

@media screen and (max-width:767px) {
.container table {
  margin:10px;
  font-size:14px;
  }
}

.container th {
  height:50px;
  padding: 10px 20px;
  border: #696969 solid;
  border-width: 0 0 1px 1px;
  background-color: #F9F9F9;
  font-weight: bold;
  text-align: center;
  vertical-align:middle;
	white-space: nowrap;
}

@media screen and (max-width:767px) {
.container th {
  padding:5px;
  }
}

.container td {
  height:50px;
  padding: 10px 20px;
  border: 3px #696969 solid;
  border-width: 0 0 1px 1px;
  text-align: left;
  vertical-align: middle;
  overflow-wrap : break-word;

}

@media screen and (max-width:767px) {
.container td {
  padding:5px;
  }
}

.calendar-overall {
  width:100%;
}

.calendar-explain {
  height:305px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}


@media screen and (max-width:767px) {
.calendar-explain {
  height:100%;
  display:block;
  }
}

.calendar-sentence {
  width:45%;
  height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
}

@media screen and (max-width:767px) {
.calendar-sentence {
  width:100%;
  height:80px;
  }
}

.calendar-width {
  display:flex;
  justify-content:space-around;
}

@media screen and (max-width:767px) {
.calendar-width {
  flex-direction:row;
  justify-content:space-around;
  height:auto;
  }
}

.calendar-line {
  display:none;
  }

@media screen and (max-width:767px) {
.calendar-line {
  display:block;
  margin:15px 0;
  }
}

#calendar-type {
  font-size:14px;
  width:45%;
  min-width:300px;
  text-align:center;
  white-space:nowrap;
  margin: 0 20px 0 auto;
}

#calendar-type td {
  text-align:center;
  padding:10px;
}

@media screen and (max-width:767px) {
#calendar-type {
  width:calc(100% - 10px);
  margin:0 auto;
  }
}

@media screen and (max-width:767px) {
#calendar-type th, #calendar-type td {
  height:auto;
  padding:8px 0;
  }
}


.calendar-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:20px 5px 15px;
}

.calendar-libnendo {
  font-size:22px;
  font-weight:bold;
}

@media screen and (max-width:767px) {
.calendar-libnendo {
  font-size:18px;
  }
}

.calendar-time {
  font-size:16px;
}

@media screen and (max-width:767px) {
.calendar-time {
  font-size:12px;
  }
}

#month-calendar td {
  padding:14px 20px;
}

@media screen and (max-width:767px) {
#month-calendar td {
  padding:5px;
  }
}

.calendar-flex {
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
  overflow-x:auto;
}

#calendar-yearmonth {
  height:300px;
  width:30%;
  margin:10px 5px;
}


@media screen and (max-width:767px) {
#calendar-yearmonth {
  width:calc(100% - 10px);

  }
}

#calendar-yearmonth td {
  height:auto;
  padding:4px;
}

.overflowscroll {
  overflow-x:auto;
}

.image-centering {
  display:flex;
  justify-content:center;
  align-content:center;
}

.OnCampus {
  color:#fdb341;
  font-weight:bold;
}

.GakuNin {
  color:#16569D;
  font-weight:bold;
}

.Other {
  color:#cc0033;
  font-weight:bold;
}

.Red {
  color:#990000;
}

.inquiry {
  margin:15px 10px 15px auto;
  width:45%;
  border:1px solid #333333;
  text-align:center;
}

@media screen and (max-width:767px) {
.inquiry {
  margin:10px auto;
  width:calc(100% - 10px);
  }
}

.inquiry-title {
  text-align:left;
  font-weight:bold;
  background-color:#afc2e9;
  padding:8px 12px 5px;
}

.inquiry-content {
  display:inline-block;
  text-align:left;
  padding:15px;
  font-size:14px;
  margin:0 auto;
}

.d-post {
  margin:12px 0;
  padding:0;
  border:1px solid #696969;
}

@media screen and (max-width:767px) {
.d-post {
  border:none;
  }
}

.d-post-title {
  background-color:#AFC2E9;
}

@media screen and (max-width:767px) {
.d-post-title {
  border:1px solid #696969;
  }
}

.d-source {
  text-align:right;
}

@media screen and (max-width:767px) {
.d-source {
  font-size:12px;
  }
}

.d-post-text {
  padding:15px;
  font-size:16px;
  line-height:1.6;
  letter-spacing:0.05em;
}

/*館長室のテーブルのtdをスマホでは幅100%にしようとしたが右枠が上手くいかない
@media screen and (max-width:767px) {
.container .d-td {
  display:block;
  width:100%;
  height:auto;
  border-right:3px #696969 solid;
  }
}
*/

.moni-img {
  margin:4px;
  vertical-align:top;
}

.container .ckiz {
  font-size:14px;
  padding:10px;
  border:1px solid lightgray;
}

.twocolumn-mainside {
  display:flex;
  justify-content:space-around;
}

@media screen and (max-width:767px) {
.twocolumn-mainside {
  display:block;
  }
}

.mainbar {
  width:80%;
}


.sidebar {
  margin:0 auto;
  width:20%;
}

@media screen and (max-width:767px) {
.mainbar, .sidebar {
  width:100%;
  }
}

.sidebar table {
  margin:0 10px 20px 10px;
  padding:10px 30px;
}

.sidebar li {
  list-style-type:none;
  margin:10px;
  text-align:center;
}

/*footerここから*/

#footer-navi{
  height: auto;
  margin: auto;
  padding: 15px 0px;
  background-color: #ffffff;
  border-top: 5px solid #424142;
}

@media screen and (max-width:767px) {
#footer-navi {
  display:none;
  }
}

.fnavi-flex{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  align-content: space-around;
}

.fnavi-list {
  margin: 0px 0px 15px 40px;
  flex:1;
}

.fnavi-list li {
  font-size: 90%;
  color: #333333;
  list-style-type: none;
  text-decoration: none;
  line-height:1.4em;
}

/*-- ▲Sitenavi block end --*/

/*-- ▼Footer block start --*/

footer {
  position:relative;
  height: 160px;
  margin: 0 auto;/*上下0px、左右auto*/
  padding: 25px 0 0 0;/*上下10px、左右0*/
  background-color: #424142;
  color: #dddddd;
  font-size: 90%;
}

@media screen and (max-width:767px) {
footer {
  border-top:3px solid #fff;
  height:220px;
  }
}

.footer-flex{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: space-around;
}

@media screen and (max-width:767px) {
.footer-flex {
  display:inline;
  }
}

.footer-address {
  height: 70px;
  padding: 0 30px 0 40px;
  line-height:1.4em;
}

.footer-address li {
  display:block;
  list-style-type: none;
}

.footer-navi {
  height:70px;
  padding: 0 100px 0 40px;
  line-height:1.4em;
}

.footer-navi li {
  list-style-type: square;
  color: white;
  margin-bottom:20px;
}

.footer-navi a {
  color: white;
}

@media screen and (max-width:767px) {
.footer-navi {
  display:none;
  }
}

@media screen and (max-width:767px) {
.footer-down {
  display:block;
  }
}

.copyright {
  position:absolute;
  bottom:10px;
  width:100%;
  text-align: center;
}

@media screen and (max-width:767px) {
.copyright {
  padding: 0 30px 0 40px;
  text-align: left;
  }
}

/*-- ▲Footer block end --*/

/*▼news,過去news一覧,pickupの色塗り館表示*/
.lib-all, .lib-shizu, .lib-hama {
  display:inline-block;
  padding: 5px 10px;
  color:#fff;
  font-weight:normal;
  min-width:52px;
}

.lib-all {
  background-color:#F2B33D;
}

.lib-shizu {
  background-color:#4261bd;
}

.lib-hama {
  background-color:#39A045;
}
/*▲news,過去news一覧,pickupの色塗り館表示*/

/*lib-all等と全く同じ形だが、.pickup-singleではブロック的な使い方をするので分けている*/
.pickup-single .lib-shizu,.pickup-single .lib-hama, .pickup-single .lib-all {
  display:block;
  margin:0 auto;
  height:26px;
  width:60px;
}

.pickup-single .lib-eng {
  width:auto;
  max-width:115px;
}

.post-navi {
  display:flex;
  justify-content:space-around;
  margin-bottom:3px;
}

.hold {color:#ff3333;}

.satd {  color:#3333ff;}

.hour-0 {background-color:#cccccc;} /* 休館 gray */
.hour-1 {background-color:#ffffff;} /* 平日通常 white */
.hour-2 {background-color:#FFFB7D;} /* 平日休業 yellow */
.hour-3 {background-color:#B5E85E;} /* 休日通常 green */
.hour-4 {background-color:#E8AE5A;} /* 平日試験 orange */
.hour-5 {background-color:#9CECFF;} /* 平日休業 cyan */
.hour-7 {background-color:#f08080;} /* コロナ時8:00-20:00開館 red */
.hour-8 {background-color:#CFB0E8;} /* 旧休日 purple */
.hour-9 {background-color:#F5C1EC;} /* その他 pink */


.NP21 th {width:25%;}
.NP21 td {width:11%;}
.NP22 {width:32%;}

/*全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 10px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}