/* =========================================
  Other Parts Page
  Pop'nLand Design
========================================= */

.other-parts-page{
  --bg:#F5F1E8;
  --text:#202020;
  --teal:#08BEB8;
  --red:#F04448;
  --orange:#FF8200;
  --blue:#0D92DF;
  --purple:#7131C7;
  --white:#fff;
  --line:#D9D9D9;

  position:relative;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  padding:92px 0 0px;
  font-family:"Zen Kaku Gothic New",sans-serif;
}

.other-parts-page *,
.other-parts-page *::before,
.other-parts-page *::after{
  box-sizing:border-box;
}

.other-parts-page a{
  color:inherit;
  text-decoration:none;
}

.other-parts-page img{
  display:block;
  max-width:100%;
}

.op-inner{
  position:relative;
  z-index:2;
  width:min(1500px,calc(100% - 80px));
  margin:0 auto;
}

.op-section{
  position:relative;
}

.op-series-section{
  padding-bottom:112px;
}


.op-en{
  margin:0 0 12px;
  text-align:center;
  color:var(--teal);
  font-size:21px;
  line-height:1;
  font-weight:900;
  letter-spacing:.02em;
}

.op-title{
  margin:0;
  text-align:center;
  font-size:clamp(34px,3.4vw,52px);
  line-height:1.35;
  font-weight:900;
  letter-spacing:.06em;
}

/* background blobs */
.op-blob{
  position:absolute;
  z-index:0;
  pointer-events:none;
}

.op-blob-red{
  width:390px;
  height:270px;
  top:-120px;
  left:-80px;
  background:var(--red);
  border-radius:42% 58% 55% 45% / 42% 48% 52% 58%;
  transform:rotate(-12deg);
}

.op-blob-orange{
  width:330px;
  height:370px;
  left:-145px;
  bottom:42px;
  background:var(--orange);
  border-radius:42% 58% 47% 53% / 48% 43% 57% 52%;
}

.op-blob-blue{
  width:330px;
  height:330px;
  right:-75px;
  bottom:26px;
  background:var(--blue);
  border-radius:48% 52% 45% 55% / 42% 42% 58% 58%;
}

.op-wave{
  position:absolute;
  left:-20px;
  right:-20px;
  bottom:0;
  z-index:3;
  height:70px;
  background:
    radial-gradient(48px 35px at 48px 0, transparent 43px, var(--purple) 44px, var(--purple) 72px, transparent 73px)
    repeat-x;
  background-size:128px 70px;
}

/* parts cards */
.op-parts-grid{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:18px;
}

.op-part-card{
  display:grid;
  grid-template-rows:auto 1fr;
  min-height:205px;
  background:#fff;
  border:2px solid #cfcfcf;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 12px rgba(40,30,15,.04);
  transition:.25s ease;
}

.op-part-card:hover{
  transform:translateY(-4px);
}

.op-part-card h3{
  display:grid;
  place-items:center;
  min-height:35px;
  margin:0;
  padding:7px 8px;
  background:#d8d8d8;
  font-size:1.2rem;
  line-height:1.25;
  text-align:center;
  font-weight:900;
  letter-spacing:.02em;
}

.op-part-img{
  display:grid;
  place-items:center;
  min-height:165px;
  
}

.op-part-img img{
  width:200%;
  height:145px;
  object-fit:contain;
}

/* categories */
.op-category-grid{
  margin-top:58px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:28px;
  align-items:start;
}

.op-category-card{
  display:grid;
  justify-items:center;
  gap:16px;
}

.op-category-card h3{
  margin:0;
  min-height:24px;
  text-align:center;
  font-size:18px;
  line-height:1.4;
  font-weight:900;
  letter-spacing:.02em;
}

