/* ============================================
       TOP PAGE (PC) — page-specific styles
       ============================================ */

    /* ---- First View ピークカルーセル ---- */
    .fv-slider {
      background: var(--section-bg);
      border-bottom: 1px solid var(--border);
      padding: 32px 0 28px;
      position: relative;
    }
    /* wrap: vw単位paddingで自動スケール。peek = padding - gap */
    /* overflow-x: clip で横のみクリップ → 縦シャドウが逃げる */
    .fv-slider__wrap {
      overflow-x: clip;
      overflow-y: visible;
      padding: 12px 18vw;
    }
    .fv-slider__track {
      display: flex;
      gap: 24px;
      transition: transform .45s cubic-bezier(.4,0,.2,1);
    }

    /* カード：縦積みレイアウト（画像上・テキスト下） */
    .fv-card {
      flex-shrink: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: var(--text);
      background: var(--bg);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: box-shadow .3s ease, transform .3s ease, opacity .3s ease;
      opacity: .6; /* 非アクティブは少し暗く */
    }
    .fv-card.is-active {
      opacity: 1;
      box-shadow: var(--shadow-hover);
    }
    .fv-card.is-active:hover { transform: translateY(-3px); }
    .fv-card__img {
      position: relative;
      flex-shrink: 0;
      height: 400px;
      overflow: hidden;
      background: var(--placeholder);
    }
    .fv-card__img img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transition: transform .5s ease;
    }
    .fv-card.is-active:hover .fv-card__img img { transform: scale(1.03); }

    .fv-card__body {
      padding: 20px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .fv-card__top {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .fv-badge {
      display: inline-block;
      font-size: 10px;
      letter-spacing: .2em;
      background: var(--accent);
      color: #fff;
      padding: 3px 9px;
      border-radius: 20px;
      flex-shrink: 0;
    }
    .fv-badge--warm { background: var(--accent-warm); }
    .fv-card__cat {
      font-size: 13px;
      letter-spacing: .2em;
      color: var(--accent);
    }
    .fv-card__title {
      font-size: 22px;
      font-weight: 400;
      line-height: 1.6;
      letter-spacing: .03em;
      color: var(--text);
    }
    .fv-card__meta {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .fv-card__date {
      font-size: 13px;
      color: var(--text-weakest);
      letter-spacing: .06em;
      flex-shrink: 0;
    }
    .fv-card__tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      list-style: none;
    }
    .fv-card__tag {
      font-size: 11px;
      letter-spacing: .08em;
      color: var(--text-sub);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 2px 10px;
      white-space: nowrap;
    }

    /* コントロール：矢印をwrapの外・縦中央に配置 */
    .fv-slider__controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 20px 0 0;
    }
    .fv-slider__arrow {
      width: 44px; height: 44px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .2s, border-color .2s, opacity .2s;
    }
    .fv-slider__arrow:hover {
      background: var(--accent-warm);
      border-color: var(--accent-warm);
    }
    .fv-slider__arrow:hover svg { stroke: #fff; }
    .fv-slider__arrow:disabled { opacity: .25; cursor: default; }
    .fv-slider__arrow:disabled:hover { background: var(--bg); border-color: var(--border); }
    .fv-slider__arrow:disabled:hover svg { stroke: var(--text); }
    .fv-slider__arrow svg {
      width: 16px; height: 16px;
      stroke: var(--text); stroke-width: 1.5; fill: none;
    }
    .fv-slider__dots { display: flex; gap: 8px; align-items: center; }
    .fv-slider__dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--border);
      border: none; cursor: pointer; padding: 0;
      transition: background .2s, transform .2s, width .2s;
    }
    .fv-slider__dot.is-active {
      background: var(--accent-warm);
      width: 20px;
      border-radius: 3px;
    }

    /* ---- Section Header ---- */
    .sec-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      padding: 48px 0 28px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 0;
    }
    .sec-header__title {
      font-family: var(--font-serif);
      font-size: 28px;
      font-weight: 400;
      letter-spacing: .06em;
    }
    .sec-header__title span {
      font-size: 16px;
      color: var(--text-muted);
      margin-left: 12px;
    }
    .sec-header__more {
      font-size: 13px;
      letter-spacing: .18em;
      color: var(--accent-warm);
      transition: color .2s;
    }
    .sec-header__more:hover { color: #c07248; }

    /* ---- Latest Articles ---- */
    .latest { padding: 0; }
    .latest__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding-top: 24px;
    }
    .latest__grid .card {
      border: none;
    }

    /* ---- Feature ---- */
    /* ---- Categories ---- */
    .categories { padding: 0; }
    .categories__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      padding-top: 16px;
    }
    .cat-item {
      border: none;
      border-radius: var(--radius);
      box-shadow: var(--shadow-card);
      background: #fff;
      padding: 0;
      overflow: hidden;
      transition: box-shadow .25s ease, transform .25s ease;
      cursor: pointer;
    }
    .cat-item:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-2px);
    }
    .cat-item__body {
      padding: 16px 20px 18px;
    }
    .cat-item__en {
      font-family: var(--font-serif);
      font-size: 12px;
      color: var(--accent);
      letter-spacing: .1em;
      margin-bottom: 2px;
    }
    .cat-item[data-category="おでかけ"] .cat-item__en { color: #3D7D72; }
    .cat-item[data-category="たべる"]   .cat-item__en { color: #A0672A; }
    .cat-item[data-category="まなぶ"]   .cat-item__en { color: #5A519A; }
    .cat-item[data-category="はたらく"] .cat-item__en { color: #3B6080; }
    .cat-item[data-category="くらす"]   .cat-item__en { color: #9A5040; }
    .cat-item[data-category="つながる"] .cat-item__en { color: #934060; }
    .cat-item__ja {
      font-size: 16px;
      font-weight: 400;
      letter-spacing: .08em;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .cat-item__ja::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .cat-item[data-category="おでかけ"] .cat-item__ja::before { background: #3D7D72; }
    .cat-item[data-category="たべる"]   .cat-item__ja::before { background: #A0672A; }
    .cat-item[data-category="まなぶ"]   .cat-item__ja::before { background: #5A519A; }
    .cat-item[data-category="はたらく"] .cat-item__ja::before { background: #3B6080; }
    .cat-item[data-category="くらす"]   .cat-item__ja::before { background: #9A5040; }
    .cat-item[data-category="つながる"] .cat-item__ja::before { background: #934060; }
    .cat-item__count {
      font-size: 11px;
      color: var(--text-weakest);
      margin-top: 4px;
    }

    /* ---- Search Bar ---- */
    .search-bar {
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }
    .search-bar__inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 20px var(--pad-pc);
      display: flex;
      align-items: center;
      gap: 0;
      box-sizing: border-box;
    }
    .search-bar__input-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill) 0 0 var(--radius-pill);
      height: 44px;
      padding: 0 16px;
      gap: 10px;
      transition: border-color .2s;
    }
    .search-bar__input-wrap:focus-within { border-color: var(--text-sub); }
    .search-bar__icon {
      font-size: 23px;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .search-bar__input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 400;
      letter-spacing: .06em;
      color: var(--text);
    }
    .search-bar__input::placeholder { color: var(--text-muted); }
    .search-bar__btn {
      flex-shrink: 0;
      height: 44px;
      padding: 0 24px;
      background: var(--accent-warm);
      color: #fff;
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: .2em;
      border: none;
      border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
      margin-left: -1px;
      cursor: pointer;
    }
    .search-bar__tags {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 24px;
    }
    .search-bar__tags-label {
      font-size: 10px;
      letter-spacing: .2em;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .search-bar__tag {
      font-size: 11px;
      letter-spacing: .1em;
      color: var(--text-sub);
      border: 1px solid var(--border);
      background: transparent;
      padding: 4px 12px;
      border-radius: 20px;
      cursor: pointer;
      transition: border-color .2s, color .2s;
      white-space: nowrap;
    }
    .search-bar__tag:hover { border-color: var(--text-sub); color: var(--text); }

    /* ---- Media Concept ---- */
    .concept {
      border-bottom: none;
      overflow: hidden;
      position: relative;
      background: var(--section-bg);
      border-radius: var(--radius);
      margin: 40px 0;
    }
    .concept__inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 72px var(--pad-pc);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }
    .concept__bg-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-serif);
      font-size: 206px;
      font-weight: 400;
      
      color: rgba(26,26,24,.03);
      white-space: nowrap;
      pointer-events: none;
      letter-spacing: .04em;
      line-height: 1;
      user-select: none;
    }
    .concept__eyebrow {
      font-size: 10px;
      letter-spacing: .28em;
      color: var(--text-muted);
      margin-bottom: 20px;
    }
    .concept__title {
      font-family: var(--font-serif);
      font-size: 37px;
      font-weight: 400;
      line-height: 1.55;
      letter-spacing: .05em;
      margin-bottom: 24px;
    }
    .concept__title em {  font-weight: 400; }
    .concept__body {
      font-size: 15px;
      line-height: 2.05;
      color: var(--text-sub);
      letter-spacing: .05em;
    }
    .concept__pillars {
      display: flex;
      flex-direction: column;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      overflow: hidden;
      box-shadow: var(--shadow-card);
    }
    .concept__pillar {
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .concept__pillar:last-child { border-bottom: none; }
    .concept__pillar-num {
      font-family: var(--font-serif);
      font-size: 25px;
      font-weight: 400;
      color: var(--text-weakest);
      flex-shrink: 0;
      line-height: 1;
      padding-top: 3px;
      width: auto;
      height: auto;
      background: none;
      border-radius: 0;
    }
    .concept__pillar-body {}
    .concept__pillar-title {
      font-size: 15px;
      font-weight: 400;
      letter-spacing: .08em;
      margin-bottom: 5px;
    }
    .concept__pillar-desc {
      font-size: 13px;
      color: var(--text-sub);
      line-height: 1.85;
      letter-spacing: .04em;
    }

    /* ---- Pickup Articles ---- */
    .pickup { border-bottom: none; }
    .pickup__inner {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--pad-pc);
    }
    .pickup__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      padding-top: 24px;
    }
    .pickup-card {
      border: none;
      border-radius: var(--radius);
      box-shadow: var(--shadow-card);
      overflow: hidden;
      transition: box-shadow .25s ease, transform .25s ease;
      background: var(--bg);
    }
    .pickup-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-2px);
    }
    .pickup-card__img {
      aspect-ratio: 5/2;
      background: var(--placeholder);
      width: 100%;
    }
    .pickup-card:nth-child(2) .pickup-card__img { background: var(--placeholder2); }
    .pickup-card__body {
      padding: 20px;
    }
    .pickup-card__new {
      display: inline-block;
      font-size: 10px;
      letter-spacing: .2em;
      background: var(--accent);
      color: #fff;
      padding: 3px 10px;
      border-radius: 20px;
      margin-bottom: 10px;
      width: fit-content;
    }
    .pickup-card__category {
      font-size: 11px;
      letter-spacing: .24em;
      color: var(--accent);
      margin-bottom: 8px;
    }
    .pickup-card__title {
      font-size: 18px;
      font-weight: 400;
      line-height: 1.55;
      letter-spacing: .04em;
      margin-bottom: 8px;
    }
    .pickup-card__desc {
      font-size: 14px;
      color: var(--text-sub);
      line-height: 1.8;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .pickup-card__meta {
      font-size: 11px;
      color: var(--text-weakest);
      letter-spacing: .04em;
    }

    /* ---- Section wrapper ---- */
    .section {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--pad-pc);
    }
    .section + .section { margin-top: 0; }

    /* ============================================
       RESPONSIVE — TOP PAGE (tablet: 1024px)
       ============================================ */
    @media (max-width: 1024px) {

      /* First View: vwベースなので自動縮小されるが微調整 */
      .fv-slider__wrap { overflow-x: clip; overflow-y: visible; padding: 12px 14vw; }
      .fv-card__img { height: 210px; }
      .fv-card__title { font-size: 17px; }

      /* Concept */
      .concept__inner { gap: 48px; padding: 56px var(--pad-pc); }

      /* Pickup: 2col → 1col */
      .pickup__grid { grid-template-columns: 1fr; }

      /* Latest: 3col → 2col */
      .latest__grid { grid-template-columns: repeat(2, 1fr); }


      /* Categories: 3col → 2col */
      .categories__grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ============================================
       RESPONSIVE — TOP PAGE (mobile: 768px)
       ============================================ */
    @media (max-width: 768px) {

      /* First View Carousel */
      .fv-slider { padding: 20px 0 16px; }
      .fv-slider__wrap { overflow-x: clip; overflow-y: visible; padding: 12px 10vw; }
      .fv-slider__track { gap: 14px; }
      .fv-card__img { height: 180px; }
      .fv-card__body { padding: 14px 16px 18px; gap: 7px; }
      .fv-card__title { font-size: 15px; line-height: 1.55; }
      .fv-card__tags { display: none; }
      /* モバイルは矢印非表示・ドットのみ */
      .fv-slider__arrow { display: flex; }
      .fv-slider__controls { padding: 14px 0 4px; }

      /* Search bar */
      .search-bar__inner { flex-wrap: wrap; padding: 12px var(--pad-sp) 10px; gap: 0; width: 100%; box-sizing: border-box; }
      .search-bar__input-wrap { min-width: 0; flex: 1; }
      .search-bar__tags { display: flex; flex-wrap: wrap; width: 100%; margin-left: 0; margin-top: 10px; padding-bottom: 2px; }
      .search-bar__btn { padding: 0 14px; font-size: 10px; letter-spacing: .1em; flex-shrink: 0; }
      .search-bar__input { font-size: 14px; min-width: 0; width: 100%; }
      .search-bar__icon { font-size: 18px; padding: 0 8px; flex-shrink: 0; }

      /* Concept */
      .concept__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 40px var(--pad-sp);
      }
      .concept__title { font-size: 25px; }

      /* Pickup */
      .pickup__inner { padding: 0 var(--pad-sp); }
      .pickup__grid { grid-template-columns: 1fr; }

      /* Section header */
      .sec-header { padding: 28px 0 16px; }
      .sec-header__title { font-size: 19px; }

      /* Latest grid */
      .section { padding: 0 var(--pad-sp); }
      .latest__grid { grid-template-columns: 1fr; }

      /* Feature */


      /* Categories */
      .categories__grid { grid-template-columns: repeat(2, 1fr); }

      /* Footer */
      .footer { margin-top: 48px !important; }
    }

    @media (max-width: 480px) {
      /* Carousel */
      .fv-slider__wrap { padding: 8px 8vw; }
      .fv-card__img { height: 150px; }

      /* Search bar */
      .search-bar__tag { font-size: 11px; padding: 4px 10px; }

      /* Concept */
      .concept__title { font-size: 21px; }

      /* Categories */
      .categories__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .cat-item__body { padding: 12px 14px 14px; }

      /* Section */
      .sec-header__title { font-size: 17px; }
    }

/* data-category バッジの色が var(--accent) に上書きされないようにするニュートラライザ */
.fv-card__cat[data-category],
.pickup-card__category[data-category] {
  color: inherit;
}