@charset "utf-8";

.merit{
  margin:120px auto 10rem;
  width:80%;
  max-width:1345px;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.merit .swiper{
  width:42%;
}

.merit-txt{
  width:53%;
}

.merit-txt h2{
  font-size:clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
  margin-bottom:2rem;
}

.merit-txt-box{
  display:flex;
  justify-content: space-between;
  align-items: center;
  font-size:14px;
  gap:2rem;
}

.merit-txt-box h3{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  aspect-ratio:1/1;
  padding:2rem;
  display: flex;
  align-items: center;
  position:relative;
}

.merit-txt-box h3::before{
  content:"";
  position:absolute;
  width:150%;
  aspect-ratio:1/1;
  background:url(https://ebisukoumuten.co.jp/system_panel/uploads/images/20250828100821872221.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;
}

.merit-txt-box p{
  width:calc(80% - 2rem);
}

.merit-txt-box:not(:last-child){
  margin-bottom:1.5rem;
}

.can .border-title{
  margin:0 0 2.5rem auto;
}

.can .container{
  max-width:1080px;
}

.can-wrap{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom:5rem;
}

.can-wrap:nth-child(3){
  flex-direction:row-reverse;
}

.can-txt{
  width:342px;
  font-size:14px;
}

.can-txt > p{
  line-height:2;
}

.can-title{
  writing-mode: vertical-rl;
  margin:0 auto 3rem;
}

.can-title p{
  color:#A38370;
  font-weight: 400;
}

.can-title h3{
  font-size:clamp(1.5rem, 1.318rem + 0.61vw, 2rem);
}

.can-swiper{
  width:55%;
  margin:0 !important;
  padding: 3rem 0 3rem !important;
}

.can-swiper img{
  aspect-ratio: 594 / 455;
  object-fit: cover;
}

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

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

.point{
  margin:120px auto 140px;
  width:80%;
  max-width:1345px;
}

.point-title{
  display:flex;
  align-items:center;
  font-size:14px;
  margin-bottom:2.5rem;
}

.point-title h2{
  font-size:clamp(1.5rem, 1.136rem + 1.21vw, 2.5rem);
  padding-right:6%;
  margin-right:6%;
  border-right:0.5px solid #3B3B3B;
}

.point-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.point-item{
  width:calc((100% - 1rem)/2);
  display:flex;
  gap:1rem;
  background:#EAE3DD;
  border-radius:10px;
  padding:20px 1rem;
  font-size:14px;
}

.point-item .btn{
  margin:2rem 0 0 auto;
  box-shadow:none;
  padding: 0 1rem;
}

.point-item h3{
  font-size:1.5rem;
  margin-bottom:0.5rem;
}

.point-item img{
  width:175px;
}

.point-txt{
  width:calc(100% - 191px);
  padding-top: 1.5rem;
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1024px) {
  .merit{
    flex-direction: column;
    gap: 1.5rem;
  }
.merit .swiper{
    width:100%;
    max-width:400px;
  }
  .merit-txt, .can-txt {
    width: 100%;
  }
  .can-wrap,
  .can-wrap:nth-child(3){
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  .swiper{
    width:100%;
    max-width:450px;
    padding-top: 0 !important;
  }
  .can-txt > p {
    width: fit-content;
    margin: 0 auto;
  }
  .point-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .point-title h2 {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
  }
  .point-wrap {
    flex-direction: column;
  }
  .point-item {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .point-item {
    flex-direction: column;
  }
  .point-item img {
    width: 100%;
  }
  .point-txt {
    width: 100%;
    padding-top: 0;
  }
  .merit {
    margin: 80px auto;
    width: 90%;
  }
  .merit-txt-box{
    flex-direction: column;
    gap: 1rem;
  }
  .merit-txt-box p {
    width: 100%;
  }
  .pink {
    padding: 80px 0;
  }
  .can .border-title {
    margin: 0 auto 5rem;
  }
  .can-title {
    writing-mode: lr;
    margin: 0 auto 1.5rem;
    text-align: center;
  }
  .swiper{
    padding-bottom: 2.5rem !important;
  }
  .point {
    margin: 80px auto;
    width: 90%;
  }
}