@charset "UTF-8";

/* --------------------
   #toc
-------------------- */
#toc ul {
   display: flex;
   flex-wrap: wrap;
   margin-right: -.75em;
   margin-left: -.75em;
}
#toc ul li {
   flex: 0 0 25%;
   padding: .75em;
}
@media (max-width: 768px) {
   #toc ul li {
      flex: 0 0 50%;
   }
}


/* --------------------
   .card
-------------------- */
.card {
   margin-bottom: 1em;
   background: transparent;
}
.card .card_header .imgBox img {
  object-position: 60% 50%;
}

/* --------------------
   .wave
-------------------- */
.wave-top {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}
.wave-bottom {
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
}

/* --------------------
   #cont1
-------------------- */
#cont1 {

}

/* --------------------
   #cont2
-------------------- */
#cont2 {
   background: #c8ddeb;
   padding-top: calc(10vw + 3em);
   padding-bottom: 10vw;
   position: relative;
}
#cont2 > h2 {
   color: #0088bc;
   font-weight: 500;
   letter-spacing: .08em;
}

#cont2 .card .btnBox .buyBtn {
   border-color: #0088bc;
   background: #0088bc;
}
#cont2 .card .btnBox .buyBtn:hover {
   border-color: #0088bc;
   background: #FFF;
   color: #0088bc;
}



/* --------------------
   #cont4
-------------------- */
#cont4 {
   background: #c6dee2;
   padding-top: calc(10vw + 3em);
   padding-bottom: 10vw;
   position: relative;
}
#cont4 > h2 {
   color: #58b4b3;
   font-weight: 500;
   letter-spacing: .08em;
}

#cont4 .card .btnBox .buyBtn {
   border-color: #58b4b3;
   background: #58b4b3;
}
#cont4 .card .btnBox .buyBtn:hover {
   border-color: #58b4b3;
   background: #FFF;
   color: #58b4b3;
}


/* --------------------
   #cont5
-------------------- */
#cont5 .card .btnBox .buyBtn {
   border-color: #7ab5dc;
   background: #7ab5dc;
}
#cont5 .card .btnBox .buyBtn:hover {
   border-color: #7ab5dc;
   background: #FFF;
   color: #7ab5dc;
}