@charset "UTF-8";
/* CSS Document */

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{
	zoom: 1;
}


/* reset */
html, body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li,p{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
img{
	height: auto;
	font-size: 0;
	line-height: 0;
	border:0;
}
ol,ul{
	list-style: none;
}

/* common */
body{
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','メイリオ', Meiryo,'ヒラギノ角ゴシック','ＭＳ Ｐゴシック','MS PGothic',YuGothic,'Yu Gothic';
	font-size: 15px;
	color:rgb(80,40,40);
	line-height: 1.6;
	text-align: left;
	letter-spacing: 0.1em;
	background:rgb(255,250,225);
}
a{
	text-decoration: none;
	display:block;
	color:rgb(80,40,40);
	transition:0.5s;
}
a:hover{
	opacity:0.6;
}
img{
    max-width: 100%;
    height: auto;
	border-style:none;
	vertical-align:middle;
}
.tel a{
	pointer-events: none;
}
h2{
	border-radius: 10px;
	padding: 0 20px;
	margin: 0 auto 40px auto;
}
h3{
	background: url("images/icon_clover.png") no-repeat left 10px,url("images/line_green.png") repeat-x left bottom,url("images/line_green.png") repeat-x left top;
	padding: 12px 0 12px 40px;
	margin: 0 auto 30px auto;
	font-size: 20px;
}

.flex_betwwen{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flex_center{
	display: flex;
	justify-content:center;
	align-items: center;
	flex-wrap: wrap;
}
.flex_start{
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap;
}

.indent{
	padding-left:0.7em;
	text-indent:-0.7em;
}
.mg_100{
	margin: 0 auto 60px auto;
}
.mg_80{
	margin: 0 auto 60px auto;
}
.mg_60{
	margin: 0 auto 60px auto;
}
.mg_40{
	margin: 0 auto 40px auto;
}
.mg_20{
	margin: 0 auto 20px auto;
}

.fadein {
    opacity : 0;
    transform : translate(0, 0);
    transition:all 2s;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

.pc { display: block !important; }
.tab { display: none !important; }
.sp { display: none !important; }


/* container */
#container{
	margin: 0 auto;
	background: url("images/ptn_container.png") no-repeat center top;
	background-attachment:fixed;
}


/* header */
#header{
	width: 960px;
	margin: 0 auto 40px auto;
	padding: 40px 0 0 0;
}
.logo{
	float: left;
}
/* menu */
#pcmenu{
	float:right;
	margin-top: 20px;
}
#pcmenu ul li{
	display: inline-block;
	padding: 0 20px;
	border-left:1px solid rgb(80,40,0);
}

#pcmenu ul li:last-child{
	border-left:1px solid rgb(80,40,0);
	border-right:1px solid rgb(80,40,0);
}

/* main */
#main{
	width:960px;
	margin:0 auto;
}
.main_img{
	margin: 0 auto 30px auto;
}

/* トピックスボード */
#board{
	width:98%;
	padding:1%;
	margin:0 auto 60px auto;
	background: url("images/ptn_green_30.png") repeat;
	border-radius:20px;
}
#scroll iframe{
	background:rgba(255,255,255,1);
	width:100%;
	height:400px;
	overflow-y: scroll;
	border-radius:10px;
}

/* kinenhi */

.kinenhi_txt{
	width: 580px;
	font-size: 16px;
}
.kinenhi_img{
	width: 350px;
	text-align: right;
}

/* song */

.song_box div{
	width: 260px;
	background: url("images/ptn_yellow_20.png") repeat;
	border-radius: 400px 300px 200px 200px / 200px 200px 400px 185px;
	padding: 30px 20px;
	text-align: center;
}
.song_titile{
	margin: -60px auto 10px auto;
}
.song_txt{
	font-size: 14px;
}

/* gaiyo */
.gaiyo_box table{
	width: 48%;
	min-height: 460px;
}
.gaiyo_box th{
	width: 130px;
	font-weight: normal;
	background: url("images/ptn_brown.png") repeat;
	text-align: center;
	color: #fff;
	padding: 5px;
	border-radius: 10px;
}
.gaiyo_box td{
	padding: 5px 5px 5px 15px;
	background: url("images/line_brown.png") no-repeat 10px bottom;
}

