@media all and (min-width: 768px) {

/*　カレンダー　*/

#calendar_area > h2{ width:320px; height:70px; background:url(../img/calendar/calendar_parts.png) no-repeat -10px -10px; margin:17px auto;}
#calendar_box{ width:570px; margin:20px auto 20px; background:#ffebb0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; padding:0 0 10px;}

#calendar_tit{ background:url(../img/calendar/orange_tit.png); -webkit-border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0; border-left: 1px solid #fff; border-right: 1px solid #fff; position:relative; height:45px;}
#calendar_tit > h3{ text-align:center; font-size:150%; color:#fff; text-shadow: 2px 2px 0px #fa890f; line-height:1.9;}
#backBtn{ width:28px; height:28px; background: url(../img/calendar/backBtn.png) no-repeat; position:absolute; left:18px; top:9px;}
#nextBtn{ width:28px; height:28px; background: url(../img/calendar/nextBtn.png) no-repeat; position:absolute; left:527px; top:9px;}
#backBtn a,#nextBtn a{ display:block; width:28px; height:28px;}

#calendar_table { width: 940px; margin: 40px auto; }
#calendar .calendar-header { padding: 5px 0px; width: 100%; background: #342619; text-align: center; position: relative; color: #FFF; }
#calendar .back a { display: block; color: #FFF; text-decoration: none; position: absolute; top: 1px; left: 0; font-size: 18px; padding: 0 10px; }
#calendar .next a { display: block; color: #FFF; text-decoration: none; position: absolute; top: 1px; right: 0; font-size: 18px; padding: 0 10px; }
#calendar table { background: #ffebb0; display: table; margin: 0px auto; padding: 0px; height: auto; width: 100%; border-right: 1px solid #fff; }
#calendar th { margin: 0px; padding: 3px 0; height: 25px; text-align: center; border-right: 1px solid #fff; border-bottom: 2px solid #fff; background:#ffebb0;}
#calendar .week_aera { border-left: 1px solid #fff; border-bottom: 2px solid #fff; border-top: 2px solid #fff; }
#calendar .week_aera td{ font-size:110%;}
#calendar .week_name{ border-bottom:2px solid #fff; background: #fed869; vertical-align:middle; border-top: 2px solid #fff;}
#calendar .week_name th{ background:#fed869;}
#calendar .week_week{ padding:6px 0 !important; font-weight:bold; }
#calendar td { margin: 0px; padding: 0px; width: 88px; border-bottom: 2px solid #fff; border-left: 1px solid #fff; border-right-style: none; border-top-style: none; vertical-align: top; text-align: center; }
#calendar .waku { position: relative ; min-height:80px; height:auto !important; height:80px; width: 112px;}
#calendar td a { margin: 0px; height: auto; width: auto; background: #ffebb0; display: block; text-decoration: none; color: #6a4814; }
#calendar td a:hover { opacity: 0.5 }
#calendar .day { font-size: 12px; text-align: left; display: block; padding: 5px; background: #6a4814; width: 17px; color: #FFF; text-align: center; position: absolute; top: 0; left: 0; }
#calendar .photo { width: 112px; height: 63px;}
#calendar .cooking { font-size: 12px; line-height: 1.4; text-align: left; display: block; margin: 0px auto; padding:6px; height: auto; width: auto; }
.tooltip_btn > div{ cursor:pointer; width:105px; height:50px; background:url(../img/calendar/tooltip_btn.png) no-repeat; margin:0px auto 0; }
#tooltip { font-size: 0.875em; line-height: 1.5; color: #fff; background: #85612a;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-top: 1px solid #fff; -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); position: absolute; z-index: 100; padding: 15px; text-align: left; }
#tooltip:after { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; border-top-color: #85612a; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; }
#tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #333; border-bottom-color: #85612a; top: -20px; bottom: auto; }
#tooltip.left:after { left: 10px; margin: 0; }
#tooltip.right:after { right: 10px; left: auto; margin: 0; }
.close_btn { text-align: center }

}

