@charset "utf-8";

.lower-fv.hold{
  background:url( https://gyosho.co.jp/system_panel/uploads/images/20260501153715270822.png) no-repeat center/cover;
}

body:has(.hold) .cta,
body:has(.hold) .cta-wrap::before{
  display:none;
}

body:has(.hold) .cta-small{
  display:block;
}

body:has(.hold) .cta-wrap{
  flex-direction: column;
}

body:has(.hold) .cta-item {
  width: 100%;
  text-align:left;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 3.5rem 5%;
  flex-direction: row;
}

body:has(.hold) .cta-item:last-child {
  display:none;
}

body:has(.hold) .cta-item h3{
  margin-top:0;
}

body:has(.hold) .cta-item > div{
  width:calc(100% - 400px);
}

body:has(.hold) .cta-item .btn{
  margin:0;
}

.about-top h3,
.about-top div{
  max-width: none;
}

.merit h3{
  text-align:center;
  font-size:20px;
}

.lower-fv.hold img{
  width:25%;
  margin-bottom:1rem;
}

.merit{
  margin-bottom:5rem;
}

.merit-box{
  max-width: 1024px;
  margin: 1.5rem auto 2rem;
  display: flex;
  justify-content: space-between;
}

.merit-box p{
  width:calc((100% - 3rem ) / 4);
  aspect-ratio:244/102;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 0.5rem;
  line-height: 1.5;
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260422122942973020.png) no-repeat center/contain;
}

.merit-wrap{
  display: flex;
  gap:1.5rem;
}

.merit-item{
  width:calc((100% - 3rem) / 3);
  border:1px solid #2E4C99;
  position:relative;
  padding:4rem 1rem 5rem;
  font-size:14px;
}

.merit-item .label{
  position:absolute;
  left:0;
  top:0;
  aspect-ratio:1/1;
  color:#fff;
  width:4rem;
  padding: 4px 0 0 0.5rem;
  font-size:16px;
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260422123551979132.png) no-repeat center/contain;
}

.merit-item h3{
  color:#2E4C99;
  text-align:left;
  font-size:clamp(1.125rem, 1.083rem + 0.14vw, 1.25rem);
  margin-bottom:1.5rem;
}

.service{
  padding:5rem 0 100px;
  position:relative;
}

.service::before{
  content:"";
  position:absolute;
  width:90%;
  height:100%;
  right:0;
  top:0;
  z-index:-1;
  background:#F4F6FB;
}

.reason-wrap{
  justify-content: end;
  gap:5%;
}

.reason-wrap.reverse{
  justify-content: start;
}

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

.reason-txt,
.reason-wrap.reverse > .reason-txt{
  max-width: 40%;
  width: fit-content;
}

.reason-txt .label{
  color:#2E4C99;
  font-size:clamp(1.125rem, 1rem + 0.42vw, 1.5rem);
  margin-bottom:1rem;
  line-height: 1;
}

.flow{
  margin:5rem 0 100px;
}

.flow-list{
  display:flex;
  margin-bottom:1.5rem;
}

.flow-list p:first-child{
  width:200px;
  padding:12px;
  text-align:center;
  color:#fff;
  background:#2E4C99;
  position:relative;
}

.flow-list p:first-child::before{
  content:"";
  position:absolute;
  width:22px;
  height:8px;
  bottom:-1rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260422162625145207.png) no-repeat center/contain;
}

.flow-list:last-child p:first-child::before{
  display:none;
}

.flow-list p:last-child{
  width:calc(100% - 200px);
  background:#F4F6FB;
  padding:12px 20px;
  font-size:14px;
}

.flow-a{
  position:relative;
  padding:3.5rem 5%;
  margin-top:100px;
  color:#FFFFFF;
  width: 100%;
}

.flow-a:hover{
  color:#FFFFFF;
}

.flow-a::before{
  content:"";
  position:absolute;
  width:4.5%;
  aspect-ratio:1/1;
  top: 50%;
  right: 7.5%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index:10;
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260422164009543618.png) no-repeat center/contain;
}

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

