@media only screen and (min-width: 768px) {
  #feature.anchor{padding-top: 140px; margin-top: -140px;}
}
@media only screen and (max-width: 767px) {
  #feature.anchor{padding-top: 40px; margin-top: -40px;}
}
.verCol{background: none !important;}
.wrapper {
 background: url(../img/common/bg_triangle.svg) no-repeat 0 0/100%;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
 .wrapper {
  background: url(../img/common/bg_triangle_sp.svg) no-repeat 0 0/100%
 }
}
.mvWrap .mvBox {
 position: relative
}
.mvWrap .mvBox .mvCopy {
 position: absolute;
 top: 10%;
 left: 6%
}
.mvWrap .mvBox .mvCopy p {
 font-size: 40px
}
@media only screen and (max-width: 767px) {
 .mvWrap .mvBox .mvCopy {
  left: 25px;
  top: 10%;
 }
 .mvWrap .mvBox .mvCopy p {
  font-size: 6vw
 }
}
.mvWrap .shapebox {
 position: absolute;
 pointer-events: none
}
.mvWrap .shapebox.shape01 {
 top: 0;
 left: 0;
 width: 8%
}
.mvWrap .shapebox.shape02 {
 bottom: 0;
 right: 40px;
 width: 18.4%
}
@media only screen and (max-width: 767px) {
 .mvWrap {
  padding: 25px;
  margin-bottom: 0
 }
 .mvWrap .mvCol {
  width: 100%
 }
 .mvWrap .shapebox.shape01 {
  bottom: 40%;
  left: 0;
  width: 15%;
  top: auto
 }
 .mvWrap .shapebox.shape02 {
  bottom: 0;
  right: 10px;
  width: 26%
 }
 .mvWrap .shapebox.shape03 {
  top: 10px;
  right: 30%;
  width: 13.4%
 }
}
.rowTitBox {
 text-align: center;
 margin-bottom: 60px
}
.rowTitBox .tit1 {
 font-size: 50px;
 letter-spacing: 6px
}
.rowTitBox .tit2 {
 font-size: 22px;
 letter-spacing: 1.5px
}
@media only screen and (max-width: 767px) {
 .rowTitBox {
  margin-bottom: 40px
 }
 .rowTitBox .tit1 {
  font-size: 30px;
  letter-spacing: 4px
 }
 .rowTitBox .tit2 {
  font-size: 12px;
  letter-spacing: 1px
 }
}
.btnBox {
 margin-top: 40px
}
.btnBox a {
 display: block;
 line-height: 1em;
 text-align: center;
 font-size: 18px;
 padding: 22px 60px;
 background: #fff;
 border: 2px solid #28c9b5;
 color: #28c9b5;
 position: relative
}
.btnBox a:before {
 content: "";
 position: absolute;
 right: 15px;
 top: calc(50% - 5px);
 padding: 10px 10px 0 0;
 border-top: 1px solid #28c9b5;
 border-right: 1px solid #28c9b5;
 transform: rotate(45deg)
}
.btnBox a:hover {
 opacity: .8
}
@media only screen and (max-width: 767px) {
 .btnBox {
  margin-top: 40px;
  padding: 0 20px
 }
 .btnBox a {
  font-size: 14px;
  padding: 20px 30px
 }
}
.introBnr {
 width: calc(100% - 50px)
}
.introBnr .introBnrSlider {
 max-width: 1100px;
 margin: 0 auto;
 padding: 0 30px
}
.introBnr .introBnrSlider .slick-slide {
 margin: 0 10px
}
.introBnr .introBnrSlider .slick-prev, .introBnr .introBnrSlider .slick-next {
 width: 30px;
 height: 30px;
 top: calc(50% - 15px);
 border-top: 1px solid #28c9b5;
 border-right: 1px solid #28c9b5
}
.introBnr .introBnrSlider .slick-prev::before, .introBnr .introBnrSlider .slick-next::before {
 content: none
}
.introBnr .introBnrSlider .slick-prev {
 left: 10px;
 transform: rotate(-135deg)
}
.introBnr .introBnrSlider .slick-next {
 right: 10px;
 transform: rotate(45deg)
}
.introBnr .introBnrSlider .slick-dots {
 left: 0;
 right: 0
}
.introBnr .introBnrSlider .slick-dots li {
 margin: 0;
 height: 10px
}
@media only screen and (max-width: 767px) {
 .introBnr .tit1 {
  padding: 0 20px
 }
 .introBnr .tit1 img {
  max-height: 18px
 }
 .introBnr .introBnrSlider {
  padding: 0
 }
 .introBnr .introBnrSlider .slick-slide {
  margin: 0
 }
 .introBnr .introBnrSlider .slick-dots {
  bottom: -15px
 }
 .introBnr .introBnrSlider .slick-dots li {
  margin: 0;
  height: 10px
 }
}
.moreLink {
 margin-top: 30px
}
.moreLink a {
 display: inline-block;
 line-height: 1em;
 font-size: 30px;
 padding: 3px 0 3px 90px;
 background: url(../img/common/icon_link_gr.svg) no-repeat 0 0/contain
}
.moreLink a:hover {
 transform: translateX(15px)
}
@media only screen and (max-width: 767px) {
 .moreLink {
  margin-top: 20px
 }
 .moreLink a {
  font-size: 20px;
  padding: 5px 0 5px 70px;
  background: url(../img/common/icon_link_gr.svg) no-repeat 0 0/contain
 }
 .moreLink a:hover {
  transform: translateX(15px)
 }
}
@media only screen and (max-width: 767px) {
 .main {
  overflow-x: hidden
 }
}
.row-1 {
 padding-bottom: 80px
}
.row-1 .introWrap {
 background: url(../img/common/shape_fukidashi_01.svg) no-repeat 50% 50%/contain;
 padding-bottom: 5vw;
 height: 32vw;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative
}
.row-1 .introWrap .inner {
 max-width: 745px;
 margin: auto
}
.row-1 .introWrap .inner p:nth-of-type(2) {
 text-indent: 1em
}
.row-1 .introWrap .inner p:nth-of-type(3) {
 text-indent: 2em
}
.row-1 .introWrap .inner .txt1 {
 font-size: 39px
}
.row-1 .introWrap .inner .txt2 {
 font-size: 45px
}
.row-1 .introWrap .imgBox {
 position: absolute;
 top: 90%;
 right: 0;
 width: 30%
}
@media only screen and (max-width: 767px) {
 .row-1 .introWrap {
  background: url(../img/common/shape_fukidashi_01_sp.svg) no-repeat 50% 50%/contain
 }
 .row-1 .introWrap .inner .txt1 {
  font-size: 3.5vw
 }
 .row-1 .introWrap .inner .txt2 {
  font-size: 4.5vw
 }
 .row-1 .introWrap .imgBox {
  top: 98%;
  right: -40px;
  width: 42%
 }
}
.row-2 {
 padding: 80px 0 0
}
.row-2 .tit1 {
 line-height: 1em;
 margin-bottom: 20px
}
.row-2 .tit1 img {
 max-height: 18px
}
@media only screen and (min-width: 767px) {
 .row-2 .topicsList {
  padding-right: 20vw
 }
}
.row-2 .topicsList dl {
 padding: 15px 0;
 border-bottom: 1px solid #28c9b5
}
.row-2 .topicsList dl dt {
 margin-bottom: 5px;
 font-size: 12px
}
.row-2 .topicsList dl dt time {
 margin-bottom: 10px;
 font-size: inherit
}
.row-2 .topicsList dl dd a, .row-2 .topicsList dl dd p {
 font-size: inherit
}
@media only screen and (max-width: 767px) {
 .row-2 {
  padding: 22px 0 0
 }
 .row-2 .topicsList dl dt {
  font-size: 10px
 }
 .row-2 .topicsList dl dd {
  font-size: 12px
 }
}
.row-3 {
 padding: 100px 0 0
}
.row-3 .inner {
 padding: 180px 0;
 background: url(../img/common/shape_03.svg) no-repeat 50% 50%/100%;
 flex-direction: row-reverse;
 justify-content: flex-end
}
.row-3 .inner .txtCol {
 flex-basis: 50%;
 text-align: center;
 transform: translateY(-80px)
}
.row-3 .inner .txtCol p {
 font-size: 43px;
 font-weight: bold
}
.row-3 .inner .txtCol p em {
 font-size: 1.2em;
 font-weight: bold
}
.row-3 .inner .imgCol {
 flex-basis: 25%
}
@media only screen and (max-width: 767px) {
 .row-3 {
  padding: 60px 0 0
 }
 .row-3 .inner {
  padding: 50px 0 20%;
  background: url(../img/common/shape_03_sp.svg) no-repeat center bottom/100%
 }
 .row-3 .inner .txtCol {
  transform: translateY(-50px)
 }
 .row-3 .inner .txtCol p {
  font-size: 6.2vw;
  font-weight: bold
 }
 .row-3 .inner .imgCol {
  padding: 0 10%
 }
}
.row-4 .core {
 padding: 0 0 100px;
 background-repeat: no-repeat;
 background-size: 315px, 205px;
 background-position: top 50% left 50%, bottom 20px left 40%;
 background-image: url(../img/common/shape_04.svg), url(../img/common/shape_05.svg)
}
.row-4 .box {
 align-items: center
}
.row-4 .box .imgCol {
 flex-basis: 50%
}
.row-4 .box .txtCol {
 flex-basis: calc(50% - 80px)
}
.row-4 .box .txtCol p {
 font-size: 14px;
 line-height: 1.8em
}
.row-4 .box .txtCol .tit1 {
 margin: 15px 0;
 font-size: 20px;
 font-weight: bold
}
.row-4 .box .txtCol .tit1 em {
 font-size: 1.45em;
 font-weight: bold
}
.row-4 .box .txtCol .tit2 {
 font-size: 15px;
 line-height: 1.4em
}
.row-4 .box .txtCol .tit2 span {
 font-size: inherit;
 line-height: inherit
}
@media only screen and (max-width: 767px) {
 .row-4 {
  padding: 0
 }
 .row-4 .box {
  align-items: center
 }
 .row-4 .box .imgCol {
  padding: 0 20px
 }
 .row-4 .box .txtCol {
  margin-top: 30px;
  flex-basis: calc(50% - 80px)
 }
 .row-4 .box .txtCol p {
  font-size: 13px
 }
 .row-4 .box .txtCol .tit1 {
  font-size: 15px
 }
 .row-4 .box .txtCol .tit2 {
  font-size: 15px
 }
 .row-4 .box .moreLink {
  text-align: right
 }
}
.row-5 {
 padding: 40px 0
}
.row-5 .btnMdOpen {
 display: block;
 cursor: pointer
}
.row-5 .titBox {
 text-align: center;
 padding: 60px 20px 35px;
 background: url(../img/common/shape_13.svg) no-repeat center bottom/417px;
 margin-bottom: 50px
}
.row-5 .titBox p {
 font-size: 49px;
 font-weight: bold
}
@media only screen and (max-width: 1120px)and (min-width: 768px) {
 .row-5 .titBox {
  padding: 4% 0 40px;
  margin-bottom: 2%
 }
 .row-5 .titBox p {
  font-size: 4vw
 }
}
@media only screen and (max-width: 768px) {
 .row-5 .titBox {
  padding: 4% 0 6%;
  background-size: 70%;
  margin-bottom: 3%
 }
 .row-5 .titBox p {
  font-size: 4vw
 }
}
.row-5 .bgWrap {
 position: relative
}
.row-5 .bgWrap > img {
 width: 100%
}
.row-5 .bgWrap .inner {
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column
}
@media only screen and (max-width: 767px) {
 .row-5 .bgWrap .inner {
  bottom: 11%
 }
}
.row-5 .bgWrap .inner .box {
 max-width: 800px;
 width: 78%;
 justify-content: center
}
.row-5 .bgWrap .inner .box > div {
 flex-basis: 50%
}
.row-5 .bgWrap .inner .box .imgCol {
 flex-basis: 65%
}
@media only screen and (max-width: 768px) {
 .row-5 .bgWrap .inner .box .imgCol {
  flex-basis: 55%
 }
}
.row-5 .bgWrap .inner .box .txtCol {
 flex-basis: 35%;
 padding: 40px 0;
 align-self: center
}
.row-5 .bgWrap .inner .box .txtCol p {
 font-weight: bold
}
.row-5 .bgWrap .inner .box .txtCol .txt1 {
 font-size: 22px;
 letter-spacing: .2em
}
.row-5 .bgWrap .inner .box .txtCol .txt2 {
 font-size: 16px
}
@media only screen and (max-width: 1140px)and (min-width: 768px) {
 .row-5 .bgWrap .inner .box .txtCol .txt1 {
  font-size: 2.1vw;
  letter-spacing: .1em
 }
 .row-5 .bgWrap .inner .box .txtCol .txt2 {
  font-size: 1.6vw
 }
}
@media only screen and (max-width: 768px) {
 .row-5 .bgWrap .inner .box .txtCol {
  flex-basis: 45%;
  padding: 7% 0
 }
 .row-5 .bgWrap .inner .box .txtCol .imgCol {
  flex-basis: 55%
 }
 .row-5 .bgWrap .inner .box .txtCol .txt1 {
  font-size: 3.5vw;
  letter-spacing: .1em
 }
 .row-5 .bgWrap .inner .box .txtCol .txt2 {
  font-size: 2.2vw
 }
}
.row-5 .bgWrap .inner .box .colL .txtCol {
 align-self: flex-start
}
.row-5 .bgWrap .inner .box .colR .txtCol {
 align-self: flex-end
}
@media only screen and (min-width: 768px) {
 .row-5 .bgWrap .inner .box .colL .txtCol {
  transform: translateX(-30px)
 }
 .row-5 .bgWrap .inner .box .colR .txtCol {
  transform: translateX(30px)
 }
}
@media only screen and (max-width: 768px) {
 .row-5 .bgWrap .inner .box .colR {
  margin-top: -25%
 }
}
.row-5 .bgWrap .inner .btnWrap {
 margin-top: 30px
}
.row-5 .bgWrap .inner .btnWrap p {
 cursor: pointer;
 display: inline-block;
 line-height: 1.5em;
 font-weight: bold;
 font-size: 24px;
 padding: 10px 0 10px 90px;
 background: url(../img/common/icon_link_pk.svg) no-repeat 0 50%/62px
}
.row-5 .bgWrap .inner .btnWrap p em {
 font-size: 1.1em;
 font-weight: bold
}
@media only screen and (max-width: 1140px)and (min-width: 768px) {
 .row-5 .bgWrap .inner .btnWrap {
  margin-top: 3%
 }
 .row-5 .bgWrap .inner .btnWrap p {
  font-size: 2.2vw;
  padding: 0 0 0 65px;
  background-size: 50px
 }
}
@media only screen and (max-width: 768px) {
 .row-5 .bgWrap .inner .btnWrap {
  margin-top: 3%
 }
 .row-5 .bgWrap .inner .btnWrap p {
  font-size: .85em;
  padding: 10px 0 10px 50px;
  background-size: 32px
 }
 .row-5 .bgWrap .inner .btnWrap p em {
  font-size: 1.1em
 }
}
.row-5 .modalLayer {
 display: none;
 z-index: 100;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: url(../img/top/btn_modal_close.svg) #28c9b5 no-repeat bottom 15px center;
 cursor: pointer
}
.row-5 .modalWrap {
 display: none;
 z-index: 150;
 position: fixed;
 top: 60px;
 left: 50%;
 transform: translateX(-50%);
 bottom: 60px;
 overflow-y: scroll;
 max-width: 1130px;
 width: 100%
}
.row-5 .modalInner {
 background: #fff;
 cursor: none;
 pointer-events: none
}
.row-5 .modalInner .colL, .row-5 .modalInner .colR {
 flex-basis: 50%
}
.row-5 .modalInner .colR {
 background: #e9f8f8
}
.row-5 .modalInner .pdBox {
 padding: 60px 40px
}
.row-5 .modalInner div:not(.titBox) p.txt {
 font-size: 14px
}
.row-5 .modalInner .tit1 {
 text-align: center;
 font-size: 15px;
 font-weight: bold;
 margin-bottom: 1em
}
.row-5 .modalInner .txt2 {
 font-size: 14px
}
.row-5 .modalInner .titLine {
 padding: 0 30px;
 display: flex;
 align-items: center
}
.row-5 .modalInner .titLine p {
 color: #e71e79;
 padding: 20px 40px 20px 90px;
 font-size: 25px;
 background: url(../img/top/txt_q.svg) no-repeat left 30px top 50%/50px;
 min-height: 50px
}
.row-5 .modalInner .titLine::before, .row-5 .modalInner .titLine::after {
 content: "";
 height: 1px;
 background-color: #28c9b5;
 flex-grow: 1
}
.row-5 .modalInner .box01 .keyBox {
 align-items: center;
 margin-bottom: 40px
}
.row-5 .modalInner .box01 .keyBox .imgCol {
 flex-basis: 41%
}
.row-5 .modalInner .box01 .keyBox .txtCol {
 flex-basis: calc(59% - 30px)
}
.row-5 .modalInner .box01 .keyBox .txtCol .txt1 {
 font-size: 18px
}
.row-5 .modalInner .box01 .keyBox .txtCol .txt2 {
 font-size: 36px;
 font-weight: bold
}
@media only screen and (max-width: 1000px)and (min-width: 767px) {
 .row-5 .modalInner .box01 .keyBox .txtCol .txt1 {
  font-size: 2.2vw
 }
 .row-5 .modalInner .box01 .keyBox .txtCol .txt2 {
  font-size: 3.6vw
 }
}
.row-5 .modalInner .box02 {
 text-align: center
}
.row-5 .modalInner .box02 .txt1 {
 font-weight: bold;
 font-size: 1.4em;
 margin-bottom: 1em
}
.row-5 .modalInner .box03 img {
 width: 100%
}
.row-5 .modalInner .btnMdClose a {
 display: block;
 padding: 15px;
 text-align: center;
 background: #28c9b5;
 cursor: pointer
}
.row-5 .modalInner .btnMdClose a:hover {
 opacity: 1
}
.row-5 .modalInner .btnMdClose a:hover img {
 opacity: .8
}
@media only screen and (min-width: 768px) {
 .row-5 .modalInner .titLine {
  background: linear-gradient(to right, #fff 0%, #fff 50%, #E9F8F8 50%, #E9F8F8 100%)
 }
 .row-5 .modalInner .titLine.bgTR {
  border-image-source: linear-gradient(to top, #fff 0%, #fff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  border-image-slice: 0 fill;
  border-image-outset: 0 0 0 0
 }
 .row-5 .modalInner .titLine.bgBR {
  border-image-source: linear-gradient(to bottom, #fff 0%, #fff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  border-image-slice: 0 fill;
  border-image-outset: 0 0 0 0
 }
}
@media only screen and (max-width: 767px) {
 .row-5 {
  padding: 60px 0 0
 }
 .row-5 .modalInner .titBox p {
  font-size: 4vw
 }
 .row-5 .modalInner .pdBox {
  padding: 40px 30px
 }
 .row-5 .modalInner p {
  font-size: 11px
 }
 .row-5 .modalInner .tit1 {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 1em
 }
 .row-5 .modalInner .titLine {
  padding: 0
 }
 .row-5 .modalInner .titLine p {
  padding: 15px 10px 15px 50px;
  font-size: 17px;
  background: url(../img/top/txt_q.svg) no-repeat left 15px top 50%/29px;
  min-height: 30px
 }
 .row-5 .modalInner .titLine::before, .row-5 .modalInner .titLine::after {
  content: "";
  height: 1px;
  background-color: #28c9b5;
  flex-grow: 1
 }
 .row-5 .modalInner .box01 .keyBox {
  align-items: center;
  margin-bottom: 40px
 }
 .row-5 .modalInner .box01 .keyBox .imgCol {
  flex-basis: 50%
 }
 .row-5 .modalInner .box01 .keyBox .txtCol {
  flex-basis: calc(50% - 10px)
 }
 .row-5 .modalInner .box01 .keyBox .txtCol p {
  font-weight: bold
 }
 .row-5 .modalInner .box01 .keyBox .txtCol .txt1 {
  font-size: 12px
 }
 .row-5 .modalInner .box01 .keyBox .txtCol .txt2 {
  font-size: 18px
 }
}
@media only screen and (max-width: 767px)and (max-width: 1000px)and (min-width: 767px) {
 .row-5 .modalInner .box01 .keyBox .txtCol .txt1 {
  font-size: 2.2vw
 }
 .row-5 .modalInner .box01 .keyBox .txtCol .txt2 {
  font-size: 3.6vw
 }
}
@media only screen and (max-width: 767px) {
 .row-5 .modalInner .box02 {
  text-align: center
 }
 .row-5 .modalInner .box02 .txt1 {
  font-weight: bold;
  font-size: 1.4em;
  margin-bottom: 1em
 }
}
@media only screen and (max-width: 767px) {
 .row-5 .modalInner .box03 img {
  width: 100%
 }
}
@media only screen and (max-width: 767px) {
 .row-5 .modalInner .btnMdClose a {
  display: block;
  padding: 15px;
  text-align: center;
  background: #28c9b5;
  cursor: pointer
 }
 .row-5 .modalInner .btnMdClose a:hover {
  opacity: 1
 }
 .row-5 .modalInner .btnMdClose a:hover img {
  opacity: .8
 }
}
.row-6 .core {
 padding: 100px 0;
 background-repeat: no-repeat;
 background-size: 192px, 211px;
 background-position: top 0 right 10%, bottom 0 right 20%;
 background-image: url(../img/common/shape_06.svg), url(../img/common/shape_07.svg)
}
.row-6 .box {
 align-items: center
}
.row-6 .box .imgCol {
 flex-basis: 50%
}
.row-6 .box .txtCol {
 flex-basis: calc(50% - 80px)
}
.row-6 .box .txtCol p {
 font-size: 14px;
 line-height: 1.8em
}
.row-6 .box .txtCol .tit1 {
 margin: 15px;
 font-size: 20px;
 font-weight: bold
}
.row-6 .box .txtCol .tit1 em {
 font-size: 1.45em;
 font-weight: bold
}
.row-6 .box .txtCol .tit2 {
 font-size: 15px;
 line-height: 1.4em
}
.row-6 .box .txtCol .tit2 span {
 font-size: inherit;
 line-height: inherit
}
@media only screen and (max-width: 767px) {
 .row-6 .core {
  background-size: 140px, 130px
 }
 .row-6 .box .imgCol {
  padding: 0 20px;
  margin-bottom: 40px
 }
 .row-6 .box .txtCol p {
  font-size: 13px
 }
 .row-6 .box .moreLink {
  text-align: right
 }
}
.row-7 {
 padding: 0 0
}
.row-7 .titBox {
 transform: translateY(-25%)
}
.row-7 .txtBox p {
 font-size: 14px
}
.row-7 .txtBox p.tit1 {
 font-size: 40px;
 letter-spacing: .12em;
 font-weight: bold;
 margin-bottom: 15px;
 font-feature-settings: "palt"1;
 -webkit-font-feature-settings: "palt"
}
.row-7 .txtBox p.tit2 {
 font-size: 30px;
 font-weight: bold
}
.row-7 .txtBox p.tit3 {
 font-size: 22px;
 font-weight: bold
}
.row-7 .txtBox p.cap {
 margin-top: 10px
}
.row-7 .txtBox p.moreLink {
 margin-top: 10px
}
.row-7 .txtBox p.moreLink a {
 font-size: 20px;
 font-weight: bold;
/* padding: 3px 0 3px 60px*/
  line-height: 2em;
  line-height: 2em;
}
@media only screen and (max-width: 767px) {
 .row-7 .txtBox p {
  font-size: 13px
 }
 .row-7 .txtBox p.tit1 {
  font-size: 22px
 }
 .row-7 .txtBox p.tit2, .row-7 .txtBox p.tit3 {
  font-size: 18px
 }
 .row-7 .txtBox p.moreLink {
  margin-top: 10px;
  text-align: right
 }
 .row-7 .txtBox p.moreLink a {
  font-size: 18px;
   line-height: 1.5em;
  font-weight: bold
 }
}
.row-7 .bgLine .label {
 margin-bottom: 30px
}
.row-7 .bgLine .bgGy {
 padding: 20px 0
}
@media only screen and (min-width: 768px) {
 .row-7 .bgLine {
  background: url(../img/common/bg_line.svg) no-repeat top 80px left 10%/49.705882%
 }
 .row-7 .bgLine .boxH {
  position: relative
 }
 .row-7 .bgLine .boxH#feature01 {
  padding-top: 75%
 }
 .row-7 .bgLine .boxH#feature01 .box01 {
  background-repeat: no-repeat;
  background-size: 128px;
  background-position: bottom 100px left 52%;
  background-image: url(../img/common/shape_08.svg)
 }
 .row-7 .bgLine .boxH#feature02 {
  padding-top: 93%
 }
 .row-7 .bgLine .boxH#feature02 .box02 {
  padding: 80px 0;
  background-repeat: no-repeat;
  background-size: 196px, 182px;
  background-position: top 40px left 0, top 0 right 0;
  background-image: url(../img/common/shape_10.svg), url(../img/common/shape_09.svg)
 }
 .row-7 .bgLine .boxH#feature03 {
  padding-top: 69%
 }
 .row-7 .bgLine .boxH#feature04 {
  padding-top: 73%
 }
 .row-7 .bgLine .boxH#feature05 {
  padding-top: 75%
 }
 .row-7 .bgLine .boxH .rowInner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
 }
}
@media only screen and (max-width: 767px) {
 .row-7 .bgLine .label {
  width: 90px;
  margin-bottom: 0;
  padding-bottom: 20px
 }
}
.row-7 .rowInner .colL {
 flex-basis: 40%
}
.row-7 .rowInner .colR {
 flex-basis: 50%
}
.row-7 #feature02 .chatLink a {
 display: inline-block
}
@media only screen and (min-width: 768px) {
.row-7 #feature03 .rowInner .colL {
 width: 40%
}
.row-7 #feature03 .rowInner .colR {
 width: 72%;
  position: absolute;
  top: -22%; right: 0
}
}
@media only screen and (max-width: 980px) and (min-width: 768px) {
  .row-7 #feature03 .rowInner .colR {
    width: 50%;
    top: auto;
    bottom: -10%;
  }
}

