@charset "utf-8";

/*保育園の一日*/

article{
background-image:url(../oneday/images/page-bg.jpg);
}

/*TimeLine*/

.time-area{
z-index: -1;
background-color:rgba(255,246,223,0.8);/*#fff6df*/
padding: 20px;
margin-top:50px;
border-radius:5px;

  position: relative;
  overflow: hidden;
}

.time-area:after {
  content:"";
  z-index: -1;
  position: absolute;
  left: 50%;
  top:0;
  width: 4px;
  margin-left: -2px;
  min-height: 100%;
  background-color: #f29e24;
}

.timeline-fix{
content:"";
clear:both;
height:0;
display:block;
visibility:hidden;
}

.time-area .time-Left {
  /*z-index: 2;*/
  position: relative;
  width: 380px;
  padding: 20px;
  margin-bottom: 30px;
  background: #fff;
  border-radius: 5px;
  float: left;
  clear: left;
}

.time-area .time-Right {
  /*z-index: 2;*/
  position: relative;
  width: 380px;
  padding: 20px;
  margin-bottom: 30px;
  background: #fff;
  border-radius: 5px;
  float: right;
  clear: right;
}

.time-Left img, .time-Right img{
width:100%;
height:auto;
border:solid 4px #fff6df;
box-shadow:0 0 5px rgba(118,118,118,0.5);
margin:10px auto;
}

img.rotate-L{
width:90%;
height:auto;
margin:10px auto;
transform: rotate(5deg);
}

img.rotate-R{
width:90%;
height:auto;
margin:10px auto;
transform: rotate(-5deg);
}


/* arrow */

.time-Left:before{
  content:"";
  /*z-index: 1;*/
  position: absolute;
  top: 14px;
  right: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
}

.time-Right:before {
  content:"";
  /*z-index: 1;*/
  position: absolute;
  top: 14px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
}

.time-Right + .time-Left:before,
.time-Left + .time-Right:before {
  top: 40px;
}


/* dot */

.time-Left:after{
  content:"";
  /*z-index: 1;*/
  position: absolute;
  top: 14px;
  right: -37px;
  width: 8px;
  height: 8px;
  border: 3px solid #f29e24;
  border-radius: 100%;
  background-color: #ffffff;
  transition: .2s;
}

.time-Left:after:hover{
border-color:#FFFFFF;
background-color: #f29e24;
top:12px;
right:-39px;
width: 12px;
height: 12px;
}

.time-Right:after{
  content:"";
  /*z-index: 1;*/
  position: absolute;
  top: 14px;
  left: -37px;
  width: 8px;
  height: 8px;
  border: 3px solid #f29e24;
  border-radius: 100%;
  background-color: #ffffff;
  transition: .2s;
}

.time-Right:hover:after {
border-color:#FFFFFF;
background-color: #f29e24;
top:12px;
left:-39px;
width: 12px;
height: 12px;
}

.time-Right + .time-Left:after,
.time-Left + .time-Right:after {
  top: 40px;
}