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

/*body {color:#000; font-family:YuGothic, 游ゴシック体, "Yu Gothic", 游ゴシック, Meiryo, "Hiragino Sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",-apple-system, "Helvetica", sans-serif;}
@media all and (-ms-high-contrast:none) {body {font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic", "Helvetica",sans-serif;}}*/

*,
*:before,
*:after {
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	font-smoothing:antialiased;
}

a {
  -webkit-tap-highlight-color: transparent;
  background: transparent;
}
a:active, 
a:hover,
a:visited {outline: 0;}

/* kids summer camp top */
#main_v {width: 880px; height: 370px; position: relative; clear:both;}
#main_v h1 {color: #fff; font-weight:bold; font-size: 20px; margin:10px 0 0 10px; line-height: 1.5; text-shadow: 0px 0px 10px #666; position: absolute; z-index:2;}
#main_v ul {position: absolute; z-index:1;}
#main_v li {position: absolute; top:0; left:0; display: none;}
#main_v li.active {display: block;}
#main_v li figcaption {position: absolute; right:10px; bottom: 10px; color: #fff;}

#backNumber #archive {width: 100%; margin: 0 auto; padding:0;}
#backNumber #archive2 {width: 765px; margin: 0 auto; padding:0;}
#backNumber .link {display: inline-block; margin: 0 10px 10px 0;}
#backNumber .link:nth-child(4n) {margin-right: 0;}
#backNumber .link figure {position: relative;}
#backNumber .link figure figcaption {}
#backNumber .link figure figcaption h1 {font-size: 16px; font-weight: bold; top: 3px; left: 5px; position: absolute;}
#backNumber .link figure figcaption h1.w {color: #fff; text-shadow: 1px 1px 4px #555; -webkit-text-shadow: 1px 1px 4px #555; -moz-text-shadow: 1px 1px 4px #555;}
#backNumber .link figure figcaption h1.b {color: #000; text-shadow: 1px 1px 4px #fff; -webkit-text-shadow: 1px 1px 4px #fff; -moz-text-shadow: 1px 1px 4px #fff;}
#backNumber .link figure figcaption p {position: absolute; right: 5px; bottom: 3px; font-weight: bold;}
#backNumber .link figure figcaption p.w {color: #fff; text-shadow: 1px 1px 4px #555; -webkit-text-shadow: 1px 1px 4px #555; -moz-text-shadow: 1px 1px 4px #555;}
#backNumber .link figure figcaption p.b {color: #000; text-shadow: 1px 1px 4px #fff; -webkit-text-shadow: 1px 1px 4px #fff; -moz-text-shadow: 1px 1px 4px #fff;}

/*concept outline*/
#outline {width:658px; height:auto; margin:30px auto 0 auto; padding:0 30px; line-height: 18px; text-decoration: none}
#outline header h1 {line-height: 1.5; font-size:20px; font-weight:bold; margin-bottom:20px; padding:0px;}
#outline header p {line-height: 1.5; font-size:14px; margin-bottom:20px; padding:0px;}
#outline #notice .info {margin-bottom:20px;}
#outline #notice .info h1, #outline #notice .artcle h1 {font-size:16px; font-weight:bold; line-height:1.5; margin-bottom:5px;}
#outline #notice .artcle h2 {font-size:14px; font-weight:bold; line-height:1.5;}
#outline #notice .artcle p.number {line-height:1.5; margin:10px 0;}
#outline #notice .artcle p.number span.tellNo {font-size:14px; font-weight:bold; padding-right:10px;}
#outline #notice .artcle p {font-size:12px; line-height:1.5;}
#outline .date {width:290px; float:left;}
#outline .detail {width:290px; float:right;}
#outline section {margin: 0 0 20px 0; padding: 0px;}
#outline section h1 {line-height: 1.4; font-size: 16px; margin: 0 0 5px 0; padding: 0px; font-weight:bold;}
#outline section p {line-height: 1.4; font-size: 14px; margin: 0px; padding: 0px;}
#outline .date dl {margin: 0px; padding: 0px; line-height: 1.4; font-size: 14px;}
#outline .date dt {line-height: 1.5em; margin: 0px; padding: 0px;}
#outline .date dd {line-height: 1.5em; margin-top: -1.5em; padding: 0 0 7px 4em;}
#outline .date dd:last-child {padding-bottom: 0px;}
/*concept outline*/

#main_contents h1 {font-weight:bold; margin-bottom:20px;}
#main_contents h1#mainTtl {font-size:20px;}
.program {margin-bottom:20px; display:block;}
.program figure {width:171px; float:left;}
.program .col {width:689px; float:right; padding:20px 0;}
.program .col h1 {font-size:14px;}
.program {zoom:1;}
.program:after {content:"";display:block;clear:both;}

