@charset "utf-8";

.insta{
  display:none;
}

.main::before,
.lecturer-wrap::before{
  display:none;
}

.fv{
  height:100vh;
  height:100svh;
  color:#fff;
  position:relative;
  overflow:hidden;
}

.fv img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  top:0;
  left:0;
  z-index:-1;
}

.fv-txt{
  width:90%;
  position:absolute;
  left:5%;
  bottom:7.5%;
  z-index:10;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

.fv-txt h1{
  font-size:1rem;
  margin-bottom:20px;
  font-weight:500;
}

.fv-txt h1 strong{
  font-weight:500;
}

.fv-txt p{
  font-size:clamp(2.5rem, 1.136rem + 4.55vw, 6.25rem);
  width: fit-content;
  position: relative;
  animation-delay:0.5s;
}

.fv-txt p::before{
  content:"";
  position:absolute;
  width: 15%;
  aspect-ratio: 133 / 109;
  left: 30%;
  top: 37%;
  z-index:-1;
  background:url(https://j-connect-kyoto.com/system_panel/uploads/images/20260115170714468394.png) no-repeat center/contain;
}

.fv-txt p::after{
  content:"";
  position:absolute;
  width: 15%;
  aspect-ratio: 133 / 109;
  left: 102%;
  top: 75%;
  z-index:-1;
  background:url(https://j-connect-kyoto.com/system_panel/uploads/images/20260115170714468394.png) no-repeat center/contain;
}

.fv-txt p strong{
  display:block;
  transform: translateX(10%);
}

.top-news{
  padding:3.5rem 0 2.5rem;
  background:#fff;
}

.top-news .container{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width:1345px;
  padding-right:5% !important;
}

.top-news .review-title{
  width:160px;
  text-align:center;
}

.top-news-right{
  width:calc(100% - 240px);
}

.top-news-right .webgene-item{
  padding-bottom:8px;
  margin-bottom:20px;
  border-bottom:1px solid #004EA4;
}

.top-news-right .newsDetail-header{
  display:flex;
  gap:1rem;
  margin-bottom:1rem;
}

.top-news-right .newsDetail-header h3{
  font-size:1rem;
}

.top-news-right .newsDetailImg{
  width:250px;
  margin:0 0 1rem;
}

.top-news-right .newsDetailTxt{
  font-size:14px;
}

.top-about{
  margin:2.5rem 0;
  position: relative;
}

.top-about::before{
  content: "";
  position: absolute;
  width: 38%;
  aspect-ratio: 1474/1084;
  right: 0;
  top: 2rem;
  z-index: -1;
  background: url(https://j-connect-kyoto.com/system_panel/uploads/images/20260115153900508600.png) no-repeat center / contain;
}

.top-about-wrap{
  width:80%;
  margin:0 5% 0 auto;
  display:flex;
  position:relative;
  justify-content: end;
}

.top-about-wrap > img{
  width:64%;
}

.top-about-txt{
  width:38%;
  position:absolute;
  left:0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-weight:bold;
}

.top-about-txt h3{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  margin-bottom:2.5rem;
}

.top-about-txt > h3 + p{
  line-height:2;
}

.top-about-txt .arrow-btn{
  margin:2.5rem 0 0;
}

.top-feature{
  padding:2.5rem 0;
  background:#fff;
}

.top-feature .container{
  max-width:1345px;
}

.top-feature-wrap{
  display:flex;
  justify-content: space-between;
  margin-bottom:2.5rem;
}

.top-feature-item{
  width:31%;
  font-weight:bold;
}

.top-feature-item > p:first-child{
  text-align:center;
  font-size:14px;
}

.top-feature-item img{
  width: 75%;
  margin: 1.5rem auto 2.5rem;
  max-width: 260px;
}

.top-feature-item h2{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  margin-bottom:20px;
  text-align:center;
}

.top-feature-item h2 + p{
  line-height:2;
}

.lecturer{
  position:relative;
}

.lecturer::after{
  content:"";
  position:absolute;
  width:32%;
  aspect-ratio:1302/1314;
  left:0;
  top:3rem;
  z-index: -1;
  background:url(https://j-connect-kyoto.com/system_panel/uploads/images/20260115150522944168.png) no-repeat center/contain;
}

.lecturer-wrap{
  max-width: 1152px;
}

.lecturer-wrap2{
  margin: 2.5rem 0 0 auto;
}

.lecturer-wrap img {
  width: 30%;
}

.lecturer-txt {
  width: 66%;
}

.top-service{
  margin:200px 0 4rem;
  padding:0 0 5rem;
  position:relative;
}

.top-service::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  z-index:-1;
  width:15%;
  height:100%;
  background:#004EA4;
}

.top-service::after {
  content: "";
  position: absolute;
  right: 0;
  top: 41%;
  z-index: -1;
  width: 31%;
  aspect-ratio:590/1180;
  background: url(https://j-connect-kyoto.com/system_panel/uploads/images/20260115165124329984.png) no-repeat center/contain;
}

.top-service .review-title{
  text-align:center;
}

.top-service-bg{
  border-radius:100px 100px 0 0;
  background:#fff;
  padding:3rem 5% 4rem;
  width:90%;
  margin:3.5rem auto 5rem;
}

.top-service-top{
  display:flex;
  align-items:center;
  gap:20px;
  max-width:1345px;
  margin:0 auto 4rem;
}

.top-service-top img{
  width:13%;
}

.top-service-top h3{
  font-size: clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  margin-right:20px;
}

.top-service-top h3 strong{
  font-size: 1rem;
  display: block;
}

.top-service-top p{
  max-width:55%;
  font-weight:bold;
}

.top-service-wrap{
  max-width:1345px;
  margin:0 auto ;
  display:flex;
  justify-content: space-between;
}

.top-service-wrap .top-service-item{
  width:calc((100% - 2rem ) / 2);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}

.top-service-item{
  max-width:1345px;
  margin:0 auto ;
  font-weight:bold;
}

.top-service-item h4{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  margin-bottom:1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-service-item h4::before{
  content:"";
  width:15px;
  height:15px;
  background:#004EA4;
  border-radius:3px;
}

.top-service-item > div> p:first-of-type{
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:2px solid #004EA4;
}

.top-service-box div{
  margin:1rem 0 20px;
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
}

.top-service-box div p{
  padding:4px 2rem;
  background:#F5F6FA;
  border-radius:1rem;
}

.top-service-item .arrow-btn{
  width:100%;
  justify-content: center;
}

.top-service-top + .top-service-item .arrow-btn{
  max-width:650px;
  margin:2.5rem auto 0;
}

.top-service-bg:last-child{
  margin-bottom:0;
}

.top-swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.insta{
  background:#004EA4;
  padding:2.5rem 0 4rem;
  color:#fff;
  position:relative;
  min-height:500px;
}

.insta::before {
  content: "";
  position: absolute;
  width: 30%;
  left: 0;
  top: 15%;
  background: url(https://j-connect-kyoto.com/system_panel/uploads/images/20260115120426998618.png) no-repeat center / contain;
  aspect-ratio: 1376 / 1004;
}

.insta .review-title{
  text-align:center;
  color: #fff;
}

.top-blog{
  padding-top:10rem;
}

.top-blog-wrap{
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.top-blog-left{
  width:200px;
}

.top-blog-right{
  width:calc(100% - 250px);
}

.top-blog .newsDetailImg{
  position:relative;
  width: 20%;
}

.top-blog .newsDetailImg > img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  top:0;
  left:0;
  z-index:10;
}

.top-blog .webgene-item{
  padding:20px 0;
  border-bottom:1px solid #004EA4;
}

.top-blog .webgene-blog a{
  padding:20px;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.top-blog .webgene-blog a:hover{
  background:#EBEDF5;
}

.top-blog .newsTextWrap{
  width: 75%;
}

.top-blog .newsItemText{
  display:flex;
  align-items: center;
  gap:1rem;
  margin-bottom:1rem;
}

.top-blog .newsItemCate{
  padding:4px 1rem;
  background:#fff;
  border-radius:8px;
  font-size:14px;
}

.top-blog .newsItemTit{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
}

.top-blog-right + .arrow-btn{
  display:none;
}

.top-feature-item:nth-child(2){
  animation-delay:0.3s;
}

.top-feature-item:nth-child(3){
  animation-delay:0.6s;
}

.lecturer-txt h3 + p strong{
  font-weight:bold;
}

@media screen and (max-width: 1400px) {
  .top-about-wrap{
    width:85%;
  }
  .top-about-txt{
    width: 40%;
    position: relative;
    left: auto;
    top: auto;
    transform:none;
  }
  .top-about-wrap > img {
    width: 60%;
  }
  .top-about-txt h3,
  .top-about-txt .review-title{
    margin-bottom: 1.5rem;
  }
  .top-service-top{
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 1279px) {
  .top-feature-wrap{
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    max-width: 450px;
    margin: 0 auto 2.5rem;
  }
  .top-feature-item{
    width: 100%;
  }
  .top-feature-item img{
    margin: 1.5rem auto 1.5rem;
  }
  .top-feature-item:nth-child(2),
  .top-feature-item:nth-child(3){
    animation-delay:0s;
  }
}

@media screen and (max-width: 1024px) {
  .top-news .container{
    flex-direction: column;
    padding-right: 0% !important;
  }
  .top-news-right,
  .top-about-txt,
  .top-about-wrap > img{
    width: 100%;
  }
  .top-news .review-title {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .top-about-wrap{
    flex-direction: column-reverse;
  }
  .lecturer-txt,
  .top-service-top p{
    width:100%;
    max-width:none;
  }
  .lecturer-wrap2{
    margin: 4rem 0 0 auto;
  }
  .top-service {
    margin: 100px 0 4rem;
  }
  .top-service-top,
  .top-service-wrap{
    flex-wrap: wrap;
  }
  .top-service-wrap{
    gap:3rem;
  }
  .top-service-wrap .top-service-item{
    width:100%;
    gap: 1rem;
  }
  .top-blog-wrap{
    flex-direction: column;
    align-items: flex-start;
  }
  .top-blog-right{
    width:100%;
  }
  .top-blog-left .arrow-btn{
    display:none;
  }
  .top-blog-left .review-title{
    margin:0;
  }
  .top-blog-right + .arrow-btn{
    display:flex;
    margin-top: 3rem;
  }
  .lecturer-wrap img {
    width: 50%;
  }
}


@media screen and (max-width: 767px) {
  .fv-txt p{
    font-size: 2.25rem;
  }
  .fv-txt p::after{
    left: 80%;
  }
  .fv-txt p::before{
    left:21%;
  }
  .fv-txt p strong{
    transform: translateX(0%);
  }
  .top-news-right .newsDetail-header{
    gap: 4px;
    margin-bottom: 0.5rem;
    flex-direction: column;
  }
  .top-about-wrap {
    width: 100%;
    margin: 0 auto;
    align-items: center;
  }
  .top-about-txt{
    width:90%;
  }
  .top-about-txt h3, .top-about-txt .review-title {
    margin-bottom: 0.5rem;
  }
  .lecturer-wrap{
    gap: 1.5rem;
  }
  .top-service-bg{
    border-radius: 50px 50px 0 0;
    padding: 2rem 5% 2rem;
    width: 95%;
    margin: 2.5rem auto 3rem;
  }
  .top-service-top{
    gap: 4px;
    margin-bottom: 1rem;
  }
  .top-service-top img{
    width: 100px;
  }
  .top-service-top h3{
    margin-right: 0;
    width: 100%;
  }
  .top-service-box div{
    margin: 0.5rem 0 10px;
    gap: 1rem;
  }
  .top-service-box div p{
    padding: 4px 1rem;
    font-size: 12px;
  }
  .top-blog {
    padding-top: 5rem;
  }
  .top-blog .webgene-blog a{
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .top-blog .newsDetailImg,
  .top-blog .newsTextWrap{
    width: 100%;
  }
  .top-about-txt h3{
    font-size:18px;
  }
  .top-service-top h3 strong {
    font-size: 14px;
  }
}