@charset "utf-8";

.none{
  display:none !important;
}

.gjs-dashed .fadeUpTrigger,
.gjs-dashed  .flow-txt{
  opacity:1;
}

#root{
  position:relative;
  padding-bottom: 0;
  min-height: 100vh;
}

.main,
.cta-a{
  position:relative;
  z-index:10;
}

.gjs-dashed .swiper{
  overflow:visible;
  height:100%;
}

html { scroll-behavior: smooth;}

body{
  font-size:16px;
  font-family: "Outfit", sans-serif;
  color:#000000;
  font-weight: 100;
  background: #FFFAED;
  word-break: auto-phrase;
}

.accent{
  font-family:"Poppins",  sans-serif;
}

h1,h2,h3,h4,h5{
  margin:0;
  font-weight: 300;
  line-height:1.5;
}

strong{
  font-weight: 100;
} 

.thin{
  font-weight: 100 !important;
}

.light{
  font-weight: 300 !important;
}

h1 strong,h2 strong,h3 strong,h4 strong,h5 strong{
  font-weight: 300;
}

p{
  margin:0;
  line-height:1.5;
}


.p-2{
  line-height:2;
  padding: 0 !important;
}

.sp{
  display:none;
}

a{
  color: #000;
  cursor: pointer;
  display:block;
  transition:0.6s;
}

a:hover{
  color: #000;
  text-decoration:none;
}


a p{
  line-height:1;
}

.bg-gray{
  padding:260px 15% 120px;
  background:#F1F0EF;
}

.bg-gray h1{
  font-size:clamp(1.25rem, 0.614rem + 2.12vw, 3rem);
  margin-bottom:140px;
}

img{
  width:100%;
  object-fit: contain;
}

.main{
  padding:240px 0 10rem;
  /*overflow: hidden;*/
  position:relative;
  background: #FFFAED;
}