.row-7 #feature04 .imgCol .imgBox {
 position: relative
}
.row-7 #feature04 .imgCol .imgBox .label2 {
 position: absolute;
 top: -20px;
 left: -20px
}
@media only screen and (max-width: 767px) {
 .row-7 {
  padding: 0
 }
 .row-7 .titBox {
  padding: 0 2%;
  height: 100px;
  overflow: visible
 }
 .row-7 .rowInner {
  padding-top: 40px;
  position: relative;
  z-index: 1
 }
 .row-7 .rowInner::before {
  content: "";
  border-right: 1px solid #06a0b5;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 44px;
  bottom: 0
 }
 .row-7 .rowInner .colL {
  margin-top: 60px
 }
 .row-7 #feature01 .rowInner {
  padding-top: 0
 }
 .row-7 #feature02 .chatLink {
  text-align: center
 }
 .row-7 #feature02 .chatLink img {
  max-width: 80%
 }
 .row-7 #feature03 .imgCol {
  margin-top: 20px;
  text-align: right
 }
 .row-7 #feature03 .imgCol img {
  max-width: 92%
 }
 .row-7 #feature04 .imgCol {
  margin-top: 20px;
  margin-left: -20px
 }
 .row-7 #feature04 .imgCol .imgBox .label2 {
  top: -20px;
  left: 20px;
  width: 30%
 }
}
.row-8 {
 padding: 100px 0
}
.row-8 .mapBox {
 z-index: 2;
 position: relative;
 margin-left: auto;
 width: 90%
}
.row-8 .mapBox .addImg > div {
 position: absolute
}
.row-8 .mapBox .addImg > div.img01 {
 bottom: 50%;
 right: 10%;
 width: 18.94%
}
.row-8 .mapBox .addImg > div.img02 {
 bottom: 0;
 right: 90%;
 width: 15.26%
}
.row-8 .mapBox .pointLink a {
 display: inline-block
}
.row-8 .mapBox .pointLink > div {
 position: absolute
}
.row-8 .mapBox .pointLink .link01 {
 bottom: 4%;
 right: 22.6%;
 width: 21.33%
}
.row-8 .mapBox .pointLink .link02 {
 bottom: 50.6%;
 right: 48.3%;
 width: 22.71%
}
.row-8 .mapBox .pointLink > img {
 width: 100%
}
@media only screen and (max-width: 767px) {
 .row-8 .mapBox {
  width: 95%
 }
 .row-8 .mapBox .addImg > div {
  position: absolute
 }
 .row-8 .mapBox .addImg > div.img01 {
  bottom: 70%;
  right: 5%;
  width: 21.94%
 }
 .row-8 .mapBox .addImg > div.img02 {
  bottom: 0;
  right: 82%;
  width: 18.26%
 }
 .row-8 .mapBox .pointLink .link01 {
  bottom: 11%;
  right: .7%;
  width: 45%
 }
 .row-8 .mapBox .pointLink .link02 {
  bottom: 50.6%;
  right: 29.3%;
  width: 45%
 }
}
.row-8 .linkBox {
 background: #fff;
 text-align: center;
 padding: 10px;
 border-top: 1px solid #06a0b5;
 border-bottom: 1px solid #06a0b5
}
@media only screen and (max-width: 767px) {
 .row-8 {
  padding: 60px 0
 }
}
.row-9 {
 padding: 100px 0
}
.row-9 p {
 color: #fff;
 font-size: 14px
}
.row-9 .rowTitBox {
 text-align: left;
 position: relative;
 padding: 0 5%;
 z-index: 1;
 margin-bottom: 80px
}
.row-9 .rowTitBox .tit1 {
 line-height: 1em
}
.row-9 .rowTitBox .txt {
 font-weight: bold;
 position: absolute;
 bottom: -95px;
 left: 5%;
 font-size: 19px;
 z-index: 500
}
.row-9 .sliderWrap {
 position: relative;
 padding-left: 5%
}
.row-9 .sliderWrap .campusSlider {
 position: relative
}
.row-9 .sliderWrap .campusSlider .slick-dots {
 top: -120px;
 right: 100px;
 bottom: auto;
 left: auto;
 width: auto
}
.row-9 .sliderWrap .campusSlider .slick-dots li {
 width: auto;
 height: auto;
 margin: 0;
 display: none
}
.row-9 .sliderWrap .campusSlider .slick-dots li.slick-active {
 display: block
}
.row-9 .sliderWrap .campusSlider .slick-dots li button {
 color: #fff;
 font-size: 17px;
 line-height: 1em;
 width: auto;
 height: auto;
 font-weight: bold;
 opacity: 1
}
.row-9 .sliderWrap .campusSlider .slick-dots li button::before {
 opacity: 1;
 font-weight: inherit;
 color: inherit;
 position: static;
 content: none;
 font-weight: bold;
 font-size: inherit
}
.row-9 .sliderWrap .campusSlider .slick-dots li button:nth-of-type(-n+9)::before {
 content: "0"
}
.row-9 .sliderWrap .campusSlider .slick-prev, .row-9 .sliderWrap .campusSlider .slick-next {
 top: -110px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 width: 12px;
 height: 12px
}
.row-9 .sliderWrap .campusSlider .slick-prev {
 left: auto;
 right: 150px
}
.row-9 .sliderWrap .campusSlider .slick-next {
 right: 70px
}
.row-9 .sliderWrap .txtBox {
 margin-top: 30px
}
@media only screen and (max-width: 767px) {
 .row-9 {
  padding: 60px 0 0
 }
 .row-9 .slick-prev {
  left: 10px
 }
 .row-9 .slick-next {
  right: 10px
 }
 .row-9 .rowTitBox {
  margin-bottom: 50px
 }
 .row-9 .rowTitBox img {
  max-width: 256px
 }
 .row-9 .rowTitBox .tit1 {
  line-height: 1em
 }
 .row-9 .rowTitBox .txt {
  position: absolute;
  bottom: -60px;
  font-size: 12px
 }
 .row-9 .sliderWrap {
  padding-bottom: 40px
 }
 .row-9 .sliderWrap .campusSlider {
  position: relative
 }
 .row-9 .sliderWrap .campusSlider .slick-dots {
  top: -55px;
  right: 35px
 }
 .row-9 .sliderWrap .campusSlider .slick-dots li button {
  font-size: 12px
 }
 .row-9 .sliderWrap .campusSlider .slick-prev, .row-9 .sliderWrap .campusSlider .slick-next {
  top: -45px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  width: 8px;
  height: 8px
 }
 .row-9 .sliderWrap .campusSlider .slick-prev {
  left: auto;
  right: 70px
 }
 .row-9 .sliderWrap .campusSlider .slick-next {
  right: 20px
 }
}
.row-10 {
 padding: 0;
 border-image-source: linear-gradient(to bottom, #28C9B5 0%, #28C9B5 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
 border-image-slice: 0 fill;
 border-image-outset: 0 0 0 0
}
.row-10 .bnrList {
 text-align: center
}
.row-10 .bnrList li {
 width: 90%;
 max-width: 690px;
 display: inline-block
}
.row-10 .bnrList li a {
 display: inline-block
}
@media only screen and (max-width: 767px) {
 .row-10 {
  padding: 0
 }
}
.row-11 {
 padding: 80px 0;
 background-repeat: no-repeat;
 background-size: 313px, 194px;
 background-position: top 0 left 0, bottom 0 right 40px;
 background-image: url(../img/common/shape_11.svg), url(../img/common/shape_12.svg)
}
.row-11 .titBox {
 text-align: center;
 margin-bottom: 40px
}
.row-11 .titBox .tit {
 font-size: 36px;
 margin-bottom: 30px
}
.row-11 .titBox .txt {
 font-size: 15px
}
.row-11 .movieList {
 padding: 0 50px
}
.row-11 .movieSlider {
 max-width: 577px;
 margin: 0 auto;
 padding: 0 50px
}
.row-11 .movieSlider .slick-prev:before, .row-11 .movieSlider .slick-next:before {
 content: none
}
.row-11 .movieSlider .slick-prev, .row-11 .movieSlider .slick-next {
 width: 50px;
 height: 50px;
 top: calc(50% - 25px);
 border-top: 1px solid #28c9b5;
 border-right: 1px solid #28c9b5
}
.row-11 .movieSlider .slick-prev {
 left: 0;
 transform: rotate(-135deg)
}
.row-11 .movieSlider .slick-next {
 right: 0;
 transform: rotate(45deg)
}

.row-11 .movieSlide{margin: 0 5px;}

@media only screen and (max-width: 767px) {
 .row-11 {
  background-size: 120px, 115px;
  background-position: top 0 left 0, bottom -10px right -10px
 }
 .row-11 .titBox {
  text-align: center;
  margin-bottom: 40px
 }
 .row-11 .titBox .tit {
  font-size: 24px;
  margin-bottom: 10px
 }
 .row-11 .titBox .txt {
  font-size: 11px;
   margin: 0 -20px;
    
 }
 .row-11 .movieList {
  padding: 0
 }
 .row-11 .movieSlider {
  padding: 0 30px
 }
 .row-11 .movieSlider .slick-prev, .row-11 .movieSlider .slick-next {
  width: 20px;
  height: 20px;
  top: calc(50% - 10px)
 }
 .row-11 .movieSlider .slick-prev {
  left: 0;
  transform: rotate(-135deg)
 }
 .row-11 .movieSlider .slick-next {
  right: 0;
  transform: rotate(45deg)
 }
}
.slick-dotted.slick-slider {
 margin-bottom: 0
}
@media only screen and (max-width: 767px) {
 .hdLogoWrap a img {
  max-height: 45px
 }
} /*# sourceMappingURL=top.css.map */
/* Add 20230319 */
#chatLinkLine {
 cursor: pointer;
}
#modalLine {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 1000;
 display: none;
}
#modalLine .overlay {
 background: rgba(0, 0, 0, 0.2);
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 100;
}
#modalLine .outer {
 max-width: 845px;
 width: 94%;
 max-height: 86vh;
 overflow: auto;
 background: #00ce98;
 padding: 60px 45px 35px;
 z-index: 110;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
}
#modalLine .inner {
 background: #fff;
 padding: 30px;
}
#modalLine .inner p {
 max-width: 570px;
 margin: 0 auto 30px;
}
#modalLine .inner ul {
 display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 360px;
  margin: 0 auto;
}
#modalLine .inner li:nth-of-type(1){width: 49.2%;}
#modalLine .inner li:nth-of-type(2){width: 29.2%;}
#modalLine .close {
 position: absolute;
 top: 0;
 right: 0;
 width: 36px;
 height: 36px;
 text-align: center;
 line-height: 36px;
 cursor: pointer;
 transition: .3s;
}
#modalLine .close:hover {
 background: rgba(255, 255, 255, .7);
}


/* strengths */
.strengths{ max-width: 1080px; margin: 10rem auto;}
.strengths .tit{ margin-bottom: 20px; font-size: clamp(20px, 2.604vw, 34px); font-weight: bold; position: relative; text-align: center; }
.strengths .tit::before,
.strengths .tit::after{ content: ''; display: block; width: calc(100% - 75%); height: 1px; background: #00ce98; position: absolute; top: 50%;}
.strengths .tit::before{ left: 0;}
.strengths .tit::after{ right: 0;}
.strengths .txt{ margin-bottom: 30px; font-size: clamp(14px, 1.822vw, 20px); font-weight: bold; text-align: center; }

@media only screen and (max-width: 767px) {
    .strengths{ margin: 0 20px 60px;}
    .strengths .tit{ margin-bottom: 20px; padding: 0.5rem;}
    .strengths .tit::before,
    .strengths .tit::after{ width: 100%;}
    .strengths .tit::before{ top: 0; left: 0; }
    .strengths .tit::after{ top: unset; right: 0; bottom: 0;}
    .strengths .txt{ margin-bottom: 20px;}
}