@charset "utf-8";

.about-wrap{
  display:flex;
  max-width: 1345px;
  margin: 0 auto 5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.about-wrap img{
  width:43%;
}

.about-txt{
  width:52%;
  font-weight:bold;
}

.about-txt p{
  line-height:2;
}

.about-txt h3{
  font-size:clamp(1.25rem, 1.068rem + 0.61vw, 1.75rem);
  margin-bottom:2.5rem;
}

.feature-wrap{
  width:80%;
  margin:4rem auto 7.5rem;
  max-width:1152px;
  display:flex;
  justify-content: space-between;
  text-align: center;
}

.feature-item{
  width:30%;
  border:2px solid #004EA4;
  border-radius:999vh;
  padding:3.25%;
  aspect-ratio:1/1;
}

.feature-item div{
  aspect-ratio:1/1;
  border:5px solid #004EA4;
  border-radius:999vh;
  background:#fff;
  font-weight:bold;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 5%;
}

.feature-item div p:first-child{
  font-size:clamp(1.5rem, 1.023rem + 1.59vw, 2.813rem);
}

.feature-item div p:last-child{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
}

.pillar{
  position:relative;
}

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

.pillar .container{
  max-width:1345px;
}

.pillar-img{
  max-width:670px;
  width:80%;
  aspect-ratio:663/646;
  margin:0 auto 5rem;
  position:relative;
}

.pillar-img img{
  opacity:0;
}

.pillar-img.fadeUp img{
  animation: fadeInUp 1s forwards;
}

.pillar-img1{
  width:55%;
  margin:0 auto 0 10%;
  position: relative;
  z-index: 10;
}

.pillar-img2{
  position:absolute;
  top: 34%;
  left: 1%;
  width:50.6%;
  animation-delay:0.5s !important;
}

.pillar-img3{
  position:absolute;
  top: 10%;
  right: 0%;
  width: 49%;
  z-index: 5;
  animation-delay:1s !important;
}

.pillar-img4{
  position:absolute;
  bottom:2%;
  left:35%;
  width:52%;
  animation-delay:1.5s !important;
}

.pillar-txt{
  max-width:1152px;
  margin:0 auto 5rem;
}

.pillar-txt-item{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  font-weight:bold;
  margin-bottom:4rem;
}

.pillar-txt-ttl{
  display:flex;
  width: 35%;
  align-items: center;
  gap: 1rem;
}

.pillar-txt-ttl p{
  aspect-ratio:1/1;
  border-radius:999vh;
  background:#64BAE0;
  color:#fff;
  font-size:clamp(1.25rem, 0.886rem + 1.21vw, 2.25rem);
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pillar-txt-item:nth-child(2) .pillar-txt-ttl p{
  background:#2D96C4;
}

.pillar-txt-item:nth-child(3) .pillar-txt-ttl p{
  background:#004EA4;
}

.pillar-txt-item:nth-child(4) .pillar-txt-ttl p{
  background:#2F75C3;
}

.pillar-txt-ttl h4{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  width:calc(100% - 60px - 1rem);
}

.pillar-txt-ttl h4 strong{
  font-size:1rem;
  display:block;
}

.pillar-txt-item > p{
  width:57%;
}

.style{
  margin-bottom:7.5rem;
  position: relative;
  z-index: 10;
}

.style .container{
  max-width:1152px;
}

.style h3{
  color:#fff;
  background:#004EA4;
  border-radius:1.5rem;
  text-align:center;
  margin-bottom:2.5rem;
  font-size:clamp(1.125rem, 1.08rem + 0.15vw, 1.25rem);
  padding: 0.5rem;
}

.style-wrap{
  display: flex;
  justify-content: space-between;
}

.style-item{
  width:30%;
  max-width:315px;
  background:#fff;
  padding:2rem 1rem 3rem;
  text-align:center;
  font-weight:bold;
  font-size:clamp(0.875rem, 0.784rem + 0.3vw, 1.125rem);
  border:5px solid #004EA4;
  border-radius:10px;
}

.style-item h4{
  font-size:clamp(1.25rem, 1.068rem + 0.61vw, 1.75rem);
  margin-bottom:10px;
}

.style-item img{
  height:95px;
  width:fit-content;
  margin:2rem auto 0;
}

.data{
  padding:5rem 0;
  background:#fff;
}

.data .container{
  max-width:1152px;
}

.data .review-title{
  text-align:center;
}

.data-wrap{
  display:flex;
  justify-content: space-between;
  text-align: center;
}

.data-item{
  width:30%;
  max-width:350px;
  padding:1rem;
  border:2px solid #CECECE;
  border-radius:10px;
  font-size:clamp(0.875rem, 0.784rem + 0.3vw, 1.125rem);
}

.data-item h3{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
}

.data-item h3 + p{
  margin:8px 0;
}

.data-item strong{
  font-family: "Zalando Sans Expanded", sans-serif;
  font-size:clamp(2rem, 0.909rem + 3.64vw, 5rem);
  line-height: 1;
  margin-right: 4px;
}

.lecturer{
  margin:7.5rem 0;
  overflow: hidden;
}

.lecturer .container{
  max-width:1345px;
}

.lecturer-wrap{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  position:relative;
}

.lecturer-wrap::before{
  content:"Lecturer 01";
  position:absolute;
  width: 19%;
  left: -22%;
  top:0;
  padding-bottom:8px;
  border-bottom:1px solid #004EA4;
  text-align:right;
  font-weight:bold;
}

.lecturer-wrap2::before{
  content:"Lecturer 02";
}

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

.lecturer-txt{
  width:68%;
}

.lecturer-txt{
  font-weight:bold;
}

.lecturer-txt p{
  line-height:2;
}

.lecturer-txt h3{
  margin:0 0 20px;
  font-size:clamp(1.25rem, 1.068rem + 0.61vw, 1.75rem);
}

.lecturer-txt h3 + p{
  border-bottom:1px solid #004EA4;
  padding-bottom:1rem;
  margin-bottom:1rem;
}

.history{
  margin:4rem 0;
}

.history h3{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  margin-bottom:20px;
}

.history-wrap{
  display: flex;
  justify-content: space-between;
  margin-top:50px;
  position: relative;
}

.history-wrap::before{
  content:"";
  position:absolute;
  width:100%;
  height:2px;
  background:#004EA4;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index:-1;
}

.history-item{
  width:31%;
  padding:1.5rem 1rem;
  background:#fff;
  border:2px solid #004EA4;
  border-radius:5px;
  position:relative;
}

.history-item .label{
  position:absolute;
  width:3.5rem;
  height:3.5rem;
  background:#004EA4;
  color:#fff;
  text-align:center;
  font-weight:bold;
  font-size:20px;
  border-radius:999vh;
  top: -2rem;
  z-index:-1;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  line-height: 1.5;
}

.history-item h4{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  margin-bottom:1rem;
}

.history p{
  line-height:2;
}

.greeting h4{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  margin-bottom:20px;
}

.company-info{
  margin:2.5rem auto 0;
  max-width:960px;
}

.company-info-list{
  display:flex;
  padding:1.5rem 0;
  border-bottom:1px solid #B7B7B7;
}

.company-info-list p:first-child{
  color:#004EA4;
  font-weight:bold;
  width:30%;
}

.company-info-list p:last-child{
  color:#000000;
  width:70%;
}

.company-info-list a{
  color:#000;
  text-decoration: underline;
}

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

.mentor{
  padding:5rem 0;
  background:#fff;
}

.mentor .container{
  max-width:1152px;
}

.mentor-top{
  text-align:center;
}

.mentor-top h2{
  font-size:clamp(1.25rem, 0.795rem + 1.52vw, 2.5rem);
}

.mentor-top h3{
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  width: fit-content;
  margin: 1rem auto 1.5rem;
  position: relative;
  padding: 0 1.5rem;
}

.mentor-top h3::before, .mentor-top h3::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: #004EA4;
  border-radius: 3px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.mentor-top h3::before {
  left: 0;
}

.mentor-top h3::after{
  right: 0;
}

.mentor .service-point-wrap{
  background:#F5F6FA;
  margin:2.5rem auto 4rem;
}

.can-wrap{
  display:flex;
  justify-content: space-between;
}

.can-wrap > img{
  width:40%;
}

.can-txt{
  width:55%;
}

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

.can-txt p + h4{
  margin-top:2.5rem;
}

.can-txt h4::before{
  content:"";
  display:block;
  width:1rem;
  height:1rem;
  border-radius:3px;
  background:#004EA4;
}

.can .border-title span{
  background:#fff;
}

.price{
  margin:4rem 0;
}

.price h3{
  font-size:20px;
}

.mentor-table-bg{
  margin:1rem 0;
  overflow: scroll;
}

.mentor-table-bg + p{
  text-align:right;
}

.mentor-table{ 
  min-width:800px;
}

.mentor-table-list{
  display:flex;
}

.mentor-table-list p{
  width:15%;
  text-align:center;
  padding:1rem 0.5rem;
  border:0.5px solid #004EA4;
  font-weight:bold;
}

.mentor-table-list:first-child p{
  background: #004EA4;
  color:#fff;
  padding:4px 0.5rem;
}

.mentor-table-list p:first-child{
  width:30%;
}

.mentor-table-list p:nth-child(3){
  width:30%;
}

.mentor-table-list p:last-child{
  width:35%;
}

.how-table-list{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  padding-bottom:20px;
  margin-bottom:2rem;
  border-bottom:1px solid #A2A2A2;
  font-weight:bold;
}

.how-table-list div{
  width:25%;
}

.how-table-list div p{
  font-size:14px;
  padding:4px 2rem;
  border-radius:1rem;
  border:1px solid ;
  width:fit-content;
}

.how-table-list > p{
  width:calc(75% - 1rem);
}

.mentor-flow{
  margin-bottom:2.5rem;
}

.mentor-flow-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:2rem 5%;
  justify-content: center;
  margin-top: 2.5rem;
}

.mentor-flow-item{
  width:30%;
  padding-bottom:1rem;
  border-bottom:1px solid #C4C4C4;
}

.mentor-flow-item h4{
  font-size:20px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}

.mentor-flow-item h4 strong{
  color:#fff;
  line-height:1;
  background:#004EA4;
  border-radius:999vh;
  font-size: 18px;
  width: 35px;
  height: 35px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.txt-hide{
  display: none;
}

.gjs-dashed　.txt-hide{
  display:block;
}

.more {
  width: 225px;
  height:50px;
  margin:1.5rem  auto 0;
  display: flex;
  align-items:center;
  gap:8px;
  font-weight:bold;
  border:3px solid #004EA4;
  transition: .3s;
  border-radius:8px;
  justify-content:center;
  cursor:pointer;
}

.more:hover{
  opacity:0.7;
}

.more img{
  width:14px;
  transition: .3s;
}

.more::before {
  content: "詳しく見る";
  transition: .2s;
  -erbkit-transition: .2s;
}

.more.on-click::before{
  content: "閉じる";
}

.more.on-click img{
transform:scale(-1,-1);
}

.how-table-bg{
  margin:1rem 0;
}


@media screen and (max-width: 1400px) {
  .lecturer-wrap::before{
    display:none;
  }
}

@media screen and (max-width: 1279px) {
  .pillar-txt-ttl h4{
    width: calc(100% - 50px - 1rem);
  }
  .pillar-txt-ttl p{
    width:50px;
  }
  .pillar-txt-ttl{
    gap:1rem;
    width:100%;
  }
  .pillar-txt-item > p{
    width:100%;
  }
  .pillar-txt-item{
    flex-wrap: wrap;
    gap:1rem;
  }
  .style-wrap,
  .data-wrap{
    flex-wrap: wrap;
    gap:2rem 5%;
    justify-content: center;
  }
  .style-item,
  .data-item{
    width:47.5%;
  }
}


@media screen and (max-width: 1024px) {
  .about-wrap{
    flex-direction: column-reverse;
    gap: 1.5rem;
    align-items: center;
  }
  .about-txt{
    width:100%;
  }
  .about-wrap img {
    width: 100%;
    max-width: 450px;
  }
  .about-txt h3{
    margin-bottom: 1.5rem;
  }
  .history-wrap{
    flex-direction: column;
    gap: 3rem;
    align-items: center;
  }
  .history-item{
    position: relative;
    max-width: 450px;
    width: 100%;
  }
  .history-wrap::before{
    top: 50%;
    left: 50%;
    width: 2px;
    height: 100%;
  }
  .feature-wrap{
    flex-wrap: wrap;
    gap:2rem 5%;
    justify-content: center;
    max-width: 600px;
  }
  .feature-item{
    width:47.5%;
  }
  .feature-item div{
    padding-top: 0%;
    justify-content: center;
    gap: 0;
    padding-bottom: 5%;
  }
  .lecturer-wrap{
    flex-direction: column;
    gap: 2.5rem;
  }
  .lecturer-wrap img {
    width: 50%;
  }
  .lecturer-txt{
    width:100%;
  }
  .company-info-list p:first-child{
    width: 35%;
  }
  .company-info-list p:last-child{
    width: 65%;
  }
  .how-table-list div,
  .how-table-list > p,
  .can-txt{
    width:100%;
  }
  .how-table-list div p{
    padding: 4px 1rem;
  }
  .can-wrap{
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
  }
  .can-wrap > img{
    width:100%;
    max-width:450px;
  }
  .mentor-flow-item{
    width: 47.5%;
  }
  .mentor-table-list p{
    font-size:14px;
  }
}


@media screen and (max-width: 767px) {
  .feature-wrap{
    gap: 1rem 5%;
    max-width: 250px;
  }
  .feature-item{
    width:100%;
    padding: 5%;
  }
  .pillar-img{
    width:100%;
    margin: 0 auto 1.5rem;
  }
  .pillar-txt-item{
    margin-bottom: 2rem;
  }
  .style-wrap, .data-wrap{
    gap:1rem;
  }
  .style-item, .data-item{
    width:100%;
  }
  .lecturer {
    margin: 5rem 0 0;
  }
  .company-info-list{
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
  }
  .company-info-list p:first-child,
  .company-info-list p:last-child,
  .mentor-flow-item{
    width:100%;
  }
  .can-txt h4{
    margin-bottom: 0.5rem;
  }
  .can-txt p + h4 {
    margin-top: 1.5rem;
  }
  .can-wrap{
    gap: 1.5rem;
  }
  .price {
    margin: 2rem 0;
  }
}