@charset "utf-8";


.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background-color: #F8F4EE;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 4s forwards; /* 最後に全体をフェードアウト */
}

/* 背景フェードアウト */
@keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* p：0.5s後に始まり → 2s表示 → 2.5s後には消える */
.loading p {
  opacity: 0;
  position: absolute;   /* img と重ねてもOKにする */
  animation: textFade 2s 0.5s forwards;
  font-size: clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  text-align: center;
}

@keyframes textFade {
  0%   { opacity: 0; transform: translateY(20px); }
  40%  { opacity: 1; transform: translateY(0); }   /* フェードイン */
  100% { opacity: 0; }                             /* フェードアウト */
}

/* img：p が終わるタイミング(約2.5s後)に開始 → 2s表示 → 4.5s後に消える */
.loading img {
  opacity: 0;
  position: absolute;
  width: 240px;
  margin: 0 auto;
  animation: logoFade 2s 2.5s forwards;
}

@keyframes logoFade {
  0%   { opacity: 0; transform: translateY(20px); }
  40%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}


.fv {
  position: relative;
  height:300vh;
}

.about{
  width:70%;
  margin:20rem auto 0;
  color:#fff;
  position: relative;
  z-index: 15;
}

.about >p{
  text-shadow:1px 1px 2px rgba(0,0,0,0.45);
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
  margin-bottom:2.5rem;
  line-height:3;
  font-weight:400;
}

.about .btn{
  margin:5rem 0 0;
  color:#fff;
  border-bottom: 1px solid #fff;
  box-shadow:none;
  text-shadow:1px 1px 2px rgba(0,0,0,0.45);
  transition:0.3s;
}

.about .btn:hover{
  opacity:0.7;
  transform:none;
}

.about .btn::before{
  background: url(https://ebisukoumuten.co.jp/system_panel/uploads/images/20250807114819652876.png) no-repeat center / contain;
}


.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(0px);
  pointer-events: none;
  z-index: 10;
  transition: backdrop-filter 0.1s ease-out;
}

.fv::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:linear-gradient(to bottom, rgba(255,255,255, 0),  rgba(255,255,255, 0.6));
  top:0;
  left:0;
  z-index: 2;
}

.fv-text{
  position:absolute;
  width:90%;
  left:5%;
  height: 95vh;
  top:0;
  color:#fff;
  z-index:10;
  display: flex;
  flex-direction: column;
  justify-content: end;
  opacity: 1;
  transition: opacity 0.1s ease-out;
}

/*
.fv-text h1{
font-size:clamp(1.5rem, 0.773rem + 2.42vw, 3.5rem);
text-shadow:2px 2px 4px rgba(0,0,0,0.4);
background:rgba(163,131,112,0.7);
padding:4px 2rem 4px 1rem;
width:fit-content;
margin-bottom:1.5rem;
}
*/

.fv-text h1{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  margin-top:2.5rem;
  text-shadow:1px 1px 2px rgba(0,0,0,0.4);
}

.fv-swiper{
  position:sticky !important;
  width:100%;
  height:100vh;
  top:0;
  left:0;
}

.fv-swiper .swiper-img{
  height:100%;
}

.fv-swiper .swiper-slide-active .swiper-img,
.fv-swiper .swiper-slide-duplicate-active .swiper-img,
.fv-swiper .swiper-slide-prev .swiper-img {
  animation: zoomUp 12s linear 0s normal both;
}

.fv-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-swiper .swiper-pagination-bullet{
  opacity:0 !important;
  display:none !important;
}
.fv-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{
  opacity:1 !important;
  display:block !important;
}

.fv-swiper .circle-pagination {
  position: relative;
  width: 40px;
  height: 40px;
  z-index: 1;
  background-color:#A38370;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  margin: auto;
  cursor: pointer;
  font-size: 14px;
}