#main h1#mainTtl {font-weight:bold; font-size:20px; margin-bottom:20px;}
#notice .info {margin-bottom:20px;}
#notice .info h1, 
#notice .artcle h1 {font-size:16px; font-weight:bold; line-height:1.5; margin-bottom:5px;}
#notice .artcle h2 {font-size:14px; font-weight:bold; line-height:1.5;}
#notice .artcle p.number {line-height:1.5; margin:10px 0;}
#notice .artcle p.number span.tellNo {font-size:14px; font-weight:bold; padding-right:10px;}
#notice .artcle p {font-size:12px; line-height:1.5;}
.summary dl {margin:20px 0 0 1em; padding: 0px; font-size:16px;}
.summary dt {line-height: 1.7em; margin: 0px; padding: 0px; font-weight:bold;}
.summary dd {line-height: 1.7em; margin-top: -1.7em; padding: 0 0 10px 10em;}
.summary dd:last-child {padding-bottom: 0px;}
#management .managementStaff {margin-bottom:20px;}
#management .managementStaff h1, 
#management .managementForm h1 {font-size:16px; font-weight:bold;}
#management .managementStaff p, 
#management .managementForm p {margin-bottom:20px;}
#management .managementStaff table {width:100%; border-collapse: separate; border-spacing: 2px;}
#management .managementStaff table th {text-align:center; font-weight:bold; color:#fff; min-width: 144px; width: auto !important; padding:5px; white-space: nowrap;}
#management .managementStaff table td {text-align:left; width: auto !important; padding:5px; white-space: nowrap;}
#management .managementForm table {margin:0 auto;}

/*timeSchedule*/
#timeSchedule ul {width:900px; margin:0 -20px 30px 0;}
#timeSchedule ul li {width: 278px; height: 50px; margin: 0;	font-size: 30px; font-weight:bold; text-align: center; position: static; border-radius: 8px; behavior: url(/camp/contents/school/kids_summer_camp/css/PIE.htc); float:left; margin-right:20px;}
#timeSchedule ul li a {display:block;}
#timeSchedule #dayOne, #timeSchedule #dayTwo, #timeSchedule #dayThree {width:900px;}
#timeSchedule .eventImage {width:200px; float:left; margin-right:50px;}
#timeSchedule .eventImage figure {margin-bottom:20px;}
#timeSchedule .timeLine {width:630px; float:left;}
#timeSchedule .timeLine  dl {margin-bottom:20px; padding:0; font-size:14px; font-weight:bold;}
#timeSchedule .timeLine  dt {line-height: 1.5em; margin: 0px; padding: 0px;}
#timeSchedule .timeLine  dd {line-height: 1.5em; margin-top: -1.5em; padding: 0 0 20px 5em;}
#timeSchedule .timeLine  dd:last-child {padding-bottom: 0px;}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {border: 1px solid #7F0019; background: #fff; font-weight: normal; color: #fff;}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {color: #191919; text-decoration: none;}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {border: 1px solid #fff; background: #7F0019; font-weight: normal; color: #fff;}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {color: #fff; text-decoration: none;}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {border: 1px solid #7F0019; background: #7F0019; font-weight: normal; color: #fff;}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {color: #fff; text-decoration: none;}
/*timeSchedule*/

/* kids summer camp report schedule */
#dayOne, #dayTwo, #dayThree {width:280px; float:left;}
#dayOne, #dayTwo {margin-right:20px;}