.flow-a h3{
  font-size:clamp(1.5rem, 1.333rem + 0.56vw, 2rem);
  margin-bottom:1.5rem;
}

.flow-a p{
  line-height:calc(28/16);
}

.past{
  padding:5rem 0 100px;
  background:#F4F6FB;
}

.past-wrap{
  display:flex;
  gap:1.5rem;
}

.past-item{
  width:calc((100% - 3rem ) / 3);
}

.past-txt{
  padding:1.5rem;
  border:1px solid #2E4C99;
  border-top:none;
  font-size:14px;
}

.past-txt .btn-arrow{
  max-width:240px;
  margin-left:auto;
}

.past-txt h3{
  font-size:clamp(1.125rem, 1.083rem + 0.14vw, 1.25rem);
  margin-top:8px;
}

.faq{
  margin:5rem 0;
}

.accordion {
  margin-bottom:0.5rem;
}

.accordion p{
  line-height:2;
}

.accordion-header {
  padding: 1rem 2rem 1rem 0;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
  border-bottom: 1px dashed #C3C3C3;
  color:#2E4C99;
}

.accordion-content {
  display: none;
  padding: 1.5rem 2rem 0 2rem;
}

.gjs-dashed .accordion-content {
  display:block;
}

.accordion-header::before, .accordion-header::after {
  position: absolute;
  content: '';
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  right: 20px;
  width: 12px;
  height: 1px;
  margin: auto;
  background: #2E4C99;
}


.accordion-header::after {
  transform: rotate(-90deg);
  transition: transform 0.3s;
}

.accordion-header.active{
  border-bottom: 1px solid #2E4C99;
  color:#121E3B;
}

.accordion-header.active::after {
  transform: rotate(0deg);
}

.lower-fv.hold-regular{
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260423161131840986.png) no-repeat center/cover;
}

.lower-fv.hold-regular img{
  width:34%;
}

.marche{
  margin:100px 0 5rem;
}

.marche-bg{
  padding:3.5rem 5%;
  border:3px solid #DCE9F2;
  border-radius:10px;
}

.marche-item{
  padding-bottom:3.5rem;
  margin-bottom:3.5rem;
  border-bottom:1px solid #2E4C99;
}

.marche-item:last-of-type{
  margin-bottom:1rem;
}

.marche-title{
  display:flex;
  align-items:center;
  gap:1rem;
}

.marche-title p{
  width:2.5rem;
  height:2.5rem;
  color:#fff;
  background:#2E4C99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size:18px;
}

.marche-title h3{
  font-size:clamp(1rem, 0.833rem + 0.56vw, 1.5rem);
}

.marche-wrap{
  display:flex;
  margin:2rem 0;
  gap:1.5rem;
}

.marche-wrap img{
  width:calc((100% - 1.5rem ) / 2 );
}


.marche-txt{
  margin-top:2rem;
  font-size:14px;
}

.marche-list{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1rem;
}

.marche-list > div:first-child{
  background:#2E4C99;
  color:#fff;
  width:4rem;
  height:21px;
  font-size:12px;
  text-align: center;
}

.marche-list > div:last-child{
  width:calc(100% - 5rem);
}

.marche-list-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px 5%;
}

.marche-list-wrap p{
  width:47.5%;
  color:#2E4C99;
}

.marche-p{
  text-align:right;
  font-size:14px;
}


.lower-fv.open{
  background:transparent;
  color:#121E3B;
  padding: 100px 15%;
  margin: 0;
}

.lower-fv.open img{
  width: 25%;
}

body:has(.open){
  background:#DCE9F2;
}

body:has(.hold.open) .cta-item:last-child {
  display:flex;
  background:#5277D6;
}

body:has(.hold.open) .cta-item:first-child {
  display:none;
}

.open-fv{
  position:relative;
}

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