.op-circle{
  width:170px;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:50%;
  background:
    linear-gradient(45deg,#eeeeee 25%,transparent 25%) 0 0/20px 20px,
    linear-gradient(-45deg,#eeeeee 25%,transparent 25%) 0 0/20px 20px,
    linear-gradient(45deg,transparent 75%,#eeeeee 75%) 0 0/20px 20px,
    linear-gradient(-45deg,transparent 75%,#eeeeee 75%) 0 0/20px 20px,
    #fafafa;
  transition:.25s ease;
}

.op-category-card:hover .op-circle{
  transform:translateY(-5px);
}

.op-circle img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* more button */
.op-more{
  position:absolute;
  right:80px;
  bottom:112px;
  z-index:5;
  width:210px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  background:#fff;
  border:3px solid #111;
  border-radius:999px;
  font-size:17px;
  font-weight:900;
}

.op-more i{
  width:1px;
  height:34px;
  background:#111;
  position:relative;
}

.op-more i::after{
  content:"→";
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  font-style:normal;
  font-size:22px;
}

/* responsive */
@media(max-width:1200px){
  .op-parts-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .op-category-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:767px){

  .op-inner{
    width:calc(100% - 28px);
  }

  .op-series-section{
    padding-bottom:72px;
  }

  .op-en{
    font-size:15px;
  }

  .op-title{
    font-size:28px;
    letter-spacing:.03em;
  }

  .op-parts-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-top:34px;
  }

  .op-part-card{
    min-height:170px;
  }

  .op-part-card h3{
    min-height:34px;
    font-size:13px;
  }

  .op-part-img{
    min-height:136px;
  }

  .op-part-img img{
    height:118px;
  }

  .op-category-grid{
    grid-template-columns:repeat(2,1fr);
    gap:24px 12px;
    margin-top:38px;
  }

  .op-category-card h3{
    font-size:13px;
  }

  .op-circle{
    width:min(128px,42vw);
  }

  .op-more{
    right:50%;
    bottom:86px;
    transform:translateX(50%);
    width:180px;
    height:58px;
    font-size:15px;
  }

  .op-blob-red{
    width:270px;
    height:190px;
    top:-92px;
    left:-105px;
  }

  .op-blob-orange{
    width:250px;
    height:290px;
    left:-160px;
  }

  .op-blob-blue{
    width:260px;
    height:260px;
    right:-145px;
  }

  .op-wave{
    height:56px;
    background-size:104px 56px;
  }
}
.case-banner{
  position:relative;
  overflow:hidden;
  min-height:500px;
  background:#f4f0e7;
  display:flex;
  align-items:center;
  justify-content:center;
}

.case-banner__inner{
  position:relative;
  z-index:2;
  width:min(1180px,100%);
  margin:0 auto;
  padding:90px 20px;
  text-align:center;
}

.case-banner__en{
  margin:0 0 24px;
  color:#08c6bd;
  font-size:28px;
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
}

.case-banner__title{
  margin:0;
  color:#202020;
  font-size:clamp(38px,5vw,64px);
  line-height:1.3;
  font-weight:900;
  letter-spacing:.12em;
}

.case-banner__orange{
  position:absolute;
  left:-120px;
  top:-180px;
  width:390px;
  height:720px;
  background:#ff8200;
  border-radius:0 0 55% 45% / 0 0 45% 55%;
  transform:rotate(-8deg);
  z-index:1;
}

.case-banner__orange::after{
  content:"";
  position:absolute;
  left:-80px;
  bottom:-110px;
  width:360px;
  height:260px;
  background:#ff8200;
  border-radius:50%;
  transform:rotate(18deg);
}

.case-banner__blue{
  position:absolute;
  right:-80px;
  top:18px;
  width:530px;
  height:610px;
  background:#0a91dc;
  border-radius:48% 52% 0 45% / 35% 45% 0 55%;
  z-index:1;
}

.case-banner__blue::before{
  content:"";
  position:absolute;
  left:-110px;
  bottom:-70px;
  width:360px;
  height:340px;
  background:#0a91dc;
  border-radius:50%;
}

.case-banner__btn{
  position:absolute;
  right:30px;
  bottom:78px;
  width:310px;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  border:4px solid #202020;
  border-radius:999px;
  background:#fff;
  color:#202020;
  text-decoration:none;
  font-size:22px;
  font-weight:900;
  letter-spacing:.12em;
  transition:.25s ease;
}

.case-banner__btn span{
  line-height:1;
}

.case-banner__btn i{
  position:relative;
  width:44px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  border-left:4px solid currentColor;
  font-style:normal;
  font-size:36px;
  line-height:1;
}

.case-banner__btn:hover{
  background:#202020;
  color:#fff;
  transform:translateY(-5px);
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}

@media(max-width:1024px){
  .case-banner{
    min-height:200px;
    margin-bottom: 100px;
  }

  .case-banner__orange{
    left:-170px;
    top:-220px;
    width:360px;
    height:650px;
  }

  .case-banner__blue{
    right:-210px;
    width:480px;
    height:560px;
  }

  .case-banner__btn{
    right:24px;
    bottom:50px;
    width:260px;
    height:74px;
    font-size:18px;
  }
}

@media(max-width:640px){
  .case-banner{
    min-height:360px;
  }

  .case-banner__inner{
    padding:70px 18px 130px;
  }

  .case-banner__en{
    font-size:18px;
    margin-bottom:16px;
  }

  .case-banner__title{
    font-size:30px;
    letter-spacing:.08em;
  }

  .case-banner__orange{
    left:-190px;
    top:-260px;
    width:330px;
    height:620px;
  }

  .case-banner__blue{
    right:-230px;
    top:120px;
    width:390px;
    height:430px;
  }

  .case-banner__btn{
    left:50%;
    right:auto;
    bottom:38px;
    transform:translateX(-50%);
    width:230px;
    height:64px;
    border-width:3px;
    font-size:16px;
    gap:24px;
  }

  .case-banner__btn i{
    width:36px;
    height:36px;
    border-left-width:3px;
    font-size:28px;
  }

  .case-banner__btn:hover{
    transform:translateX(-50%) translateY(-5px);
  }
}
.case-banner__btn{
  position:absolute;
  left:50%;
  right:auto;
  bottom:70px;
  transform:translateX(-50%);
  width:310px;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  border:4px solid #202020;
  border-radius:999px;
  background:#fff;
  color:#202020;
  text-decoration:none;
  font-size:22px;
  font-weight:900;
  letter-spacing:.12em;
  transition:.25s ease;
  margin:0;
}

.case-banner__btn:hover{
  background:#202020;
  color:#fff;
  transform:translateX(-50%) translateY(-5px);
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}
@media(max-width:1024px){

  .case-banner__btn{
    left:50%;
    right:auto;
    bottom:50px;
    transform:translateX(-50%);
    width:260px;
    height:74px;
    font-size:18px;
  }

  .case-banner__btn:hover{
    transform:translateX(-50%) translateY(-5px);
  }

}
@media(max-width:640px){

  .case-banner__btn{
    left:50%;
    right:auto;
    bottom:38px;
    transform:translateX(-50%);
    width:230px;
    height:64px;
    border-width:3px;
    font-size:16px;
    gap:24px;
  }

  .case-banner__btn i{
    width:36px;
    height:36px;
    border-left-width:3px;
    font-size:28px;
  }

  .case-banner__btn:hover{
    transform:translateX(-50%) translateY(-5px);
  }

}
.case-banner__btn{
  left:50%;
  right:auto;
  bottom:0px;   /* 70px → 20px */
  transform:translateX(-50%);
}
@media(max-width:1024px){
  .case-banner__btn{
    left:50%;
    right:auto;
    /* 50px → 20px */
    transform:translateX(-50%);
  
  }
}
@media(max-width:640px){
  .case-banner__btn{
    left:50%;
    right:auto;
    bottom:20px;   /* 38px → 20px */
    transform:translateX(-50%);
  }
}