#access{
	margin: 0 auto 50px auto;
}
.access_txt{
	width: 37%;
}

.access_box iframe{
	width: 58%;
	height: 300px;
}

#info li{
	background: url("images/icon_pdf.png") no-repeat left 15px top 10px, url("images/ptn_green_30.png") repeat;
	padding: 10px 10px 10px 45px;
	margin: 0 auto 10px auto;
	border-radius: 10px;
}
/* about */
#hoshin ul{
	width: 260px;
	background: url("images/ptn_orange.png") repeat;
	border-radius: 400px 300px 200px 200px / 200px 200px 400px 185px;
	padding: 30px 20px;
	text-align: center;
	color: #fff;
	margin: 30px 10px 0 10px;
}
#hoshin li:first-child{
	font-size: 19px;
	border-bottom: 1px solid #fff;
	margin: 0 auto 10px auto;
	line-height: 1.2;
	padding: 0 0 10px 0;
}
#color p{
	margin: 0 auto 30px auto;
}

/* history */
.history_box{
	width: 450px;
}
.history_box table{
	width: 450px;
	margin: 0 auto 20px auto;
}
.history_box p{
	font-weight: normal;
	background: url("images/ptn_brown.png") repeat;
	text-align: center;
	color: #fff;
	padding: 5px;
	border-radius: 10px;
	margin: 0 auto 10px auto;
}
.history_box th{
	width: 130px;
	font-weight: normal;
	background: url("images/ptn_brown2.png") repeat;
	text-align: center;
	padding: 5px;
	border-radius: 10px;
}
.history_box td{
	padding: 5px 5px 5px 15px;
	background: url("images/line_brown.png") no-repeat 10px bottom;
}
.lunch_list{
	margin: 0 auto 30px auto;
}
.lunch_list li{
	background: url("images/icon_maru.png") no-repeat left top;
	padding: 0 0 0 30px;
	margin: 0 auto 10px auto;
}

/* class */
#class{
	margin:  0 auto -30px auto;
}
.class_list{
	width: 285px;
	background: url("images/ptn_yellow_20.png") repeat;
	border-radius: 100px;
	padding: 30px 10px;
	text-align: center;
	margin-bottom: 20px;
}
.class_list li:first-child{
	margin: 0 auto 10px auto;
}

/* daily */
#daily table{
	border-collapse: separate;
	border-spacing: 5px;
	width: 960px;
}
.time{
	width: 135px;
	background: url("images/ptn_brown.png") repeat;
	text-align: center;
	padding: 5px;
	border-radius: 10px;
}
.d_title{
	height: 59px;
	width: 400px;
}
#daily td{
	padding: 10px;
	border-radius: 10px;
	text-align: center;
}
.daily_01{
	background: url("images/ptn_pink.png") repeat;
}
.daily_02{
	background: url("images/ptn_blue.png") repeat;
}
.daily_03{
	background: url("images/ptn_green_30.png") repeat;
}
.daily_04{
	background: url("images/ptn_brown2.png") repeat;
}


/* year */
.year_img{
	margin: 20px auto;
}
.year_box{
	margin: 0 auto 40px auto;
}
.year_box div{
	width: 250px;
	border-radius: 400px 300px 200px 200px / 200px 200px 400px 185px;
	padding: 30px 20px;
	margin: 30px 10px 0 10px;
}
.year_box p{
	border-bottom: 1px solid rgba(80,40,0,1);
	margin: 0 auto 10px auto;
	padding: 0 0 10px 0;
	text-align: center;
}
.spring{
	background: url("images/clover.png") no-repeat right bottom,url("images/ptn_green_30.png") repeat;
}
.spring li{
	background: url("images/icon_maru2.png") no-repeat 10px 8px;
	padding: 0 0 0 25px;
}

.summer{
	background: url("images/clover.png") no-repeat right bottom,url("images/ptn_blue2.png") repeat;
}
.summer li{
	background: url("images/icon_maru3.png") no-repeat 10px 8px;
	padding: 0 0 0 25px;
}
.autmun{
	background: url("images/clover.png") no-repeat right bottom,url("images/ptn_yellow_20.png") repeat;
}
.autmun li{
	background: url("images/icon_maru5.png") no-repeat 10px 8px;
	padding: 0 0 0 25px;
}
.winter{
	background: url("images/clover.png") no-repeat right bottom,url("images/ptn_pink.png") repeat;
}
.winter li{
	background: url("images/icon_maru4.png") no-repeat 10px 8px;
	padding: 0 0 0 25px;
}