.open-fv-txt{
  position:absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  max-width:720px;
  width:60%;
  background:rgba(244,244,244,0.95);
  text-align:center;
  z-index:10;
  padding:3rem 5%;
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.open-fv-txt h2{
  opacity:0;
  height:0;
}

.open-fv-txt img{
  width:410px;
  margin:0 auto 2.5rem;
}

.open-fv-txt h3{
  font-size:clamp(1.125rem, 0.958rem + 0.56vw, 1.625rem);
  margin-bottom:1rem;
}

.open-fv-btn{
  margin:5rem auto 0;
  color:#2E4C99;
  font-weight:400;
}

.open-fv-btn div{
  width:5rem;
  height:5rem;
  background:#5277D6;
  margin:0 auto 8px;
  border-radius: 999vh;
  position:relative;
}

.open-fv-btn div::before{
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background:#fff;
  border-radius: 999vh;
  aspect-ratio:1/1;
  width:12px;
  animation: poyopoyo 3s ease-out infinite;
}

@keyframes poyopoyo {
  0% {
    width:12px;
  }
  50% {
    width:48px;
  }
  100% {
    width:12px;
  }
}

.open-fv-btn div::after{
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background:#fff;
  border-radius: 999vh;
  aspect-ratio:1/1;
  width:0px;
  transition:1s;
}

.open-fv-btn:hover{
  opacity:1;
   color:#2E4C99;
}

.open-fv-btn:hover div::after{
  width:4rem;
  opacity:1;
}

.open-merit{
  padding:0 0 1rem;
  background:#fff;
}

.open-merit h2{
  font-size:clamp(1.25rem, 0.833rem + 1.39vw, 2.5rem);
  margin-bottom:5rem;
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content: center;
}

.open-merit h2::before,
.open-merit h2::after{
  content:"";
  display:block;
  width:2rem;
  height:2rem;
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260428190126749940.png) no-repeat center/contain;
}

.open-merit h2::after{
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260428190126319035.png) no-repeat center/contain;
}

.open-merit-item{
  padding:4rem 5%;
  background:#DCE9F2;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width:880px;
  margin-bottom:1.5rem;
}

.open-merit-item:nth-child(even){
  margin-left:auto;
}

.open-merit-item img{
  width:21%;
}

.open-merit-txt{
  width:74%;
}

.open-merit-txt .gray-p{
  font-size:14px;
  margin-top:1rem;
  color:#9A9A9A;
}

.open-merit-title{
  display:flex;
  align-items:center;
  gap:1rem;
  color:#2E4C99;
  margin-bottom:1rem;
  font-size:clamp(1.125rem, 1rem + 0.42vw, 1.5rem);
}

.open-merit-title h3{
  font-size:clamp(1.125rem, 1rem + 0.42vw, 1.5rem);
}

.open-flow{
  padding:15rem 0 0;
  position:relative;
}

.open-flow::before{
  content:"";
  position:absolute;
  width:100%;
  aspect-ratio:3840/264;
  top:-1px;
  left:0;
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260428185217716324.png) no-repeat center/contain;
}

.open-flow + .past{
  position:relative;
  padding-top:12.5rem;
}

.open-flow + .past::before{
  content:"";
  position:absolute;
  width:100%;
  aspect-ratio:3840/264;
  top:-1px;
  left:0;
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260428185217490388.png) no-repeat center/contain;
}

.open-flow .flow-wrap{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
}

.open-flow .flow-right{
  width:calc(100% - 450px);
}

.open-flow .flow-item{
  background:#fff;
  padding:1.5rem;
  border-radius:10px;
  border:1px solid #2E4C99;
  margin-bottom:2.5rem;
  position:relative;
}

.open-flow .flow-item::before{
  content:"";
  position:absolute;
  width:24px;
  height:8px;
  bottom:-1.5rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260428185041382037.png) no-repeat center/contain;
}

.open-flow .flow-item:last-child::before{
  display:none;
}

.open-flow .flow-item .accent{
  color:#2E4C99;
  font-size:clamp(1.25rem, 1.167rem + 0.28vw, 1.5rem);
  padding-bottom:8px;
  border-bottom:1px solid;
  width:fit-content;
  line-height: 1;
}

