/* =========================================
  Other Blocks Series
  Pop'nLand tone
========================================= */

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

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

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

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

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

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

.ob-section{
  position:relative;
}

.ob-series-section{
  padding-bottom:48px;
}

.ob-category-section{
  padding-bottom:38px;
}

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

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

/* decoration */
.ob-blob{
  position:absolute;
  z-index:0;
  pointer-events:none;
}

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

.ob-blob-orange{
  width:320px;
  height:330px;
  left:-150px;
  bottom:42px;
  background:var(--orange);
  border-radius:42% 58% 50% 50% / 48% 43% 57% 52%;
}

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

.template_contact{
  margin-top: 100px;
}

.ob-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;
}

/* series cards */
.ob-series-grid{
  margin:42px auto 0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}

.ob-series-card{
  position:relative;
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:250px;
  background:#fff;
  border:3px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 7px 14px rgba(40,30,15,.04);
  transition:.25s ease;
}

.ob-series-card:hover{
  transform:translateY(-5px);
}

.ob-series-card h3{
  min-height:52px;
  margin:0;
  padding:18px 34px 8px 18px;
  font-size:17px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:.02em;
}

.ob-arrow{
  position:absolute;
  right:16px;
  top:13px;
  color:#cfcfcf;
  font-size:32px;
  line-height:1;
  font-weight:300;
}

.ob-card-img{
  display:grid;
  place-items:center;
  padding:8px 18px;
}

.ob-card-img img{
  width:100%;
  height:110px;
  object-fit:contain;
}

.ob-series-card p{
  margin:0;
  padding:10px 12px 20px;
  text-align:center;
  font-size:15px;
  line-height:1.45;
  font-weight:900;
}

/* categories */
.ob-category-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:22px;
  align-items:start;
}

.ob-category-card{
  display:grid;
  justify-items:center;
  gap:15px;
}

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

.ob-circle{
  width:145px;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:50%;
  background:#fff;
  transition:.25s ease;
}

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

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

/* button */
.ob-more{
  position:absolute;
  right:74px;
  bottom:112px;
  z-index:5;
  width:205px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  background:#fff;
  border:3px solid #111;
  border-radius:999px;
  font-size:16px;
  font-weight:900;
}

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

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

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

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

@media(max-width:767px){
  .other-blocks-page{
    padding:62px 0 0px;
  }

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

  .ob-series-section{
    padding-bottom:64px;
  }

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

  .ob-title{
    font-size:27px;
    letter-spacing:.03em;
  }

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

  .ob-series-card{
    min-height:210px;
    border-radius:12px;
  }

  .ob-series-card h3{
    min-height:44px;
    font-size:13px;
    padding:12px 28px 6px 12px;
  }

  .ob-arrow{
    right:12px;
    top:8px;
    font-size:26px;
  }

  .ob-card-img img{
    height:90px;
  }

  .ob-series-card p{
    font-size:12px;
    padding:8px 8px 14px;
  }

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

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

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

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

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

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

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

  .ob-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;
  margin:0 auto;
}

.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:430px;
  }

  .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;
    margin-bottom: 50px;
  }

  .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%);
  }
}