@media all and (max-width: 767px) {

/*　カレンダー　*/
#calendar_area > h2{ width:290px; height:70px; background-image:url(../img/calendar/smp/calendar_parts.png) ; background-repeat:no-repeat; background-size: 290px 70px; margin:17px auto;}
#calendar_box{ margin:20px auto 20px; background:#ffebb0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; padding:0 0 10px;}

#calendar_tit{ background:url(../img/calendar/orange_tit.png); -webkit-border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; border-radius:10px 10px 0 0; border-right: 1px solid #fff; border-bottom: 2px solid #fff; position:relative; height:45px;}
#calendar_tit > h3{ text-align:center; font-size:130%; color:#fff; text-shadow: 2px 2px 0px #fa890f; line-height:1.9;}
#backBtn{ width:28px; height:28px; background: url(../img/calendar/backBtn.png) no-repeat; float:left; margin-left: 18px; margin-top: -30px;}
#nextBtn{ width:28px; height:28px; background: url(../img/calendar/nextBtn.png) no-repeat; float:right; margin-right: 18px; margin-top: -30px;}
#backBtn a,#nextBtn a{ display:block; width:28px; height:28px;}

#calendar_table { width: 940px; margin: 40px auto; }
#calendar .calendar-header { padding: 5px 0px; width: 100%; background: #342619; text-align: center; color: #FFF; }

#calendar table { background: #ffebb0; display: table; margin: 0px auto; padding: 0px; height: auto; width: 100%; border-right: 1px solid #fff; }
.calendar_in { margin: 0 -10px; list-style:none;}
.calendar_in tr { display:block;}
#calendar th { margin: 0px; padding: 9px 0; text-align: center; background: #fed869; border-right: 1px solid #fff; border-top: 1px solid #fff; display:block; width: 100%;}
#calendar .week_aera { border-left: 1px solid #fff; border-bottom: 2px solid #fff; border-top: 2px solid #fff; }
#calendar .week_aera td{ font-size:110%;}
#calendar .week_name{ display:none !important; }
#calendar td { margin: 0px; padding: 0px; border-bottom: 2px solid #fff; border-left: 1px solid #fff; border-right-style: none; border-top-style: none; vertical-align: top; text-align: center; display: list-item; }
#calendar .waku { position: relative ; min-height:63px; height:auto !important; height:63px; padding:6px;}
#calendar td a { margin: 0px; height: auto; width: auto; background: #ffebb0; display: block; text-decoration: none; color: #6a4814; }
#calendar .day { font-size: 14px; text-align: left; display: block; padding: 5px; background: #6a4814; width: 38px; color: #FFF; text-align: center; position: absolute; top: 0; left: 0; line-height:1.4;}
#calendar .day span{ color:#ffebb0; font-size:90%; }
#calendar .photo { width: 112px; height: 63px; float:left; margin:0 10px 0 52px;}
#calendar .cooking { font-size: 14px; line-height: 1.4; text-align: left; display: block; margin: 0px auto; height: auto; width: auto; }
.tooltip_btn > div{ background:#6a4814; color:#fff; margin:0px auto 0; width:190px; line-height:3; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-weight:normal;}
.tooltip_btn > div span{ display: inline-block; height: 49px; background-image: url(../img/calendar/smp/tooltip_btn_icon.png); background-position: left center; background-repeat: no-repeat; padding-left: 12px;}

#tooltip { font-size: 0.875em; line-height: 1.5; color: #fff; background: #85612a;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-top: 1px solid #fff; -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 ); position: absolute; z-index: 100; padding: 15px; text-align: left; }
#tooltip:after { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; border-top-color: #85612a; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; }
#tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #333; border-bottom-color: #85612a; top: -20px; bottom: auto; }
#tooltip.left:after { left: 10px; margin: 0; }
#tooltip.right:after { right: 10px; left: auto; margin: 0; }
.close_btn { text-align: center }

}