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

.other-series-page{
  --bg:#F5F1E8;
  --text:#222;
  --teal:#00BDB7;
  --red:#F04448;
  --orange:#FF8200;
  --blue:#0D92DF;
  --purple:#7131C7;
  --white:#fff;
  --line:#DADADA;

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

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

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

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

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

.os-section{
  position:relative;
}

.os-series{
  padding:0 0 92px;
}

.os-category{
  padding:0 0 128px;
}

.os-case{
  padding:0;
}

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

.os-title{
  margin:0;
  text-align:center;
  font-size:clamp(34px,4vw,48px);
  line-height:1.35;
  font-weight:900;
  letter-spacing:.08em;
}

/* 背景の大きい丸い装飾 */
.os-blob{
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:42% 58% 55% 45% / 42% 46% 54% 58%;
}

.os-blob-red{
  width:410px;
  height:260px;
  background:var(--red);
  top:-110px;
  left:-80px;
  transform:rotate(-8deg);
}

.os-blob-orange{
  width:430px;
  height:500px;
  background:var(--orange);
  left:-180px;
  top:780px;
  border-radius:44% 56% 58% 42% / 50% 46% 54% 50%;
}

.os-blob-blue{
  width:520px;
  height:470px;
  background:var(--blue);
  right:-170px;
  bottom:-120px;
  border-radius:48% 52% 46% 54% / 46% 42% 58% 54%;
}

.os-wave{
  position:absolute;
  left:-20px;
  right:-20px;
  bottom:44px;
  height:82px;
  z-index:3;
  background:
    radial-gradient(54px 38px at 54px 0, transparent 49px, var(--purple) 50px, var(--purple) 82px, transparent 83px)
    repeat-x;
  background-size:144px 82px;
}

/* series cards */
.os-series-grid{
  width:min(580px,100%);
  margin:44px auto 0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.os-series-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:260px;
  background:#fff;
  border:3px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 16px rgba(40,30,15,.04);
  transition:.25s ease;
}

.os-series-card:hover{
  transform:translateY(-4px);
}

.os-card-title{
  position:relative;
  z-index:2;
  padding:18px 44px 10px 22px;
  font-size:1.5rem;
  line-height:1.3;
  font-weight:900;
  letter-spacing:.04em;
}

.os-arrow{
  position:absolute;
  right:18px;
  top:14px;
  z-index:3;
  color:#c9c9c9;
  font-size:34px;
  line-height:1;
  font-weight:300;
}

.os-img-box{
  flex:1;
  display:grid;
  place-items:center;
  background:
    linear-gradient(45deg,#f1f1f1 25%,transparent 25%) 0 0/22px 22px,
    linear-gradient(-45deg,#f1f1f1 25%,transparent 25%) 0 0/22px 22px,
    linear-gradient(45deg,transparent 75%,#f1f1f1 75%) 0 0/22px 22px,
    linear-gradient(-45deg,transparent 75%,#f1f1f1 75%) 0 0/22px 22px,
    #fff;
}

/* 画像だけ大きくする */
.ps-link-row a{
 height: 100%;
}
.os-img-box{
    height:320px;      /* 好きな高さ */
    overflow:hidden;
    padding:0;
}

.os-img-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}
.ps-link-row a img{
  width:calc(100% - 28px) !important;
  height:100%;
  object-fit:cover;
  object-position:center;
  margin:0 auto 18px;
}

/* タブレット */
@media(max-width:1024px){
  .ps-link-row a img{
    height:260px !important;
  }
}

/* スマホ */
@media(max-width:767px){
  .ps-link-row a img{
    height:220px !important;
  }
}

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

.os-category-card{
  display:grid;
  justify-items:center;
  gap:12px;
}

.os-category-card p{
  margin:0;
  min-height:24px;
  text-align:center;
  font-size:16px;
  line-height:1.4;
  font-weight:900;
  letter-spacing:.03em;
}

.os-circle-img{
  width:150px;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:50%;
  background:
    linear-gradient(45deg,#f1f1f1 25%,transparent 25%) 0 0/20px 20px,
    linear-gradient(-45deg,#f1f1f1 25%,transparent 25%) 0 0/20px 20px,
    linear-gradient(45deg,transparent 75%,#f1f1f1 75%) 0 0/20px 20px,
    linear-gradient(-45deg,transparent 75%,#f1f1f1 75%) 0 0/20px 20px,
    #fff;
  box-shadow:0 6px 16px rgba(40,30,15,.05);
  transition:.25s ease;
}

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

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

/* case */
.os-case-inner{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  min-height:230px;
}

.os-case .os-en,
.os-case .os-title{
  text-align:center;
}

.os-more-btn{
  position:relative;
  z-index:5;
  width:210px;
  height:68px;
  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;
  box-shadow:0 4px 0 rgba(0,0,0,.04);
}

.os-more-btn i{
  display:block;
  width:1px;
  height:34px;
  background:#111;
  position:relative;
}

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

/* responsive */
@media(max-width:1024px){


  .os-category-grid{
    grid-template-columns:repeat(3,1fr);
    gap:30px 20px;
  }

  .os-circle-img{
    width:145px;
  }

  .os-case-inner{
    grid-template-columns:1fr;
    gap:34px;
    justify-items:center;
  }
}
@media (max-width: 767px){

  .os-category-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 16px;
  }

  .os-circle-img{
    width:150px;
    height:150px;
    margin:0 auto;
  }

}
.case-list-section{
  padding:70px 24px;
  background:#f5f1e9;
}

.case-list{
  width:min(1500px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:34px;
}

.case-item{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px;
  align-items:center;
  background:#fff;
  border-radius:24px;
  padding:28px;
}

.case-img{
  width:100%;
  aspect-ratio:1.35/1;
  border-radius:12px;
  overflow:hidden;
}

.case-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.case-content{
  color:#222;
}

.case-category{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:140px;
  margin:0 0 18px;
  padding:7px 20px;
  border:3px solid #222;
  border-radius:999px;
  background:#fff;
  font-size:18px;
  line-height:1;
  font-weight:900;
}

.case-content h3{
  position:relative;
  margin:0 0 18px;
  padding-left:18px;
  padding-bottom:18px;
  border-bottom:2px dashed #222;
  font-size:20px;
  line-height:1.55;
  font-weight:900;
  letter-spacing:.03em;
}

.case-content h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:6px;
  height:18px;
  border-radius:999px;
  background:#f4c800;
}

.case-type{
  margin:0 0 12px;
  font-size:17px;
  font-weight:900;
}

.case-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.case-tags span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 15px;
  border-radius:5px;
  background:#999;
  color:#fff;
  font-size:15px;
  line-height:1;
  font-weight:900;
}

@media(max-width:1024px){
  .case-list{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .case-list-section{
    padding:40px 14px;
  }

  .case-item{
    grid-template-columns:1fr;
    gap:20px;
    padding:18px;
    border-radius:18px;
  }

  .case-category{
    font-size:15px;
  }

  .case-content h3{
    font-size:16px;
  }

  .case-type{
    font-size:14px;
  }

  .case-tags span{
    font-size:13px;
  }
}
.case-btn-wrap{
    margin-top:70px;
    margin-bottom: 100px;
    display:flex;
    justify-content:center;
}

.case-btn{

    height:80px;
    background:#fff;
    border:4px solid #2d2d2d;
    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#2d2d2d;
    text-decoration:none;

    font-weight:900;

    transition:.3s;
}

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

.case-btn i{
    width:4px;
    height:54px;
    background:#2d2d2d;
    position:relative;
}

.case-btn i::after{
    content:"→";
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    font-style:normal;
    font-size:62px;
    font-weight:300;
    line-height:1;
}

.case-btn:hover{
    background:#2d2d2d;
    color:#fff;
}

.case-btn:hover i{
    background:#fff;
}

.case-btn:hover i::after{
    color:#fff;
}

@media(max-width:640px){

.case-btn{
    width:80%;
    height:72px;
    gap:22px;
    font-size:18px;
    border-width:2px;
}

.case-btn i{
    height:34px;
    width:2px;
}

.case-btn i::after{
    left:6px;
    font-size:16px;
}

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

  .os-series-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }

  .os-series-card{
    min-height:auto;
  }

  .os-card-title{
    padding:12px 30px 8px 12px;
    font-size:15px;
    line-height:1.4;
  }

  .os-arrow{
    top:10px;
    right:12px;
    font-size:26px;
  }

  .os-img-box{
    height:140px;   /* ←ここがポイント */
  }

  .os-img-box img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

}.case-btn-wrap{
    margin-top:56px;
    margin-bottom:80px;
    display:flex;
    justify-content:center;
}

.case-btn{
    width:360px;
    max-width:90%;
    height:64px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:26px;

    background:#fff;
    border:3px solid #2d2d2d;
    border-radius:999px;

    color:#2d2d2d;
    text-decoration:none;

    font-size:20px;
    font-weight:900;

    transition:.3s;
}

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

.case-btn i{
    width:3px;
    height:36px;
    background:#2d2d2d;
    position:relative;
}

.case-btn i::after{
    content:"→";
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:24px;
    font-style:normal;
    font-weight:400;
    line-height:1;
}

.case-btn:hover{
    background:#2d2d2d;
    color:#fff;
}

.case-btn:hover i{
    background:#fff;
}

.case-btn:hover i::after{
    color:#fff;
}

@media(max-width:767px){

    .case-btn{
        width:280px;
        height:56px;
        gap:16px;
        font-size:16px;
    }

    .case-btn i{
        height:28px;
        width:2px;
    }

    .case-btn i::after{
        left:8px;
        font-size:18px;
    }

}

/* =========================================================
   導入事例部分のみ修正
   ※その他のデザインには影響しません
========================================================= */

.other-series-page .os-case .os-inner{
  width:min(1500px,calc(100% - 40px));
}

.other-series-page .os-case .case-list-section{
  width:100%;
  padding:70px 0;
  background:#f5f1e9;
}

.other-series-page .os-case .case-list{
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.other-series-page .os-case .case-item{
  display:block;
  min-width:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  border-radius:24px;
}

.other-series-page .os-case .case-item > a{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:28px;
  align-items:center;
  min-width:0;
  height:100%;
  padding:24px;
}

.other-series-page .os-case .case-img{
  width:100%;
  height:238px;
  aspect-ratio:auto;
  margin:0;
  overflow:hidden;
  border-radius:14px;
}

.other-series-page .os-case .case-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.other-series-page .os-case .case-content{
  min-width:0;
}

.other-series-page .os-case .case-category{
  min-width:0;
  margin:0 0 12px;
  padding:6px 18px;
  border-width:2px;
  font-size:14px;
}

.other-series-page .os-case .case-content h3{
  margin:0 0 12px;
  padding-left:14px;
  padding-bottom:12px;
  border-bottom-width:1.5px;
  font-size:16px;
  line-height:1.5;
  letter-spacing:.02em;
}

.other-series-page .os-case .case-content h3::before{
  top:.45em;
  width:5px;
  height:16px;
}

.other-series-page .os-case .case-type{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.6;
}

.other-series-page .os-case .case-tags{
  gap:6px;
}

.other-series-page .os-case .case-tags span{
  min-height:26px;
  padding:4px 12px;
  font-size:12px;
}

/* iPad */
@media(max-width:1024px){
  .other-series-page .os-case .case-list{
    grid-template-columns:1fr;
  }

  .other-series-page .os-case .case-item > a{
    grid-template-columns:minmax(260px,42%) minmax(0,1fr);
  }
}

/* スマホ */
@media(max-width:640px){
  .other-series-page .os-case .os-inner{
    width:min(100%,calc(100% - 28px));
  }

  .other-series-page .os-case .case-list-section{
    padding:40px 0;
  }

  .other-series-page .os-case .case-item{
    border-radius:18px;
  }

  .other-series-page .os-case .case-item > a{
    grid-template-columns:1fr;
    gap:18px;
    padding:18px;
  }

  .other-series-page .os-case .case-img{
    height:210px;
  }

  .other-series-page .os-case .case-category{
    font-size:13px;
  }

  .other-series-page .os-case .case-content h3{
    font-size:15px;
  }

  .other-series-page .os-case .case-type{
    font-size:12px;
  }

  .other-series-page .os-case .case-tags span{
    font-size:11px;
  }
}