.monthry{
	background: url("images/ptn_brown2.png") repeat;
	padding: 20px;
	border-radius: 10px;
}
.monthry li{
	display: inline-block;
	background: url("images/icon_maru6.png") no-repeat 10px 7px;
	padding: 0 0 0 25px;
}
.monthry li:first-child{
	background: none;
	padding: 0 25px;
	border-right: 1px solid rgba(80,40,0,1);
}

.other_box p{
	font-weight: normal;
	background: url("images/ptn_brown.png") repeat;
	text-align: center;
	color: #fff;
	padding: 5px;
	border-radius: 10px;
	margin: 0 auto 10px auto;
}
.other_box table{
	width: 300px;
}
.other_box th{
	font-weight: normal;
	background: url("images/ptn_brown2.png") repeat;
	text-align: center;
	padding: 5px;
	border-radius: 10px;
}
.other_box td{
	padding: 5px 5px 5px 15px;
	background: url("images/line_brown.png") no-repeat 10px bottom;
}
.other_box.other_1 td{
	padding: 5px;
	background: url("images/line_brown.png") no-repeat left bottom;
}

/* pagetop */
.pagetop{
    position: fixed;
    bottom: 0;
    right: 30px;
}
 
.pagetop a{
    display: block;
    text-decoration: none;
 }
.pagetop a:hover{
	opacity: 1;
}
.pagetop a:hover img{
	animation: bounce 1s 1;
	opacity: 1;
}


/* footer */
#footer{
	width: 960px;
	margin: 100px auto 0 auto;
	padding: 20px 0;
	background: url("images/line_brown.png") repeat-x left top,url("images/line_brown.png") repeat-x left bottom;
}
#footer_info{
	display: flex;
	justify-content: center;
	align-items: center;
}
#footer_info div:nth-child(1){
	margin: 0 30px 0 0;
}
#footer_info div:nth-child(3){
	margin: 0 0 0 60px;
}
#footer_logo{
	width: 200px;
}
#logo_2{
	width: 160px;
}
.copy{
	font-size: 13px;
	text-align: center;
	width: 960px;
	padding: 40px 0;
	margin: 0 auto;
}


@media screen and (max-width:768px){
	

.pc { display: none !important; }
.tab { display: block !important; }
.sp { display: none !important; }
	

/* container */
#container{
	background: url("images/ptn_container_tab.png") no-repeat center top;
	background-attachment:scroll;
	background-size: contain;
}

/* header */
#header_2{
	width:100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	z-index:8888;
	pointer-events: none;
}
#header_2.open{
	pointer-events: auto;
	background: rgba(255,255,255,0.9) url("images/ptn_yellow_20.png") repeat;
}
/* menu */
.logo{
	float: none;
	text-align: center;
	margin: 0 auto 40px auto;
	padding: 40px 0 0 0;
	width: 80%;
}
.toggle_icon{
	position:absolute;
	top:10px;
	right:10px;
	z-index:9999;
	pointer-events: auto;
}
.menu{
	display:none;
}
.spmenu{
	width:90%;
	padding:20% 5% 5% 5%;
}
.spmenu li{
	padding: 20px 10px 20px 35px;
	font-size: 18px;
	background: url("images/line_brown.png") repeat-x left bottom, url("images/icon_clover.png") no-repeat left 18px;
}
.spmenu li:first-child{
	background: url("images/line_brown.png") repeat-x left bottom,url("images/line_brown.png") repeat-x left top, url("images/icon_clover.png") no-repeat left 18px;
}

.menu.open {
	display: block;
	pointer-events: auto;
}
	

/* main */
#main{
	width:90%;
	margin: 0 auto;
}
	
.main_img{
	margin: 0 auto 20px auto;
}
	
/* トピックスボード */
#board{
	width: 96%;
	padding: 2%;
	overflow: auto;
	-webkit-overflow-scrolling:touch;
	height:300px;
	margin: 0 auto 40px auto;
}
#scroll iframe{
	width:100%;
	height:300px;
	border:none; 
}
/* song */

