@charset "utf-8";

@media only screen and (max-width:1280px) {}
@media only screen and (max-width:768px) {}
@media only screen and (max-width:480px) {}

html {
  scroll-behavior: smooth;
}
.crm--banners .slideControls > .slick-dots {
  display: none !important;
}
#point01 {
  margin-top: -80px;
  padding-top: 80px;
}
.contentsArea .topBnr figure {
  position: relative;
}
.contentsArea .topBnr figure figcaption {
  position: absolute;
  bottom: 23%;
  right: 5px;
  color: #fff;
  font-size: 10px;
}

a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.pc_only {
  display: block;
}

.tab_only {
  display: none;
}

.sp_only {
  display: none;
}

@media only screen and (max-width:768px) {
  .tab_only {
    display: block;
  }

  .sp_only {
    display: block;
  }
}

@media only screen and (max-width:480px) {
  .pc_only {
    display: none;
  }

  .tab_only {
    display: none;
  }
}

/*---------------------------------------------------------------

 commonKeyvisual

--------------------------------------------------------------- */
.commonKeyvisual_online_mtg {
  position: relative;
  height: auto;
}
.commonKeyvisual_online_mtg {position: relative; height: auto;}
.commonKeyvisual_online_mtg img {width: 100%;}
.commonKeyvisual_online_mtg .imagearea .imgCap {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
    color: #3a3b40;
    font-size: 12px;
    line-height: 1;
    text-align: right;
    z-index: 3;
}

@media only screen and (max-width:480px) {
  .commonKeyvisual_online_mtg .imagearea .imgCap  {
    display: none;
  }
}


