/* Flex テーマの chrome を非表示（Classic 側が自前のヘッダー/フッターを持つため） */
#page > #masthead,
#page > .es-header-breadcrumb,
#page > #content > .es-container.page-header,
#page > .es-link-container,
#page > #colophon,
body > .sp.footer_bt_bar { display: none; }

/* Classic レイアウトを素の幅で描くため、テーマのコンテナ制約を外す。
   .es-container は flex なので width:auto だけでは縮んだままになる（flex-basis が効く）。 */
#page, #page > #content { max-width: none; width: auto; margin: 0; padding: 0; }
#page > #content > .es-container { display: block; max-width: none; width: auto; margin: 0; padding: 0; }
#page > #content > .es-container > #primary {
  flex: none; max-width: none; width: auto; margin: 0; padding: 0; }
#page > #content > .es-container > #primary > .site-main,
#page > #content > .es-container > #primary .entry-content { margin: 0; padding: 0; }

/* Flex の動的ブロック（acf/feature-new 等）は Gutenberg のブロック CSS で組まれるが、
   Classic の reset.css が持つ HTML5 display reset（`div{display:block}`）をラップ要素に
   スコープすると詳細度で勝ってしまい、カラムが縦積みになる。ブロック側を復元する。 */
.classic-body .wp-block-columns { display: flex; flex-wrap: wrap; }
.classic-body .wp-block-columns > .wp-block-column { display: block; }
.classic-body .es_new_block .wp-block-columns.es-list { align-items: stretch; }

/* サイト固有の追加スタイル: kajiki_3826_feature_card.css */
/* ------------------------------------------------------------------
   Flex の動的ブロック（acf/feature-new）の物件カードを、Classic の
   物件カード（.rent_list .swiper-slide）の見た目に寄せる。

   Classic 実測値（https://www.faithful-inc.com/index.html）:
     カード      幅235px / 右マージン28px
     画像        235×156（3:2 で切り抜き）
     種別バッジ  黒背景・白文字 12px・padding 4.8/9.6px・画像に約17px重ねる
     価格        24px  #c63b72
     面積        28px  #c63b72
     コメント    12px  #333   行間16.8px・上余白12px
     アクセス    12px  #8a8a8a
     カード下端  padding-bottom 30px

   Classic の reset.css（`* { margin:0; padding:0 }`）をラップ要素へスコープ
   している関係で、ブロック側の余白がすべて 0 になる。ここで明示的に与え直す。
   ------------------------------------------------------------------ */

/* 物件ブロックはテーマが白地＋不透明度 0.9 を掛けるため、Classic には無い
   白い膜が見出し（「東京メトロ千代田線 / 赤坂駅のおすすめ物件」）に重なって
   文字が霞む。Classic と同じく不透明・背景なしに戻す（PC・スマホ共通）。 */
.classic-body .feature-advertisement-block.content-wide-block.es_new_block.vertical-padding.es_grid_advlist,
.classic-body .feature-advertisement-block {
  opacity: 1;
  background-color: transparent;
}

/* Classic の「もっと見る」矢印（#btn）は 32×20 ＋ padding 10px で実測 52×40。
   Flex テーマは全要素を border-box にするため padding が内側に食い込んで
   32×20 に縮む。この要素だけ Classic と同じ content-box に戻す。 */
.classic-body #btn { padding: 10px; box-sizing: content-box; }

/* Classic のカードに寄せる装飾は PC 幅のときだけ当てる。
   スマホでは固定幅（235px）や左インデント（60px）、バッジの重ねが
   4 カラムを潰してしまうので、テーマ標準のレスポンシブ表示に任せる。 */
