@charset "UTF-8";


/*------------------------------------
  timetable
------------------------------------*/
.time_table {
  width: 1200px;
  border: 0;
  transform: scale(.9);
}

.timetable_title {
  display: block;
  height: 100px;
  position: relative;
  width: 100%;
}

.timetable_title img {
  width: 70%;
}

.timetable {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 50px 30px;
}

#bar {
  display: flex;
  flex-wrap: wrap;
}

#bar .title {
  width: 100%;
  height: auto;
}

/* #bar .eventline {
  width: 40%;
} */


.schedule {
  position: relative;
  width: 100%;
  height: auto;
  /* -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); */
  /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); */
  /* margin-right: 5%; */
}

.schedule .timeline {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, .3);
  background-color: #FFF;
  border-radius: 5px;
  border: 0px #d4b968 solid;
}

.schedule .timeline li {
  position: relative;
  width: 17%;
  height: 100%;
  border-left: 2px #d4b968 dotted;
  /* background: linear-gradient(90deg, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .3) 50%); */
  background: linear-gradient(90deg, rgba(221, 204, 178, 0.1) 50%, rgba(222, 187, 141, 0.3) 50%);
}

.schedule .timeline li:first-of-type {
  border: 0;
}

.schedule .timeline li:last-of-type {
  width:0;
  background: rgba(255, 255, 255, .1);
  border: 0;
  /* border-right: 2px #d4b968 dotted; */
}

.schedule .timeline li::before,
.schedule .timeline li::after {
  position: absolute;
  display: block;
  left: -25px;
  background: #003476;
  content: "";
  color: #FFF;
  padding: 10px 0;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  width: 50px;
  height: 50px;
  border: 2px #FFF solid;
}

.schedule .timeline li::before {
  top: -25px;
}

.schedule .timeline li::after {
  bottom: -25px;
}

.schedule .timeline li:first-of-type::before,
.schedule .timeline li:first-of-type::after {
  content: "10";
  left: -25px;
}

.schedule .timeline li:nth-of-type(2)::before,
.schedule .timeline li:nth-of-type(2)::after {
  content: "11";
}

.schedule .timeline li:nth-of-type(3)::before,
.schedule .timeline li:nth-of-type(3)::after {
  content: "12";
}

.schedule .timeline li:nth-of-type(4)::before,
.schedule .timeline li:nth-of-type(4)::after {
  content: "13";
}

.schedule .timeline li:nth-of-type(5)::before,
.schedule .timeline li:nth-of-type(5)::after {
  content: "14";
}

.schedule .timeline li:nth-of-type(6)::before,
.schedule .timeline li:nth-of-type(6)::after {
  content: "15";
}

.schedule .timeline li:nth-of-type(7)::before,
.schedule .timeline li:nth-of-type(7)::after {
  content: "16";
}

/*○時*/
.schedule .timeline::before,
.schedule .timeline::after {
  position: absolute;
  right: -50px;
  color: #003476;
  font-size: 21px;
  font-weight: bold;
  text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF, 0 -2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
  content: "時";
}
.schedule .timeline::before {
  top: 0;
}
.schedule .timeline::after {
  bottom: -22px;
}



.event_time {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  height: 80px;
  margin: 0;
  overflow: hidden;
}

.event_time:last-of-type {
  margin-bottom: 50px;
}

/* ----- 公開講座 ----- */
.event_time#vol_1 {
  height: 100px;
  width: 91.5%;
  margin-top: 20px;
  margin-left: 8.5%;
}

.event_time#vol_1 .graph:first-of-type {
  width: 27.5%;
  margin-left: 0%;
}

.event_time#vol_1 .graph:nth-of-type(2) {
  width: 18.3%;
  margin-left: 18%;
}



/* ----- 病院のお仕事紹介 ----- */
.event_time#vol_2 {
  width: 66.5%;
  height: 75px;
  margin-top: 20px;
  margin-left: 33.5%;
}

.event_time#vol_2 .graph {
  width: 25%;
  height: 70px;
  margin-top: 0;
}


/* ----- 病院探検ツアー ----- */
.event_time#vol_3 {
  width: 41.5%;
  height: 110px;
  margin-left: 58.5%;
}

.event_time#vol_3 .graph:first-of-type {
  width: 35%;
  height: 70px;
  margin-top: 25px;
  margin-left: 0;
}

.event_time#vol_3 .graph:nth-of-type(2) {
  width: 35%;
  height: 70px;
  margin-top: 25px;
  margin-left: 5%;
} 
.event_time#vol_3 .graph::before {
  top: -25px;
}

.event_time#vol_3 .graph span.name {
  font-size: 17px;
}


/* フレイル予防・健康体操 -- */
.event_time#vol_4 {
  width: 63.5%;
  height: 120px;
  margin-top: 20px;
  margin-left: 36.5%;
}

.kenkoutaisou {
  position: absolute;
  width: 100%;
  top: 0;
  color: #265c13;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px -2px 0 #FFF, 0px 2px 0 #FFF, 0 -2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;
}

.event_time#vol_4 .graph:nth-of-type(1) {
  position: relative;
  width: 11.5%;
  margin: 30px 0 0 4%;
}

.event_time#vol_4 .graph:nth-of-type(2) {
  position: relative;
  width: 11.5%;
  margin: 30px 0 0 38.5%;
}

