@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
#career-session { border: solid 1px #c1030d; background: #fff; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.28); box-shadow: 0 0 10px rgba(0, 0, 0, 0.28); border-radius: 15px; padding: 20px; }

#career-session h3 { margin: 0; margin-bottom: 1px; background: #c1030d; color: #fff; font-size: 22px; padding: 0.5em 1em; border-radius: 3em; margin-bottom: 1em; }

#career-session .career-session { display: -webkit-flex; -webkit-justify-content: flex-start; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#career-session .career-session figure { width: 120px; height: 120px; border-radius: 200px; background: #f5f5f5; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 20px; }

#career-session .career-session figure img { width: 120%; max-width: initial; }

#career-session .career-session p { font-size: 20px; font-weight: bold; margin-bottom: 0; padding-left: 2em; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

#career-session .career-session a { display: block; background: #c1030d; color: #fff; font-size: 20px; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 2em; padding: 0 2em; height: 4em; font-weight: bold; border-radius: 0.5em; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }

#career-session .career-session a:hover { opacity: 0.7; }

#career-session .career-session a:after { content: "\e5c8"; color: inherit; font-size: inherit; font-family: "Material Icons"; width: 1.2em; height: 1.2em; border: solid 2px #fff; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 2em; font-size: 18px; margin-left: 0.5em; }

