@charset "utf-8";
/* CSS Document */
/* ようちえんでの生活 */



/*==============================================================================
　　　　　　　　　　　　　　　ようちえんの1日
==============================================================================*/
/*ページタイトル*/
h3.pageTitleImg{
	margin:0px 0px 25px 0px;
}
@media screen and (max-width: 768px) {
  h3.pageTitleImg{
    position: relative;
    margin:0px 0px 50px 0px;
  }
  h3.pageTitleImg img{
     width: 100%;
    height: auto;
    vertical-align: bottom;
  }
}
@media screen and (max-width: 520px) {
  h3.pageTitleImg{
    position: relative;
    margin:0px 0px 30px 0px;
  }
}
@media screen and (max-width: 520px) {
  h3.pageTitleImg{
    position: relative;
    margin:0px 0px 30px 0px;
  }
}

h3.pageTitleImg .pageTitleTxt{
  display: none;
}
@media screen and (max-width: 768px) {
  h3.pageTitleImg .pageTitleTxt{
    display: block;
    width: auto;
    position: absolute;
    z-index: 1;
    left: 32px;
    /*タイトル画像の高さ(同一ではない)に合わせてTOP位置の計算が必要です*/
    /* 縦中央の式　top: calc(50% - (画像の高さ/2)); */
  }
  h3.pageTitleImg .pageTitleTxt img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  h3.pageTitleImg #mainimg01_txt{
    /* ようちえんの1日 */
    top: calc(50% - (47px/2));
  }
  h3.pageTitleImg #mainimg01_txt{
    /* 年間カレンダー */
    top: calc(50% - (47px/2));
  }
}
@media screen and (max-width: 520px) {
  h3.pageTitleImg .pageTitleTxt{
    left: 14px;
    /*タイトル画像の高さ(同一ではない)に合わせてTOP位置の計算が必要です*/
    /* 90％高さの式　元画像の高さ-元画像の高さ*9/100 */
    /* 縦中央の式　top: calc(50% - ((元画像の高さ - 元画像の高さ*9/100)/2)); */
  }
  h3.pageTitleImg .pageTitleTxt img{
    width: 90%;
    height: auto;
    vertical-align: bottom;
  }
  h3.pageTitleImg #mainimg01_txt{
    /* ようちえんの1日 */
    top: calc(50% - ((51px - 47px*9/100)/2));
  }
  h3.pageTitleImg #mainimg02_txt{
    /* 年間カレンダー */
    top: calc(50% - ((51px - 47px*9/100)/2));
  }
}



/**************************************/

.timetable{
	margin:0px 0px 0px 5px;
}
@media screen and (max-width: 768px) {
  .timetable{
    margin: 0 10px;
    padding: 10px;
    background: #FAFAFA;
    box-shadow: 3px 3px 5px #00000033;
  }
}
/*ノート上部*/
.noteTop{
	background:url(../img/life/note_top.gif);
	background-repeat:no-repeat;
	height:13px;
	width:665px;
}
@media screen and (max-width: 768px) {
  .noteTop{
    display: none;
  }
}
/*ノート繰り返し部分*/
.noteCenter{
	background:url(../img/life/note_repeat.gif);
	background-repeat:repeat-y;
	padding:17px 20px 17px 29px;
	width:616px;
}
@media screen and (max-width: 768px) {
  .noteCenter{
    width: 100%;
    padding: 30px 25px 41px 25px;
    background: url("../img/life/masume.png") top left repeat-y;
    border: solid 1px #E4E4E4;
  }
}
@media screen and (max-width: 520px) {
  .noteCenter{
    width: 100%;
    padding: 15px 20px 20px 5px;
  }
}
@media screen and (max-width: 375px) {
  .noteCenter{
    width: 100%;
    padding: 15px 15px 20px 5px;
  }
}
/*ノート下部*/
.noteBottom{
	background:url(../img/life/note_bottom.gif);
	background-repeat:no-repeat;
	height:22px;
	width:665px;
	margin:0px 0px 10px 0px;
}
@media screen and (max-width: 768px) {
  .noteBottom{
    display: none;
  }
}