/*---------------------------------------------------------------

 contentsArea01

--------------------------------------------------------------- */
.bg01 {background-color: #fff;}
.contentsArea01 .wrap {max-width: 1120px; margin: 0 auto; padding: 60px 15px;}
.contentsArea01 .btn1 {display: flex; flex-direction: row; text-align: center; justify-content: center;}
.contentsArea01 .btn1 a {width: 100%; padding: 20px 30px;}
.contentsArea01 .btn1_item01,
.contentsArea01 .btn1_item02 {position: relative; color: #fff; font-size: 20px; margin: 0 30px;
  display: flex; align-items: center; justify-content: center; width: 48%; height: auto;} 

.contentsArea01 .btn1_item01 {background-color: #008fa3;}
.contentsArea01 .btn1_item02 {background-color: #3b3b41;}

.contentsArea01 .btn1_item01 p:before,
.contentsArea01 .btn1_item02 p:before {position: absolute; top: 0; right: 20px; display: block; content: '';
  width: 35px; height: 100%; background: url(../images/online_mtg/online_mtg-arrow_white.svg) no-repeat right center / 100% auto;}

.contentsArea01 .txtBox {padding: 0 15px; margin-top: 40px; font-size: 16px; color: #3b3b41; line-height: 2;
  letter-spacing: 0.2rem; text-align: center;}


@media only screen and (max-width:768px) {
  .contentsArea01 .wrap {padding: 70px 0 90px;}

  .contentsArea01 .btn1_item01,
  .contentsArea01 .btn1_item02 {font-size: 18px;  margin: 0 15px;} 
  .contentsArea01 .btn1_item01 p:before,
  .contentsArea01 .btn1_item02 p:before {right: 15px; width: 27px;}
}

@media only screen and (max-width:480px) {
  .contentsArea01 .wrap {padding: 50px 20px;}

  .contentsArea01 .btn1 {display: block;}
  .contentsArea01 .btn1_item01, .contentsArea01 .btn1_item02 {width: 100%; font-size: 16px;}
  .contentsArea01 .btn1_item01 {margin: 0 0 20px;}
  .contentsArea01 .btn1_item02 {padding: 12px 0; margin: 0;}

  .contentsArea01 .txtBox {margin-top: 30px; text-align: left;}
}


/*---------------------------------------------------------------

 contentsArea02

--------------------------------------------------------------- */
.bg02 {background-color: #f1f1f1;}
.contentsArea02 .wrap {max-width: 1352px; margin: 0 auto; padding: 60px 20px 110px;}

.contentsArea02 .btn2 {display: flex; flex-direction: row; text-align: center; justify-content: center; margin-bottom: 60px;}
.contentsArea02 .btn2 a {width: 100%; padding: 20px 30px;}
.contentsArea02 .btn2_item {position: relative; background-color: #e7f4fa; border: 1px solid #001e78; color: #001e78; font-size: 20px; font-weight: bold;
  margin: 0 20px; display: flex; align-items: center; justify-content: center; width: 30%; height: auto;} 

.contentsArea02 .btn2_item p:before {position: absolute; top: 0; right: 20px; display: block; content: '';
  width: 15px; height: 100%; background: url(../images/online_mtg/online_mtg-arrow_blue.svg) no-repeat right center / 100% auto;}

.contentsArea02 .online_inner {padding: 60px; margin-bottom: 60px; background-color: #fff;
  display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.contentsArea02 .online_inner:last-child {margin-bottom: 0;}

.contentsArea02 .online_inner figure {position: relative; width: 40%;}
.contentsArea02 .online_inner .txtBox {width: 55%;}
.contentsArea02 .online_inner .txtBox h2 {font-size: 32px; color: #001e78; font-weight: bold; margin-bottom: 30px;}
.contentsArea02 .online_inner .txtBox p {font-size: 17px; line-height: 1.8; letter-spacing: 0.1rem;}
.contentsArea02 .online_inner .txtBox p small {font-size: 12px; color: #008fa3;}

.contentsArea02 .online_inner figcaption {position: absolute; bottom: 0; right: 0; padding: 5px;
  color: #a0aace; font-size: 12px; line-height: 1; text-align: right; z-index: 3;}

@media only screen and (max-width:768px) {
  .contentsArea02 .wrap {padding-bottom: 80px;}
  .contentsArea02 .btn2_item {width: 40%;}
  .contentsArea02 .online_inner .txtBox h2 {font-size: 26px; margin-bottom: 15px;}

  .contentsArea02 .online_inner figure {width: 30%;}
  .contentsArea02 .online_inner .txtBox {width: 65%;}
}

@media only screen and (max-width:480px) {
  .contentsArea02 .wrap {padding: 0 20px 50px;}

  .contentsArea02 .btn2 {margin: 50px auto 30px;}
  .contentsArea02 .btn2_item {font-size: 14px;}
  .contentsArea02 .btn2_item p:before {right: 9px; width: 14px;}

  .contentsArea02 .online_inner {display: block; padding: 20px; margin-bottom: 20px;}
  .contentsArea02 .online_inner figure {width: 100%; margin-bottom: 30px;}
  .contentsArea02 .online_inner .txtBox {width: 100%;}
  .contentsArea02 .online_inner .txtBox h2 {font-size: 22px; margin-bottom: 25px;}
  .contentsArea02 .online_inner .txtBox p {font-size: 14px;}
  .contentsArea02 .online_inner .txtBox p small {display: inline-block; margin-top: 25px;}

  .contentsArea02 .online_inner figcaption {padding: 0;}
}

/*---------------------------------------------------------------

 contentsArea03

--------------------------------------------------------------- */
.bg03 {position: relative; background-image: url(../images/online_mtg/reservation_bg_pc.png); background-size: cover;}
.bg03_cap {position: absolute; bottom: 0; right: 0; padding: 10px;
  color: #fff; font-size: 12px; line-height: 1; text-align: right; z-index: 3;}

.contentsArea03 .wrap {max-width: 1200px; margin: 0 auto; padding: 60px 20px;}

.contentsArea03 .reservation {position: relative; height: 100%; text-align: center; color: #fff;}
.contentsArea03 .reservation_flex {display: flex; flex-direction: row; justify-content: space-around; align-items: center; padding: 55px 0; margin: 0 auto;}


.contentsArea03 .reservation_left{position: relative; width: 50%; margin-right: 2em;}
.contentsArea03 .reservation_right{width: 50%;}

.contentsArea03 .reservation_left::after {position: absolute; content: ""; top: 50%; left: 100%; width: 0.5px; height: 140%;
  margin: 0 2rem; background-color: #fff; transform: translate(-50%, -50%);}

.contentsArea03 .reservation_left h2 {position: relative; display: inline-block;
  font-size: 24px; padding: 0 30px; margin-bottom: 30px;}

.contentsArea03 .reservation_left h2::before {position: absolute; content: ""; left: 0; top: 0;
  width: 1px; height: 120%; background: #fff; border-radius: 3px; transform: rotate(-38deg);}
     
.contentsArea03 .reservation_left h2::after {position: absolute; content: ""; right: 0; top: 0;
  width: 1px; height: 120%; background: #fff; border-radius: 3px; transform: rotate(38deg);}

.contentsArea03 .reservation_left .btn1_item03 {position: relative; background-color: #008fa3;
  margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; width: 90%; height: auto;}
.contentsArea03 .reservation_left .btn1_item03 a {width: 100%; padding: 25px 30px;}
  .contentsArea03 .reservation_left .btn1_item03 p {color: #fff; font-size: 22px; text-align: center;}
.contentsArea03 .reservation_left .btn1_item03 p:before {position: absolute; top: 0; right: 20px; display: block; content: '';
  width: 30px; height: 100%; background: url(../images/online_mtg/online_mtg-arrow_white.svg) no-repeat right center / 100% auto;}

.contentsArea03 .reservation_left p {font-size: 16px; line-height: 1.8; letter-spacing: 0.1rem;}

.contentsArea03 .reservation_right p {font-size: 16px; line-height: 1.8; letter-spacing: 0.1rem;}

.contentsArea03 .reservation_right p.tel {font-size: 22px; margin: 20px auto;}
.contentsArea03 .reservation_right p.tel span {font-size: 40px;}


@media only screen and (max-width:768px) {
  .contentsArea03 .reservation_left .btn1_item03 a {padding: 15px 30px;}
  .contentsArea03 .reservation_left h2 {padding: 0px 20px; font-size: 20px;}
  .contentsArea03 .reservation_left .btn1_item03 p {font-size: 16px;}
}

@media only screen and (max-width:480px) {
  .bg03 {position: relative; background-image: url(../images/online_mtg/reservation_bg_sp.png); background-size: cover;}

  .contentsArea03 .reservation_flex {display: block; padding: 0;}
  .contentsArea03 .reservation_left {width: 100%; margin: 0 0 30px;}
  .contentsArea03 .reservation_left::after {position: absolute; content: ""; top: 100%; left: 50%;
    width: 100%; height: 0.5px; margin: 2rem 0; background-color: #fff; transform: translate(-50%, -50%);}

  .contentsArea03 .reservation_left .btn1_item03 {width: 100%;}
  .contentsArea03 .reservation_left .btn1_item03 p:before {right: 13px; width: 25px;}
  .contentsArea03 .reservation_left p {font-size: 14px; text-align: left;}
  .contentsArea03 .reservation_right {width: 100%; margin-top: 40px;}
  .contentsArea03 .reservation_right p {font-size: 14px;}

  .contentsArea03 .reservation_left .btn1_item03 a {padding: 20px 30px;}
  .contentsArea03 .reservation_left .btn1_item03 p {font-size: 16px;}
}


/*---------------------------------------------------------------

 contentsArea04

--------------------------------------------------------------- */
.bg04 {background-color: #fff;}
.contentsArea04 .wrap {max-width: 1352px; margin: 0 auto; padding: 100px 20px;}

.contentsArea04 .flow {text-align: center; margin: 0 auto;}
.contentsArea04 .flow h2 {font-size: 36px;}

.contentsArea04 .flow_flex {display: flex; flex-direction: row; justify-content: space-between; padding: 80px 0 60px; margin: 0 auto;}

.contentsArea04 .flow_box {position: relative; padding: 0 20px;}

.contentsArea04 .flow_box .flow_icon {position: absolute;  top: -20px; left: 40px; z-index: 1;}
.contentsArea04 .flow_box figcaption {position: absolute; bottom: 0; right: 0; padding: 10px;
  color: #fff; font-size: 12px; line-height: 1; text-align: right; z-index: 3;}

.contentsArea04 .flow_box h3 {font-size: 24px; color: #001e78; font-weight: bold; margin: 20px 0; letter-spacing: 0.1rem;}
.contentsArea04 .flow_box p {font-size: 16px; text-align: left; line-height: 1.8; letter-spacing: 0.1rem;}

.contentsArea04 .btn1_item04 {position: relative; background-color: #008fa3;
  margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; width: 37%; height: auto;}
.contentsArea04 .btn1_item04 a {width: 100%; padding: 30px 0;}
  .contentsArea04 .btn1_item04 p {color: #fff; font-size: 22px;}
.contentsArea04 .btn1_item04 p:before {position: absolute; top: 0; right: 20px; display: block; content: '';
  width: 30px; height: 100%; background: url(../images/online_mtg/online_mtg-arrow_white.svg) no-repeat right center / 100% auto;}


@media only screen and (max-width:768px) {
  .contentsArea04 .flow_box .flow_icon {left: 30px; width: 22%;}

  .contentsArea04 .btn1_item04 {width: 70%;}
}

@media only screen and (max-width:480px) {
  .contentsArea04 .wrap {padding: 50px 20px;}
  .contentsArea04 .flow h2 {font-size: 24px;}

  .contentsArea04 .flow_flex {display: block; padding: 60px 0 0;}
  .contentsArea04 .flow_box {padding: 0; margin-bottom: 60px;}
  .contentsArea04 .flow_box:last-child {margin-bottom: 0;}
  .contentsArea04 .flow_box h3 {font-size: 20px; margin: 15px 0;}

  .contentsArea04 .flow_box .flow_icon {top: -30px; left: 20px;}

  .contentsArea04 .btn1_item04 {width: 100%; margin: 35px auto 0;}
  .contentsArea04 .btn1_item04 a {padding: 20px 30px;}
  .contentsArea04 .btn1_item04 p {font-size: 16px;}
  .contentsArea04 .btn1_item04 p:before {right: 13px; width: 25px;}
}