@media screen and (min-width: 600px) {
  /* カード群の外周。Classic は見出し(h5)からカードまで 32px（ブロック側に既にあるので
     上は足さない）。Classic はカード群を左に 60px インデントしている
     （.swiper-wrapper の margin-left）。 */
  .classic-body .feature-advertisement-block {
    margin: 0 0 0 60px;
    background: transparent;   /* 親 section の半透明白を透かす */
  }
  /* ブロック側が `!important` で `margin-left:auto` と `background-color:#fff` を
     指定しているため、この 2 つだけは同じ `!important` で後勝ちさせる。
     （.content-wide-block / .feature-advertisement-block... の指定を打ち消す） */
  /* 相手のセレクタはクラス4つ（.feature-advertisement-block.content-wide-block
     .es_new_block.vertical-padding）なので、それより詳細度を上げる。
     左に 60px ずらす分だけ幅も詰めないと右にはみ出す。 */
  .classic-body .feature-advertisement-block.content-wide-block.es_new_block.vertical-padding {
    margin-left: 60px !important;
    width: calc(100% - 60px) !important;
    background-color: transparent !important;
    /* Classic はカード下端と「もっと見る」が密着している（間隔 0）。
       ブロックの下余白（vertical-padding 由来）と margin を落とす。 */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .classic-body .es_new_block_items,
  .classic-body .feature-advertisement-block .wp-block-columns { margin-bottom: 0; }

  /* Classic のカードは 235px 幅・間隔 28px。テーマ既定（4等分257px・間隔40px）のままだと
     左インデントと合わせて横に収まらない。 */
  .classic-body .es_new_block_items {
    gap: 0 28px;                  /* 横だけ 28px。行間を付けると下に余白が残る */
    justify-content: flex-start;  /* 余った幅を間隔に配らない（Classic は左詰め） */
  }
  .classic-body .es_new_block_items > .es_new_block_item {
    flex: 0 0 235px;
    max-width: 235px;
  }

  /* カード自体は白。半透明にするのは外側の section だけで、カードは白のまま乗せる。
     カードには既定で margin-bottom:20px が付き、下の「もっと見る」との間が空くため落とす
     （Classic はカード下端と「もっと見る」が密着している）。 */
  .classic-body .es_new_block_items > .es_new_block_item,
  .classic-body .wp-block-columns > .wp-block-column.es_new_block_item {
    margin-bottom: 0;
    background: #fff;
    box-shadow: none;
  }

  .classic-body .es_new_block_link {
    display: block;
    padding-bottom: 30px;
    color: #333;
    text-decoration: none;
  }

  /* 画像は Classic と同じ 3:2 で切り抜く（元画像の縦横比はまちまちなため） */
  .classic-body .es_new_block_figure {
    margin: 0;
    aspect-ratio: 235 / 156;
    overflow: hidden;
  }
  .classic-body .es_new_block_figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 種別バッジ（マンション等）: Classic は画像の右下に重ねている。
     figure の兄弟要素なので float で右に寄せ、負マージンで画像に食い込ませる。 */
  .classic-body .es_new_block_genre {
    display: inline-block;
    float: right;
    position: relative;   /* 負マージンで画像に重ねるので前面に出す */
    z-index: 2;
    /* Classic は画像の下端から 15px 下にはみ出す位置。バッジの高さが Classic
       （32px）より小さい（28px）ぶん、負マージンを詰めて同じ見え方にする。 */
    margin: -13px 0 12px;
    padding: 4.8px 9.6px;
    background: #000;
    font-size: 12px;
    line-height: 1.4;
  }
  .classic-body .es_new_block_name_wrap { clear: both; }
  /* バッジ内の span にはテーマ既定の白枠と極小フォント（6.25px）が当たるため打ち消す。
     Classic の種別ラベルは枠線なし・12px。 */
  .classic-body .es_new_block_genre,
  .classic-body .es_new_block_genre span { color: #fff; }
  .classic-body .es_new_block_genre span {
    display: inline;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    background: none;
  }

  /* 物件名（住所）は Classic のカードには無い項目なので控えめに置く */
  .classic-body .es_new_block_name_wrap {
    margin: 0 10px 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #666;
  }
  .classic-body .es_new_block_name { font-weight: 400; }

  /* 賃料・面積は Classic と同じピンクで大きく見せる */
  .classic-body .es_new_block_price {
    margin: 0 10px;
    font-size: 15px;
    line-height: 1.3;
    color: #c63b72;
  }
  .classic-body .es_new_block_price .color_em {
    font-size: 24px;
    color: #c63b72;
  }
  .classic-body .es_new_block_houseplan {
    margin: 4px 10px 0;
    font-size: 13px;
    line-height: 1.4;
    color: #c63b72;
  }

  .classic-body .es_new_block_access {
    margin: 8px 10px 0;
    font-size: 12px;
    line-height: 1.3;
    color: #8a8a8a;
  }

  /* Classic は紹介文を 3〜4 行で切っている（実測 62px / 行間 16.8px） */
  .classic-body .es_new_block_salespoint {
    margin: 0 10px;
    padding-top: 12px;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
  }
  .classic-body .es_new_block_salespoint_text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* アイコンは Classic のカードには無いので控えめにする */
  .classic-body .es_new_block_price_icon,
  .classic-body .es_new_block_houseplan_icon,
  .classic-body .es_new_block_access_icon { margin-right: 4px; opacity: .6; }

  /* お気に入りボタンは画像右上に重ねる（既定だと余白 0 で潰れる） */
  .classic-body .es_new_block_fav {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
  }
  .classic-body .es_new_block_item { position: relative; }
}

/* ------------------------------------------------------------------
   カード hover 時の演出（Classic の section.rent_list a:hover を移植）
   カード全体を黒 53% で覆い、中央に「詳細を見る」ボタンを浮かべる。
   Classic は 960px 以上でのみ有効（スマホでは出さない）。
   ------------------------------------------------------------------ */
@media screen and (min-width: 960px) {
  .classic-body .es_new_block_link { position: relative; }

  .classic-body .es_new_block_link::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    transition: all .15s ease-in;
  }
  .classic-body .es_new_block_link:hover::before {
    background-color: rgba(0, 0, 0, .53);
  }

  .classic-body .es_new_block_link::after {
    content: '詳細を見る';
    font-size: 14px;
    color: #fff;
    background-color: #c63b72;
    text-align: center;
    vertical-align: middle;
    width: 8em;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100001;
    margin-left: -4em;
    border: 1px solid #fff;
    padding: .6em 0;
    opacity: 0;
  }
  .classic-body .es_new_block_link:hover::after {
    transition: all .25s ease-in;
    opacity: 1;
  }
}


/* ------------------------------------------------------------------
   スマホ。Classic はカードを横一列に並べて横スクロールさせる
   （swiper。実測: カード幅 148px・右マージン 14px・左右 16px・画像 148×174）。
   Flex の動的ブロックは swiper を持たないので CSS の横スクロールで再現する。

   ・flex にすると列が 90px まで縮むため inline-block を並べる方式にする
   ・テーマは `.wp-block-columns` の幅を 23% ほどに決めるので 100% を明示する
   ------------------------------------------------------------------ */
@media screen and (max-width: 599px) {
  .classic-body .feature-advertisement-block,
  .classic-body .feature-advertisement-block.content-wide-block.es_new_block.vertical-padding {
    margin-left: 0 !important;
    width: auto !important;
    /* カード列と「もっと見る」の間に余白を置く（既定は 0 で詰まる） */
    padding-bottom: 20px;
  }
  .classic-body .wp-block-columns.es-list {
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
    margin: 0;
  }
  /* Classic のカードは 148px 幅だが、Flex は賃料の表記が長い（Classic「17.7万円」に対し
     「17万7000円 / 0円」）ため 148px では 2 行に折り返し、カードごとに高さがずれる。
     1 行に収まる 160px にして高さを揃える。 */
  .classic-body .wp-block-columns.es-list > .wp-block-column {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    width: 160px;
    max-width: 160px;
    margin: 0 14px 0 0;
  }
  /* カードの中身が下端に貼り付かないよう、カード内に下余白を持たせる */
  .classic-body .es-list a.es_new_block_link {
    display: block; width: 100%; padding-bottom: 24px;
  }
  /* Classic のスマホは画像 148×174（縦長） */
  .classic-body .es_new_block_figure { aspect-ratio: 148 / 174; }
  .classic-body .es_new_block_figure img { width: 100%; height: 100%; object-fit: cover; }
  /* 148px 幅では情報が入りきらないので、Classic のカードに無い住所は出さない */
  .classic-body .es_new_block_name_wrap { display: none; }

  /* 種別バッジは PC と同じく写真の右下に重ねる（カードの縦を節約する） */
  .classic-body .es_new_block_genre {
    display: inline-block;
    float: right;
    position: relative;
    z-index: 2;
    /* Classic SP は画像の下端から 17px 下にはみ出す（バッジ高 30px に対し
       こちらは 22px なので負マージンを詰めて合わせる） */
    margin: -5px 0 9.75px;
    padding: 3.9px 7.8px;
    background: #000;
    font-size: 9.75px;
    line-height: 1.4;
  }
  .classic-body .es_new_block_genre,
  .classic-body .es_new_block_genre span { color: #fff; }
  .classic-body .es_new_block_genre span {
    display: inline; border: 0; padding: 0; margin: 0;
    font-size: 9.75px; line-height: 1.4; background: none;
  }
  .classic-body .es_new_block_price { clear: both; }

  /* 148px 幅に収まるよう文字を詰める */
  .classic-body .es_new_block_access,
  .classic-body .es_new_block_salespoint { font-size: 11px; }
  .classic-body .es_new_block_houseplan { font-size: 12px; }
  .classic-body .es_new_block_price .color_em { font-size: 18px; }
}