@charset "UTF-8";


/* ===============================================
	layout
=============================================== */
body{
	font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Cherry Bomb One', cursive, sans-serif;
	font-size:16px;
	line-height:26px;
	color:#333;
	background-color:#b8def5;
}
#wrap{
	position:relative;
	min-height: 100%;
}
.inner{
	width:100%;
}
header{
	padding:20px;
}
nav{
	margin-bottom:0px;
}
#top-content{
	width:100%;
}
#content{
	width:100%;
	padding:0 20px;
}
footer {
	width:100%;
	background:#b8def5 url(../img/common/bg_footer.png) repeat-x center top;
	background-size:cover;
	text-align:center;
	height:40px;
	font-size:11px;
	font-weight:bold;
	padding-top:15px;
	color:#fff;
	margin-top:70px;
}

/* ===============================================
	header
=============================================== */
.header-top{
	display:block;
}
.header-top h1{
	text-align:center;
	margin:10px 0 0 0;
}
.header-top h1 img{
	width:100%;
}
.header-bttm{
	display:none;
}
.header-top div ul{
	display:none;
}

.n-mypage{
	background:url(../img/common/n_mypage.png) 0 0;
	width:92px;
	height:85px;
}
.n-mypage:hover{
	background:url(../img/common/n_mypage.png) 0 -85px;
}
.n-calendar{
	background:url(../img/common/n_calendar.png) 0 0;
	width:139px;
	height:77px;
}
.n-calendar:hover{
	background:url(../img/common/n_calendar.png) 0 -77px;
}
.n-official{
	background:url(../img/common/n_official.png) 0 0;
	width:135px;
	height:77px;
}
.n-official:hover{
	background:url(../img/common/n_official.png) 0 -77px;
}
.n-search{
	background:url(../img/common/n_search.png) 0 0;
	width:77px;
	height:113px;
}
.n-search:hover{
	background:url(../img/common/n_search.png) 0 -113px;
}
.n-new{
	background:url(../img/common/n_new.png) 0 0;
	width:112px;
	height:111px;
}
.n-new:hover{
	background:url(../img/common/n_new.png) 0 -111px;
}
.n-recommend{
	background:url(../img/common/n_recommend.png) 0 0;
	width:113px;
	height:113px;
}
.n-recommend:hover{
	background:url(../img/common/n_recommend.png) 0 -113px;
}
.n-guide{
	background:url(../img/common/n_guide.png) 0 0;
	width:143px;
	height:128px;
}
.n-guide:hover{
	background:url(../img/common/n_guide.png) 0 -128px;
}
.n-explore{
	background:url(../img/common/n_explore.png) 0 0;
	width:123px;
	height:95px;
}
.n-explore:hover{
	background:url(../img/common/n_explore.png) 0 -95px;
}
.n-story{
	background:url(../img/common/n_story.png) 0 0;
	width:93px;
	height:110px;
}
.n-story:hover{
	background:url(../img/common/n_story.png) 0 -110px;
}
.n-ya{
	background:url(../img/common/n_ya.png) 0 0;
	width:174px;
	height:100px;
}
.n-ya:hover{
	background:url(../img/common/n_ya.png) 0 -100px;
}

/* ===============================================
	nav
=============================================== */
nav ul{
	display:flex;
	justify-content:stretch;
	align-items:flex-start;
	flex-wrap:wrap;
	border-top:1px solid #231815;
}
nav li{
	width:50%;
	border-bottom:1px solid #231815;
	border-right:1px solid #231815;
}
nav li:nth-of-type(2n){
	border-right:none;
}
nav li a{
	display:block;
}
nav li a img{
	width:100%;
}


/* ===============================================
	top page
=============================================== */
#container.top-only{
	background-color:#b8def5;
}
.top-content-top{
	display:block;
	padding:20px;
}
.btn-official img{
	width:60%;
}
.top-content-top h1{
	text-align:center;
	margin:10px 0 30px 0;
}
.top-content-top h1 img{
	width:100%;
}
.top-content-top ul.top-nav{
	display:none;
}

.top-content-bttm{
	display:none;
}

.news-box{
	width:100%;
	font-size:18px;
	line-height:26px;
	margin-bottom: 10px;
}
.news-ttl{
	padding-bottom:10px;
}
.news-ttl img{
	width:80px;
}
.news-list{
	margin-right:-20px;
	max-height:210px;
	overflow-y:scroll;
}
.scrollbar::-webkit-scrollbar {
	width:20px;
	height:20px;
	background-color:#f1f1f1;
}
.scrollbar-thumb-black::-webkit-scrollbar-thumb {
	--bg-opacity:1;
	background-color:#c1c1c1;
	border:4px solid #f1f1f1;

}
.news-list ul{
	background:url(../img/top/bg_newslist_sp.png) repeat-x 0 top;
	margin-right:10px;
}
.news-list li{
	background:url(../img/top/bg_newslist_sp.png) repeat-x 0 bottom;
	padding:9px 0;
	position:relative;
}
.news-list li:before{
	content:url(../img/top/bg_newslist_head.png);
	width: 34px;
	height: 28px;
	position: absolute;
	top: 9px;
	left: 0;
	padding-right:5px;
}
.news-list li a{
	padding-left: 40px;
	display: block;
	color: #333;
	text-decoration: none;
}
.news-detail{
	padding:5px 0;
	margin-top:10px;
}
.news-detail a{
	background:url(../img/top/bg_newsdetail.png) no-repeat 0 0;
	padding:2px 0 5px 40px;
	color: #333;
	text-decoration: none;
}
/* ===============================================
	content
=============================================== */
section{
	margin:20px 0 30px 0;
}
.page-box{
	padding-bottom:30px;
}