.open-flow .flow-item h3{
  color:#2E4C99;
  font-size:clamp(1.25rem, 1.167rem + 0.28vw, 1.5rem);
  margin:8px 0;
}

.recommend{
  padding:100px 0 15rem;
  position: relative;
}

.recommend::before{
  content:"";
  position:absolute;
  width:100%;
  aspect-ratio:3840/264;
  bottom:-1px;
  left:0;
  transform: scale(-1, -1);
  background:url(https://gyosho.co.jp/system_panel/uploads/images/20260428185217716324.png) no-repeat center/contain;
}

.recommend h2{
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin-bottom:1.5rem;
  justify-content: center;
  color:#2E4C99;
  font-size:clamp(1.125rem, 0.917rem + 0.69vw, 1.75rem);
}

.recommend h2::before{
  content:"";
  display:block;
  width: 2px;
  height: 40px;
  background: #2E4C99;
  transform: rotate(-25deg);
}

.recommend h2::after{
  content:"";
  display:block;
  width: 2px;
  height: 40px;
  background: #2E4C99;
  transform: rotate(25deg);
}

.recommend .container{
  max-width:720px;
}

.open-merit h2 br{
  display:none;
}

@media screen and (max-width: 1600px) {
  .merit-box p{
    font-size: 14px;
  }
  body:has(.hold) .cta-item > div {
    width: calc(100% - 350px);
    font-size: 14px;
  }
  .open-fv-btn{
    margin: 2rem auto 0;
  }
  .open-fv-txt img {
    width: 60%;
    margin: 0 auto 1.5rem;
  }
}

@media screen and (max-width: 1400px) {
  .open-flow .flow-right{
    width: calc(100% - 300px);
  }
}

@media screen and (max-width: 1280px) {
  .open-fv-txt h3 + p{
    max-width: 500px;
    margin: 0 auto;
  }
  .open-fv-txt h3 + p br{
    display:none;
  }
}

@media screen and (max-width: 1279px) {
  .open-flow .flow-wrap{
    flex-direction: column;
    gap: 1.5rem;
  }
  .open-flow .flow-right{
    width:100%;
  }
}

@media screen and (max-width: 1024px) {
  .lower-fv.open{
    padding: 60px 10%;
  }
  .open-flow {
    padding: 8rem 0 0;
  }
  .open-flow + .past{
    padding-top: 7.5rem;
  }
  .open-fv-txt{
    width: 70%;
    padding: 2rem 5%;
  }
  .open-fv-txt img {
    width: 65%;
  }
  .recommend {
    padding: 60px 0 10rem;
  }
  .open-merit-item{  
    padding: 2rem 5%;
  }
  .open-merit-item,
  .open-merit-item:nth-child(even){
    flex-direction: column;
    gap: 2.5rem;
  }
  .open-merit-txt {
    width: 100%;
  }
  .open-merit-item img {
    width: 150px;
  }
  .reason-txt, .reason-wrap.reverse > .reason-txt {
    max-width: 100%;
  }
  .reason-wrap > img, .reason-wrap.reverse > img {
    width: 100%;
  }
  .reason-wrap{
    gap:2.5rem;
  }
  body:has(.hold) .cta-wrap{
    max-width: none;
  }
  .past-item {
    width: calc((100% - 1.5rem) / 2);
  }
  .past-wrap{
    flex-wrap: wrap;
  }
  body:has(.hold) .cta-item{
    flex-direction: column;
    gap: 1.5rem;
  }
  body:has(.hold) .cta-item > div {
    width: 100%;
  }
  .service {
    padding: 3rem 0 3rem;
  }
  .service::before{
    width: 95%;
  }
  .merit-box p {
    font-size: 13px;
  }
  .merit-wrap{
    flex-wrap: wrap;
  }
  .merit-item {
    width: calc((100% - 1.5rem) / 2);
  }
  .merit-box{
    flex-wrap: wrap;
    gap: 1.5rem 1rem;
    max-width: 500px;
  }
  .merit-box p{
    width: 47.5%;
  }
  .flow-a{
    font-size: 14px;
    padding: 2.5rem 5%;
  }
  .flow-a h3 {
    margin-bottom: 1rem;
  }
  .marche-list-wrap{
    flex-direction: column;
  }
  .marche-list-wrap p {
    width: 100%;
  }
}


@media screen and (max-width: 767px) {
  .merit-box p {
    font-size: 11px;
  }
  .merit-item {
    width: 100%;
    padding: 3.5rem 1rem 2.5rem;
  }
  .merit-item h3,
  .reason-txt h3{
    margin-bottom: 1rem;
  }
  .service::before{
    width:100%;
  }
  .reason-txt .label{
    margin-bottom: 0.5rem;
  }
  .lower-fv.hold img {
    width: 160px;
    margin-bottom: 0.5rem;
  }
  .reason-txt, .reason-wrap.reverse > .reason-txt{
    width:100%;
  }
  .flow-list{
    flex-direction: column;
    position:relative;
  }
  .flow-list p:first-child,
  .flow-list p:last-child{
    width:100%;
  }
  .flow-list p:first-child{
    text-align:left;
    padding: 8px 20px;
  }
  .flow-list p:first-child::before{
    display:none;
  }
  .flow-list::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 8px;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background: url(https://gyosho.co.jp/system_panel/uploads/images/20260422162625145207.png) no-repeat center / contain;
  }
  .flow-list:last-child::before{
    display:none;
  }
  .flow-a {
    font-size: 12px;
    padding: 2.5rem 5% 5rem;
    margin-top: 2rem;
  }
  .flow-a::before{
    width:2.5rem;
    height:2.5rem;
    bottom:1rem;
    top: auto;
    transform: none;
    right: 0.5rem;
  }
  .flow {
    margin: 4rem 0;
  }
  .past-item {
    width: 100%;
  }
  .past-wrap {
    max-width: 300px;
    margin: 0 auto;
  }
  .past-txt {
    padding: 1.25rem;
  }
  .past {
    padding: 3rem 0;
  }
  .faq {
    margin: 3rem 0;
  }
  .accordion-content{
    padding: 1.5rem 1rem 0 1rem;
  }
  .service {
    padding: 3rem 0 1rem;
  }
  .reason-wrap{
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }
  .lower-fv.hold-regular img{
    width: 210px;
  }
  .marche-list{
    flex-direction: column;
    gap: 0.5rem;
    font-size: 12px;
  }
  .marche-list > div:last-child {
    width: 100%;
    gap: 4px;
  }
  .marche-item {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .marche-wrap{
    margin: 20px 0;
    gap: 0.5rem;
  }
  .marche-txt {
    margin-top: 20px;
    font-size: 12px;
  }
  .marche-wrap img {
    width: calc((100% - 0.5rem) / 2);
  }
  .marche-title h3{
    width:calc(100% - 3rem);
  }
  .marche-bg {
    padding: 2rem 5%;
  }
  .marche-p{
    font-size: 12px;
  }
  .past-txt .btn-arrow {
    max-width: 150px;
    margin-left: auto;
    min-width: auto;
    padding: 0 8px;
    width: 150px;
    height: 42px;
    margin-top:2.5rem;
  }
  .open-fv-txt {
    width: 90%;
    padding: 1rem 5%;
  }
  .open-fv-txt img {
    width: 300px;
  }
  .open-merit h2{
    text-align:center;
    margin-bottom: 2rem;
  }
  .recommend {
    padding: 40px 0 5rem;
  }
  .recommend h2::after{
    height:2rem;
  }
  .open-merit-item{
    gap: 1.5rem;
  }
  .open-merit-item img {
    width: 125px;
  }
  .open-merit-item, .open-merit-item:nth-child(even){
    gap: 1.5rem;
  }
  .open-flow {
    padding: 5rem 0 0;
  }
  .open-merit h2 br{
    display:block;
  }
}