@media screen and (max-width: 768px) { #career-session { padding: 5vw; border-radius: 4vw; }
  #career-session h3 { font-size: 4vw; }
  #career-session .career-session { -ms-flex-wrap: wrap; flex-wrap: wrap; }
  #career-session .career-session figure { width: 20vw; height: 20vw; margin-bottom: 5vw; }
  #career-session .career-session p { font-size: 4vw; width: 60%; line-height: 1.4em; margin-bottom: 2em; }
  #career-session .career-session a { width: 100%; padding: 0; font-size: 4vw; margin-left: 0; } }

#seminar443 { background: #f5f5f5; border-radius: 15px; padding-bottom: 60px; }

@media screen and (max-width: 768px) { #seminar443 { border-radius: 5vw; padding-bottom: 10vw; } }

#seminar443 #kv { background: url(../images/career-session-bg.jpg) center center/cover no-repeat; padding: 20px 40px; display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 15px; }

#seminar443 #kv figure { width: 25%; }

#seminar443 #kv figure img { width: 100%; }

#seminar443 #kv > div { display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 26px; font-weight: bold; padding: 0 1em; }

#seminar443 #kv > div strong { background: #fff; font-size: 20px; border-radius: 3em; padding: 0.5em 2em; margin-bottom: 0.8em; }

@media screen and (max-width: 768px) { #seminar443 #kv { padding: 4vw 6vw; border-radius: 5vw; }
  #seminar443 #kv figure { width: 20%; display: none; }
  #seminar443 #kv > div { font-size: 4vw; line-height: 1.4em; }
  #seminar443 #kv > div strong { font-size: 3.5vw; } }

#seminar443 #lead { width: 80%; margin: auto; }

#seminar443 #lead p { padding: 1em 0; font-size: 16px; font-weight: bold; }

@media screen and (max-width: 768px) { #seminar443 #lead { width: 100%; }
  #seminar443 #lead p { font-size: 3.5vw; } }

#seminar443 #event-info { margin-bottom: 60px; }

#seminar443 #event-info .event-info-main { margin: auto; border: solid 1px #ccc; }

#seminar443 #event-info .event-info-main tr th, #seminar443 #event-info .event-info-main tr td { border: solid 1px #ccc; }

#seminar443 #message { width: 60%; margin: auto; }

#seminar443 #message ul { margin-bottom: 30px; }

#seminar443 #message ul li { font-size: 16px; margin-bottom: 0.5em; display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }

#seminar443 #message ul li figure { width: 4em; height: 4em; border-radius: 10em; background: #fff; margin-right: 30px; overflow: hidden; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#seminar443 #message ul li figure img { width: 100%; }

#seminar443 #message ul li span { display: block; font-size: 20px; font-weight: bold; border-radius: 2em; padding: 0.2em 1em; width: 90%; position: relative; display: -webkit-flex; -webkit-justify-content: flex-start; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#seminar443 #message ul li span:before { content: ""; width: 1em; height: 1em; font-size: inherit; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: -0.2em; top: calc(50% - 0.5em); background: inherit; }

#seminar443 #message ul li:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

#seminar443 #message ul li:nth-child(even) figure { margin-right: 0; margin-left: 30px; }

#seminar443 #message ul li:nth-child(even) span { width: 80%; }

#seminar443 #message ul li:nth-child(even) span:before { left: initial; right: -0.2em; }

#seminar443 #message ul li:nth-child(1) span { background: #ffcdc3; }

#seminar443 #message ul li:nth-child(2) span { background: #c6efe2; }

#seminar443 #message ul li:nth-child(3) span { background: #d7bff1; }

#seminar443 #message ul li:nth-child(4) span { background: #c4dfee; }

#seminar443 #message p { font-size: 16px; font-weight: bold; }

#seminar443 #message p strong { color: #c1030d; }

@media screen and (max-width: 768px) { #seminar443 #message { width: 90%; }
  #seminar443 #message ul { margin-bottom: 5vw; }
  #seminar443 #message ul li { font-size: 4vw; }
  #seminar443 #message ul li span { font-size: 4vw; line-height: 1.4em; }
  #seminar443 #message p { font-size: 3.5vw; } }

#seminar443 #og { width: 90%; margin: auto; border: solid 1px #c1030d; background: #fff; padding: 10px; margin-bottom: 60px; }

#seminar443 #og h3 { margin: 0; text-align: center; background: #c1030d; border-radius: 3em; height: 2em; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; font-size: 20px; cursor: pointer; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; position: relative; }

#seminar443 #og h3:hover { opacity: 0.7; }

#seminar443 #og h3:after { content: "\e313"; position: absolute; right: 1em; top: calc(50% - 0.5em); color: inherit; display: block; width: 1em; height: 1em; font-family: "Material Icons"; }

#seminar443 #og .og dl { display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }

#seminar443 #og .og dl dt { width: 15%; display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #c1030d; font-size: 16px; font-weight: bold; color: #fff; text-align: center; }

#seminar443 #og .og dl dd { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 1em; }

@media screen and (max-width: 768px) { #seminar443 #og { padding: 4vw; }
  #seminar443 #og h3 { font-size: 4vw; }
  #seminar443 #og .og dl { display: block; }
  #seminar443 #og .og dl dt { width: 100%; }
  #seminar443 #og .og dl dt br { display: none; }
  #seminar443 #og .og dl dd { font-size: 3.5vw; padding-left: 0; padding-right: 0; } }

#seminar443 .register { text-align: center; margin-bottom: 60px; }

#seminar443 .register a { display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 20em; height: 3em; background: #c1030d; color: #fff; font-size: 20px; font-weight: bold; margin: auto; border-radius: 0.4em; }

@media screen and (max-width: 768px) { #seminar443 .register a { font-size: 4vw; width: 90%; } }

.banner-feature1 { display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.banner-feature1 a { position: relative; background: -webkit-gradient(linear, left top, right top, from(#ff3641), to(#e9b200)); background: -webkit-linear-gradient(left, #ff3641, #e9b200); background: -o-linear-gradient(left, #ff3641, #e9b200); background: linear-gradient(90deg, #ff3641, #e9b200); display: inline-block; padding: 10px; }

.banner-feature1 a > figure { position: absolute; left: 5px; bottom: -10px; width: 100px; z-index: 1; }

.banner-feature1 a span { display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 26px; color: #000; background: #fff; border-radius: 10px; height: 4em; width: 30em; font-weight: bold; text-align: center; position: relative; }

.banner-feature1 a span:after { content: "\e5e1"; width: 1.5em; height: 1.5em; display: block; font-size: 1em; position: absolute; right: 0.5em; top: calc(50% - 0.7em); background: #c1030d; color: #fff; border-radius: 5em; font-family: "Material Icons"; -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); display: -webkit-flex; -webkit-justify-content: center; -webkit-align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.banner-feature1 a:hover span:after { right: 0.1em; }

@media screen and (max-width: 768px) { .banner-feature1 a { width: 100%; padding: 2vw; }
  .banner-feature1 a figure { width: 15vw; left: 2vw; bottom: 2vw; }
  .banner-feature1 a span { font-size: 3.8vw; width: 100%; border-radius: 0.5em; line-height: 1.2em; } }
