@charset "utf-8";
/*************************************************
 top.css
**************************************************/

/* 基本スタイル */
.slide_box{float: left;}
.top_section { padding: 50px 0;}
.search_usermenu{float: right;width:497px;}
.search_usermenu form{height: 65px;background: #F5A3B1;border-radius: 8px;}
.search_usermenu label {color:#6B2525;font-size:1.3em;float:left;display: block;width: 12.3em;padding-left:2.5em;padding-top:16px;font-weight: 600}
.search_usermenu label .icon_searchmark{position: relative;}
.search_usermenu label .icon_searchmark:before {display: block;content: "";position: absolute;width:23px;height: 22px;background-image: url("../img/icon_01.png");top:.2em;left:-1.5em;}
.search_usermenu .input_area{float: left;background: #fff;height: 44px;width:calc(100% - 17em);margin-top:10px;padding-bottom: 0;border-radius: 5px;}
.search_usermenu .input_area input[type="text"] {border:none;width:calc(100% - 6em);margin-left:1em;height: 44px;}
.search_usermenu .input_area input[type="submit"]{background:#000;color:#fff;border:none;height:35px;;padding: 0 1em;display: block;float: right;margin-top: 5px;}

.top_section.sec_01 {background-image: url("../img/bg_dot.png");}

.search_user{display: flex;flex-direction: row;flex-wrap:wrap; justify-content: space-between;margin-top:10px;margin-bottom:0.5em;}
.search_user li {width:48%;margin:7px 0px;}
.search_user li a {position: relative;display: block;padding: 0.7em 1.8em 0.7em 1em;background-color: #fff;border-radius: 0.5em;text-decoration: none;color:#444;border-bottom: 4px solid #F9BBC1;}
.search_user li a:before {position: absolute;display: block;content: "";right: 0.8em;top: 50%;margin-top: -0.35em;    transition-duration: 0.2s;border-top: 0.35em solid transparent;border-bottom: 0.35em solid transparent;border-left: 0.6em solid #FF9999;}

.usermenu{width:100%;background:#fff;border-radius: 8px;padding-bottom:0px;}
.usermenu .usermenu_login{float: left;width: 58%;padding-bottom: 0;}
.usermenu .usermenu_etc{float: left;}
.usermenu .usermenu_login .login,
.usermenu .usermenu_login .mybookshelf{float: left;width: 50%;padding-bottom:0;}

.usermenu .usermenu_login a {display: block;border:3px solid #7E2B2B;color:#7E2B2B;position: relative;background: #F9D2D5;float: left;margin:14% 8%;border-radius: 8px;width:84%;text-decoration: none;color:#7E2B2B;font-size:1.2em;padding: 3.8em 0px 0px 0px;text-align:center;}
.usermenu .usermenu_login a:hover{border:3px solid #F9D2D5;}
.usermenu .usermenu_login .login a:before{position: absolute;display: block;content: "";background: url("../img/icon_02.png") center no-repeat;height: 35px;top:1.2em;left: 0;right:0;} 
.usermenu .usermenu_login .mybookshelf a:before{position: absolute;display: block;content: "";background: url("../img/icon_03.png") center no-repeat;height: 35px;top:1.2em;left: 0;right:0;} 

.usermenu .usermenu_etc{padding:1.8em 0 1.8em 2em;margin:0;width:42%;}
.usermenu .usermenu_etc li{margin:0.3em 0;}
.usermenu .usermenu_etc li a{text-decoration: none;color:#333333;position: relative;}
.usermenu .usermenu_etc li a::before{position: absolute;display: block;content: "";left: -1.3em;top: 50%;margin-top: -0.35em;    transition-duration: 0.2s;border-top: 0.35em solid transparent;border-bottom: 0.35em solid transparent;border-left: 0.6em solid #FF9999;}

/*緊急情報*/
.top_section.sec_01 .wrap .txt_message{border:3px solid #6B2525;background:#fff;border-radius:8px ;margin-bottom:50px;padding-top:1.3em;}

/*開館時間・カレンダー・お知らせ*/
.top_section.sec_02{}
.top_section.sec_02 .wrap{display: flex;justify-content: space-between;flex-direction:row;}
.top_section.sec_02 .wrap .kaikanzikan_calendar{width:31%;padding-bottom: 0;}
.top_section.sec_02 .wrap .kaikan{background:#fff;border-radius: 8px;}
.top_section.sec_02 .wrap .news_side{width:65%;background:#fff;border-radius: 8px;}
.top_section.sec_02 .wrap h2{font-size: 1.3em;font-weight: 600;color: #6B2525;border-bottom:2px solid #F2879B;padding-top:1.1em;padding-bottom:.6em;text-align: center;margin:0 1.3em 1em;}
.top_section.sec_02 .wrap h3{font-weight: 100;color:#333;padding:.5em 0 .5em 3em;position: relative;margin-bottom: 0;}
.top_section.sec_02 .wrap h3:before{content:"";position:absolute;display:block;left: 1.8em;top: 1em;width:.5em;height:.5em;background-color:#FF9999;border-radius: 50%;}
.top_section.sec_02 .wrap .kaikan p{font-size: .9em;color:#333;}
.top_section.sec_02 .wrap .calendar a{position: relative;width:100%;background:#F2879B;padding:1em 0 1em 30%;margin-top:2em;margin-bottom:3px;display:block;border-radius: 5px;font-size: 1.3em;font-weight: 600;color: #6B2525;text-decoration: none;box-shadow: 0 3px 0 rgba(126,43,43,1);}
.top_section.sec_02 .wrap .calendar a:hover{box-shadow: none;margin-bottom:0;margin-top:calc(2em + 3px);}
.top_section.sec_02 .wrap .calendar a:before{position: absolute;display: block;content: "";background-image: url("../img/icon_05.png");width:40px;height: 35px;top:1em;left: 10%;}
.top_section.sec_02 .wrap .calendar {padding-left: 0;    margin-bottom: 0;padding-right: 0;}
.top_section.sec_02 .wrap .news_side h2{text-align: left;padding-left:3em;position: relative;margin-bottom: 0.2em;}
.top_section.sec_02 .wrap .news_side h2:before{position: absolute;display: block;content: "";background-image: url("../img/icon_04.png");width:40px;height: 35px;top:1em;left: .5em;}
.top_section.sec_02 .more {display: block;width: 92%;margin: 0 auto 3px;padding: 0.5em;color: #000;text-align: center;text-decoration: none;background-color: #E5E5E5;box-shadow: 0 3px 0 rgba(182,182,182,1);border-radius: 0.5em;}
.top_section.sec_02 a.more:hover{box-shadow: none;margin-bottom:0;margin-top:calc(1em + 3px);}

.news_side .news{margin-bottom:1em;}
.news_side .news dd{padding:0 0 0.5em 0;clear: both;margin: 0 1.5em;}
.news_side .news dd:last-child{border:none;}
.news_side .news dt{padding:1em 0  0.5em 1.5em;}

/* 画像バナー */
.top_section.sec_03{background:#fff;padding:35px 0;}
.top_section.sec_03 .wrap ul{display: flex;justify-content: flex-start;flex-direction:row;flex-wrap:wrap;margin-bottom:0;}
.top_section.sec_03 .wrap li{width:320px;margin:15.5px;}
.top_section.sec_03 .wrap li img{width:100%;}
.top_section.sec_03 .wrap li:nth-child(3n){margin-right:0;}
.top_section.sec_03 .wrap li:first-child {margin-left:0;}
.top_section.sec_03 .wrap li:nth-child(4) {margin-left:0;}
.usermenu .usermenu_etc li a:hover::before {left: -1.0em;}

/* テキストバナー */
.top_section.sec_04{background:#F1F1F1;}
.top_section.sec_04 ul{display: flex;justify-content: flex-start;flex-direction:row;flex-wrap:wrap;margin-bottom:0;}
.top_section.sec_04 .wrap li {width:31%;margin:1.5%;border:2px solid #FF9999;background:#fff;border-radius: 8px;position: relative;}
.top_section.sec_04 .wrap li a{display: block ;padding:1.5em 1em 1.5em 3em;text-decoration: none;color:#000;}
.top_section.sec_04 .wrap li a:before{position: absolute;display: block;content: "";left: 1.3em;top: 50%;margin-top: -0.35em; transition-duration: 0.2s;border-top: 0.35em solid transparent;border-bottom: 0.35em solid transparent;border-left: 0.6em solid #FF9999;}
.top_section.sec_04 .wrap li:nth-child(3n){margin-right:0;}
.top_section.sec_04 .wrap li:first-child {margin-left:0;}
.top_section.sec_04 .wrap li:nth-child(4) ,
.top_section.sec_04 .wrap li:nth-child(7) ,
.top_section.sec_04 .wrap li:nth-child(10) {margin-left:0;}
.top_section.sec_04 .wrap li a:hover::before {left: 1.8em;}

/*************************************************
 レスポンシブ　1024 + 20 
**************************************************/
@media screen and (max-width:1044px) {
    .contents .top_section.sec_01 .slide_box,
    .contents .top_section.sec_01 .search_usermenu{ position: static; width: auto; min-width: 0; max-width: 100%; float: none;}
    .top_section.sec_03 .wrap li:nth-child(3n){margin-right:15.5px;}
    .top_section.sec_03 .wrap li:first-child {margin-left:15.5px;}
    .top_section.sec_03 .wrap li:nth-child(4) {margin-left:15.5px;}
    .top_section.sec_03 .wrap ul,
    .top_section.sec_04 .txt_banner{justify-content: center;}
    .top_section.sec_04 .wrap li{width:47%;}
    .top_section.sec_04 .wrap li:nth-child(3n){margin-right:1.5%;}
    .top_section.sec_04 .wrap li:first-child {margin-left:1.5%;}
    .top_section.sec_04 .wrap li:nth-child(4) ,
    .top_section.sec_04 .wrap li:nth-child(7) ,
    .top_section.sec_04 .wrap li:nth-child(10) {margin-left:1.5%;}
    .contents .top_section.sec_01 .slide_box{width: 497px;margin:0 auto 50px;position: relative;}
    .search_usermenu{margin:0 1.5em;}
    .top_section.sec_01 .wrap .txt_message{margin-left:1.5em;margin-right:1.5em;}
    .usermenu{height: auto;padding-bottom:0;}
    .usermenu .usermenu_login a{text-align: center;padding-left:0;}
    .top_section.sec_02 .wrap{margin:0 1.5em;} 
    .top_section.sec_02 .wrap .calendar a{font-size: 1.1em;}
    .top_section.sec_02 .wrap h3{padding-left: 2.1em;}
    .top_section.sec_02 .wrap h3:before{left: 1.1em;}
    .search_usermenu .input_area{width:calc(100% - 17em);position: relative;margin-right: 1.5%;float: right;}
    .search_usermenu .input_area input[type="text"]{width:calc(100%-6em);}
}

/*************************************************
 レスポンシブ　790 + 20 
**************************************************/
@media screen and (max-width:810px) {
    .search_usermenu .input_area{width:calc(100% - 17em);}
    .search_usermenu .input_area input[type="text"]{width:calc(100%-6em);}
}

/*************************************************
 レスポンシブ　710 + 20 
**************************************************/
@media screen and (max-width:730px) {
    .top_section.sec_02 .wrap .calendar a:before{left:5%;}
    .top_section.sec_02 .wrap .calendar a{padding-left: 23%;}
}

/*************************************************
 レスポンシブ　630 + 20 
**************************************************/
@media screen and (max-width:650px) {
    .search_usermenu .input_area{width:calc(100% - 17em);}
    .search_usermenu .input_area input[type="text"]{width: calc(100%-6em);}
}

/*************************************************
 レスポンシブ　560 + 20 
**************************************************/
@media screen and (max-width:580px) {
    .contents .top_section.sec_01 .slide_box{margin:0 1.5em 1em;width:auto;}
    .top_section.sec_04 .wrap li{width:100%;}
    .top_section.sec_01,
    .top_section.sec_02,
    .top_section.sec_03,
    .top_section.sec_04{padding:1em 0;}
    .search_usermenu label,
    .usermenu .usermenu_login,
    .search_usermenu .input_area{float: none;}
    .search_usermenu form{height:7em;}
    .search_usermenu label{width:100%;text-align: center;}
    .search_usermenu .input_area{width:90%;margin: .5em auto;}
    .search_usermenu .input_area input[type="text"]{width:80%;}
    .usermenu .usermenu_login{width: 100%;}
    .usermenu .usermenu_login .login,
    .usermenu .usermenu_login .mybookshelf{width:50%;}
    .usermenu .usermenu_etc{padding: 0 0 1em 4em;width:auto;}
    .top_section.sec_02 .wrap{justify-content: center;flex-direction: column;margin: 0 1.5em;}
    .top_section.sec_02 .wrap .news_side,
    .top_section.sec_02 .wrap .kaikanzikan_calendar{width: 100%;margin-top:1em;}
    .top_section.sec_02 .wrap .calendar a{margin-top:1em;text-align: center;padding-left: 0;}
    .search_usermenu label{padding-left:1em;}
    .news{padding-bottom:0;}
    .top_section.sec_02 .more{margin-bottom:10px;}
    .top_section.sec_02 a.more:hover{margin-bottom:7px;}
    .top_section.sec_02 .wrap .calendar a:hover {margin-top: calc(1em + 3px);}
    .top_section.sec_01 .wrap .txt_message {margin-bottom: 1.5em;}
}

/*************************************************
 レスポンシブ　460 + 20 
**************************************************/
@media screen and (max-width:480px) {
    .search_usermenu .input_area input[type="text"]{width:75%;}
    .search_user{justify-content:center;}
    .search_user li{width:100%;margin:3px 0;}
}

/*************************************************
 レスポンシブ　380 + 20 
**************************************************/
@media screen and (max-width:400px) {
    .search_usermenu .input_area input[type="text"]{width:71%;}
    .search_usermenu .input_area input[type="submit"]{padding:0 5%}
}