/* デザイン見直し 2026-10（日英共通）。inc/design-2610.php が、設定で「出す」のときだけ読む（body に .d2610）。
   ここに集めるのは、日英で同じ部品を同じ形にするための上書きだけ。色・文字の基本は design.css と en-design.css のまま。
   1) 手帖の絵：写真のない記事の代わりの枠。2026-10-04 運営者が不採用（設定 ll_design_2610_tile、既定で出さない）。代わりの形が決まったら差し替える
   2) 日本語のカード：写真のない記事も写真のカードと同じ形に並べる（PC で列の高さがそろう）
   3) 英語のカード：スマホは日本語と同じ横長（写真左・題名右）。題名はゴシック体（記事の題名は明朝/Georgia のまま）
   4) スマホの絞り込み：畳んで「絞り込む」で開く（条件を選んでいるときは開いたまま）
   5) 日本語のページの英字の小見出し（LOCAL PICKS など）を出さない。日本語の見出しだけで足りる */

/* ===== 1) 手帖の絵 ===== */
.ll-tile{--t-ink:#4a5a61;--t-bg:#e5e9e9;--t-rule:rgba(74,90,97,.12);--t-line:rgba(74,90,97,.34);
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:6px;box-sizing:border-box;
  width:100%;aspect-ratio:1.7;padding:9% 8% 8% calc(10% + 14px);overflow:hidden;container-type:inline-size;
  background-color:var(--t-bg);background-image:repeating-linear-gradient(180deg,transparent 0 21px,var(--t-rule) 21px 22px);
  color:var(--t-ink);font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;text-align:left;line-height:1.3}