.fv-swiper .swiper-pagination{
  width: fit-content !important;
  left: auto !important;
  right:2.5%;
  transform: scale(2);
  bottom: 3rem !important;
}

.fv-swiper .circle-pagination .circle-pagination_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: #fff;
  border-radius: 50%;
  color: #BFBFBF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.fv-swiper-text{
  position: absolute;
  right: 1%;
  bottom: 3rem;
  color: #fff;
  font-size: clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  text-align: left;
  width: 14%;
  font-weight:500;
  display:none;
}

.fv-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active .circle-pagination_inner {
  color:#A38370;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 10px;
}

.circle-pagination::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  transform-origin: right 20px;
  position: absolute;
  top: 0;
  left: -20px;
  z-index: 2;
}

.circle-pagination::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  transform-origin: left 20px;
  position: absolute;
  top: 0px;
  left: 20px;
  z-index: 3;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active.circle-pagination::before {
  animation: circleRight 5s linear forwards;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active.circle-pagination::after {
  animation: circleLeft 5s linear forwards;
}

/* ==========================
アニメーションを定義
========================== */
@keyframes circleLeft {
  0% {
    transform: rotate(0deg);
    background-color: #fff;
  }

  50% {
    transform: rotate(180deg);
    background-color: #fff;
  }

  50.01% {
    transform: rotate(360deg);
    background-color: #A38370;
  }

  100% {
    transform: rotate(360deg);
    background-color: #A38370;
  }
}

@keyframes circleRight {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

.top-fixed {
  position: sticky;
  top: 0;
  padding: 5rem 1rem 0;
  margin: 5rem auto 0;
  height:100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.top-fixed:last-child{
  margin: 5rem auto 5rem;
}


.section__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.top-service{
  margin:10rem 0;
}

.top-service-wrap{
  padding:10rem 10% 200px;
  border-radius:2rem;
  position:relative;
}

.top-fixed::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:url(https://ebisukoumuten.co.jp/system_panel/uploads/images/20250805161424710237.png) no-repeat center/cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: -1;
}

.top-fixed:nth-child(2)::before{
  background:url(https://ebisukoumuten.co.jp/system_panel/uploads/images/20250805161424250621.png) no-repeat center/cover;
}

.top-fixed:nth-child(3)::before{

  background:url(https://ebisukoumuten.co.jp/system_panel/uploads/images/20250807150220826519.png) no-repeat center/cover;
  background:#F7F5F4;
}

.top-service-top{
  padding-bottom:3.5rem;
  position:relative;
  max-width:900px;
  margin:0 auto;
}

.top-service-top::before{
  content:"";
  position:absolute;
  width:540px;
  height:0.5px;
  background:#3B3B3B;
  bottom:0;
  left:0;
}

.top-service-top h3{
  font-size:clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
  margin-bottom:1rem;
}

.top-service-bottom{
  display:flex;
  gap: 1.5rem;
  align-items: flex-start;
  max-width:900px;
  margin:5rem auto 0;
}

.top-service-bottom img{
  width:2.5rem;
}

.top-service-bottom p{
  width:calc(100% - 4rem);
}

.top-service2{
  margin-bottom:10rem;
}

.top-service2 .container{
  max-width:1080px;
}

.top-service2-top{
  display:flex;
  gap: 3rem;
}

.top-service2-top p{
  display:flex;
  color:#A38370;
  text-align:center;
  aspect-ratio:1/1;
  position:relative;
  width: 180px;
  justify-content: center;
  align-items: center;
}

.top-service2-top p:first-child{
  margin-top: 40px;
  animation-delay:0.5s;
}

.top-service2-top p:last-child{
  animation-delay:1s;
}

.top-service2-top p::before{
  content:"";
  position:absolute;
  width:110%;
  aspect-ratio:1/1;
  border-radius:999vh;
  filter:blur(10px);
  background:#fff;
  z-index:-1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.top-service2-wrap{
  display:flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: -2rem 0 100px auto;
}

.top-service2-wrap img{
  width:45%;
}

.top-service2-txt{
  width:50%;
}

.top-service2-txt p{
  padding:1.5rem 0.5rem;
  border-top:0.5px solid #A3836F;
}

.top-service2-txt p:last-child{
  border-bottom:0.5px solid #A3836F;
}

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

.value .fadeInUp > p{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
}

.value .fadeInUp > p strong{
  font-weight:400;
}

.value-wrap{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 4rem 0 10rem;
}

.value-left{
  width:45%;
  position: sticky;
  top: 7.5rem;
  left: 0;
}

.value-right{
  width:50%;
  padding-top: 5rem;
}

.imgbox{
  transition:0.3s;
}

.imgbox img{
  aspect-ratio:1/1;
  object-fit:cover;
}

.imgbox:not(.current) {
  opacity:0;
  display:none;
}

.value-text p{
  margin-bottom:2rem;
  line-height:3;
}

.value-text {
  padding-bottom: 5rem;
  color: #EAE3DD;
  transition:0.3s;
}

.value-text.current {
  color: #3B3B3B;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.voice{
  padding:4rem 0 0;
  position:relative;
  margin:10rem 0;
}

.voice .container{
  padding:0 2%  0 0 !important;
}

.voice::before{
  content:"";
  position:absolute;
  background:#EAE3DD;
  width:90%;
  height:95%;
  z-index:-1;
  top:0;
  left:0;
}

.voice .swiper-slide img{
  aspect-ratio:480/700;
  object-fit:cover;
}
.voice .swiper-slide-active .swiper-img,
.voice .swiper-slide-duplicate-active .swiper-img,
.voice .swiper-slide-prev .swiper-img {
  animation: zoomUp 12s linear 0s normal both;
}
.voice .swiper-slide img {
  height: auto;
  width: 100%;
}

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

.voice .img-swiper{
  width:36%;
  margin: 0;
  display:none !important;
}

.voice-left{
  width:59%;
}

.voice-left .btn{
  margin-top:3rem;
}

.voice-wrap img{
  width:36%;
  margin: 0;
}

.voice .txt-swiper {
  margin: 0;
  padding-bottom: 3rem;
}

.voice .swiper-pagination{
  bottom:0;
  pointer-events:none;
}

.voice .swiper-pagination-bullet{
  background:#fff !important;
}

.voice .swiper-pagination-bullet-active{
  background:#A38370 !important;
}

.voice .txt-swiper .swiper-slide{
  opacity:0 !important;
  padding: 2rem 5%;
}

.voice .txt-swiper .swiper-slide-active{
  opacity:1 !important;
}

.voice .txt-swiper .swiper-wrapper{
  background: #F7F4EE;
  border-radius: 8px;
}

.txt-swiper .swiper-slide h3{
  font-size:clamp(1.125rem, 0.898rem + 0.76vw, 1.75rem);
  margin-bottom:1rem;
  text-align:center;
}

.txt-swiper .swiper-slide p:last-child{
  text-align:center;
  margin-top:2rem;
  padding-top:2rem;
  border-top:0.5px solid #3B3B3B;
}

.works{
  margin:100px 0 120px 10%;
  padding:5rem 0 0;
  position:relative;
}

.works .webgene-item-main-image{
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.works .webgene-item{
  position: relative;
}

.works .webgene-item a{
  display:block;
  width:100%;
}


.works .webgene-item a:hover{
  opacity:0.7;
}

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

.works-swiper{
  margin:3rem 0 0 10% !important;
}

.works-swiper img{
  aspect-ratio:1/1;
  object-fit:cover;
}

.works-swiper .swiper-button-next{
  right:auto;
  left:10px;
  width: 5%;
  aspect-ratio: 1 / 1;
  height: auto;
}

.works-swiper .swiper-button-next:after{
  color: transparent;
  width: 100%;
  height: 100%;
  background:url(https://ebisukoumuten.co.jp/system_panel/uploads/images/20250808120043702178.png) no-repeat center/contain;
}

.works .case-text{
  margin-top:1.5rem;
}

.works .case-text .d-flex{
  margin-bottom:1rem;
  gap:0.5rem;
}

.works .case-text .d-flex p:first-child{
  font-size:14px;
  padding:2px 16px;
  background:#FFFFFF;
}

.works .loopWrap{
  margin:3rem 0 0 5%;
}

.works::before{
  content:"";
  position:absolute;
  width:100%;
  height:80%;
  background:#D0C3B9;
  top:0;
  left:0;
  z-index:-1;
}

.works-wrap{
  display:flex;
  width: 90%;
  justify-content: space-between;
  align-items: center;
}

.works-wrap .btn{
  margin:0;
}

.faq{
  padding:5rem 0 7.5rem;
  background:#EAE3DD;
}

.top-title{
  text-align:center;
  width:fit-content;
  margin:0 auto 2.5rem;
}

.top-title.left{
  text-align:left;
  margin:0 0 2.5rem;
}

.top-title p{
  color:#A38370;
}

.top-title h2{
  font-size:clamp(1.5rem, 1.136rem + 1.21vw, 2.5rem);
}

.accordion-content {
  display: none;
}

.accordion-header {
  padding: 0rem 2rem;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
}

.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:#A38370;
}
.accordion-header::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}
.accordion-header.active::after{transform:rotate(0deg);}

.accordion-content {
  padding: 1rem 2rem 0;
}

.accordion-header:hover {
  opacity:0.7;
}

.accordion{
  padding:2rem 0;
  border-top:0.5px solid #3B3B3B;
}

.accordion.last{
  border-bottom:0.5px solid #3B3B3B;
}

.accordion-header p{
  position:relative;
}

.accordion-header p::before{
  content:"Q";
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  left: -2rem;
  color:#A38370;
  font-family: "Lato", sans-serif;
  font-weight: 400;
}

.accordion-content p{
  position:relative;
}

.accordion-content p::before {
  content: "A";
  position: absolute;
  top: 0;
  left: -2rem;
  color: #A38370;
  font-family: "Lato", sans-serif;
  font-weight: 400;
}

.diary{
  margin-top:7.5rem;
  display: flex;
  justify-content: space-between;
}

.diary-left{
  width:45%;
}

.diary-right{
  width:50%;
  display:flex;
  flex-wrap:wrap;
}

.diary-right a{
  width:24%;
  position:relative;
}

.diary-right div{
  position:absolute;
  width:80%;
  left:10%;
  top:2.5rem;
  text-align:center;
  font-size:12px;
}

.diary-right div img{
  width: 65%;
  margin: 0 auto 1rem;
  max-width: 75px;
  aspect-ratio: 1 / 1;
  border-radius: 999vh;
  object-fit: cover;
}

.value-text h3{
  font-size:clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
  margin-bottom:1.5rem;
}

.works > .btn{
  display:none;
}

.value-right img{
  display:none;
}

.value-text p {
  margin-bottom: 0rem;
}

@media screen and (max-width: 1300px) {
  .fv-swiper-text{
    width: 20%;
  }
  .voice::before{
    width: 95%;
    height: 105%;
  }
  .diary{
    flex-direction: column;
    gap: 2.5rem;
  }
  .diary-right{
    width: 100%;
    max-width: 700px;
  }
  .diary-left {
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .works-wrap .btn{
    display:none;
  }
  .works > .btn{
    display:flex;
    margin-top:2rem;
  }
  .works::before{
    height:105%;
  }
  .works-wrap{
    width:100%;
  }
  .top-service2-wrap{
    width: 100%;
    margin: 0rem 0 100px auto;
    flex-direction: column;
    gap: 1.5rem;
  }
  .top-service2-wrap img{
    width: 90%;
    max-width: 450px;
  }
  .top-service2-txt {
    width: 100%;
  }
  .fv-text h2{
    margin-top: 0rem;
  }
  .fv-text{
    height: 85vh;
  }
  .fv-swiper-text {
    width: 25%;
  }
  .voice .container {
    padding: 0 0% !important;
    width: 85%;
  }
  .value-left{
    display:none;
  }
  .value-right {
    width: 100%;
    padding-top: 0rem;
  }
  .value-right img{
    display:block;
    aspect-ratio:1/1;
    object-fit:cover;
    max-width:450px;
    margin:0 auto 1.5rem;
  }
  .value-text{
    color: #3B3B3B;
  }
    .voice-wrap{
	flex-direction: column-reverse;
    gap: 2.5rem;
    align-items: center;
  }
  .voice-wrap img{
    width: 100%;
    max-width:450px;
  }
  .voice-left {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .top-service-top::before{
    width:100%;
  }
  .fv-text h1{
    padding: 4px 0rem 4px 0.5rem;
    font-size:1.25rem;
    margin-bottom: 0.5rem;
  }
  .fv-text h2{
    font-size: 14px;
    margin-top: 0.5rem;
  }
  .fv-swiper .swiper-pagination{
    transform: scale(1);
    bottom: 1rem !important;
    right: 5%;
  }
  .fv-swiper-text{
    font-size:14px;
    width:35%;
    bottom: 1.5rem;
  }
  .about {
    width: 90%;
    margin: 10rem auto 0;
  }
  .about >p {
    font-size: 14px;
    margin-bottom: 1.5rem;
  }
  .top-service {
    margin: 5rem 0;
  }
  .top-fixed{
    margin: 0rem auto 0;
  }
  .top-service-top {
    padding-bottom: 2.5rem;
  }
  .top-service-bottom{
    margin: 2.5rem auto 0;
    position: relative;
  }
  .top-service-bottom img {
    width: 2.5rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
  .top-service-bottom p {
    width: 95%;
    margin: 1rem 0 0 auto;
  }
  .top-service-wrap {
    padding: 10rem 5% 200px;
  }
  .top-service2-txt p {
    padding: 1rem 0.5rem;
  }
  .top-service2-wrap{
    margin: 0 0 2.5rem auto;
  }
  .top-service2 {
    margin-bottom: 7.5rem;
  }
  .value .fadeInUp > p {
    font-size: 1rem;
  }
  .top-title.left{
    margin: 0 0 1.5rem;
  }
  .value-wrap{
    margin: 2rem 0 7.5rem;
  }
  .value-text {
    padding-bottom: 2.5rem;
  }
  .value-text p {
    margin-bottom: 0rem;
    line-height: 2;
  }
  .voice .img-swiper{
    position: absolute;
    top: -12rem;
    right: 0;
    width: 140px;
  }
  .voice::before {
    width: 100%;
    top: 5rem;
    height: calc(100% - 5rem);
  }
  .voice {
    padding: 0rem 0 5rem;
    margin: 10rem 0 0;
  }
  .voice .container > .voice-left{
    width: fit-content;
  }
  .voice .txt-swiper .swiper-slide{
    padding: 3.5rem 5% 2rem;
  }
  .voice .txt-swiper {
    padding-bottom: 2.5rem;
  }
  .voice-left .btn {
    margin-top: 1rem;
  }
  .works {
    margin: 0;
    padding: 2.5rem 0 5rem;
  }
  .works-swiper .swiper-button-next{
    width:2rem;
  }
  .works-swiper {
    margin: 3rem 0 0 0% !important;
    padding-left: 5% !important;
  }
  .faq {
    padding: 2.5rem 0 7.5rem;
  }
  .accordion {
    padding: 1rem 0;
  }
  .diary-right a {
    width: 50%;
  }
}