@charset "utf-8";

.gjs-dashed .photo-swiper-wrap::before{
  display:none;
}

.plan{
  display:none;
}

.photo-news{
  margin-top:200px;
}

@media (max-width: 1024px) {
  .photo-news{
    margin-top:100px;
  }
}

html, body {
  overscroll-behavior: none;
}

.gjs-dashed .photo-fv-wrap-bg{
  overflow:scroll;
}

.gjs-dashed .commitment-item{
  position:relative;
  opacity:1;
  transform:none;
}

.gjs-dashed .commitment-wrap{
  height:auto;
}

.gjs-dashed .photo-fv-wrap{
  height:100vh;
  width: 100%;
}

.gjs-dashed .commitment-item{
  z-index:10;
  pointer-events: auto;
}

#wrap::before,#wrap::after{
  position: fixed;
  z-index: 1;
  top: -15%;
  display: block;
  visibility: hidden;
  width: 50%;
  height: 130%;
  content: '';
  background-color: #D2D8CD;
}
#wrap::before{
  left: 0;
  animation : curtain_l 3s;
  -webkit-animation : curtain_l 3s;
}
#wrap::after{
  right: 0;
  animation : curtain_r 3s;
  -webkit-animation : curtain_r 3s;
}

@keyframes curtain_l{
  0%{visibility: visible;}
  20%{transform: rotate(0deg) translateX(0%); background-color: #D2D8CD;}
  60%{transform: rotate(6deg) translateX(-50%);}
  80%{opacity: 1;}
  100%{transform: rotate(0deg) translateX(-100%); opacity:0; visibility: hidden;}
}
@-webkit-keyframes curtain_l{
  0%{visibility: visible;}
  20%{-webkit-transform: rotate(0deg) translateX(0%); background-color: #D2D8CD;}
  60%{-webkit-transform: rotate(6deg) translateX(-50%);}
  80%{opacity: 1;}
  100%{-webkit-transform: rotate(0deg) translateX(-100%); opacity:0; visibility: hidden;}
}
@keyframes curtain_r{
  0%{ visibility: visible;}
  20%{transform: rotate(0deg) translateX(0%); background-color: #D2D8CD;}
  60%{transform: rotate(-6deg) translateX(50%);}
  80%{opacity: 1;}
  100%{transform: rotate(0deg) translateX(100%); opacity:0; visibility: hidden;}
}
@-webkit-keyframes curtain_r{
  0%{visibility: visible;}
  20%{-webkit-transform: rotate(0deg) translateX(0%); background-color: #D2D8CD;}
  60%{-webkit-transform: rotate(-6deg) translateX(50%);}
  80%{opacity: 1;}
  100%{-webkit-transform: rotate(0deg) translateX(100%); opacity:0; visibility: hidden;}
}

#root{
  background:#D2D8CD;
  position:relative;
  z-index: 1;
  padding-bottom: 1.5rem;
}

#root::before{
  content:"";
  position:absolute;
  width:34%;
  height:100%;
  background:url(https://active-corp68.com/system_panel/uploads/images/20260205123607193564.png) repeat-y center/contain;
  top:0;
  left:-7.5%;
  z-index: -1;
}


#root::after{
  content:"";
  position:absolute;
  width:34%;
  height:100%;
  background:url(https://active-corp68.com/system_panel/uploads/images/20260205123607173652.png) repeat-y center/contain;
  top:0;
  right:-7.5%;
  z-index: -1;
}

.photo-title{
  margin:0 auto 1.5rem;
  aspect-ratio:657/201;
  position:relative;
  width:50%;
  max-width:657px;
  text-align:center;
  font-size:clamp(0.875rem, 0.784rem + 0.3vw, 1.125rem);
}

.photo-title h2{
  font-size:clamp(1.5rem, 0.591rem + 3.03vw, 4rem);
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width:max-content;
  line-height: 1;
}

.photo-title p{
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  letter-spacing: 1px;
  width:max-content;
}

.photo-title::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:url(https://active-corp68.com/system_panel/uploads/images/20260205124440990894.png) no-repeat center/contain;
}

.photo-fv-wrap {
  position: sticky;
  border:6px solid #575757;
  top: 100px;
  height: calc(95vh - 100px);
  width: 80%;
  left: 10%;
}

.photo-fv-wrap-bg{
  height: calc(100% - 16px);
  position: relative;
  margin: 8px;
  border: 3px solid #575757;
  overflow: hidden;
  background:url(https://active-corp68.com/system_panel/uploads/images/20260205181540832718.png) no-repeat center/cover;
}

.photo-fv{
  will-change: transform;
}

.photo-fv-wrap::before{
  position:absolute;
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  border:3px solid  #575757;
  top:10px;
  left:10px;
  z-index: 10;
}

.photo-fv-main{
  padding: 100px 0 0;
  height: calc(95vh - 132px);
  text-align:center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 800px;
}

.photo-fv-main-top{
  margin-bottom:2rem;
}

.photo-fv-main-top img{
  width:200px;
  margin:0 auto -3rem;
}

.photo-fv-main-top p{
  font-size:clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
}

.photo-fv-main-top h1{
  font-size:clamp(2rem, 0.455rem + 5.15vw, 6.25rem);
}

.photo-fv-main h2{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  margin-bottom:2rem;
}

.photo-fv-main h2 + p{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  color:#7E7E7E;
}

.photo-fv-1{
  width:20%;
  /*position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  will-change: transform;*/
  margin:0 auto;
  max-width:300px;
}

.concept{
  margin:4.5rem 0 220px;
}

.concept .container{
  max-width:790px;
}

.concept-txt{
  text-align:center;
}

.concept-txt h3{
  font-size:clamp(1rem, 0.682rem + 1.06vw, 1.875rem);
  margin-bottom:5rem;
}

.concept-txt h3 strong{
  font-size:clamp(1.25rem, 0.795rem + 1.52vw, 2.5rem);
  font-weight: 500;
  -webkit-text-stroke: 1px #575657;
  text-stroke: 1px #575657;
  color: transparent;
  margin: 1rem 0;
}

.concept-txt .shippori{
  line-height: 2;
  letter-spacing: 1px;
}

.photo-swiper-wrap{
  margin:250px auto 2rem;
  position:relative;
}

.photo-swiper-wrap::before{
  content:"";
  position:absolute;
  width:100%;
  z-index: 10;
  top: -24%;
  left: -8%;
  aspect-ratio:787/480;
  background:url(https://active-corp68.com/system_panel/uploads/images/20260205165431344865.png) no-repeat center/contain;
}

.photo-swiper{
  margin:0 auto;
  max-width:460px;
  padding-right:2rem;
}

.swiper-pagination{
  position:absolute;
  right:0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  bottom: auto !important;
  left: auto !important;
  width: 6px !important;
  display: flex;
  flex-direction: column;
  gap:10px;
}

.swiper-pagination .swiper-pagination-bullet{
  margin: 0 !important;
  width: 6px;
  height: 6px;
  opacity: 1;
  background: transparent;
  border: 0.5px solid #212121;
}

.swiper-pagination .swiper-pagination-bullet-active{
  background:#828761;
  border:none;
}

.photo-swiper img{
  aspect-ratio:425/545;
  object-fit:cover;
}

.concept-bottom{
  margin: 2rem auto 0;
  display: flex;
  max-width: 420px;
  justify-content: space-between;
  align-items: flex-end;
}

.scroll {
  width: 10rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

/* バーの背景 */
.scroll::after {
  content: "";
  position: relative;
  display: block;
  width: 100px;
  height: 0.8px;
  background-color: #B1B2AA;
}

/* 動くバー */
.scroll::before {
  content: "";
  position: absolute;
  left: 41px;
  width: 100px;
  height: 0.8px;
  top: 10.1px;
  background-color: #828761;
  animation: scroll-horizontal 2s infinite;
  z-index: 10;
}

/* 横スクロールアニメーション */
@keyframes scroll-horizontal {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  51% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}


.photo-insta{
  width:3.5rem;
}

.photo-rabit{
  width:130px;
}

.commitment{
  position:relative;
}

.commitment .container{
  max-width:800px;
}


.fairy{
  position:absolute;
  width: 32.5%;
  left: 5%;
  top: 23%;
}

.fairy {
  opacity:0;
  transition:0.5s;
}

.fairy.active {
  opacity:1;
  animation: fuwafuwa 1.5s ease-in-out forwards;
}

@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(0deg);
  }
  50% {
    transform:translate(0, -3px) rotate(3deg);
  }
  100% {
    transform:translate(0, 0) rotate(0deg);
  }
}

.commitment-title{
  width:fit-content;
  margin:0 0 0 auto;
}

.commitment-title p{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  color:#7E7E7E;
}

.commitment-title h3{
  font-size:clamp(1.25rem, 1.023rem + 0.76vw, 1.875rem);
  -webkit-text-stroke: 1px #575657;
  text-stroke: 1px #575657;
  color: transparent;
}

.commitment-box{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top:0.5px solid #212121;
  padding: 4rem 1rem 0;
  margin: 2rem 0 0;
}

.commitment-box p{
  width:75%;
  letter-spacing: 1px;
  line-height: calc(40 / 16);
}

.commitment-box > img{
  width: 21%;
}

.second .commitment-box > img{
  width: 19%;
}

.third .commitment-box > img{
  width: 15%;
  max-width: 98px;
}

.commitment-wrap {
  position: relative;
  margin-top: 5rem;
  height: 600px; /* 表示したい高さ（要調整） */
}

.commitment-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.commitment-item.is-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.commitment-item.is-hide {
  opacity: 0;
  transform: translateY(-20px);
}

.commitment-btn{
  display: flex;
  gap: 1rem;
  position: absolute;
  top: 3rem;
}

.commitment-btn img{
  width:2.5rem;
}


.flow{
  margin:240px 0 0;
}

.flow .container{
  max-width:895px;
}

.flow .photo-title{
  margin-bottom:0;
}

.flow-bg{
  position:relative;
  padding:4rem 0 !important;
  margin-top: -34px;
}

.flow-bg::before{
  content:"";
  position:absolute;
  width:0.5px;
  height:100%;
  background:#212121;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.flow-item{
  width: 44%;
}

.flow-item:nth-child(odd){
  margin:0 0 0 auto;
}

.flow-item:nth-child(even){
  text-align:right;
}

.flow-item .accent{
  color:#7E7E7E;
}

.flow-item h3{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  line-height:1;
  margin:8px 0 1.5rem;
  position:relative;
}

.flow-item h3::before{
  content:"";
  position:absolute;
  width:1rem;
  height:0.5px;
  background:#212121;
  left:-15.5%;
  bottom:0;
}

.flow-item:nth-child(even)  h3::before{
  left:auto;
  right:-15.5%;
}

.flow-item .shippori{
  font-size:14px;
  letter-spacing: 1px;
}

.plan{
  margin:200px 0 180px;
}

.plan-box{
  width:70%;
  max-width:1100px;
  margin:0 auto;
  height:640px;
  border:0.5px solid #212121;
}

.photo-news .border-btn{
  margin:3.5rem auto 0;
}

.photo-news .container{
  max-width:660px;
  display: block;
}

.news-wrap .webgene-blog {
  width: 100%;
}

.webgene-item {
  margin-bottom: 1rem;
}

.news-wrap .webgene-blog a, .news-wrap .webgene-blog .webgene-item:last-child a{
  border: none;
  padding: 10px 0 10px 2.5rem;
  border-left: 1px solid #212121;
}

.photo-contact{
  max-width:750px;
  margin:180px auto 10rem;
  padding-bottom: 10rem;
}

.photo-contact-txt{
  padding:200px 5%;
  text-align:center;
  aspect-ratio: 450 / 685;
  width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 100px;
  background:url(https://active-corp68.com/system_panel/uploads/images/20260205145323606262.png) no-repeat center/contain;
}

.photo-contact-txt h2{
  font-size:clamp(1.5rem, 0.591rem + 3.03vw, 4rem);
  margin-bottom: 2rem;
  line-height: 1;
}

.photo-contact-txt p{
  line-height:2;
  letter-spacing:1px;
}

.photo-contact-txt p:first-child{
  font-size:clamp(0.875rem, 0.83rem + 0.15vw, 1rem);
}

.photo-contact-txt h2 + p{
  font-size:14px;
}

.photo-contact-wrap{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
}

.photo-contact-btn{
  width:240px;
  display: flex;
  flex-direction: column-reverse;
  gap: 2.5rem;
}

.photo-contact-btn a{
  aspect-ratio:1/1;
  border-radius:999vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  text-align:center;
  letter-spacing: 2px;
  color:#575757;
  position:relative;
}

.photo-contact-btn a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 1);
  filter: blur(12px);
  border-radius: inherit;
  z-index: -1;
}

.photo-contact-btn a p{
  line-height:1.5;
}

.photo-contact-btn a img{
  width:5rem;
}

.footer{
  background: transparent;
  color: #575757;
  border-bottom: 3px solid #212121;
  margin: 10rem auto 0;
  max-width: 1340px;
  width: 80%;
  position:relative;
  padding:2.5rem 0 4rem;
  border-top:0.5px solid #212121;
}

.footer::before{
  content:"";
  position:absolute;
  width:100%;
  height:0.5px;
  background:#212121;
  bottom:6px;
  left:0;
}

.footer::after{
  content:"";
  position:absolute;
  width:100%;
  height:0.5px;
  background:#212121;
  top:6px;
  left:0;
}

.footer .black{
  display:block;
}

.footer .white{
  display:none;
}

.footer a{
  color: #575757;
}

.footer-right .header_menu .accent{
  color:#7E7E7E;
}

.footer-sub a .shippori{
  border-color:#7E7E7E;
}

.footer-wrap{
  width: 100%;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  @media (max-height: 900px) {
    .photo-fv-wrap{
      height: calc(98vh - 100px);
    }
    .photo-fv-main{
      height: calc(98vh - 132px);
      padding: 60px 0 0;
    }
    .commitment-wrap{
      margin-top: 0rem;
      height: 450px;
    }
    .fairy{
      left: 3%;
      top: 20%;
    }
    .commitment-box{
      padding: 2rem 1rem 0;
      margin: 2rem 0 0;
    }
    @media (max-height: 700px) {
      .photo-fv-main {
        height: auto;
        gap: 2rem;
      }
    }
  }
}

@media (max-width: 1200px) {
  @media (min-width: 768px) {
    @media (min-height: 900px) {
      .photo-fv-main {
        padding: 60px 0 0;
        height: auto;
        gap: 2.5rem;
        min-height: auto !important;
      }
    }
  }
}

@media (max-width: 1600px) {
  .commitment-btn{
    left:2.5%;
  }
  .photo-fv-main{
    min-height: 650px;
  }
}

@media (max-width: 1400px) {
  .commitment-btn{
    left:7%;
  }
  .commitment-box p{
    font-size:14px;
  }
  .commitment .container{
    width: 70%;
  }
}

@media (max-width: 1024px) {
  .photo-title{
    width: 400px;
  }
  .photo-title p{
    top:4px;
  }
  .plan-box{
    height:400px;
  }
  .photo-contact{
    margin: 140px auto 0rem;
    padding-bottom:7.5rem;
  }
  .photo-contact-txt{
    width: 400px;
    padding: 100px 5%;
    margin-bottom: 4rem;
  }
  .photo-contact-wrap{
    flex-direction: column;
    align-items: center;
  }
  .flow{
    margin:0;
  }
  .photo-swiper-wrap{
    width: 70%;
  }
  .photo-swiper-wrap::before{
    width: 150%;
    top: -22%;
    left: -43%;
  }
  .commitment-box{
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 1rem 0;
  }
  .commitment-wrap{
    margin:0 auto;
  }
  .commitment-box p{
    font-size: 12px;
    line-height: 2;
    width:100%;
  }
  .commitment-box > img {
    width: 25%;
  }
  .fairy{
    left: 2%;
    top: 15%;
  }
  .commitment-btn {
    top: 2rem;
  }
  .photo-fv-wrap{
    width:90%;
  }
  .photo-contact-btn a{
    width:45%;
  }
  .photo-contact-btn{
    width: 450px;
    flex-direction: row;
    gap: 10%;
  }
  .flow-bg{
    width: 95%;
    margin-top: -21px;
  }
  .flow-item .shippori,
  .photo-contact-txt h2 + p{
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .photo-fv-wrap{
    height: calc(100vh - 48px);
    width:100%;
  }
  .photo-fv-main {
    padding: 60px 0 0;
    height: auto;
    gap:2.5rem;
    min-height: auto;
  }
  .photo-title {
    width: 300px;
  }
  .concept-txt h3{
    margin-bottom: 2rem;
  }
  .photo-swiper-wrap{
    margin: 100px auto 2rem;
  }
  .photo-swiper{
    padding-right: 1rem;
  }
  .photo-swiper-wrap::before {
    width: 155%;
    top: -23%;
    left: -45%;
  }
  .photo-fv-1 {
    width: 150px;
  }
  .concept-bottom{
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }
  .concept{
    margin-bottom:120px;
  }
  .photo-title p {
    top: 2px;
    font-size: 12px;
  }
  .commitment .container {
    width: 95%;
    margin-top: 3rem;
  }
  .commitment-box{
    margin: 1rem 0 0;
    padding: 2rem 0.5rem 0;
  }
  .commitment-btn img {
    width: 2rem;
  }
  .commitment-btn{
    gap: 8px;
    top: -1.5rem;
    left: auto;
    right: 0;
  }
  .fairy {
    left: 0%;
    top: 16%;
    width: 38%;
  }
  .commitment-box > img,
  .second .commitment-box > img{
    width: 80px;
  }
  .third .commitment-box > img {
    width: 60px;
  }
  .commitment-wrap{
    height:500px;
  }
  .flow-bg::before{
    left:0;
    transform:none;
  }
  .flow-bg {
    margin-top: 0;
    width: 90%;
    padding: 4rem 0 1rem 1.5rem !important;
  }
  .flow-item {
    width: 100%;
  }
  .flow-item h3::before{
    left: -2rem;
    bottom: 8px;
  }
  .flow-item:nth-child(even){
    text-align: left;
    margin: 2rem 0;
  }
  .flow-item:nth-child(even) h3::before {
    right: auto;
    left: -2rem;
  }
  .plan {
    margin: 100px 0;
  }
  .plan-box {
    width: 90%;
  }
  .photo-contact {
    margin: 100px auto 0rem;
    padding-bottom: 5rem;
    width: 95%;
  }
  .photo-contact-txt {
    width: 100%;
  }
  .photo-contact-btn{
    width: 200px;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }
  .photo-contact-btn a {
    width: 100%;
  }
  .concept-txt h3 strong,
  .commitment-title h3{
    -webkit-text-stroke: 0.5px #575657;
    text-stroke: 0.5px #575657;
  }
}