@charset "utf-8";

body:has(.about) .pankuzu{
  padding-bottom:8px;
}

.lower-fv.about{
  padding:4rem 15% 7.5rem;
  color:#fff;
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260421153255276042.png) no-repeat center/cover;
}

.lower-fv.about p{
  color:#fff;
}

.about-top{
  margin-bottom:100px;
  padding-bottom:40px;
  border-bottom:1px solid #2E4C99;
}

.about-top h3{
  max-width:750px;
  margin:0 0 1.5rem auto;
  color:#2E4C99;
  font-size:clamp(1.125rem, 1rem + 0.42vw, 1.5rem);
}

.about-top div{
  max-width:750px;
  margin:0 0 0 auto;
}

.stance{
  margin-bottom:4rem;
}

.stance-img{
  margin:2.5rem 0;
}

.stance .lower-title div{
  transform: translate(0, 101%);
}

.stance .lower-title.fadeUp div{
  transform: translate(0, 0%);
  transition: 0.8s cubic-bezier(0.87, 0, 0.13, 1) transform;
}

.stance .lower-title h2{
  transform: translate(0, 0%);
}

.stance .lower-title p{
  font-size:14px;
}

.stance-txt{
  margin-bottom:2.5rem;
}

.stance-txt h3{
  font-size:clamp(1.25rem, 1.167rem + 0.28vw, 1.5rem);
  margin-bottom:1.5rem;
  color:#2E4C99;
}

.stance-bg{
  padding:2.5rem 5%;
  border:3px solid #DCE9F2;
  border-radius:10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position:relative;
}

.stance-bg::before{
  content:"";
  position:absolute;
  width:3rem;
  height:1.5px;
  background:#121E3B;
  top:90px;
  left:27%;
  z-index:-1;
}

.stance-item{
  width:25%;
  background:#DCE9F2;
  border-radius:5px;
  padding:1.5rem 1rem 1rem;
  font-size:14px;
}

.stance-item h4{
  font-size:20px;
  margin-bottom:1rem;
}

.stance-box{
  margin-top:2.5rem;
  background:#FFFFFF;
  border-radius:5px;
  padding:2.5rem 1rem;
  text-align:center;
  color:#2E4C99;
  font-size:1rem;
}

.stance-box img{
  width:74px;
  margin:0 auto 8px;
}

.stance-item2{
  width:calc(100% - 2.5rem - 25%);
}

.stance-item2 h4{
  text-align:center;
  margin-bottom:2rem;
}

.stance-item2 .stance-box{
  padding:2.5rem 5% 1.5rem;
  margin-top:1.5rem;
}

.stance-item2 .stance-box h5{
  font-size:1rem;
  margin-bottom:1rem;
}

.stance-item2 .stance-box h5 + p{
  text-align:left;
  color:#121E3B;
  font-size:14px;
}

.stance-item2 .stance-box{
  position:relative;
}

.stance-item2 .label{
  position:absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  font-size:18px;
  width:max-content;
  padding:15px;
  background:#2E4C99;
  border-radius:5px;
  color:#fff;
  line-height:1;
}

.reason{
  padding:5rem 0;
  background:#F4F6FB;
}

.reason-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom:2.5rem;
}

.reason-wrap.reverse{
  flex-direction:row-reverse;
}

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

.reason-txt{
  width:55%;
}

.reason-wrap.reverse > img{
  width:45%;
}

.reason-wrap.reverse > .reason-txt{
  width:50%;
}

.reason-txt h3{
  color:#2E4C99;
  margin-bottom:1.5rem;
  font-size:clamp(1.25rem, 1rem + 0.83vw, 2rem);
}

.join{
  padding:3.5rem 0;
  background:#2E4C99;
}

.join .container{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width:1538px;
  width:80%;
}

.join-title{
  width:300px;
  color:#fff;
  text-align:center;
  font-size:clamp(1rem, 0.958rem + 0.14vw, 1.125rem);
}

.join-title h2{
  font-size:clamp(2.5rem, 1.25rem + 4.17vw, 6.25rem);
}

.join-wrap{
  width:calc(100% - 420px);
  display:flex;
}

.join-wrap a{
  width:50%;
  position:relative;
  overflow: hidden;
  opacity: 1;
}

.join-wrap a img{
  aspect-ratio:558/640;
  object-fit:cover;
  transition:0.3s;
}

.join-wrap a:hover{
  opacity: 1;
}

.join-wrap a:hover img{
  transform:scale(1.05);
}

.join-wrap a::before{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
  background-image: linear-gradient(transparent, #121e3b);
  z-index:10;
}

.join-wrap a h3{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width:85%;
  font-size:clamp(0.875rem, 0.583rem + 0.97vw, 1.75rem);
  padding:2rem 0;
  background:#121E3B;
  color:#FFFFFF;
  text-align: center;
  transition:0.3s;
}

.join-wrap a:hover h3{
  background:#FFFFFF;
  color:#121E3B;
}


.join-wrap a p{
  position: absolute;
  width:85%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  bottom:3.5rem;
  color:#fff;
  line-height:calc(34/16);
  z-index:15;
}

@media screen and (max-width: 1600px) {
  .join-wrap a p{
    width: 90%;
    bottom: 2.5rem;
    font-size: 14px;
  }
  .join-wrap a h3{
    padding: 1.5rem 0;
    width: 90%;
  }
}

@media screen and (max-width: 1400px) {
  .join-wrap {
    width: calc(100% - 350px);
  }
}

@media screen and (max-width: 1279px) {
  .join .container{
    flex-direction: column;
    gap: 2.5rem;
  }
  .join-wrap {
    width: 100%;
  }
  .stance-bg{
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
  }
  .stance-item {
    width: 100%;
    max-width: 300px;
  }
  .stance-item2 {
    width: 100%;
    max-width: none;
  }
  .stance-bg::before{
    width: 1px;
    height: 3rem;
    top: 411px;
    left: 50%;
  }
  .join-title{
    text-align:left;
  }
}


@media screen and (max-width: 1024px) {
  .lower-fv.about{
    padding: 4rem 10% 5rem;
  }
  .reason-wrap,
  .reason-wrap.reverse{
    flex-direction: column;
    gap: 2.5rem;
    margin-bottom: 4rem;
  }
  .reason-txt,
  .reason-wrap.reverse > .reason-txt{
    width: 100%;
  }
  .reason-wrap > img ,
  .reason-wrap.reverse > img{
    width: 100%;
    max-width: 450px;
  }
  .stance-img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }
}


@media screen and (max-width: 767px) {
  .join-wrap{
    flex-direction: column;
  }
  .join-wrap a {
    width: 100%;
  }
  .join-wrap a p{
    bottom: 1.5rem;
    font-size: 10px;
  }
  .join-wrap a h3 {
    padding: 1.25rem 0;
  }
  .reason {
    padding: 2.5rem 0 0;
  }
  .about-top {
    margin-bottom: 4rem;
  }
  .stance-txt h3 {
    font-size: 18px;
  }
  .stance-box{
    margin-top: 1.5rem;
    padding: 1.5rem 1rem;
  }
  .stance-bg::before{
    top: 350px;
  }
  .stance-item2 .label{
    top: -0.8rem;
    padding: 11px;
  }
  .stance-bg {
    padding: 1.5rem 2.5%;
  }
  .lower-fv.about {
    padding: 3rem 5% 3rem;
    margin-bottom: 2rem;
  }
}