/* 東京ナイトガイド：トップの手入れ分。main.css のあとに読む */
/* --- 1. 写真の上に暗い幕を置いて、白文字を読めるようにする --- */
.mv__bg{position:relative}
.mv__bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,22,29,.80) 0%,rgba(0,22,29,.62) 42%,rgba(0,22,29,.12) 100%)}
@media(max-width:767px){.mv__bg::after{
  background:linear-gradient(180deg,rgba(0,22,29,.45) 0%,rgba(0,22,29,.70) 40%,rgba(0,22,29,.88) 100%)}}

/* --- 2. 最初の画面で動けるようにする --- */
.tngv2-act{margin-top:32px;max-width:560px}
.tngv2-act__label{display:block;color:#fff;font-size:15px;font-weight:700;margin-bottom:10px;
  text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tngv2-act__row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.tngv2-act select{flex:1 1 150px;min-width:0;height:52px;padding:0 38px 0 14px;border:0;border-radius:10px;
  font-size:16px;color:#00212a;background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300212a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px;
  -webkit-appearance:none;appearance:none;cursor:pointer}
.tngv2-act button{flex:0 0 auto;height:52px;padding:0 26px;border:0;border-radius:10px;cursor:pointer;
  background:#ffd521;color:#00212a;font-size:16px;font-weight:700;font-family:inherit}
.tngv2-act button:hover{background:#ffdf55}
.tngv2-act__or{margin-top:14px;color:#fff;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tngv2-act__or a{color:#ffd521;text-decoration:underline;text-underline-offset:3px}
@media(max-width:767px){
  .tngv2-act{margin-top:24px;max-width:none}
  .tngv2-act select{flex:1 1 100%}
  .tngv2-act button{flex:1 1 100%}
}

/* --- 3. 紹介文を3点に --- */
.tngv2-points{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.tngv2-points li{position:relative;padding-left:26px;color:#00212a;font-size:14px;line-height:1.7}
.tngv2-points li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:10px;
  border-radius:50%;background:#ffd521}

/* --- 4. 夜のコースの所属と一覧 --- */
.tngv2-plan-tag{display:inline-block;margin:0 0 10px;padding:5px 14px;border-radius:999px;
  background:#00212a;color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em}
.tngv2-plan-all{margin-top:36px;padding-top:28px;border-top:1px solid rgba(0,33,42,.15)}
.tngv2-plan-all__head{font-size:15px;font-weight:700;color:#00212a;margin:0 0 14px}
.tngv2-plan-all__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tngv2-plan-all__list a{display:inline-block;padding:9px 16px;border:1px solid rgba(0,33,42,.25);
  border-radius:999px;color:#00212a;font-size:14px;text-decoration:none;background:#fff}
.tngv2-plan-all__list a:hover{background:#00212a;color:#fff;border-color:#00212a}

/* --- スマホ：ヒーローを少し高くして、見出しを詰める --- */
@media(max-width:767px){
  .mv,.mv__bg,.mv__content{height:740px}
  .mv__bg img{height:740px;object-fit:cover}
  .mv__content-wrapper{padding-top:92px}
  .mv__hero-title{font-size:33px;line-height:43px}
  .mv__hero-text{font-size:15px;line-height:24px;margin-top:12px}
}

/* --- 言語切り替え：押しても開くように（マウスを乗せられない端末のため） --- */
.header__language-switcher{cursor:pointer}
/* テーマは高さではなく grid-template-rows 0fr→1fr で開閉している（:hover 用）。
   押して開くときも同じ仕組みに合わせる */
.header__language-switcher.tngv2-open .header__language-switcher-link-wrapper{
  grid-template-rows:1fr;z-index:1200}
.header__language-switcher.tngv2-open{z-index:1200}

/* --- スマホのメニューが写真の裏に隠れて見えないのを直す --- */
.header.hamburger-is-open .header__nav,
.header.hamburger-is-open .header__nav.is-open{z-index:1;background:#c6c1c9}
.header.hamburger-is-open .header__logo,
.header.hamburger-is-open .header__language-switcher,
.header.hamburger-is-open .header__hamburger-button,
.header.hamburger-is-open .js-header-menu-button{position:relative;z-index:5}

/* --- エリア枠の背景の方眼：3.5MB の SVG（線18,090本）をやめて CSS で描く --- */
/* 元は 1920px 幅の絵を background-size:contain で縮めていたので、同じ目になるよう 100vw/128 にする */
.top .explore{
  background-image:
    linear-gradient(to right, rgba(201,193,193,.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201,193,193,.1) 1px, transparent 1px);
  background-size:calc(100vw / 128) calc(100vw / 128);
  background-position:center;
  background-repeat:repeat;
}
@media screen and (max-width:767px){
  /* スマホ版は 375px 幅・15px 目だったので 25 分割 */
  .top .explore{
    background-image:
      linear-gradient(to right, rgba(201,193,193,.1) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(201,193,193,.1) 1px, transparent 1px);
    background-size:calc(100vw / 25) calc(100vw / 25);
  }
}

/* ===== 並べ替えに合わせた見た目 ===== */

/* --- エリア：2列のグリッド（スワイプをやめる） --- */
.tngv2-areas{list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tngv2-areas__item{display:block;position:relative;border-radius:12px;overflow:hidden;
  text-decoration:none;background:#001a21;aspect-ratio:16/10}
.tngv2-areas__img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease}
.tngv2-areas__item:hover .tngv2-areas__img{transform:scale(1.05)}
.tngv2-areas__item::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,22,29,0) 40%,rgba(0,22,29,.85) 100%)}
.tngv2-areas__name{position:absolute;left:14px;bottom:30px;z-index:1;
  color:#fff;font-size:18px;font-weight:700;line-height:1.2;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}
.tngv2-areas__count{position:absolute;left:14px;bottom:12px;z-index:1;
  color:#ffd521;font-size:12px;letter-spacing:.02em}
@media(min-width:768px){
  /* 左にカード2列、右に地図。地図がつぶれないように幅を決める */
  .top .explore .explore__app{align-items:flex-start;gap:4%}
  .top .explore .tngv2-areas{flex:1 1 56%;min-width:0;grid-template-columns:repeat(2,1fr);gap:16px}
  .top .explore .explore__app-map-wrapper{flex:0 0 40%;max-width:40%}
  .top .explore .explore__app-map-wrapper svg{width:100%;height:auto}
  .tngv2-areas__name{font-size:20px}
}
@media(min-width:1081px){
  .top .explore .tngv2-areas{grid-template-columns:repeat(3,1fr)}
}
/* スマホでは地図を出さない（ピンが小さすぎて押せず、区の名前も出ない） */
@media(max-width:767px){
  .top .explore .explore__app-map-wrapper{display:none}
  .top .explore{padding-block:56px 60px}
}

/* --- 夜のコースのカード --- */
.tngv2-plans{padding-block:72px 76px;background:#fff}
.tngv2-plans__group{margin:34px 0 12px;font-size:14px;font-weight:700;color:#00212a;
  letter-spacing:.04em}
.tngv2-plans__grid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tngv2-plans__item{display:block;height:100%;border:1px solid rgba(0,33,42,.14);
  border-radius:12px;overflow:hidden;background:#fff;text-decoration:none;color:#00212a}
.tngv2-plans__item:hover{border-color:#00212a}
.tngv2-plans__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tngv2-plans__name{display:block;padding:12px 14px 0;font-size:16px;font-weight:700;line-height:1.3}
.tngv2-plans__text{display:block;padding:6px 14px 16px;font-size:13px;line-height:1.6;
  color:rgba(0,33,42,.78)}
@media(min-width:768px){
  .tngv2-plans__grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .tngv2-plans__name{font-size:18px}
  .tngv2-plans__text{font-size:14px}
}

/* --- 食べる・見る：スマホで2列に --- */
/* テーマ側が flex で並べているので、打ち消せる強さの指定にする */
@media screen and (max-width:767px){
  .top .what .what__category .what__grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .top .what .what__category .what__grid .what__category-item{
    flex-basis:auto;width:auto;margin:0;aspect-ratio:16/11}
  .top .what .what__category .what__category-item-title{
    font-size:13px;line-height:1.25}
  .top .what .what__category .what__category-item-content{padding:5px 8px}
}

/* --- 並べ替えで余白が続くところを詰める --- */
.top .leading{padding-block:64px 0}
.top .how{padding-block:64px 72px}

/* --- 地図：掲載のある区を黄色に（スライダーをやめて active が付かなくなったため） --- */
.top .explore .app-map__area.has-post path{fill:#f9d312}
.top .explore .app-map__area.tngv2-dim path{fill:#d6d6d6}
.top .explore .app-map__area.tngv2-hit path{fill:#f9d312}

/* --- 地図の区を押せるようにする --- */
.top .explore .app-map__area.tngv2-clickable{cursor:pointer}
.top .explore .app-map__area.tngv2-clickable:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tngv2-areas__resetcell[hidden]{display:none}
.tngv2-areas__resetcell{display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.35);border-radius:12px;min-height:110px}
.tngv2-areas__reset{display:inline-block;margin:0;max-width:86%;padding:9px 18px;border:1px solid rgba(255,255,255,.5);
  border-radius:999px;background:transparent;color:#fff;font-size:13px;font-family:inherit;cursor:pointer}
.tngv2-areas__reset:hover{background:#fff;color:#00212a;border-color:#fff}

/* --- 価格を公表していない店の表示 --- */
.shop-list__item-price--none,
.shop-detail__rate-price--none{opacity:.65;font-style:normal}

/* --- 記事の書き手と更新日 --- */
.tngv2-byline{margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid rgba(0,33,42,.14);
  font-size:13px;line-height:1.7;color:rgba(0,33,42,.7)}
.tngv2-byline a{color:inherit;text-decoration:underline;text-underline-offset:3px}