/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */


/* ----------------------------------------------------------
Style for PCs
---------------------------------------------------------- */
@media screen and (min-width: 1025px) {


.aboutline01 {
  width:100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.abl01cc {
  width:45%;
  padding-left:5%;
}
.abl01img {
  width:45%;
  height: auto;
  display: block;
  position: relative;
}
.abl01img_01 {
  width: 40%;
  position: absolute;
  top: 0;
  right: 10%;
  z-index: 2;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
}
.abl01img_01 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl01img_01 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.abl01img .abl01img_02 {
  width:70%;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
  margin-top:20%;
}
.abl01img_02 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl01img_02 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.aboutline02 {
  width:100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom:50px
}
.abl02cc {
  width:45%;
  padding-right:5%;
  order:2;
}
.abl02img {
  width:45%;
  height: auto;
  display: block;
  position: relative;
  order:1;
}
.abl02img_01 {
  width: 40%;
  position: absolute;
  bottom: 0;
  left: 5%;
  z-index: 2;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
}
.abl02img_01 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl02img_01 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.abl02img .abl02img_02 {
  width:70%;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
  margin-top:0%;
  margin-left:auto;
  margin-bottom: 15%;
}
.abl02img_02 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl02img_02 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.aboutline03bg {
  width:100%;
  height: auto;
  display: flex;
  align-items: center;
  background-image: url(../img/aboutus/about03bg.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.ablcov01 {
  width:100%;
  height: auto;
  display: block;
  background-image: url(../img/aboutus/aboutimg_cov01.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.ablcov02 {
  width:100%;
  height: auto;
  display: flex;
  align-items: center;
  background-image: url(../img/aboutus/aboutimg_cov02.webp);
  background-repeat: no-repeat;
  background-position: 0 100.1%;
  background-size: 100% auto;
}

.abl03cc {
  width: 50%;
  height: auto;
  display: block;
  padding:15% 0 10% 10%;
}
.abl03cc p {
  color:var(--color-white);
}


.aboutline04 {
  width:100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.abl04cc {
  width:45%;
  margin-right:5%;
  order:2;
}
.abl04img {
  width:45%;
  height: auto;
  display: block;
  position: relative;
  padding-left:5%;
  order:1;
}
.abl04img_01 {
  width: 80%;
  height: auto;
  margin:0 0 25% 0;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
}
.abl04img_01 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl04img_01 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.abl04img .abl04img_02 {
  width:40%;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}
.abl04img_02 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl04img_02 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}



}

/* ----------------------------------------------------------
Style for iPad Pro
---------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {

.aboutline01 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 70px;
}
.abl01cc {
  width:100%;
  height: auto;
  display: block;
  margin-bottom: 40px;
}
.abl01img {
  width:80%;
  height: auto;
  display: block;
  position: relative;
  margin:0 auto;
}
.abl01img_01 {
  width: 40%;
  position: absolute;
  top: 0;
  right: 10%;
  z-index: 2;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
}
.abl01img_01 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl01img_01 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.abl01img .abl01img_02 {
  width:70%;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
  margin-top:20%;
}
.abl01img_02 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl01img_02 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.aboutline02 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom:50px;
}
.abl02cc {
  width:100%;
  height: auto;
  display: block;
  margin-bottom: 40px;
}
.abl02img {
  width:80%;
  height: auto;
  display: block;
  position: relative;
  margin:0 auto;
  order:2;
}
.abl02img_01 {
  width: 40%;
  position: absolute;
  bottom: 0;
  left: 5%;
  z-index: 2;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
}
.abl02img_01 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl02img_01 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.abl02img .abl02img_02 {
  width:70%;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
  margin-top:0%;
  margin-left:auto;
  margin-bottom: 15%;
}
.abl02img_02 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl02img_02 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.aboutline03bg {
  width:100%;
  height: auto;
  display: flex;
  align-items: center;
  background-image: url(../img/aboutus/about03bg.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.ablcov01 {
  width:100%;
  height: auto;
  display: block;
  background-image: url(../img/aboutus/aboutimg_cov01.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.ablcov02 {
  width:100%;
  height: auto;
  display: flex;
  align-items: center;
  background-image: url(../img/aboutus/aboutimg_cov02.webp);
  background-repeat: no-repeat;
  background-position: 0 100.1%;
  background-size: 100% auto;
}

.abl03cc {
  width: 50%;
  height: auto;
  display: block;
  padding:15% 0 10% 10%;
}
.abl03cc p {
  color:var(--color-white);
}


.aboutline04 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.abl04cc {
  width:100%;
  height: auto;
  display: block;
  order:2;
}
.abl04img {
  width:80%;
  height: auto;
  display: block;
  position: relative;
  margin:0 auto 70px;
  order:1;
}
.abl04img_01 {
  width: 80%;
  height: auto;
  margin:0 0 25% 0;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
}
.abl04img_01 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl04img_01 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.abl04img .abl04img_02 {
  width:40%;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
  position: absolute;
  bottom: 5%;
  right: 5%;
  z-index: 2;
}
.abl04img_02 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl04img_02 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

}


/* ----------------------------------------------------------
Style for Smartphone
---------------------------------------------------------- */
@media screen and (max-width: 768px) {

  .aboutline01 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 70px;
}
.abl01cc {
  width:100%;
  height: auto;
  display: block;
  margin-bottom: 40px;
}
.abl01img {
  width:100%;
  height: auto;
  display: block;
  position: relative;
  margin:0 auto;
}
.abl01img_01 {
  width: 40%;
  position: absolute;
  top: 0;
  right: 10%;
  z-index: 2;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
}
.abl01img_01 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl01img_01 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.abl01img .abl01img_02 {
  width:70%;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
  margin-top:20%;
}
.abl01img_02 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl01img_02 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.aboutline02 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom:00px;
}
.abl02cc {
  width:100%;
  height: auto;
  display: block;
  margin-bottom: 20px;
}
.abl02img {
  width:100%;
  height: auto;
  display: block;
  position: relative;
  margin:0 auto;
  order:2;
}
.abl02img_01 {
  width: 40%;
  position: absolute;
  bottom: 0;
  left: 5%;
  z-index: 2;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
}
.abl02img_01 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl02img_01 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.abl02img .abl02img_02 {
  width:70%;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
  margin-top:0%;
  margin-left:auto;
  margin-bottom: 15%;
}
.abl02img_02 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl02img_02 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.aboutline03bg {
  width:100%;
  height: auto;
  display: flex;
  align-items: center;
  background: #2A7B9B;
background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 100%);
}
.ablbgm {
width:100%;
  height: auto;
  display: block;
  background-image: url(../img/aboutus/about03bg_m.webp);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}
.ablcov01 {
  width:100%;
  height: auto;
  display: block;
  background-image: url(../img/aboutus/aboutimg_cov01.webp);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% auto;
}
.ablcov02 {
  width:100%;
  height: auto;
  display: flex;
  align-items: center;
  background-image: url(../img/aboutus/aboutimg_cov02.webp);
  background-repeat: no-repeat;
  background-position: 0 100.1%;
  background-size: 100% auto;
}

.abl03cc {
  width: 100%;
  height: auto;
  display: block;
  padding:25% 5% 80% 5%;
}
.abl03cc p {
  color:var(--color-white);
}


.aboutline04 {
  width:100%;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.abl04cc {
  width:100%;
  height: auto;
  display: block;
  order:2;
}
.abl04img {
  width:100%;
  height: auto;
  display: block;
  position: relative;
  margin:0 auto 40px;
  order:1;
}
.abl04img_01 {
  width: 80%;
  height: auto;
  margin:0 0 25% 0;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
}
.abl04img_01 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl04img_01 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.abl04img .abl04img_02 {
  width:40%;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0px 20px 10px rgba(0,0,0,0.2));
  position: absolute;
  bottom: 5%;
  right: 5%;
  z-index: 2;
}
.abl04img_02 .circle-wrap {
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
}
.abl04img_02 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

}