@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:#6ac9f5;
}
#wrap{
	position:relative;
	min-height: 100%;
}
.inner{
	width:1000px;
	margin:0 auto;
}
header{
	background-color:#6ac9f5;
	padding:15px 0;
}
nav{
	display: none;
}
#container{
	background-color:#fff;
}
#top-content{
	width:1000px;
	margin:0 auto;
	min-height:calc(100% - 92px);
	padding-top:30px;
}
#content{
	width:1000px;
	margin:0 auto;
	padding:20px 40px;
}
footer {
	width:100%;
	min-width:1000px;
	background:#fff url(../img/common/bg_footer.png) repeat-x center top;
	text-align:center;
	height:92px;
	font-size:12px;
	font-weight:bold;
	padding-top:65px;
}

/* ===============================================
	header
=============================================== */
.header-top,
.header-bttm{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.header-top ul,
.header-bttm ul{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}
.header-top ul li{
	margin-left:15px;
}
.header-top ul li a,
.header-bttm ul li a{
	display:block;
	text-indent:-9999px;
}
.header-bttm ul{
	width:100%;
}

.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;
}

/* ===============================================
	top page
=============================================== */
#container.top-only{
	background-color:#6ac9f5;
}
.top-content-top{
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-direction: row-reverse;
}
.top-content-top h1{
	text-align:right;
	padding-bottom:20px;
	margin-top:20px;
}
.top-content-top ul.top-nav{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}
.top-content-top ul.top-nav li{
	margin-left:20px;
}
.top-content-top ul.top-nav li a{
	display:block;
	text-indent:-9999px;
}
.tn-mypage{
	background:url(../img/top/tn_mypage.png) 0 0;
	width:161px;
	height:128px;
}
.tn-mypage:hover{
	background:url(../img/top/tn_mypage.png) 0 -128px;
}
.tn-calendar{
	background:url(../img/top/tn_calendar.png) 0 0;
	width:250px;
	height:110px;
}
.tn-calendar:hover{
	background:url(../img/top/tn_calendar.png) 0 -110px;
}

.top-content-bttm{
	background:url(../img/top/bg_topcontent.png) no-repeat 55px 10px;
	position:relative;
	padding-top:20px;
	height:390px;
}
.top-content-bttm a{
	display:block;
	position:absolute;
	text-indent:-9999px;
}
.tn-search{
	background:url(../img/top/tn_search.png) 0 0;
	width:231px;
	height:94px;
	top:35px;
	left:19px;
}
.tn-search:hover{
	background:url(../img/top/tn_search.png) 0 -94px;
}
.tn-new{
	background:url(../img/top/tn_new.png) 0 0;
	width:284px;
	height:101px;
	top:40px;
	left:292px;
}
.tn-new:hover{
	background:url(../img/top/tn_new.png) 0 -101px;
}
.tn-recommend{
	background:url(../img/top/tn_recommend.png) 0 0;
	width:288px;
	height:97px;
	top:20px;
	right:105px;
}
.tn-recommend:hover{
	background:url(../img/top/tn_recommend.png) 0 -97px;
}
.tn-guide{
	background:url(../img/top/tn_guide.png) 0 0;
	width:227px;
	height:187px;
	top:150px;
	left:25px;
}
.tn-guide:hover{
	background:url(../img/top/tn_guide.png) 0 -187px;
}
.tn-explore{
	background:url(../img/top/tn_explore.png) 0 0;
	width:221px;
	height:109px;
	top:170px;
	left:265px;
}
.tn-explore:hover{
	background:url(../img/top/tn_explore.png) 0 -109px;
}
.tn-story{
	background:url(../img/top/tn_story.png) 0 0;
	width:160px;
	height:133px;
	top:210px;
	right:330px;
}
.tn-story:hover{
	background:url(../img/top/tn_story.png) 0 -133px;
}
.tn-ya{
	background:url(../img/top/tn_ya.png) 0 0;
	width:303px;
	height:133px;
	top:130px;
	right:40px;
}
.tn-ya:hover{
	background:url(../img/top/tn_ya.png) 0 -133px;
}
.tn-official{
	background:url(../img/top/tn_official.png) 0 0;
	width:210px;
	height:88px;
	top:290px;
	right:40px;
}
.tn-official:hover{
	background:url(../img/top/tn_official.png) 0 -88px;
}

.news-box{
	background-color:#fff;
	border-radius:10px;
	width:500px;
	max-height:310px;
	padding:5px;
	font-size:18px;
	line-height:26px;
}
.news-ttl{
	padding:2px 0 5px 40px;
}
.news-list{
	height:170px;
	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.png) repeat-x 0 top;
	margin-right:10px;
}
.news-list li{
	background:url(../img/top/bg_newslist.png) repeat-x 0 bottom;
	padding:10px 0;
	position: relative;
}
.news-list li:before{
	content:url(../img/top/bg_newslist_head.png);
	width: 34px;
	height: 28px;
	position: absolute;
	top: 10px;
	left: 0;
	padding-right:5px;
}
.news-list li a{
	padding-left: 40px;
	display: block;
}
.news-detail{
	text-align:right;
	padding:5px 30px;
	margin:3px 0;
}
.news-detail a{
	background:url(../img/top/bg_newsdetail.png) no-repeat 0 0;
	padding:2px 0 5px 40px;
}
/* ===============================================
	content
=============================================== */
section{
	margin:20px 0 40px 0;
}
.page-box{
	padding-bottom:40px;
}

section h2{
	font-size:20px;
	font-weight:bold;
	margin-bottom:30px;
}
section h3{
	font-size:18px;
	font-weight:bold;
	margin-bottom:20px;
}
.page-ttl{
	display:inline;
	font-size:18px;
	position:relative;
	padding-left:25px;
	margin-bottom:15px;
}
.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-pc{
	display: inline-table;
}
table.page-tbl th,
table.page-tbl td{
	border:1px solid #949494;
	padding:5px 10px;
	vertical-align:middle;
}
table.page-tbl th{
	font-weight:bold;
	text-align:center;
}
table.page-tbl th br{
	display: none;
}

/*キッズカレンダー*/
.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;
}
.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%;
}
.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;
	margin: 0 5px 0 1px;
}
.calendar-date span:nth-of-type(2){
	margin-right: 0;
}
.calendar li{
	text-align: center;
	border-right: 1px solid #000;
    border-bottom: 1px solid #000;
	padding: 5px;
}
.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:#6ac9f5 url(../img/common/bg_footer.png) repeat-x center top;
}
.page-top{
	position:fixed;
	right:20px;
	bottom:120px;
	background:url(../img/common/bg_pagetop.png) no-repeat 0 0;
	width:181px;
	height:47px;
	cursor:pointer;
	text-align:center;
}
.page-top p{
	font-size:13px;
	line-height:16px;
	font-weight:bold;
	margin:8px 0 0 -30px;
}

/* ===============================================
	common :img margin padding text-align
=============================================== */
.display-pc{
	display:block;
}
.display-sp{
	display:none;
}
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;
}