.main::before{
  content:"";
  position:absolute;
  width:53%;
  aspect-ratio:1016/1026;
  right:5%;
  top:160px;
  z-index: -1;
  background:url(https://conexion.co.jp/system_panel/uploads/images/20251125140531104798.png) no-repeat center/contain;
}

.container{
  padding:0 !important;
  max-width: 1345px;
  width: 80%;
}

.txt-btn{
  padding:16px 3rem 12px;
  border-radius: 28px;
  border: 1px solid #746354;
  color:#746354;
  background:transparent;
  transition-duration: 0.6s;
  transition-property: border-color, color;
  transition-timing-function: 
    cubic-bezier(.19, 1, .22, 1);
  position:relative;
  width:fit-content;
}

.main .txt-btn{
  margin:5rem auto 0;
}

.txt-btn:hover {
  color: #fff !important;
}


.txt-btn::before{
  -webkit-transform: scale(.9);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(.9);
  border-radius: 28px;
  background:#746354;
  content: "";
  opacity: 0;
  transition-duration: 0.6s;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  transition-timing-function: 
    cubic-bezier(.19, 1, .22, 1);
}

.txt-btn:hover::before{
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.txt-btn.arrow {
  position: relative;
}

.txt-btn.reverse {
  text-align:right;
}

.txt-btn.arrow::after {
  position: absolute;
  content:"";
  width:1rem;
  height:18px;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%) rotate(180deg);
  -webkit-transform: translateY(-50%)  rotate(180deg);
  -ms-transform: translateY(-50%)  rotate(180deg);
  transition:all 0.6s;
  background:url(https://conexion.co.jp/system_panel/uploads/images/20251125151919761920.png) no-repeat center/contain;
}

.txt-btn.reverse::after {
  right:auto;
  left: 1rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.txt-btn.arrow:hover::after {
  right: 0.5rem;
  background:url(https://conexion.co.jp/system_panel/uploads/images/20251125151919588841.png) no-repeat center/contain;
}

.txt-btn.arrow.reverse:hover::after {
  left: 0.5rem;
}

.txt-btn div{
  line-height: 1;
  overflow: hidden;
  position: relative;
  display: inline-flex;
  width: 85px;
  height: 17px;
}

.txt-btn div p{
  position:absolute;
  width: 100%;
  transition: all 0.6s;
  line-height:1.2;
  font-size:clamp(0.875rem, 0.83rem + 0.15vw, 1rem) !important;
}

.txt-btn div p:first-child{
  top: 0;
}

.txt-btn:hover div p:first-child{
  top: 100%;
}

.txt-btn div p:last-child{
  top: -100%;
}

.txt-btn:hover div p:last-child{
  top: 0;
}

.pankuzu{
  display: flex;
  width:80%;
  margin:0 auto 1rem;
  max-width:1345px;
  justify-content: end;
  gap: 2rem;
  flex-wrap: wrap;
}

.pankuzu a{
  color:#746354;
  position: relative;
}

.pankuzu a:hover{
  text-decoration:underline;
  opacity:0.7;
}

.pankuzu a::before{
  content:"";
  position: absolute;
  width: 1.2rem;
  height: 1px;
  background: #CEC1AB;
  right: -1.6rem;
  transform: rotate(-60deg);
  top: 0.6rem;
}

.pankuzu p{
  line-height:1;
}

strong,
em{
  font-weight:normal;
  display: inline-block;
  font-style:normal;
}

.lower-fv{
  width:80%;
  margin:0 auto 7.5rem;
  max-width:1345px;
}

.lower-fv .accent{
  color:#B59E7D;
  font-size:clamp(1rem, 0.909rem + 0.3vw, 1.25rem);
  margin-bottom:0.5rem;
  font-weight: 300;
}

.lower-fv h1{
  font-size:clamp(2rem, 1.455rem + 1.82vw, 3.5rem);
}

.lower-fv-img{
  width:80%;
  max-width:1345px;
  margin:0 auto 7.5rem;
  display:block;
  aspect-ratio:1345/745;
  object-fit:cover;
}

.lower-fv-bottom{
  display:flex;
  width:80%;
  max-width:1345px;
  margin:0 auto 7.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.lower-fv-bottom .lower-title{
  margin:0;
}

.lower-fv-bottom p{
  width:50%;
}

.lower-title{
  display:flex;
  gap:1rem;
  align-items: center;
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  margin-bottom:5rem;
}

.lower-title::before{
  content:"";
  background:#CEC1AB;
  width:14px;
  height:14px;
  display:block;
}

.main-bg{
  border:1px solid #CEC1AB;
  border-radius:10px;
  padding:100px 5% 120px;
  background:#FFFAED;
  width:80%;
  margin:0 auto ;
  max-width:1345px;
}

.cta-a{
  cursor: url(https://conexion.co.jp/system_panel/uploads/images/20251126092756615603.png) 0 0, auto;
}


.cta{
  padding:5rem 0;
  background:#5C4E42;
  z-index: 1;
  position: relative;
}

.cta-wrap{
  display:flex;
  max-width:750px;
  margin: 0 auto;
  width: 80%;
  justify-content: space-between;
}

.cta-left{
  width:51%;
  color:#FFFAED;
}

.cta-left h2{
  font-size:clamp(2rem, 1.818rem + 0.61vw, 2.5rem);
  margin:1.5rem 0 3.5rem;
}

.cta-left h2 + p{
  line-height:2;
}

.cta-wrap > img{
  width:44%;
}

.cta-mail-btn{
  display:none;
}

.scroll-list-wrap{
  position: relative;
  margin-top: -5rem;
  z-index: -1;
}


.scroll-list {
  z-index: 1;
  display: flex;
  list-style: none;
  padding-inline: 0;
  margin-inline: 0;
  gap: 0;
  width: 100vw;
  overflow: hidden;
}

.scroll-list > p {
  color:#746354;
  font-size: clamp(4.5rem, 2.773rem + 5.76vw, 9.25rem);
  white-space: nowrap;
  padding: 0 3rem 0 0;
  margin: 0;
  animation: text-right 48s 
    linear infinite;
}

@keyframes text-right{
  100% {
    transform: translateX(-100%);
  }
}


.beige{
  position:relative;
  z-index: 1;
}

.beige-bg{
  background:#F1EADA;
  margin-top: -1rem;
  overflow: hidden;
}

.beige::before{
  content:"";
  display:block;
  width:100%;
  aspect-ratio:3841/461;
  margin-bottom: -2px;
  background:url(https://conexion.co.jp/system_panel/uploads/images/20251126102936898322.png) no-repeat center/contain;
}

.beige::after{
  content:"";
  display:block;
  width:100%;
  margin-top: -2px;
  aspect-ratio:3841/461;
  background:url(https://conexion.co.jp/system_panel/uploads/images/20251126102936304515.png) no-repeat center/contain;
}

@media screen and (max-width: 1279px) {
  .lower-fv-bottom {
    flex-direction: column;
    gap: 2rem;
  }
  .lower-fv-bottom p {
    width: 100%;
  }
  .beige-bg{
    padding-top: 3rem;
  }
}

@media screen and (max-width: 1024px) {
  .cta-wrap {
    max-width: 690px;
    width: 90%;
  }
  .bg-gray{
    padding: 120px 10% 120px;
  }
  .lower-fv-bottom{
  }
  .lower-fv-bottom h2{
  }
  .lower-fv-img {
    margin: 0 auto 3.5rem;
  }
  .cta-mail-btn{
    display:block;
    width:5rem;
    margin:2.5rem auto 0;
  }
}

@media screen and (max-width: 767px) {
  .sp{
    display:block;
  }
  .pc{
    display:none;
  }
  body{
    font-size:14px;
  }
  .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
    padding:0;
  }
  p{
    line-height: 2;
  }
  .main {
    padding: 160px 0 7.5rem;
  }
  .main-bg{
    width:90%; 
    padding: 2.5rem 5%;
  }
  .lower-fv,
  .pankuzu{
    width: 90%;
  }
  .main::before{
    width: 100%;
    right: 0%;
    top:5rem;
    background: url(https://conexion.co.jp/system_panel/uploads/images/20251128144921150348.png) no-repeat center / contain;
  }
  #root{
    padding-bottom :0 !important;
  }
  .cta-wrap {
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }
  .cta-wrap > img {
    width: 52%;
  }
  .cta-left {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
  .cta-left h2{
    margin:1rem 0 1.5rem;
  }
  .cta .scroll-list-wrap {
    position: absolute;
    margin-top: 0;
    top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  .lower-fv-img {
    width: 100%;
  }
  .lower-fv-bottom{
    width: 90%;
  }
  .lower-title::before{
    width: 10px;
    height: 10px;
  }
  .lower-title{
    margin-bottom: 2.5rem;
  }
  .container{
    width: 90%;
  }
  .beige-bg {
    padding: 5rem 0;
  }
  .beige{
    margin: 4rem 0;
  }
}