.song_box div{
	width: 100%;
	margin: 0 auto 80px auto;
}
.song_box div:last-of-type{
	margin: 0 auto;
}

/* kinenhi */

.kinenhi_txt{
	width: 100%;
	margin: 0 auto 20px auto;
}
.kinenhi_img{
	width: 100%;
	text-align: center;
}
/* gaiyo */
.gaiyo_box table{
	width: 100%;
	min-height: 1;
	table-layout: fixed;
	word-break: break-all;
	word-wrap: break-all;
}
.gaiyo_box th{
	width: 90%;
	padding: 10px 5%;
	display: block;
}
.gaiyo_box td{
	width: 90%;
	padding: 10px 5%;
	display: block;
	background: none;
}

.access_txt{
	width: 100%;
}
.ensya{
	text-align: center;
	margin: 0 auto 40px auto;
}
.access_box iframe{
	width: 100%;
	height: 250px;
}

	
/* about */
#hoshin p{
	margin: 0 auto 20px auto;
}
#hoshin ul{
	width: 90%;
	padding: 30px 5%;
	margin: 0 auto 10px auto;
}
#color ul.flex_betwwen{
	text-align: center;
	display: block;
}
	
/* history */
.history_box{
	width: 100%;
}
.history_box table{
	width: 100%;;
}

.history_box th{
	width: 80px;
}
.history_box td{
	background: url("images/line_brown.png") repeat-x 10px bottom;
}
#lunch ul.flex_betwwen{
	text-align: center;
	display: block;
}


/* class */
#class{
	margin:  0 auto -30px auto;
}
.class_list{
	width: 90%;
	padding: 30px 5%;
}


/* daily */
#daily table{
	width: 100%;
	margin: 0 auto 20px auto;
}

.time{
	width: 81px;
	padding: 5px;
}
.d_title{
	height: 59px;
	width: auto;
}
#daily td{
	width: auto;
	padding: 10px;
}
.daily_01_title,.daily_02_title,.daily_03_title{
	text-align: center;
	margin: 20px auto 0 auto;
}
.daily_01_title2{
	background: url("images/ptn_pink2.png");
	height: 40px;
	margin: -40px auto 10px auto;
	border-radius: 10px;
}	
.daily_02_title2{
	background: url("images/ptn_blue3.png");
	height: 40px;
	margin: -40px auto 10px auto;
	border-radius: 10px;
}	
.daily_03_title2{
	background: url("images/ptn_green.png");
	height: 40px;
	margin: -40px auto 10px auto;
	border-radius: 10px;
}	


/* year */
.year_box{
	margin: 0 auto 10px auto;
}
#year ul.flex_betwwen{
	display: block;
	text-align: center;
}

.year_box div{
	width: 90%;
	padding: 30px 5%;
	margin: 10px auto;
}

#other .flex_betwwen{
	display: block;
}
.other_box p{
	width: 90%;
	padding: 10px 5%;
}
.other_box table{
	width: 100%;
	margin: 0 auto 30px auto;
}

.other_box td{
	background: url("images/line_brown.png") repeat-x 10px bottom;
}
.other_box.other_1 td{
	background: url("images/line_brown.png") repeat-x left bottom;
}	

/* pagetop */
.pagetop{
	display:none !important;
}
	

/* footer */
#footer{
	width: 90%;
	margin: 60px auto 0 auto;
	padding: 20px 0;
}
#footer_info{
	display: block;
	text-align: center;
}
#footer_info div:nth-child(1){
	margin: 0 auto 20px auto;
}
#footer_info div:nth-child(3){
	margin: 20px auto 0 auto;
}
#footer_logo{
	width: 60%;
}
#logo_2{
	width: 40%;
	margin: 0 auto 20px auto;
}
.copy{
	width: 90%;
}

}

@media screen and (max-width:480px){
.tel a{
	pointer-events: auto;
	
}

.monthry li{
	display: block;
}
.monthry li:first-child{
	background: none;
	padding: 0 0 10px 0;
	margin: 0 auto 10px auto;
	border-right: none;
	border-bottom: 1px solid rgba(80,40,0,1);
}


}