/* New Posts Compact compat layer (no HTML changes; scope to #splide01) */
/* If you pass id="your-id" in the shortcode, replace #splide01 with #your-id. */

.wrap{max-width:1260px;margin:40px auto;padding:0 16px}

#splide01{overflow:visible}
#splide01 .splide__track{overflow:visible}
#splide01 .splide__list{display:flex;align-items:stretch;gap:16px}
#splide01 .splide__slide{height:auto;flex:0 0 calc((100% - 32px)/3)}
@media (max-width:1024px){#splide01 .splide__slide{flex:0 0 calc((100% - 16px)/2)}}
@media (max-width:640px){#splide01 .splide__slide{flex:0 0 82%}}

#splide01 .card{display:flex;flex-direction:column;gap:12px;height:100%; background-color: #fff;border-radius: 10px;}
#splide01 .th{position:relative;width:100%;aspect-ratio:4/3;border-top-left-radius: 10px;border-top-right-radius:10px;overflow:hidden;background:#f8fafc}
#splide01 .th img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
#splide01 .card:hover .th img{transform:scale(1.06)}

#splide01 .chip-on{position:absolute;right:-6%;bottom:-6%}
#splide01 .chip{display:inline-grid;place-items:center;min-width:56px;padding:6px 10px;border:1px solid #e5e7eb;background:#fff;border-radius:10px;font-size:12px;line-height:1;white-space:nowrap}

#splide01 .bd{display:flex;flex-direction:column;gap:10px; padding: 15px;}
#splide01 .meta-top{display:flex;flex-wrap:wrap;gap:6px}
#splide01 .badge{display:inline-block;background:#fff;border:1px solid #e6e6e6;padding:4px 8px;border-radius:5px;font-size:12px;line-height:1}

#splide01 .ttl{font-size:16px;font-weight:700;line-height:1.5;margin:0}
#splide01 .ttl a{color:#111;text-decoration:none}
#splide01 .ttl a:hover{text-decoration:underline}

#splide01 .tags{padding:8px 0;border-top:1px dashed #cbd5e1;border-bottom:1px dashed #cbd5e1; width:100%;}
#splide01 .tags ul{display:flex;flex-wrap:wrap;gap:10px 12px;margin:0;padding:0;list-style:none}
#splide01 .tags li{font-size:12px;color:#666}

#splide01 .foot{display:flex;align-items:center;justify-content:flex-end;gap:10px}
#splide01 .author{display:flex;align-items:center;gap:6px;text-decoration:none;color:#111}
#splide01 .avatar{width:28px;height:28px;border-radius:50%;border:1px solid #d8d8d8;overflow:hidden}
#splide01 .avatar img{width:100%;height:100%;object-fit:cover}
#splide01 .name{font-size:12px}
#splide01 .date{font-size:12px;color:#6b7280}

#splide01 .text-cate-tag-label{font-size:12px;color:#333}

/* ===== New Posts Compact – 5-up peeking (scope: #splide01) ===== */
.wrap{max-width:1260px;margin:40px auto;padding:0 16px}

#splide01, #splide01 .splide__track{ overflow: visible; }
#splide01 .splide__track{ padding-left:6%; padding-right:6%; } /* peeking演出 */
#splide01 .splide__list{ display:flex; align-items:stretch; gap:16px; }

/* ← ここが超重要：幅はSplideに任せる。固定幅指定は削除（またはコメントアウト） */
/* #splide01 .splide__slide{ flex:0 0 calc((100% - 32px)/3) } のような指定はNG */
#splide01 .splide__slide{ height:auto; }

/* カード見た目（プレビュー踏襲） */
#splide01 .card{display:flex;flex-direction:column;gap:12px;height:100%; background-color: #fff;border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;}
#splide01 .th{position:relative;width:100%;aspect-ratio:4/3;border-top-left-radius: 10px;border-top-right-radius:10px;overflow:hidden;background:#f8fafc}
#splide01 .th img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
#splide01 .card:hover .th img{transform:scale(1.06)}
#splide01 .chip-on{position:absolute;right:-6%;bottom:-6%}
#splide01 .chip{display:inline-grid;place-items:center;min-width:56px;padding:6px 10px;border:1px solid #e5e7eb;background:#fff;border-radius:10px;font-size:12px;line-height:1;white-space:nowrap}
#splide01 .bd{width: 100%;display:flex;flex-direction:column;gap:10px;align-items: flex-start;}
#splide01 .meta-top{display:flex;flex-wrap:wrap;gap:6px}
#splide01 .badge{display:inline-block;background:#fff;border:1px solid #e6e6e6;padding:4px 8px;border-radius:5px;font-size:12px;line-height:1}
#splide01 .ttl{font-size:16px;font-weight:700;line-height:1.5;margin:0}
#splide01 .ttl a{color:#111;text-decoration:none}
#splide01 .ttl a:hover{text-decoration:underline}
#splide01 .tags{width: 100%;padding:8px 0;border-top:1px dashed #cbd5e1;border-bottom:1px dashed #cbd5e1}
#splide01 .tags ul{display:flex;flex-wrap:wrap;gap:10px 12px;margin:0;padding:0;list-style:none}
#splide01 .tags li{font-size:12px;color:#666}
#splide01 .foot{display:flex;align-items:center;justify-content:flex-end;gap:10px}
#splide01 .author{display:flex;align-items:center;gap:6px;text-decoration:none;color:#111}
#splide01 .avatar{width:28px;height:28px;border-radius:50%;border:1px solid #d8d8d8;overflow:hidden}
#splide01 .avatar img{width:100%;height:100%;object-fit:cover}
#splide01 .name{font-size:12px}
#splide01 .date{font-size:12px;color:#6b7280}
#splide01 .text-cate-tag-label{font-size:12px;color:#333}
h3.hero--search_ttl01.fz-34{display: flex; border-radius: 20px; padding: 8px; background-color: #333;}

.hero-top-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

span.font-en {
  font-weight: 700;
    padding: 5px;
}

/* タイトルは常に3行ぶんの高さを確保（プレビュー準拠の16px/1.5） */
#splide01 .ttl,
#splide01 .ttl a{
  /* 行数・行高は変えやすいように変数化 */
  --ttl-lines: 3;
  --ttl-lh: 1.5;

  display: -webkit-box;          /* 複数行省略 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ttl-lines);
  line-clamp: var(--ttl-lines);   /* 未来互換 */
  overflow: hidden;

  line-height: var(--ttl-lh);
  height: calc(var(--ttl-lines) * var(--ttl-lh) * 1em); /* ←常に3行ぶんの高さ */
  margin: 0;                       /* 余白の差を潰す */
}

.new-wrap {
    padding-bottom: 40px;
    background-color: #64bc4b;;
}

/* ==========================
   HERO (オレンジ丸バッジ)
   ========================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 10;
}
.hero--search {
  position: absolute;
  right: 38px;
  bottom: -100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 348px;
  height: 348px;
  border-radius: 50%;
  background-image: linear-gradient(to bottom right,#ff853c,#f55047);
  z-index: 20;
  overflow: hidden;
  transition: none;
}
.hero--search::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(34,34,34,0);
  mix-blend-mode: color-burn;
  transition: all .4s ease-out;
  z-index: -1;
}
.hero--search:hover::before {
  background-color: rgba(34,34,34,.2);
}
.hero--search_ttl01 {
  width: fit-content;
  line-height: 1;
  font-size: 34px;
  color:#fff;
}
.hero--search_ttl01 .font-en2 {
  padding-left: .25em;
  font-size: 30px;
}
.hero--search_ttl02 {
  letter-spacing: .2em;
  margin-bottom: .25em;
  font-size: 26px;
  color:#fff;
  margin-top: 13px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  text-align: center;
  font-weight: 600;
}
.hero--search_circle {
  position: absolute;
  inset: 11px;
  animation: rotate 20s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width:768px){
  .hero--search {
    right: 12.5px;
    bottom: -118px;
    width: 174px;
    height: 174px;
  }
  .hero--search .icon-search { width: 18px; height:auto; }
  .hero--search_ttl01 { font-size: 17px; }
  .hero--search_ttl01 .font-en2 { font-size: 15px; }
  .hero--search_ttl02 { margin-top: 5px; font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif; text-align: center;font-size: 13px;font-weight: 600;}
  .hero--search_circle { inset: 5.5px; width: calc(100% - 11px); }
  .hero--search_circle+img { width: 85.5px; height:auto; }
}

.ttl-new {
    padding-left: 20px;
    margin: auto;
    max-width: 1200px;
}

p.sec-eyebrow-new {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .03em;
    font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    padding-top: 3rem;
}

h2.sec-title-new {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 3rem;
    font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}


@media(min-width: 769px) {
	p.sec-eyebrow-new{
	font-size:6.4rem;
	font-weight:700;
	color:var(--ink);
	letter-spacing:.03em }
	
	h2.sec-title-new{
		font-size:18px;
		font-weight:700;
		margin-bottom:3rem; }