section h2{
	font-size:20px;
	font-weight:bold;
	margin-bottom:20px;
}
section h3{
	font-size:18px;
	font-weight:bold;
	margin-bottom:10px;
}
.page-ttl{
	display:inline;
	font-size:18px;
	position:relative;
	padding-left:25px;
	margin-bottom:10px;
}
.page-ttl:before{
	content:'';
	position:absolute;
	top:5px;
	left:0;
	width:13px;
	height:14px;
	display:inline-block;
	background:url(../img/page/icn_apple.png) no-repeat 0 0;
}

ul.page-list li{
	position:relative;
	margin-bottom:5px;
	padding-left:18px;
}
ul.page-list li:before{
	display:inline-block;
	position:absolute;
	top:0;
	left:0;
	content:'・';
}

table.page-tbl{
	width:100%;
	margin-bottom:5px;
}
table.page-tbl.display-sp{
	display:inline-table;
}
table.page-tbl th,
table.page-tbl td{
	border:1px solid #949494;
	padding:5px 10px;
	vertical-align:middle;
	background-color:#fff;
}
table.page-tbl th{
	font-weight:bold;
	text-align:center;
}
.js-scrollable .page-tbl{
	white-space:nowrap;
}

/*キッズカレンダー*/
.calendar-library-list{
	display: flex;
	justify-content: start;
	align-items: start;
	flex-wrap: wrap;
}
.calendar-library-list li{
	margin-right: 30px;
	margin-bottom: 10px;
}
.library-icon{
	display: inline-block;
	border: 1px solid #333;
	background-color: #fff;
	text-align: center;
	padding: 0 6px;
	margin-right: 5px;
}
.calendar-icon-list{
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: wrap;
}
.calendar-icon-list li{
	display: flex;
	justify-content: start;
	align-items: center;
	margin-right: 30px;
}
.calendar-icon-list li span{
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 10px;
}
.library-closed{
	background-color: #e60012;
}
.library-story{
	background-color: #339933;
}
.library-event{
	background-color: #0066cc;
}
.library-piyopiyo{
	background-color: #ffcc33;
}

.calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid #000;
    border-left: 1px solid #000;
}
.calendar-wrapper {
	width: 100%;
}
.calendar li.weekday {
	background: #6ac9f5;
	font-size: 113%;
}
.calendar-date{
	text-align: center;
	padding: 10px;
	font-size: 28px;
	font-weight: bold;
}
.calendar-date span{
	font-size: 14px;
	font-weight: normal;
}
.calendar li{
	text-align: center;
	border-right: 1px solid #000;
    border-bottom: 1px solid #000;
	padding: 5px 0;
	background: #fff;
}
.calendar li p{
	font-size: 12px;
	line-height: 22px;
}
.calendar li p.closed span{
	color:#fff;
	background-color: #e60012;
	padding: 0 3px;
}
.calendar li p.story span{
	color:#fff;
	background-color: #339933;
	padding: 0 3px;
}
.calendar li p.event span{
	color:#fff;
	background-color: #0066cc;
	padding: 0 3px;
}
.calendar li p.piyopiyo span{
	color:#fff;
	background-color: #ffcc33;
	padding: 0 3px;
}
/* ===============================================
	Footer
=============================================== */
footer.top-only{
	background:#b8def5 url(../img/common/bg_footer.png) repeat-x center top;
	background-size:contain;
}
.page-top{
	position:fixed;
	right:10px;
	bottom:50px;
	background:url(../img/common/bg_pagetop_sp.png) no-repeat 0 0;
	background-size:contain;
	width:154px;
	height:40px;
	cursor:pointer;
	text-align:center;
}
.page-top p{
	font-size:11px;
	line-height:12px;
	font-weight:bold;
	margin:8px 0 0 -25px;
}

/* ===============================================
	common :img margin padding text-align
=============================================== */
.display-pc{
	display:none;
}
.display-sp{
	display:block;
}

img {
	image-rendering:-webkit-optimize-contrast;
}

a{
	color:#003399;
	text-decoration:underline;
}
a:hover{
	color:#666;
}

.fc-r{
	color:#f03131;
}

.ta-l{
	text-align:left;
}
.ta-c{
	text-align:center;
}
.ta-r{
	text-align:right;
}

.fw-b{
	font-weight:bold;
}
.fw-n{
	font-weight:normal;
}