.mvWrap {
 position: relative;
 padding-left: 20px;
 z-index: 1
}
.mvWrap .bnr_flow {
 position: absolute;
 top: 5%;
 right: 5%;
 z-index: 2;
 width: min(20vw, 240px)
}
.mvWrap .mvCopy {
 flex-basis: 29%;
 z-index: 2
}
.mvWrap .mvCopy img {
 transform: translate(35%, 20%)
}
.mvWrap .mvBox {
 flex-basis: 71%;
 position: relative
}
.mvWrap .mvBox .addImg {
 position: absolute;
 bottom: -5%;
 left: 0;
 width: min(21%, 232px)
}
@media only screen and (max-width: 767px) {
  .mvWrap .mvCopy img {width: 160%; max-width: inherit; transform: translate(0, -3%)}
  .mvWrap .mvBox .addImg{bottom: -12%;}
}

.titRow {
 text-align: center;
 padding: 0 10%
}
.row-01 .titRow {
 justify-content: flex-start
}
.row-01 .tabWrap ul {
 justify-content: center
}
.row-01 .tabWrap ul li:nth-of-type(2) {
 margin-left: 20px
}
.row-01 .txt {
 margin-top: 40px;
 font-size: 16px;
 text-align: center
}
@media only screen and (min-width: 768px) {
 .row-01 .titRow .lower-tit01 {
  margin-right: 10%
 }
}
@media only screen and (max-width: 767px) {
 .row-01 .tabWrap ul li {
  flex-basis: calc((100% - 10px)/2)
 }
 .row-01 .tabWrap ul li:nth-of-type(2) {
  margin-left: 10px
 }
 .row-01 .txt {
  margin-top: 20px;
  font-size: 14px;
  text-align: left
 }
}
.row-02 {
 padding: 80px 0
}
.row-02 .bg {
 padding: 60px 0;
 border-image-source: linear-gradient(#589AAE, #589AAE);
 border-image-slice: 0 fill;
 border-image-outset: 0 100vw
}
.row-02 .txtBox {
 text-align: center;
 margin-bottom: 40px
}
.row-02 .txtBox .txt {
 color: #fff;
 margin-top: 20px
}
.row-02 .inner {
 background: #fff;
 padding: 40px
}
.row-02 .inner ul {
 flex-wrap: wrap
}
.row-02 .inner ul li {
 flex-basis: calc((100% - 40px)/2)
}

.row-02 .inner ul li:nth-of-type(n+3) {
 margin-top: 40px
}
.row-02 .inner ul li p.txt {
 text-align: center;
 line-height: 1.6em;
}
.row-02 .inner ul li p.txtBu {
 color: #589aae;
 margin-bottom: 10px;
}
.row-02 .inner .ifrBox{position: relative; width: 100%;}
.row-02 .inner .ifrBox:after{content: ''; padding-bottom: 56.25%; display: block;}
.row-02 .inner .ifrBox iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
@media only screen and (max-width: 767px) {
 .row-02 {
  padding: 40px 0 0
 }
 .row-02 .txtBox {
  text-align: left
 }
 .row-02 .btnBox {
  margin-top: 60px;
  text-align: center
 }
 .row-02 .btnBox .moreLink a p {
  font-size: 20px;
  height: 45px;
  padding: 0 15px
 }
 .row-02 .inner {
  padding: 20px
 }
 .row-02 .inner ul {
  flex-wrap: wrap
 }
 .row-02 .inner ul li {
  flex-basis: calc((100% - 10px)/2);
  display: flex;
  flex-direction: column
 }
 .row-02 .inner ul li:nth-of-type(n+3) {
  margin-top: 30px
 }
 .row-02 .inner ul li .imgBox {
  margin-top: auto
 }
}
@media only screen and (max-width: 480px) {
  .row-02 .inner ul{display: block;}
  .row-02 .inner ul li{flex-basis: 100%; margin-bottom: 20px;}
}
.row-03 {
 padding: 80px 0
}
.row-03 .bg {
 padding: 60px 0;
 border-image-source: linear-gradient(#73C3AF, #73C3AF);
 border-image-slice: 0 fill;
 border-image-outset: 0 100vw
}
.row-03 .txtBox {
 text-align: center;
 margin-bottom: 40px
}
.row-03 .txtBox .txt {
 color: #fff;
 margin-top: 20px
}
.row-03 .inner .tit {
 font-size: 34px;
 font-weight: bold;
 color: #fff;
 margin-bottom: 20px;
 text-align: center
}
.row-03 .inner .txt {
 text-align: left;
 font-size: 21px;
 padding-left: 80px;
 margin: 30px 0 10px
}
.row-03 ul li {
 text-align: left
}
.row-03 ul li:nth-child(n+2) {
 margin-top: 15px
}
.row-03 ul li a {
 display: block;
 line-height: 1.1em;
 font-size: clamp(14px, 1.5vw, 18px);
 padding: 0 0 0 80px;
 background-repeat: no-repeat;
 background-position: 0 50%;
 background-size: 62px;
 background-image: url(../img/common/icon_link_wh.svg)
}
.row-03 ul li a:hover {
 transform: translateX(15px)
}
.row-03 ul li a p {
 color: inherit;
 font-size: inherit;
 display: flex;
 align-items: center;
 height: 45px;
 width: 100%;
 padding: 0 15px;
 background: #fff;
 border-radius: 30px
}
.row-03 .col-01, .row-03 .col-02 {
 flex-basis: 50%;
 padding: 40px 4%
}
.row-03 .col-01 {
 background: #939cc5
}
.row-03 .col-01 a {
 color: #939cc5
}
.row-03 .col-02 {
 background: #f099a5
}
.row-03 .col-02 a {
 color: #f099a5
}
.row-03 .btnBox {
 margin-top: 60px;
 text-align: center
}
.row-03 .btnBox .moreLink a {
 font-size: inherit;
 max-width: 500px;
 margin: 0 auto
}
.row-03 .btnBox .moreLink a, .row-03 .btnBox .moreLink a p {
 height: 65px
}
.row-03 .btnBox .moreLink a p {
 color: #74c6b2;
 justify-content: center;
 font-size: 24px;
 display: flex;
 align-items: center;
 width: 100%;
 padding: 0 20px;
 background: #fff;
 border-radius: 40px
}
.row-03 .btnBox .moreLink .txt {
 color: #fff
}
.row-03 .btnBox .txt {
 color: #fff
}
@media only screen and (max-width: 767px) {
 .row-03 {
  padding: 40px 0 0
 }
 .row-03 .inner {
  width: 100%
 }
 .row-03 .inner .tit {
  font-size: 22px;
  margin-bottom: 0
 }
 .row-03 .inner .txt {
  font-size: 18px;
  padding-left: 55px;
  margin: 30px 0 10px
 }
 .row-03 .col-01, .row-03 .col-02 {
  padding: 40px 20px
 }
 .row-03 ul li:nth-child(n+2) {
  margin-top: 15px
 }
 .row-03 ul li a {
  font-size: min(3vw,16px);
  padding: 0 0 0 55px;
  background-size: 45px
 }
 .row-03 ul li a:hover {
  transform: translateX(10px)
 }
 .row-03 ul li a p {
  color: inherit;
  font-size: inherit;
  display: flex;
  align-items: center;
  height: 42px;
  width: 100%;
  padding: 10px 15px
 }
 .row-03 .btnBox {
  margin-top: 30px
 }
 .row-03 .btnBox .moreLink a, .row-03 .btnBox .moreLink a p {
  height: 45px
 }
 .row-03 .btnBox .moreLink a p {
  font-size: 20px;
  padding: 0 15px
 }
} /*# sourceMappingURL=weboc.css.map */