@charset "UTF-8";

/* --------------------
   .cont_ttl
-------------------- */
.cont_ttl .txtBox {
   margin-bottom: 1em;
   position: relative;
   z-index: 2;
}
@media (min-width: 961px) {
   .cont_ttl {
      display: flex;
      align-items: flex-end;
   }
   .cont_ttl .txtBox {
      min-height: 16em;
   }
}

@media (max-width: 768px) {
   .cont_ttl .imgBox {
      margin: 0 5.5vw;
   }
}


/* --------------------
   .box
-------------------- */
.box {
   background: #c7e4f5;
   padding: 0 5.5vw 1em;
   margin: 0 2.5vw 1em;
   overflow: hidden;
}
.box .box_header {
   margin: 0 -5.5vw 1.5em;
   padding: 1.5em 0 0;
   background: rgb(186,223,210);
   background: linear-gradient(0deg, rgba(186,223,210,0) 0%, rgba(186,223,210,1) 100%);
}
.box .box_header p {
   margin-bottom: .5em;
   padding: 0 5.5vw;
   font-weight: 500;
}
.box + p {
   margin: 0 2.5vw 1.5em;
}

@media (max-width: 768px) {
   .box {
      margin: 0 5.5vw 1em;
   }
}

/* --------------------
   .card
-------------------- */
.card {
   margin-top: 1em;
   margin-bottom: 1em;
   background: transparent;
}
.card .card_header .ttl {
   color: #398acf;
}
.card .card_header .ttl + .imgBox img {
  object-position: 60% 50%;
}
.card .card_header .imgBox.imgStatic {
   height: 12em;
}
.card .btnBox .buyBtn {
   border-color: #398acf!important;
   background: #398acf!important;
}
.card .btnBox .buyBtn:hover {
   border-color: #398acf!important;
   background: #FFF!important;
   color: #398acf!important;
}

.card .more_btnBox .buyBtn {
   border-color: #005aba!important;
   background: #005aba!important;
}
.card .more_btnBox .buyBtn:hover {
   border-color: #005aba!important;
   background: #FFF!important;
   color: #005aba!important;
}
.card .more_btnBox .ttl {
   margin-top: 1.25em;
   margin-bottom: 0;
   text-align: center;
   color: #005aba;
   font-weight: 500;
   line-height: 1.3;
}

.card .more_btnBox2 .buyBtn {
   border-color: #5c6174!important;
   background: #5c6174!important;
}
.card .more_btnBox2 .buyBtn:hover {
   border-color: #5c6174!important;
   background: #FFF!important;
   color: #5c6174!important;
}
.card .more_btnBox2 .ttl {
   margin-top: 1.25em;
   margin-bottom: 0;
   text-align: center;
   color: #5c6174;
   font-weight: 500;
   line-height: 1.3;
}

.card .more_btnBox3 .buyBtn {
   border-color: #0098e1!important;
   background: #0098e1!important;
}
.card .more_btnBox3 .buyBtn:hover {
   border-color: #0098e1!important;
   background: #FFF!important;
   color: #0098e1!important;
}
.card .more_btnBox3 .ttl {
   margin-top: 1.25em;
   margin-bottom: 0;
   text-align: center;
   color: #0098e1;
   font-weight: 500;
   line-height: 1.3;
}


@media (max-width: 500px) {
   .box .card {
      margin-right: calc((5.5vw + 1.25rem)*-1);
      margin-left: calc((5.5vw + 1.25rem)*-1);
      max-width: inherit;
   }
}

/* --------------------
   #intro
-------------------- */
#intro {
   background: #FFF url(../img/0__intro_bg.png) no-repeat center bottom / auto 105%;
}
#intro p {
   margin-bottom: 2em;
}

/* --------------------
   #toc
-------------------- */
#toc li {
   padding: .5em .25em;
}

/* --------------------
   #cont1
-------------------- */
#cont1 {
   background: #95cceb;
}
@media (max-width: 768px) {
   #cont1 .cont_ttl .imgBox {
      transform: translateX(5.5vw);
   }
}

/* --------------------
   #cont2
-------------------- */
#cont2 {
   background: #95cceb;
}
@media (max-width: 768px) {
   #cont2 .cont_ttl .imgBox {
      transform: translateX(5.5vw);
   }
}


/* --------------------
   #cont3
-------------------- */
#cont3 {
   background: #95cceb;
}
@media (min-width: 961px) {
   #cont3 .cont_ttl .imgBox {
      transform: translateX(-2.5vw);
   }
}
@media (max-width: 768px) {
   #cont3 .cont_ttl .imgBox {
      transform: translateX(-5.5vw);
   }
}

/* --------------------
   #cont4
-------------------- */
#cont4 {
   background: #95cceb;
}