.event_time#vol_4 .graph:nth-of-type(3) {
  position: relative;
  width: 11.5%;
  margin:30px 0 0 23%;
}

.event_time#vol_4 .graph:nth-of-type(3)::before {
  right: 0;
  top: -18px;
}
.event_time#vol_4 .graph span.name {
  margin-top: 0;
  margin-left: 10px;
}




/* 健康チェック・相談コーナー ----------- */
.event_time#vol_5 {
  margin-top: 20px;
  margin-left: 33.5%;
  width: 66.5%;
}

.event_time#vol_5 .graph {
  width: 100%;
}

/* 健康チェック・相談コーナー ----------- */
.event_time#vol_5_1 {
  margin-top: -10px;
  margin-left: 33.5%;
  width: 66.5%;
}

.event_time#vol_5_1 .graph {
  width: 100%;
}


/* 職業体験 ----------- */
.event_time#vol_6 {
  margin-top: 20px;
  margin-left: 33.5%;
  width: 66.5%;
}

.event_time#vol_6 .graph {
  width: 100%;
}

/* はたらく臓器を見てみよう ----------- */
.event_time#vol_7 {
  margin-top: 20px;
  margin-left: 33.5%;
  width: 66.5%;
}

.event_time#vol_7 .graph {
  width: 100%;
}

/* 進学相談 ----------- */
.event_time#vol_8 {
  margin-top: 20px;
  margin-left: 33.5%;
  width: 66.5%;
}

.event_time#vol_ .graph {
  width: 100%;
}


/* キッズコーナー --------------------- */
.event_time#vol_9 {
  margin-top: 20px;
  margin-left: 33.5%;
  width: 66.5%;
}

.event_time#vol_9 .graph {
  width: 100%;
}


/* キッチンカーコーナー --------------- */
.event_time#vol_10 {
  margin-top: 20px;
  margin-left: 8.5%;
  width: 91.5%;
}

.event_time#vol_10 .graph {
  width: 100%;
  margin-left: 0;
}



/* 申込必要 --------------------------- */
.graph.yoyaku::before {
  position: absolute;
  width: 46px;
  height: 46px;
  padding: 7px;
  top: -10px;
  right: -19px;
  font-size: 11px;
  text-align: center;
  font-weight: bold;
  background: #FFF;
  border-radius: 50%;
  content: "申込必要";
}

.graph.jc.yoyaku::before {
  color: #027a6e;
  border: 2px #00a795 solid;
}

.graph.ohp.yoyaku::before {
  color: #265c13;
  border: 2px #9cdf09 solid;
}

.graph.khp.yoyaku::before {
  color: #7238b6;
  border: 2px #7238b6 solid;
}


/* タイムライン基本 --------------------------- */
.schedule .graph {
  height: 60px;
  margin-top: 10px;
  border-radius: 0 12px 12px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px;
  transition: .5s all;
}

/* 画面に入ったらバーを伸ばす --------------------------- */
.schedule.open .graph {
  -webkit-animation: graphAnim 2.5s forwards;
  animation: graphAnim 2.5s forwards;
}

.schedule .graph.yoyaku {
  height: 80px;
  margin-top: 20px;
}

.schedule .graph:hover {
  opacity: .5;
}

.schedule .graph span.name {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.schedule .graph span.number {
  font-size: 14px;
  color: #ffffff;
}


.schedule .graph.ohp {
  background: #9cdf09;
}

.schedule .graph.ohp span {
  color: #265c13;
  text-shadow: none;
}

.schedule .graph.khp {
  background: #7238b6;
}

.schedule .graph.jc {
  background: #00a795;
}






/* ============= バーを伸ばす処理 ============= */
@-webkit-keyframes graphAnim {
  0% {
    -webkit-transform: translateX(-100%);
    transform: scale(0);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: scale(100%);
  }
}

@keyframes graphAnim {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}



/* ============= 色説明 ============= */
.ColorSetsumei {
  position: relative;
  margin: 50px auto 60px;
  width: 80%;
}

.ColorSetsumei ul {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.ColorSetsumei ul li {
  display: block;
  width: auto;
  color: #555;
  line-height: 1.2em;
}

.ColorSetsumei ul li span {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 80%;
  margin-right: 10px;
}

.ColorSetsumei ul li:first-of-type span {
  background: #00a795;
}

.ColorSetsumei ul li:nth-of-type(2) span {
  background: #7238b6;
}

.ColorSetsumei ul li:nth-of-type(3) span {
  background: #9cdf09;
}

/* ============= モバイル対応 ============= */
@media screen and (max-width: 959px) {
  .timetable {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 28px 8px;
    overflow: auto;
    background-color: rgba(18, 128, 209, 0.5);
    border: 2px #fff solid;
  }

  .timetable::before {
    width: 100%;
    margin: 0;
    font-size: 13px;
    content: "※このスケジュール表は左右にスクロールします";
  }

  #bar {
    display: flex;
    flex-wrap: wrap;
    width: 1200px;
    margin: 20px -100px -330px 20px;
    transform: scale(.7);
    transform-origin: top left;
  }

  .timetable_title {
    display: block;
    height: auto;
    position: relative;
    width: 100%;
    margin: 30px 0 0;
  }

  .timetable_title img {
    width: 100%;
  }
}


/* ============= スマホ ============= */
@media screen and (max-width: 750px) {
  .schedule .graph span {
    font-size: 12px;
  }
}