/***************/
/*タイムテーブル枠*/
/***************/
/*08:45～09:15*/
.box_0845{
	padding:0px 0px 18px 0px;
	background-image:url(../img/life/photo_0845.png);
	background-position:349px 12px;
	background-repeat:no-repeat;
	width:616px;
}
.photo_sp{
  display: none;
}
@media screen and (max-width: 768px) {
  .box_0845{
    width: 100%;
    background-image: none;
    padding-bottom: 0;
  }
 .box_0845 .photo_sp{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
}
@media screen and (max-width: 520px) {
  .box_0845 .photo_sp{
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
/*10:00～*/
.box_1000{
	padding:0px 0px 18px 0px;
	background-image:url(../img/life/photo_1000.png);
	background-position:335px 4px;
	background-repeat:no-repeat;
	width:616px;
}
@media screen and (max-width: 768px) {
  .box_1000{
    width: 100%;
    background-image: none;
    padding-bottom: 0;
  }
  .box_1000 .photo_sp{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
}
@media screen and (max-width: 520px) {
  .box_1000 .photo_sp{
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 370px){
  .box_1000 .photo_sp img{
    max-width: 287px;
    width: 100%;
  }
}


/*12:00～*/
@media screen and (max-width: 768px) {
  .box_1200{
    width: 100%;
    background-image: none;
    padding-bottom: 0;
  }
  .box_1200 .photo_sp{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
}
@media screen and (max-width: 520px) {
  .box_1200 .photo_sp{
    margin-top: 10px;
    margin-bottom: 10px;
  }
}



/*12:30～*/
.box_1230{
	padding:0px 0px 18px 0px;
	background-image:url(../img/life/photo_1230.png);
	background-position:311px 8px;
	background-repeat:no-repeat;
	width:616px;
}
@media screen and (max-width: 768px) {
  .box_1230{
    width: 100%;
    background-image: none;
    padding-bottom: 0;
  }
  .box_1230 .photo_sp{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
}
@media screen and (max-width: 520px) {
  .box_1230 .photo_sp{
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 370px) {
  .box_1230 .photo_sp img{
    width: 100%;
    max-width: 304px;
  }
}



/*13:00～*/
.box_1300{
	padding:0px 0px 18px 0px;
	background-image:url(../img/life/photo_1300.png);
	background-position:386px 13px;
	background-repeat:no-repeat;
	width:616px;
}
@media screen and (max-width: 768px) {
  .box_1300{
    width: 100%;
    background-image: none;
    padding-bottom: 0;
  }
  .box_1300 .photo_sp{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
}
@media screen and (max-width: 520px) {
  .box_1300 .photo_sp{
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

/*13:30～*/
.box_1330{
	padding:0px 0px 18px 0px;
	background-image:url(../img/life/photo_1330.png);
	background-position:233px 13px;
	background-repeat:no-repeat;
	width:616px;
}
@media screen and (max-width: 768px) {
  .box_1330{
    width: 100%;
    background-image: none;
    padding-bottom: 0;
  }
  .box_1330 .photo_sp{
    display: block;
    text-align: center;
  }
}
@media screen and (max-width: 520px) {
  .box_1330 .photo_sp{
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

/*13:30※水曜日は13:00降園*/
.box_1330_w{
	padding:0px 0px 18px 0px;
	background-image:url(../img/life/photo_1330_w.png);
	background-position:233px 13px;
	background-repeat:no-repeat;
	width:616px;
}
.box_1330_w .time_wed{
  display: none;
}
@media screen and (max-width: 768px) {
  .box_1330_w{
    width: 100%;
    background-image: none;
    padding-bottom: 0;
  }
  .box_1330_w br.sp{
    display: none;
  }
  .box_1330_w .photo_sp{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
}
@media screen and (max-width: 520px) {
  .box_1330_w .time_wed{
    display: block;
    margin: 0px 0px 0px 10px;
  }
  .box_1330_w .time{
    margin-bottom: 6px;
  }
  .box_1330_w .photo_sp{
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 400px) {
  .box_1330_w .photo_sp img{
    width: 100%;
    max-width: 312px;
  }
}

/***************/
/*タイムテーブル内の要素*/
/***************/
/*時間*/
.time{
	margin:0px 0px 10px 0px;
}
/*↓矢印*/
.arrow{
	float:left;
	width:25px;
	margin:0px 0px 0px 30px;
}
@media screen and (max-width: 768px) {
  .arrow{
    float: none;
    display: none;
  }
}
/*タイトル・説明文エリア*/
.titleTxt{
	float:left;
	width:535px;
	margin:0px 0px 0px 8px;
}
@media screen and (max-width: 768px) {
  .titleTxt{
    width: auto;
    float: none;
    margin: 0px 0px 0px 10px;
  }
}
/*説明*/
.txt{
	margin:10px 0px 0px 0px;
	line-height:1.5em;
	width:340px;
}
@media screen and (max-width: 768px) {
  .txt{
    width: auto;
    margin: 6px 0 0 0;
  }
}

/**************************************/
/*タイムテーブル内の要素　説明のサイズ*/
/**************************************/
.w290{
	width:290px;
}
@media screen and (max-width: 768px) {
  .w290{
    width: 100%;
  }
}
.w250{
	width:255px;
}
@media screen and (max-width: 768px) {
  .w250{
    width: 100%;
  }
}


/*==============================================================================
　　　　　　　　　　　　　　　年間カレンダー
==============================================================================*/
.albumTxt{
	text-align:right;
	padding:0px 20px 0px 0px;
	font-size:14px;
	font-weight:bold;
}
#album{
	/*height:1136px;
	overflow:hidden;*/
}
#album1{
	background-image:url(../img/life/album_back.jpg);
	background-repeat:no-repeat;
	margin:0px;
	padding:39px 0px 0px 0px;
	width:670px;
	height:1097px;
	/*overflow:hidden;*/
}
@media screen and (max-width: 768px) {
  #album1{
    display: none;
  }
}

#album2{
	background-image:url(../img/life/album_back.jpg);
	background-repeat:no-repeat;
	margin:0px;
	padding:39px 0px 0px 0px;
	width:670px;
	height:1097px;
	/*overflow:hidden;*/
}
@media screen and (max-width: 768px) {
  #album2{
    display: none;
  }
}




#photoAlbum1 td , #photoAlbum2 td{
	padding:0px;
	margin:0px;
	vertical-align:top;
	border-collapse: collapse;
}
#photoAlbum1 , #photoAlbum2 {
	margin:0px 0px 0px 129px;
	width:670px;
}
.photpImg_L{
	width:246px;/*239+7*/
	height:214px;
	vertical-align:top;
}
.photpComment_L{
	width:246px;/*239+7*/
	height:111px;
	background-repeat:no-repeat;
}
.photpImg_L img{
	display:block;
	padding:5px 13px 0px 0px;
}

.photpImg_R{
	width:239px;
	height:214px;
	padding:5px 0px 0px 0px;
	vertical-align:top;
}
.photpComment_R{
	width:239px;
	height:111px;
	background-repeat:no-repeat;
}
.photpImg_R img{
	display:block;
	padding:5px 0px 0px 0px;
}

.comment{
	padding:5px 15px 15px 15px;
	font-size:13px;
	line-height:1.7em;
}
.round{
	font-size:11px;
}
.commentS{
	font-size:11px;
  line-height: 1.3em;
}
.btn{
	padding:24px 0px 0px 349px;
	text-align:right;
}
.btn img:hover{
	cursor:pointer;
}
.photpImg_L img.top, .photpImg_R img.top{
	padding-top:0px;
}
.no1{
	background-image:url(../img/life/album_m04_tx.jpg);
}
.no2{
	background-image:url(../img/life/album_m05_tx.jpg);
}
.no3{
	background-image:url(../img/life/album_m06_tx.jpg);
}
.no4{
	background-image:url(../img/life/album_m07_tx.jpg);
	height:111px;
}
.no5{
	background-image:url(../img/life/album_m08_tx.jpg);
}
.no6{
	background-image:url(../img/life/album_m09_tx.jpg);
}

/*スマホ用*/

#calendar_first,
#calendar_second{
  display: none;
}

@media screen and (max-width: 768px) {
  #album{
    height:auto;
    overflow:inherit;
    padding: 20px 0 0 0;
  }
}

/*期*/
.semester{
  display: none;
}
@media screen and (max-width: 768px) {
  .semester{
    display: block;
  }
}

/*前期*/
#first.semester{}

/*後期*/
#second.semester{}

/*アルバムの枠*/
.album_wrap{
  padding: 0 10px;
}
.album_wrap table{
  margin: 0 auto;
}

/*◯月*/
.album_wrap td.month{
  font-size: 0;
  line-height: 100%;
  background: #ffffff;
  text-align: center;
  padding: 25px 0 20px 0;
  position: relative;
}
@media screen and (max-width: 520px) {
  .album_wrap td.month{
    display: block;
  }
}
.album_wrap td.month:last-child{
  padding-left: 20px;
}
@media screen and (max-width: 520px) {
  .album_wrap td.month:last-child{
    padding-left: 0;
  }
}

.album_wrap td.month ul{
  list-style: none;
  background: #E9E8E1;
}
.album_wrap td.month li{}


/*写真*/
.album_wrap td.month li.photo{
  font-size: 0;
  line-height: 100%;
  padding: 10px 10px 0 10px;
}
.album_wrap td.month li.photo img{
  width: 100%;
  max-width: 324px;
}

/*テキスト*/
.album_wrap td.month li.event{
  padding: 3px 10px 20px 10px;
  text-align: left;
}
.album_wrap td.month li.event ul.comment{
  list-style: none;
  padding: 0px 10px 0px 10px;
  font-size:13px;
  line-height:1.7em;
}
/*テキスト用リスト*/
.album_wrap td.month li.event ul.comment li{
  font-size: 13px;
  line-height: 2.5em;
  color: #584B3A;
  background: url(../img/life/album_line_sp.png) no-repeat bottom left;
}

/*前期後期切り替え*/
.btn_sp{
  text-align: right;
}
.btn_sp img{
  width: auto;
}


/*4月*/
.album_wrap td#month_04.month img.mon{
  position: absolute;
  top: 7px;
  left: calc(50% - 98px/2);
}
/*5月*/
.album_wrap td#month_05.month img.mon{
  position: absolute;
  top: 0;
  left: calc(50% - 100px/2);
}
/*6月*/
.album_wrap td#month_06.month img.mon{
  position: absolute;
  top: 10px;
  left: calc(50% - 100px/2);
}
/*7月*/
.album_wrap td#month_07.month img.mon{
  position: absolute;
  top: 5px;
  left: calc(50% - 100px/2);
}
/*8月*/
.album_wrap td#month_08.month img.mon{
  position: absolute;
  top: 5px;
  left: calc(50% - 98px/2);
}
/*9月*/
.album_wrap td#month_09.month img.mon{
  position: absolute;
  top: 5px;
  left: calc(50% - 100px/2);
}

/*10月*/
.album_wrap td#month_10.month img.mon{
  position: absolute;
  top: 0px;
  left: calc(50% - 99px/2);
}
/*11月*/
.album_wrap td#month_11.month img.mon{
  position: absolute;
  top: 0px;
  left: calc(50% - 100px/2);
}
/*12月*/
.album_wrap td#month_12.month img.mon{
  position: absolute;
  top: 5px;
  left: calc(50% - 101px/2);
}
/*01月*/
.album_wrap td#month_01.month img.mon{
  position: absolute;
  top: 5px;
  left: calc(50% - 99px/2);
}
/*02月*/
.album_wrap td#month_02.month img.mon{
  position: absolute;
  top: 5px;
  left: calc(50% - 99px/2);
}
/*03月*/
.album_wrap td#month_03.month img.mon{
  position: absolute;
  top: 5px;
  left: calc(50% - 98px/2);
}