.ksm_tmtimeline {margin:20px 0 30px; padding: 0; list-style: none; position: relative;}
.ksm_tmtimeline:before {content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: #7F0019; left: 20%; margin:0 3px 0 0;}

/* The date/time */
.ksm_tmtimeline > li .ksm_tmtime {display: block; width: 25%; padding:0px; position: absolute;}
.ksm_tmtimeline > li .ksm_tmtime span {display: block; text-align: left;}
.ksm_tmtimeline > li .ksm_tmtime span.date {font-size: 0.8em; font-weight:bold; color: #191919;}
.ksm_tmtimeline > li .ksm_tmtime span.time {font-size: 1.5em; font-weight:bold; color: #191919;}
.ksm_tmtimeline > li:nth-child(odd) .ksm_tmtime span:last-child {color: #191919;}

/* Right content */
.ksm_tmtimeline > li .ksm_tmlabel {margin: 0 0 5px 25%; color: #191919; padding:10px; font-size: 1.2em; font-weight: 300; line-height: 1.4; position: relative; border:solid 1px #ccc; border-radius: 5px; behavior: url(/camp/contents/school/kids_summer_camp/css/PIE.htc);}
.ksm_tmtimeline > li .ksm_tmlabel h2 {margin: 0 0 5px 0; padding: 0 0 5px 0; border-bottom: 1px solid #CCC;}

/* The triangle */
.ksm_tmtimeline > li .ksm_tmlabel:after {right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #7F0019; border-width: 10px; top: 10px;}
.ksm_tmtimeline > li:nth-child(odd) .ksm_tmlabel:after {border-right-color: #7F0019;}

/* The icons */
.ksm_tmicon {width: 280px; height: 50px; margin: 0; font-size: 30px; font-weight:bold; text-align: center; position: static; color: #fff; background: #7F0019; border-radius: 8px; behavior: url(/camp/contents/school/kids_summer_camp/css/PIE.htc);}

/*sub_image fotoList*/
#sub_v {padding-left: 10px; position: relative; border: 1px solid #d2d2d2; border-radius: 5px; behavior: url(/camp/contents/school/kids_summer_camp/css/PIE.htc);}
#sub_v h1 {color: #fff; font-weight:bold; margin-top: 10px; line-height: 1.5; text-shadow: 0px 0px 10px #666;}
#sub_v h1.b {color: #191919; text-shadow: 0px 0px 3px #ccc;}
#sub_v h1 .loc, #sub_v h1 .ttl {display:block;}
#sub_v h1 .loc {font-size: 14px;}
#sub_v h1 .ttl {font-size: 30px;}
#sub_v p {color: #fff; font-size: 12px; font-weight:bold; margin-top: 3px; line-height: 1.5; text-shadow: 0px 0px 10px #666;}

ul#fotoList {width: 700px; height: auto; margin: 0; padding: 0px; list-style-type: none; float:right;}
ul#fotoList li {float:left;}
ul#fotoList li a {width:160px; margin:0 10px 10px 0; border:#CCC 1px solid; display:block;}
ul#fotoList li a:hover {border:#7F0019 1px solid;}

/* contents nav */
nav {width: 880px; margin-top:10px; background: #aaa;}
#dropmenu {list-style-type: none; width: 880px; margin:0; padding: 0;}
#dropmenu li {position: relative; width: 175px; float: left; margin: 0; padding: 0; text-align: center; border-right:dotted 1px #CCC;}
#dropmenu li.last {border-right:none;}
#dropmenu li a {display: block; margin: 0; padding: 16px 0; background: #aaa; color: #fff; font-size: 12px; font-weight: bold; line-height: 1; text-decoration: none;}
#dropmenu li ul {list-style: none; position: absolute; z-index: 100; top: 100%; left: 0; width: 100%; margin: 0; padding: 0;}
#dropmenu li ul li {overflow: hidden; width: 100%; height: 0; color: #fff; transition: .2s;}
#dropmenu li ul li a {padding: 13px 15px; background: #666; text-align: left; font-size: 12px; font-weight: normal;}
#dropmenu > li:hover > a {  background: #666 }
#dropmenu > li:hover li:hover > a {  background: #aaa }
#dropmenu > li:hover > ul > li {overflow: visible; height: 38px;}
#dropmenu li ul li ul {top: 0; left: 100%;}
#dropmenu li:last-child ul li ul {left: -100%; width: 100%;}
#dropmenu li ul li ul:before {position: absolute; content: ""; top: 13px; left: -20px; width: 0; height: 0; border: 5px solid transparent; border-left-color: #454e08;}
#dropmenu li:last-child ul li ul:before {position: absolute; content: ""; top: 13px; left: 200%; margin-left: -20px; border: 5px solid transparent; border-right-color: #454e08;}
#dropmenu li ul li:hover > ul > li {overflow: visible; height: 38px;}
#dropmenu li ul li ul li a {  background: #616d0b }
#dropmenu li:hover ul li ul li a:hover {  background: #535d09 }

.annotaition {font-size: 11px; line-height:11px;}
.underLine {text-decoration-line: underline; color: #f00;}
.grbox{position:relative; margin-top:15px; padding:20px; border:1px #cccccc solid; background-color:#ffffff; -moz-border-radius: 4px; -webkit-border-radius:4px; border-radius: 4px;}
span.notice{color:#FF0000;}

/*sns*/
.sns_box {float: left; margin-top: 25px;}
.sns_box li {float: left; width: 110px;}
/*sns*/

/*clearfix*/
nav {zoom:1;}
nav:after {content:"";display:block;clear:both;}