.ll-tile::before{content:"";position:absolute;top:0;bottom:0;left:10%;width:2px;background:var(--t-line)}
.ll-tile .ll-tile-icon{display:block;width:clamp(24px,17cqi,60px);height:auto;fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ll-tile .ll-tile-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ll-tile .ll-tile-label{font-weight:700;font-size:clamp(11px,4.6cqi,17px);letter-spacing:.02em}
.ll-tile .ll-tile-place{font-size:clamp(10px,3.6cqi,13px);opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-tile--eat{--t-ink:#9c4a26;--t-bg:#f3e5da;--t-rule:rgba(156,74,38,.12);--t-line:rgba(156,74,38,.34)}
.ll-tile--buy{--t-ink:#7a5a17;--t-bg:#f2ead6;--t-rule:rgba(122,90,23,.13);--t-line:rgba(122,90,23,.34)}
.ll-tile--play,.ll-tile--en-visit{--t-ink:#2f6a46;--t-bg:#e2ece2;--t-rule:rgba(47,106,70,.12);--t-line:rgba(47,106,70,.34)}
.ll-tile--stay{--t-ink:#3d4f84;--t-bg:#e3e7f1;--t-rule:rgba(61,79,132,.12);--t-line:rgba(61,79,132,.34)}
.ll-tile--wellness{--t-ink:#1f6a74;--t-bg:#dcebec;--t-rule:rgba(31,106,116,.12);--t-line:rgba(31,106,116,.34)}
.ll-tile--learn,.ll-tile--en-join,.ll-tile--en-work{--t-ink:#62468a;--t-bg:#ebe4f0;--t-rule:rgba(98,70,138,.12);--t-line:rgba(98,70,138,.34)}
/* 手帖のページの種類（記事ごとに p0 罫線・p1 方眼・p2 ドット） */
.ll-tile.ll-tile--p1{background-image:repeating-linear-gradient(180deg,transparent 0 21px,var(--t-rule) 21px 22px),repeating-linear-gradient(90deg,transparent 0 21px,var(--t-rule) 21px 22px)}
.ll-tile.ll-tile--p2{background-image:radial-gradient(circle,var(--t-line) 1.2px,transparent 1.7px);background-size:16px 16px;background-position:4px 4px}
/* 小さな枠（ランキング・関連記事・トップの小さな注目記事）：絵記号だけ */
.ll-tile.is-mini{justify-content:center;align-items:center;padding:6px 6px 6px 14px}
.ll-tile.is-mini::before{left:8px}
.ll-tile.is-mini .ll-tile-icon{width:clamp(20px,34cqi,34px)}
.ll-tile.is-mini .ll-tile-text{display:none}

/* ===== 2) 日本語のカード ===== */
/* 写真の枠と同じ縦横比（design.css 1.7 → PC 1000px 以上の一覧 1.3 → スマホの横長カード 3:2） */
.d2610 .content-card.has-tile .photo-wrap>.ll-tile{aspect-ratio:1.7}
@media(min-width:1000px){.d2610 .content-card.has-tile .photo-wrap>.ll-tile{aspect-ratio:1.3}}
@media(max-width:800px){body.d2610[data-layout="editorial"] #content-grid .content-card.has-tile .photo-wrap>.ll-tile{aspect-ratio:3/2;border-radius:6px}}
/* スマホ：写真のない記事にあった左の青い線（text-only 用）は、手帖の絵が出るので要らない */
@media(max-width:800px){body.d2610[data-layout="editorial"] #content-grid .content-card.has-tile .card-button{border-left:0}
  /* スマホの横長カード：絵記号だけを真ん中に（分類と地域はすぐ下の文字に出る） */
  .d2610 #content-grid .has-tile .ll-tile{justify-content:center;align-items:center;padding:8px 8px 8px 20px}
  .d2610 #content-grid .has-tile .ll-tile .ll-tile-icon{width:36px}
  .d2610 #content-grid .has-tile .ll-tile .ll-tile-text{display:none}}
/* トップの注目記事・今週の予定の横の小さな枠 */
.d2610 .home-intro .hi-pick-noimg.ll-tile{height:100%;aspect-ratio:auto;background-color:var(--t-bg)}
.d2610 .home-intro .is-small .hi-pick-noimg.ll-tile{justify-content:center;align-items:center;padding:6px 6px 6px 14px}
.d2610 .home-intro .is-small .hi-pick-noimg.ll-tile::before{left:8px}
.d2610 .home-intro .is-small .hi-pick-noimg.ll-tile .ll-tile-text{display:none}
/* サイドバーのランキング・記事の下の関連記事 */
.d2610 .ll-rank-thumb>.ll-tile,.d2610 .related-sp-thumb>.ll-tile{height:100%;aspect-ratio:auto}
.d2610 .related-sp-thumb.is-empty{background:none}

/* ===== 3) 英語のカード ===== */
.d2610.kn-en .kn-card-tile{margin:0;padding:12px 12px 0}
.d2610.kn-en .kn-card-tile .ll-tile{aspect-ratio:1.7;border-radius:5px}
.d2610.kn-en .kn-content-card h3{font:700 19px/1.35 var(--kn-sans);letter-spacing:-.1px}
.d2610.kn-en .kn-content-card:hover{transform:none}
/* トップ・地域トップの注目記事の「画像なし」 */
.d2610.kn-en .kn-enh-noimg.ll-tile{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:8px 10px 8px 24px;
  background-color:var(--t-bg);color:var(--t-ink);font-size:inherit;letter-spacing:normal;text-transform:none}
.d2610.kn-en .kn-enh-noimg.ll-tile::before{left:12px}
.d2610.kn-en .kn-enh-card:not(.is-lead) .kn-enh-noimg.ll-tile{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px}
.d2610.kn-en .kn-enh-card:not(.is-lead) .kn-enh-noimg.ll-tile .ll-tile-icon{width:24px}
.d2610.kn-en .kn-enh-card:not(.is-lead) .kn-enh-noimg.ll-tile .ll-tile-place{display:none}
@media(max-width:760px){
  .d2610.kn-en .kn-card-grid{gap:10px}
  .d2610.kn-en .kn-card-grid .kn-content-card{display:grid;grid-template-columns:40% minmax(0,1fr);column-gap:12px;align-items:start;padding:12px;border-radius:8px}
  .d2610.kn-en .kn-card-grid .kn-content-card:not(.has-photo):not(.has-tile){grid-template-columns:minmax(0,1fr)}
  .d2610.kn-en .kn-card-grid .kn-card-picture,.d2610.kn-en .kn-card-grid .kn-card-tile{padding:0;min-width:0}
  .d2610.kn-en .kn-card-grid .kn-card-picture img{aspect-ratio:3/2;object-fit:contain;border-radius:6px}
  .d2610.kn-en .kn-card-grid .kn-card-tile .ll-tile{aspect-ratio:3/2;border-radius:6px}
  .d2610.kn-en .kn-card-grid .kn-card-tile .ll-tile{justify-content:center;align-items:center;padding:8px 8px 8px 20px}
  .d2610.kn-en .kn-card-grid .kn-card-tile .ll-tile-icon{width:36px}
  .d2610.kn-en .kn-card-grid .kn-card-tile .ll-tile-text{display:none}
  .d2610.kn-en .kn-card-grid .kn-card-picture figcaption{margin:4px 0 0;font-size:9px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .d2610.kn-en .kn-card-grid .kn-card-body{padding:0;min-width:0}
  .d2610.kn-en .kn-card-grid .kn-card-meta{margin-bottom:5px;font-size:11px;gap:4px 8px;flex-wrap:wrap}
  .d2610.kn-en .kn-card-grid .kn-content-card h3{font-size:16px;line-height:1.38;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .d2610.kn-en .kn-card-grid .kn-card-excerpt,.d2610.kn-en .kn-card-grid .kn-card-bottom{display:none}
  .d2610.kn-en .kn-card-grid .kn-card-area-chips{margin-top:6px}
}

/* ===== 4) スマホの絞り込み ===== */
.ll-filter-toggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.ll-filter-summary{display:none}
@media(max-width:800px){
  .d2610 .ll-filter-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;margin:0 0 12px;padding:10px 14px;
    border:1px solid var(--ll-rule);border-radius:8px;background:#fff;color:var(--ll-ink);font-size:.875rem;font-weight:700;cursor:pointer}
  .d2610 .ll-filter-summary small{flex:1;min-width:0;font-weight:400;font-size:.75rem;color:var(--ll-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .d2610 .ll-filter-summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
  .d2610 .ll-filter-toggle:checked+.ll-filter-summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .d2610 .ll-filter-toggle:focus-visible+.ll-filter-summary{outline:3px solid var(--ll-ocean);outline-offset:2px}
  .d2610 .ll-filter-toggle:not(:checked)~.filter-bar{display:none}
}
@media(prefers-reduced-motion:reduce){.d2610 .ll-filter-summary::after{transition:none}}

/* ===== 5) 日本語のページの英字の小見出し ===== */
.d2610:not(.kn-en) .section-heading .eyebrow,.d2610:not(.kn-en) .living-heading .eyebrow,.d2610:not(.kn-en) .related-sp>.eyebrow{display:none}
.d2610:not(.kn-en) .editorial-note>.eyebrow{display:none}
.d2610:not(.kn-en) .ll-side-head .en{display:none}
.d2610:not(.kn-en) .ll-side-head .ja{font-size:.9375rem;font-weight:700;color:var(--ll-ink);line-height:1.4}
@media(min-width:801px){.ll-filter-toggle{display:none}}

/* ===== 2026-10-04 カテゴリの色と絵記号（運営者「アイコンは第1候補で進めて」。フクリパ型の色分けを、この街手帖の7色で）=====
   色はサムネイルの型と同じ（淡い地の上の文字でコントラスト 4.66〜6.40）。絵記号は Material Symbols（inc/design-2610.php の ll_d2610_cat_icon） */
.d2610 [data-cat=eat]{--cat:#9c4a26;--cat-bg:#f3e5da}
.d2610 [data-cat=buy]{--cat:#80601e;--cat-bg:#f2ead6}
.d2610 [data-cat=play]{--cat:#2f6a46;--cat-bg:#e2ece2}
.d2610 [data-cat=stay]{--cat:#3d4f84;--cat-bg:#e3e7f1}
.d2610 [data-cat=wellness]{--cat:#24707a;--cat-bg:#dcebec}
.d2610 [data-cat=learn]{--cat:#66498a;--cat-bg:#ebe4f0}
.d2610 [data-cat=live]{--cat:#4a5a61;--cat-bg:#e5e9e9}
.d2610 [data-cat=en-live]{--cat:#4a5a61}
.d2610 [data-cat=en-join]{--cat:#66498a}
.d2610 [data-cat=en-visit]{--cat:#2f6a46}
/* ヘッダーの7カテゴリ：名前の前に絵記号、選んでいるカテゴリの下線をその色に */
.d2610 .category-nav a{gap:6px}
.d2610 .category-nav .cat-ico{flex:0 0 auto;width:20px;height:20px;color:var(--cat)}
.d2610 .category-nav a[aria-current]{border-bottom-color:var(--cat);color:var(--ll-ink)}
@media(max-width:800px){.d2610 .category-nav a{gap:3px}.d2610 .category-nav .cat-ico{width:16px;height:16px}}
/* カードのカテゴリ名：前に色の四角。札の文字と地もそのカテゴリの色に */
.d2610 .content-card .category-label[data-cat]::before,.d2610 .content-card .category-main[data-cat]::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.35em;border-radius:1px;background:var(--cat);vertical-align:.02em}
.d2610 .content-card .category-label[data-cat],.d2610 .content-card .category-main[data-cat],
.d2610 #content-grid .content-card .category-label[data-cat],.d2610 #content-grid .content-card .category-main[data-cat]{color:var(--cat);background:var(--cat-bg)} /* 一覧（#content-grid）の札の指定より強く */
/* 英語のヘッダー（Live・Join・Visit） */
.d2610 .kn-nav-group summary .cat-ico{flex:0 0 auto;width:18px;height:18px;margin-right:-4px;color:var(--cat)}