@charset "utf-8";

#second-visualcontents::before { background: url('../img/departure/header-image.png') center center no-repeat;background-size: contain;}
.induction-intro-wrap {background: url('../img/departure/problem-bg_pc.jpg') center center no-repeat #f2f2f2; background-size: cover;}
.bg-pattern { background: url('../img/bg_pattern03.png'); padding-bottom: 4vw; }
.bg-pattern .inner {margin: 0 auto;}
.departure-points {background: #fff; padding: 64px 50px; box-shadow: 0px 3px 6px rgba(34, 34, 34, 0.16); border-top: 10px solid #EBA224;}
.departure-points ul {display: flex; margin: 0 0 40px;}
.departure-points ul li {flex-basis: 25%;}
.departure-points ul li img {width: 124px; margin: 0 auto 10px;}
.departure-points ul li p {font-size: 20px; font-weight: bold; text-align: center; color: #1FA3AD;}
.departure-points .text_box {background:url(../img/bg-note.png) repeat; border-top: 8px solid #3E95CC; padding: 30px 42px; position: relative; margin:0 0 120px; box-shadow: 0px 3px 6px rgba(34, 34, 34, 0.16);}
.departure-points .text_box p {line-height: 1.8;}
.departure-points .text_box::after { content:''; display: block; position: absolute; left: 50%; bottom: -80px; transform: translateX(-50%); width: 105px; height: 42px; background: url(../img/departure/sankaku.png); }
.departure-points h3 { font-size: 24px; font-weight: bold; text-align: center; position: relative; margin-bottom: 28px; z-index: 10;}
.departure-points h3 span {color: #1FA3AD; font-size: 32px;}
.departure-points h3::before { content: ''; width: 65px; height: 91px; background: url(../img/departure/line-left.png) no-repeat; background-size: contain; position: absolute; left: 5%; top: 0; z-index: -1; }
.departure-points h3::after { content: ''; width: 65px; height: 91px; background: url(../img/departure/line-right.png) no-repeat; background-size: contain; position: absolute; right: 5%; top: 0; z-index: -1; }
.departure-points .important_box {background: url(../img/departure/important-bg.jpg) no-repeat; background-size: cover; border: 2px solid #3EA9B3; }
.departure-points .important_box h4 { font-size: 26px; font-weight: bold; color: #EBA224; margin-bottom: 14px; text-shadow: 2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, -2px -2px 0px #fff, 2px 0px 0px #fff, 0px 2px 0px #fff, -2px 0px 0px #fff, 0px -2px 0px #fff;}
.departure-points .important_box .content_inner { position: relative; }
.departure-points .important_box .content { padding: 34px 20px 32px; box-sizing: border-box; position: relative;}
.departure-points .important_box .content p {width: 73%; line-height: 1.8;}
.departure-points .important_box img {position: absolute; right: 5%; bottom: 0; width: 199px; height: auto; }
.departure-points .important_box .bg_color { background: #3EA9B3; padding: 20px 20px; }
.departure-points .important_box .bg_color p { font-size: 20px; font-weight: bold; color: #fff; text-align: center;}
.departure-points .important_box .bg_color p span {color:#EEEC0E;}

.note_box {background: url(../img/dot_01.png); border: 3px solid #3E95CC;}
.note_box h3 {font-size: 26px; font-weight: bold; color: #fff; text-align: center; background: #3E95CC; margin-bottom: 20px; padding: 14px 10px; }
.note_box .content {display: flex; padding: 0 28px; margin-bottom: 32px; align-items: flex-start;}
.note_box .content .text { width: 53%; padding: 28px 2% 0 14px ; }
.note_box .content .text h4 { font-size: 26px; font-weight: bold; color: #E49300; margin-bottom: 14px;}
.note_box .content .text p {line-height: 1.7;}
.note_box .content img { width: 47%; }
.note_box .contact_area { background: #F2F2F2; padding: 26px 30px; margin: 0 28px 32px; }
.note_box .contact_area h4 {font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 14px;}
.note_box .contact_area h4 span {background: linear-gradient(transparent 75%, #f1e340 75%);}
.note_box .contact_area ul {display: flex; justify-content: space-between; align-items: center;}
.note_box .contact_area ul li {}
.note_box .contact_area img {width: 94%; margin:0 auto;}

.other-service-wrap {position: relative; background: url(../img/service_common/dot_07.png) top center repeat #D8EEF0; box-sizing: border-box; padding: 5vw 0 2vw;}
.other-service-wrap h2 { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 28px;}
.other-service-wrap h2 span.line-side {position: relative;}
.other-service-wrap h2 span.line-side::before {content: ""; width: 22px; height: 32px; background: url(../img/departure/line-left_blue.png) no-repeat; background-size: contain; position: absolute; left: -10%; top: 0;}
.other-service-wrap h2 span.line-side::after {content: ""; width: 22px; height: 32px; background: url(../img/departure/line-right_blue.png) no-repeat; background-size: contain; position: absolute; right: -10%; top: 0;}
.other-service-wrap h2 span.line-bg { font-size: 28px; background: linear-gradient(transparent 75%, #f1e340 75%);}


@media only screen and (max-width:768px) {
  .departure-points { padding: 30px 26px; }
  .departure-points ul {margin-bottom: 24px;}
  .departure-points ul li p {font-size: 16px;}
  .departure-points .text_box {padding: 20px 26px; margin-bottom: 82px;}
  .departure-points .text_box::after {bottom: -62px;}
  .departure-points h3::before {left: 0;}
  .departure-points h3::after {right: 0;}
  .departure-points .important_box .content { padding-top: 24px;}
  .departure-points .important_box img { right: 2%; }
  .departure-points .important_box .bg_color {padding: 12px 10px;}
  .note_box h3 { font-size: 22px; margin-bottom: 2%;}
  .note_box .content { padding: 0 2%; margin-bottom: 4%; }
  .note_box .contact_area {padding: 3% 2%; margin:0 2% 2%;}
  .note_box .contact_area ul li {flex: 1;}
  .note_box .content .text h4 {font-size: 20px;}
}
@media only screen and (max-width:568px) {
  .departure-points {padding: 5% 3%;}
  .departure-points ul {flex-wrap: wrap; margin-bottom: 0;}
  .departure-points ul li {flex-basis: 50%; margin-bottom: 5%;}
  .departure-points ul li img {width: 65%;}
  .departure-points .text_box {padding: 5% 4%;}
  .departure-points h3 {font-size: 18px; margin-bottom: 5%;}
  .departure-points h3 span {font-size: 24px;}
  .departure-points h3::before, .departure-points h3::after {width: 42px; height: 58px; top:inherit; bottom: 0;}
  .departure-points .important_box .content {padding: 4% 3% 0;}
  .departure-points .important_box .content p {width: 100%;}
  .departure-points .important_box img {position: inherit; right: initial; margin: 0 auto;}
  .departure-points .important_box h4 {font-size: 22px; margin-bottom: 2%; text-align: center;}
  .departure-points .important_box .bg_color p {font-size: 16px; text-align: left;}
  .note_box h3 {font-size: 18px; padding: 2%; margin-bottom: 4%;}
  .note_box .content {flex-direction: column;}
  .note_box .content .text {width: 100%; padding: 0;}
  .note_box .content .text h4 {font-size: 18px; text-align: center; margin-bottom: 2%;}
  .note_box .content img {width: 94%; margin: 3% auto;}
  .note_box .contact_area h4 {font-size: 20px;}
  .note_box .contact_area ul {flex-direction: column;}
  .note_box .contact_area ul li:first-child {margin-bottom: 5%;}
  .other-service-wrap h2 { font-size: 18px; margin-bottom: 6%; }
  .other-service-wrap h2 span.line-bg {font-size: 26px;}
  .other-service-wrap {padding: 7vw 0;}
}