/*
 * 国内旅トップ(/tsplus)の CONTENTS 写真カード。ナビ再編 実装仕様 §5-2〜5-4。
 * style.css の旧テキストタイル(main#main section.section#contents_tsalad ul a)を同じ詳細度で上書きする。
 * 寸法は style.css と同じく 1367px以上=px / 961〜1366px=1366基準のvw / 960px以下=393基準のvw。
 */
main#main section.section#contents_tsalad ul li {
  list-style: none;
}
main#main section.section#contents_tsalad ul a {
  position: relative;
  display: block;
  width: 320px;
  max-width: 320px;
  height: 120px;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #20272a;
  color: #fff;
}
main#main section.section#contents_tsalad ul a::after {
  /* キーボード操作時だけの枠(マウスのホバーでは出さない) */
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color .2s;
  z-index: 2;
}
main#main section.section#contents_tsalad ul a:focus-visible::after {
  border-color: #159eb7;
}
main#main section.section#contents_tsalad .ph {
  position: absolute;
  inset: 0;
}
main#main section.section#contents_tsalad .ph i {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform .45s ease;
}
/* ホバーはマウスのときだけ(スマホでタップ後に拡大が残らないように) */
@media (hover: hover) {
  main#main section.section#contents_tsalad a:hover .ph i {
    transform: scale(1.06);
  }
}
main#main section.section#contents_tsalad .ph::after {
  /* 文字を読ませるための覆い */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 18, 20, .82) 0%, rgba(12, 18, 20, .42) 46%, rgba(12, 18, 20, .06) 100%);
}
main#main section.section#contents_tsalad .tx {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  /* テーマ全体の中央寄せ・字間1.6pxを引き継がない(モックは左寄せ) */
  text-align: left;
  letter-spacing: .05em;
}
main#main section.section#contents_tsalad .tx b {
  display: block;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
main#main section.section#contents_tsalad .tx p {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

@media (max-width: 1366px) {
  main#main section.section#contents_tsalad ul a {
    width: 23.4260614934vw;
    max-width: 23.4260614934vw;
    height: 8.7847730600vw;
    padding: 0;
    border: 0;
  }
  main#main section.section#contents_tsalad .tx {
    left: 1.0248901903vw;
    right: 1.0248901903vw;
    bottom: .8784773060vw;
  }
  main#main section.section#contents_tsalad .tx b {
    font-size: 1.2445095168vw;
  }
  main#main section.section#contents_tsalad .tx p {
    margin-top: .1464128843vw;
    font-size: .8418740849vw;
  }
}

@media (max-width: 960px) {
  /* 2列3行・説明文つき(§5-4)。ul の gap・左右余白は style.css の現行値のまま */
  main#main section.section#contents_tsalad ul li {
    width: calc(50% - 1.1547344111vw);
  }
  main#main section.section#contents_tsalad ul a {
    width: 100%;
    max-width: 100%;
    height: 25.4452926209vw;
    padding: 0;
    border: 0;
  }
  main#main section.section#contents_tsalad .ph::after {
    /* SPは覆いを濃く */
    background: linear-gradient(to top, rgba(12, 18, 20, .9) 0%, rgba(12, 18, 20, .56) 62%, rgba(12, 18, 20, .1) 100%);
  }
  main#main section.section#contents_tsalad .tx {
    left: 2.5445292621vw;
    right: 2.5445292621vw;
    bottom: 2.2900763359vw;
  }
  main#main section.section#contents_tsalad .tx b {
    font-size: 3.4351145038vw;
    line-height: 1.3;
    word-break: keep-all; /* 中黒の後ろの <wbr> でだけ折り返す */
    overflow-wrap: break-word;
  }
  main#main section.section#contents_tsalad .tx p {
    margin-top: .5089058524vw;
    font-size: 2.6717557252vw;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 写真の位置の微調整(依頼者の指摘 2026-10-20)。PCは幅いっぱいなので上下位置だけ、SPは余白が少ないので少し拡大して上下を動かす */
main#main section.section#contents_tsalad li.is-hotel .ph i {
  background-position: center top;
}
@media (max-width: 960px) {
  main#main section.section#contents_tsalad li.is-hotel .ph i {
    background-position: center;
  }
  main#main section.section#contents_tsalad li.is-gift .ph i {
    background-size: 125% auto;
    background-position: center 95%;
  }
  main#main section.section#contents_tsalad li.is-spot .ph i {
    background-size: 125% auto;
    background-position: center 85%;
  }
  main#main section.section#contents_tsalad li.is-outing .ph i {
    background-size: 125% auto;
    background-position: 60% 75%;
  }
}