@charset "UTF-8";
/*************************************** 矢印
*****************************************/
/* pocket.scss
***************************************

pocket

*****************************************/
.pocket { background-color: #FDFDEB; padding-bottom: 100px; /*************************************** //附属図書館 ページ共通
*****************************************/ /*************************************** //ぽけっと　トップ
*****************************************/ /*************************************** //施設のご紹介
*****************************************/ }
.pocket + footer { margin-top: 0; }
.pocket .title_bar { background-color: #FFF2AC; line-height: 130%; display: flex; align-items: center; }
.pocket .title_bar h1 { color: #333; }
.pocket .title_bar h1 span { display: block; font-size: 2rem; }
.pocket .pocket-page .narrow_center { margin-left: auto; margin-right: auto; }
@media print, screen and (min-width: 1030px) { .pocket .pocket-page .narrow_center { max-width: 980px; padding-left: 40px; padding-right: 40px; } }
@media screen and (max-width: 1029px) { .pocket .pocket-page .narrow_center { width: 90%; } }
.pocket .pocket-page .fs-14 { font-size: 1.4rem; }
@media screen and (min-width: 1030px) { .pocket .pocket-page .ma100 { margin-bottom: 100px; } }
.pocket .pocket-page .copy { font-weight: normal; line-height: 150%; }
@media print, screen and (min-width: 1030px) { .pocket .pocket-page .copy { margin: 70px auto 50px; } }
@media screen and (max-width: 1029px) { .pocket .pocket-page .copy { margin: 40px auto; } }
.pocket .pocket-page .elm-block { display: block; }
.pocket .pocket-page .page_nav.jus-end ul { justify-content: flex-end; }
.pocket .pocket-page .text-red { color: #B40000; }
.pocket .pocket-page .btn.under a { width: 100%; max-width: 320px; font-size: 2rem; padding: 25px 40px; background-color: #E89107; border-radius: 50px; position: relative; }
.pocket .pocket-page .btn.under a::after { content: ""; position: absolute; margin-top: -9.75px; display: block; background-size: contain !important; width: 22px; height: 19.5px; top: 50%; right: 35px; background: url(../img/common/arrow_w.svg) no-repeat center; }
.pocket .pocket-page .btn.under a::after { background: url("../../img/pocket/arrow_pocket_w_under.svg"); background-repeat: no-repeat; }
.pocket .pocket-top .main_pic-flex_cont { align-items: flex-end; }
.pocket .pocket-top .main_pic-flex_cont img:first-child { width: 52%; }
@media screen and (max-width: 1029px) { .pocket .pocket-top .main_pic-flex_cont img:first-child { width: 100%; } }
.pocket .pocket-top .main_pic-flex_cont img:last-child { width: 45%; }
@media screen and (max-width: 1029px) { .pocket .pocket-top .main_pic-flex_cont img:last-child { width: 100%; } }
.pocket .pocket-top .intro-box h3 { color: #00AEEF; }
.pocket .pocket-top .intro-box .intro_btn { position: relative; }
.pocket .pocket-top .intro-box .intro_btn .btn { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
.pocket .pocket-top .intro-box .intro_btn .btn a { width: 360px; background-color: #00AEEF; text-align: center; border-radius: 10px; padding-top: 20px; padding-bottom: 20px; }
@media screen and (max-width: 1029px) { .pocket .pocket-top .intro-box .intro_btn .btn a { width: 280px; padding-top: 10px; padding-bottom: 10px; } }
.pocket .pocket-top .pdf-flex_cont { align-items: stretch; }
.pocket .pocket-top .pdf-flex_cont .pdf-box { width: 50%; padding: 60px 0; text-align: center; }
@media screen and (max-width: 1029px) { .pocket .pocket-top .pdf-flex_cont .pdf-box { width: 100%; padding: 60px 5% 50px; } }
.pocket .pocket-top .pdf-flex_cont .pdf-box .icon-box { width: 200px; height: 85px; margin: 0 auto; background-repeat: no-repeat; background-position: center; }
.pocket .pocket-top .pdf-flex_cont .pdf-box.tsushin { background-color: #CCEDE8; }
.pocket .pocket-top .pdf-flex_cont .pdf-box.tsushin .icon-box { background-image: url("../../img/pocket/flower_pink.svg"); background-size: 44px 41.5px; }
.pocket .pocket-top .pdf-flex_cont .pdf-box.leaflet { background-color: #D7E6BA; }
.pocket .pocket-top .pdf-flex_cont .pdf-box.leaflet .icon-box { background-image: url("../../img/pocket/leaf_1.svg"); background-size: 92.5px 80.5px; }
.pocket .pocket-top .pdf-flex_cont .pdf-box .btn.pdf a { width: 100%; max-width: 360px; background-color: #E89107; border-radius: 10px; }
.pocket .pocket-top .yosu { background-color: #F8F2F5; padding: 60px 0 30px; }
.pocket .pocket-top .yosu .icon-box { width: 90px; height: 90px; margin: 0 auto 20px; background-image: url("../../img/pocket/sun.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; }
.pocket .pocket-top .yosu .page_nav ul li a { background-color: #E89107; margin-right: 5px; }
@media print, screen and (min-width: 1030px) { .pocket .pocket-top .yosu .page_nav ul li a { width: 130px; } }
.pocket .pocket-top .book_lending { background-color: #FAE7C8; padding: 60px 0; }
.pocket .pocket-top .book_lending .promise { background-color: #fff; border-radius: 10px; width: 100%; max-width: 390px; box-sizing: border-box; padding: 30px 25px; margin: 0 auto; position: relative; }
.pocket .pocket-top .book_lending .promise .icon-box { position: absolute; width: 47px; height: 44px; top: 25px; right: 40px; background-image: url("../../img/pocket/flower_red.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; }
@media screen and (max-width: 1029px) { .pocket .pocket-top .book_lending .promise .icon-box { top: 20px; right: 20px; } }
.pocket .pocket-top .repo_pic-flex_cont { margin-top: 100px; margin-bottom: 90px; }
@media screen and (max-width: 1029px) { .pocket .pocket-top .repo_pic-flex_cont { margin-top: 60px; margin-bottom: 40px; } }
.pocket .pocket-top .repo_pic-flex_cont img { width: 25%; }
.pocket .pocket-top .line-box { background-color: #fff; border-radius: 40px; padding: 60px 100px; box-sizing: border-box; }
@media screen and (min-width: 1030px) { .pocket .pocket-top .line-box { flex-wrap: nowrap; align-items: stretch; } }
@media screen and (max-width: 1029px) { .pocket .pocket-top .line-box { padding: 5%; } }
@media screen and (max-width: 1029px) { .pocket .pocket-top .line-box .txt-box { order: 2; } }
.pocket .pocket-top .line-box .icon-box { width: 118px; flex-shrink: 0; margin-left: 70px; background-repeat: no-repeat; background-size: contain; background-position: center 45px; }
@media screen and (max-width: 1029px) { .pocket .pocket-top .line-box .icon-box { width: 100%; height: 50px; background-position: right center; margin-left: 0; order: 1; } }
.pocket .pocket-top .line-box.report { border: 5px solid #00AEEF; }
.pocket .pocket-top .line-box.report .icon-box { background-image: url("../../img/pocket/leaf_2.svg"); }
.pocket .pocket-top .line-box.tweet { border: 5px solid #89D100; }
.pocket .pocket-top .line-box.tweet .icon-box { background-image: url("../../img/pocket/leaf_3.svg"); }
.pocket .pocket-top .map-box { text-align: center; }
@media screen and (min-width: 1030px) { .pocket .pocket-top .map-box img { width: 727px; margin-right: 99px; } }
@media screen and (max-width: 1029px) { .pocket .pocket-top .map-box img { width: 100%; } }
@media screen and (min-width: 1030px) { .pocket .pocket-top .guidance-flex_cont { flex-wrap: nowrap; } }
.pocket .pocket-top .guidance-flex_cont dt { width: 150px; flex-shrink: 0; margin-right: 50px; }
@media screen and (max-width: 1029px) { .pocket .pocket-top .guidance-flex_cont dt { width: 100%; margin-bottom: 10px; } }
.pocket .pocket-top .guidance-flex_cont dt b { display: block; width: 150px; background-color: #E89107; color: #fff; padding: 10px 15px; border-radius: 8px; font-weight: bold; }
@media screen and (max-width: 1029px) { .pocket .pocket-top .guidance-flex_cont dt b { padding: 8px 15px; } }
.pocket .pocket-top .guidance-flex_cont dd { padding-top: 10px; }
.pocket .pocket-top .guidance-flex_cont dd .fs-18 { font-size: 1.8rem; }
.pocket .pocket-info .btn.back a { background-color: #E89107; width: 180px; }
.pocket .pocket-info h2 { color: #00AEEF; }
.pocket .pocket-info .icon-box { text-align: center; }
.pocket .pocket-info .icon-box img { width: 55px; }
.pocket .pocket-info .chara-box img { width: 225px; }