/* ==========================================================================
   モックの travel.css から移したもの
   駅探本体が配信する travel.css（COMMON_PARTS_URL）には、このページ用の
   スタイルが入っていない。以前はリポジトリに travel.css の写しを置いて
   末尾に足していたが、本体の更新に追従できないので、**差分をここへ移した**。

   PC とモバイルで travel.css が別だったため、中身が違うものは
   :where(body.device-pc) / :where(body.device-sp) で振り分ける。
   **:where() は詳細度を上げない**ので、下にある既存の上書きがそのまま効く。

   並んでいる div.tss-embed-pc|sp は、他のページへ検索フォームだけ貼るとき
   （common/embed_form.html）の受け皿。相手の body は触れないので、断片の
   外側のdivが body のクラスの代わりを務める。**どちらか片方が当たればよい**
   という意味で、片方しか書かないと貼ったときだけ PC / モバイルの振り分けが
   落ちる。

   詳細度で travel.css に勝つために :where() に入れず素で書いているものは、
   :is(body.device-sp, div.tss-embed-sp) の形にしてある。body.device-sp も
   div.tss-embed-sp も**要素1＋クラス1**なので、:is() で包んでも詳細度は
   変わらない。**div を落とすとここが崩れる。**
   ========================================================================== */

/* --- PC / モバイル共通 --- */
.travel-shinkansen-section .form-group-date .select-date-form label,
.travel-shinkansen-section .form-group-date .select-date-form input {
  height: 32px;
}

.travel-shinkansen-section .accordion-contents .form-group-line:first-child {
  border-top: none;
}

.travel-shinkansen-section .check-list .check-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0 6px 0 0;
  vertical-align: -2px;
}

.travel-shinkansen-section .table-style01.type-fare + .table-style01.type-fare {
  margin-top: 5px;
}

.travel-shinkansen-section .fare-note .mark {
  display: inline-block;
  width: 1.3em;
  vertical-align: top;
}

.travel-shinkansen-section .table-style01.type-fare th,
.travel-shinkansen-section .table-style01.type-fare td {
  border: none;
  color: #333;
  text-align: right;
}

.travel-shinkansen-section .special-discount-fare-wrap + .special-discount-fare-wrap {
  margin-top: 10px;
}

.travel-shinkansen-section .special-discount-fare-wrap .special-discount-btn:last-child {
  margin-right: 0;
}

.travel-shinkansen-section .special-discount-fare-wrap .special-discount-btn:hover {
  background-color: #d2f0ff;
}

.travel-shinkansen-section .special-discount-fare-wrap .shinkansen-deal-btn a {
  padding: 10px 5px 10px 10px !important;
}

.travel-shinkansen-section .btn-color-blue .text {
  color: #1b6bcf !important;
}

.travel-shinkansen-section .special-discount-fare-wrap .special-discount-btn .icon-train {
  display: inline-block;
  width: 27px;
  height: 14px;
  margin-right: 5px;
  background: url(../img/common/travel/icon-train-2x.svg) no-repeat;
}

.travel-shinkansen-section .blue-revert {
  display: inline-block;
  width: 15px;
  height: 13px;
  background: url(../img/common/travel/blue-revert.svg) no-repeat;
}

.travel-shinkansen-section .marker-yellow {
  background: linear-gradient(transparent 50%, #FFF200 50%);
}

.travel-shinkansen-section .justify-align-center {
  justify-content: center !important;
  align-items: center !important;
}

.travel-shinkansen-section .flex-wrap-wrap {
  flex-wrap: wrap;
}

.travel-shinkansen-section .height-14px {
  height: 14px;
}

.travel-shinkansen-section .ws-n {
  white-space: nowrap !important;
}

.travel-shinkansen-section .ls-tight {
  letter-spacing: -0.5px;
}

.travel-shinkansen-section .font-700 {
  font-weight: 700 !important;
}

.travel-shinkansen-section .font-400 {
  font-weight: 400 !important;
}

.travel-shinkansen-section .plan-notice + .plan-notice {
  margin-top: 10px;
}

.travel-shinkansen-section .icon-information-green::before {
  background: url(../img/common/travel/icon-information-green.svg) center/contain no-repeat;
}

.travel-shinkansen-section .plan-notice .text {
  display: inline-block;
  width: calc(100% - 14px);
  vertical-align: top;
}

.tooltip-plan .tooltip-content-body {
  padding: 15px 20px;
}

.tooltip-plan .tooltip-sub-ttl {
  margin: 0 0 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e5e5e5;
  color: #333;
  font-size: 14px;
  font-weight: bold;
}

.tooltip-plan .tooltip-content-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

/* tippy は箱の幅を既定で 350px に抑えるので、原寸のまま置くと溢れる */
.tooltip-plan .tooltip-content-body img {
  display: block;
  width: 100%;
  height: auto;
}

.travel-shinkansen-section .plan-summary-row .price .num {
  font-size: 20px;
}

.travel-shinkansen-section .plan-item-info {
  flex: 1;
  min-width: 0;
}

.travel-shinkansen-section .plan-item-rating .rating-num {
  color: #313233;
  font-size: 14px;
}

.travel-shinkansen-section .plan-row-type .icon-base-22,
.travel-shinkansen-section .plan-row-type .icon-base-20 {
  display: block;
  padding: 0;
}

.travel-shinkansen-section .plan-row-type .icon-base-22::before,
.travel-shinkansen-section .plan-row-type .icon-base-20::before {
  width: 16px;
  height: 18px;
  position: static;
  display: block;
  margin: 0 auto;
}

.travel-shinkansen-section .plan-row-detail .plan-name {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  color: #1b6bcf;
  font-size: 14px;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.travel-shinkansen-section .plan-row-detail .plan-tag {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #999;
  border-radius: 3px;
  color: #666;
  font-size: 12px;
}

.travel-shinkansen-section .plan-row-price .unit {
  color: #666;
  font-size: 10px;
}

.travel-shinkansen-section .plan-row-price .unit b {
  font-size: 12px;
  font-weight: bold;
}

.travel-shinkansen-section .plan-row-price .price .num {
  font-size: 20px;
  font-weight: bold;
}

/* 金額は途中で折らない。「23,800」と「円～」が別の行に分かれると読みにくい */
.travel-shinkansen-section .plan-row-price .price {
  white-space: nowrap;
}

/* 料金の条件（※1泊2日、2名1室利用時の…）。**金額と予約ボタンの下**に置く。
   添え書きが長いので金額の横には並べない（並べると金額が折り返される） */
.travel-shinkansen-section .plan-row-note {
  margin: 0;
  color: #666;
  font-size: 10px;
  text-align: right;
}

/* 割引の適用条件。**料金に近接して明瞭に**（表示規約第7条第6号）。
   条件の注記なので、料金の条件（1泊2日…）より前に出し、少し目立たせる */
.travel-shinkansen-section .plan-row-note.plan-row-note-discount {
  color: #e83a22;
}

/* 折り返させたくない語のまとまり。日本語はどこでも折り返せるので、
   放っておくと「往復追加代金なし列／車」のように語の途中で割れる */
.travel-shinkansen-section .nw {
  display: inline-block;
}

/* 割引キャンペーン中の料金。

   割引後を主にして（.price-now）、元の料金を取り消し線で下に添える
   （.price-before）。チップ（.price-off）は割引後の左。
   **.price-before は二重価格表示にあたる**（表示規約第12条）。20261008 に
   いったん外したが、依頼により戻した。

   .plan-tag を流用せず別クラスにしてあるのは、.plan-tag が
   inline-block で間の空白が効く作りになっていて、ここでは
   flex の gap で詰めたいため。 */
.travel-shinkansen-section .price-now {
  display: flex;
  align-items: center;
  gap: 5px;
}

.travel-shinkansen-section .price-off {
  flex: none;
  padding: 1px 5px;
  border-radius: 2px;
  background: #e83a22;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.4;
  white-space: nowrap;
}

.travel-shinkansen-section .price-before {
  color: #666;
  font-size: 11px;
  white-space: nowrap;
}

.travel-shinkansen-section .price-before s {
  text-decoration: line-through;
}

.travel-shinkansen-section .plan-row:not(.pack-row) .reserve-btn-label {
  background: #1b6bcf;
}

.txt-attention {
  color: #e83a22;
  font-weight: bold;
}

.travel-shinkansen-section .pack-ttl {
  color: #333;
  font-size: 14px;
}

.travel-shinkansen-section .pack-provider {
  margin-left: auto;
  color: #333;
  font-size: 12px;
}

.travel-shinkansen-section .pack-row + .pack-row {
  border-top: none;
}

.travel-shinkansen-section .pack-body + .pack-body .pack-row {
  border-top: none;
}

.travel-shinkansen-section .pack-row .reserve-btn-label {
  background: #e03b56;
}

.travel-shinkansen-section .plan-row:hover .reserve-btn {
  opacity: 0.8;
  text-decoration: none;
}

.travel-shinkansen-section .pack-more .text-open {
  display: none;
}

.travel-shinkansen-section .pack-accordion li.uk-open .pack-more .text-closed {
  display: none;
}

.travel-shinkansen-section .pack-accordion li.uk-open .pack-more .text-open {
  display: inline;
}

.travel-shinkansen-section .pack-accordion {
  margin: 0;
}

.travel-shinkansen-section .pack-accordion .uk-accordion-content {
  margin: 0;
}

.travel-shinkansen-section .point-ttl {
  margin: 0 0 5px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e5e5;
  color: #333;
  font-size: 14px;
  font-weight: bold;
}

.travel-shinkansen-section .point-text {
  margin: 0 0 5px;
  color: #333;
  font-size: 13px;
}

.travel-shinkansen-section .point-img {
  margin: 0;
}

/* --- 注釈 --- */ .travel-shinkansen-section .kome.small > li {
  font-size: 12px;
  color: #555;
}

/* --- ホバー --- */ .travel-shinkansen-section .plan-row:hover {
  background-color: #D2F0FF;
}

.travel-shinkansen-section .plan-row:hover .plan-name {
  text-decoration: none;
}


/* --- PC だけ --- */
:where(body.device-pc, div.tss-embed-pc) /* ============================== 新幹線セットプラン一覧 (travel/shinkansen/section) ============================== */ .travel-shinkansen-section .h2-style {
  padding: 10px 10px 10px 16px;
}

:where(body.device-pc, div.tss-embed-pc) /* --- 検索フォーム --- */ .travel-shinkansen-section .selected-condition-form-wrap {
  padding: 15px 20px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-section .section-select,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-section .section-select .select-box-wrap,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-section .section-select select {
  width: 195px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-section .section-separator {
  display: inline-block;
  margin: 0 5px;
  color: #333;
  font-size: 14px;
  line-height: 30px;
  vertical-align: top;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .select-box-wrap select {
  color: #333;
  font-size: 14px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-section > .form-group-ttl,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-date > .form-group-ttl,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-section .section-separator {
  line-height: 32px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-date .select-date-form-wide {
  width: 195px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-date .select-date-form label {
  display: block;
  padding: 5px 0 5px 10px;
  background-position: 166px 6px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-date .form-group-ttl-inline {
  display: inline-block;
  margin: 0 14px 0 20px;
  color: #76787D;
  font-size: 13px;
  line-height: 32px;
  vertical-align: top;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-date .select-box-wrap,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .form-group-date .select-box-wrap select {
  width: 65px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .detail-cond-accordion .uk-open > .accordion-title {
  background: #d2f0ff;
  border-radius: 3px 3px 0 0;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .detail-cond-accordion .uk-accordion-content {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0 0 3px 3px;
  background: #E9E9E9;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .accordion-contents .form-group-line {
  margin: 0;
  padding: 20px;
  border-top: 1px solid #D9D9D9;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .accordion-contents .form-group-line .form-group-ttl {
  width: 80px;
  margin-right: 20px;
  line-height: 32px;
  text-align: left;
  vertical-align: top;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .accordion-contents .type-check {
  align-items: flex-start;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .accordion-contents .cond-smoking,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .accordion-contents .cond-meal {
  padding: 15px 20px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .accordion-contents .cond-smoking .select-box-wrap,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .accordion-contents .cond-smoking select,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .accordion-contents .cond-meal .select-box-wrap,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .accordion-contents .cond-meal select {
  width: 120px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .accordion-contents .type-check .form-group-ttl {
  line-height: 24px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .check-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 20px;
  width: calc(100% - 100px);
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .check-list .check-item {
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  cursor: pointer;
}

:where(body.device-pc, div.tss-embed-pc) /* --- 新幹線 往復料金 参考表 --- */ .travel-shinkansen-section .fare-ref-ttl {
  margin: 0 0 5px;
  color: #333;
  font-size: 13px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .table-style01.type-fare {
  margin: 0;
  border: 1px solid #ccc;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .fare-note {
  margin: 5px 0 0;
  color: #555;
  font-size: 12px;
  text-align: right;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .table-style01.type-fare tbody th,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .table-style01.type-fare tbody td {
  border-top: 1px solid #eee;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .table-style01.type-fare thead th {
  padding: 5px 20px 5px 0;
  background: #F0F0F0;
  font-size: 12px;
  font-weight: normal;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .table-style01.type-fare tbody th {
  padding: 5px 0 5px 30px;
  background: none;
  font-size: 12px;
  font-weight: normal;
  text-align: left;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .table-style01.type-fare tbody td {
  padding: 5px 20px 5px 0;
  font-size: 13px;
  font-weight: bold;
}

:where(body.device-pc, div.tss-embed-pc) /* --- 送客リンク枠 --- */ .travel-shinkansen-section .special-discount-fare-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .special-discount-fare-wrap .special-discount-btn {
  border: 1px solid #1B6BCF;
  border-radius: 3px;
  margin-right: 10px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .special-discount-fare-wrap .special-discount-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px 20px;
  color: #333333;
  font-size: 13px;
  text-decoration: none;
}

:where(body.device-pc, div.tss-embed-pc) /* --- 新幹線＋ホテルセットプラン 見出し + 注意書き --- */ .travel-shinkansen-section .plan-ttl {
  margin-top: 20px;
  color: #333;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-notice {
  margin-top: 20px;
  padding: 15px 20px;
  border: 1px solid #E83A22;
  color: #333;
  font-size: 13px;
}

:where(body.device-pc, div.tss-embed-pc) /* --- ツールチップリンク --- */ .travel-shinkansen-section .plan-tooltip-links {
  margin-top: 15px;
  font-size: 0;
  text-align: right;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-tooltip-links .tippy-btn {
  display: inline-block;
  height: auto;
  margin: 0 0 0 20px;
  color: #1b6bcf;
  font-size: 11px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-tooltip-links .tippy-btn:first-child {
  margin-left: 0;
}

:where(body.device-pc, div.tss-embed-pc) /* --- 料金・検索結果 --- */ .travel-shinkansen-section .plan-summary {
  margin-top: 10px;
  padding: 10px 20px;
  background: #f4f4f4;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-summary-row {
  display: flex;
  align-items: baseline;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-summary-row .ttl {
  margin-right: 10px;
  color: #313233;
  font-size: 12px;
  font-weight: bold;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-summary-row .price {
  color: #e83a22;
  font-size: 14px;
  font-weight: bold;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-summary-row .note {
  color: #313233;
  font-size: 12px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-summary-note {
  margin: 0;
  font-size: 11px;
  text-align: right;
  color: #555;
}

:where(body.device-pc, div.tss-embed-pc) /* --- 検索結果一覧 --- */ .travel-shinkansen-section .plan-result {
  margin-top: 20px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  font-size: 13px;
  color: #333;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-result-filter {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-result-filter input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item {
  padding: 15px 0;
  border-top: 2px solid #ccc;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item:last-child {
  padding-bottom: 30px;
  border-bottom: 2px solid #ccc;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-result + .pagination-warp {
  margin-top: 15px;
}

:where(body.device-pc, div.tss-embed-pc) /* --- 施設情報 --- */ .travel-shinkansen-section .plan-item-head {
  display: flex;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item-img {
  flex: 0 0 180px;
  margin-right: 10px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item-img img {
  display: block;
  width: 180px;
  height: 135px;
  object-fit: cover;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item-ttl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item-ttl .name {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item-ttl .provider {
  flex: none;
  margin-left: 10px;
  color: #333;
  font-size: 12px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item-rating {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item-rating .star-rating-5 + .rating-num {
  margin-left: 5px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item-addr {
  margin: 8px 0 0;
  color: #313233;
  font-size: 14px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item-addr .icon-map-area {
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 0;
  margin-right: 3px;
  vertical-align: -3px;
  background: url(/img/common/icon-map-area.svg) center/contain no-repeat;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-item-access {
  margin: 8px 0 0;
  color: #313233;
  font-size: 14px;
}

:where(body.device-pc, div.tss-embed-pc) /* --- プラン行 --- */ .travel-shinkansen-section .plan-row {
  display: flex;
  /* 料金の条件を最下段へ回すため折り返す。上の段（アイコン・内容・料金・
     ボタン）は幅が決まっているので、ここで折り返すのは条件の行だけ */
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 5px;
  padding: 10px 8px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-row-note {
  flex-basis: 100%;
  margin-top: 4px;
}

/* 割引の条件は料金のすぐ下。間を空けない */
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-row-note-discount + .plan-row-note {
  margin-top: 0;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-row-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  background: #f4f4f4;
  color: #333;
  font-size: 12px;
  text-align: center;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-row-type-plus {
  display: block;
  color: #e03b56;
  font-size: 12px;
  line-height: 1;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-row-detail {
  flex: 1;
  min-width: 0;
  margin-left: 10px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-row-detail:has(.plan-tag) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  /* **行を引き伸ばさない。** 親（.plan-row）は align-items: stretch なので、
     料金側が高いとここも引き伸ばされる。flex-wrap があると余った高さが
     各行に配られ、タグが縦に伸びてしまう（割引表示で料金が3行になると起きた） */
  align-content: flex-start;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-row-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: none;
  margin-left: 10px;
  text-align: right;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-row-price .price {
  color: #e83a22;
  font-size: 13px;
}

/* 割引中。プラン行は元から縦積み（flex-direction: column）なので、
   .price-now と .price-before がそのまま上下に並ぶ。右寄せだけそろえる */
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-row-price .price-now {
  justify-content: flex-end;
}


:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .plan-row-btn {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: 5px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .reserve-btn {
  display: inline-flex;
  align-items: stretch;

  height: 38px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 36px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .reserve-btn-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: #fff;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .reserve-btn-logo img {
  display: block;
  width: 65px;
  height: auto;
  max-height: 100%;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .reserve-btn-label {
  flex: none;
  padding: 0 10px;
  color: #fff;
}

:where(body.device-pc, div.tss-embed-pc) /* --- 文字装飾 --- */ .txt-marker {
  text-decoration: underline;
  text-decoration-color: #fcf686;
  text-decoration-thickness: 50%;
  text-underline-offset: -20%;

  text-decoration-skip-ink: none;
}

:where(body.device-pc, div.tss-embed-pc) /* --- 新幹線ホテルパック --- */ .travel-shinkansen-section .pack {
  margin-top: 5px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .pack-head {
  display: flex;
  align-items: center;
  padding: 7px 10px 5px 10px;
  background: #eee;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .pack-badge {
  margin-left: 5px;
  padding: 1px 4px 1px 4px;
  background: #e67083;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .pack-row {
  margin-top: 0;
  padding: 10px 8px;
  border: 1px solid #e67083;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .pack-btn {
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.1);
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .pack-more {
  display: block;
  margin-top: 0;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .pack-more:focus:not(:hover) {
  background: #fff;
  color: #1b6bcf;
}

:where(body.device-pc, div.tss-embed-pc) /* --- サイドカラム: 参考価格 --- */ .travel-shinkansen-section .ref-price-lead {
  margin: 0 0 5px;
  color: #333;
  font-size: 13px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table + .ref-price-table {
  margin-top: 5px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table th,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table td {
  border: none;
  color: #333;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table thead th {
  padding: 4px 5px;
  background: #f0f0f0;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table thead th:not(:first-child) {
  padding: 4px 5px 4px 0;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table:not(:first-of-type) thead th:not(:first-child) {
  text-align: right;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table tbody th {
  padding: 6px 5px;
  font-size: 12px;
  font-weight: normal;
  text-align: left;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table tbody td {
  padding: 6px 5px 6px 0;
  font-size: 13px;
  font-weight: bold;
  text-align: right;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table:not(:first-of-type) tbody th {
  padding: 5px 5px 5px 10px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table:not(:first-of-type) tbody td {
  padding: 5px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table tbody th,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table tbody td {
  border-top: 1px solid #eee;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table tbody tr:first-child th,
:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .ref-price-table tbody tr:first-child td {
  border-top-color: #e6e6e6;
}

:where(body.device-pc, div.tss-embed-pc) /* --- サイドカラム: ポイント --- */ .travel-shinkansen-section .point-block + .point-block {
  margin-top: 15px;
}

:where(body.device-pc, div.tss-embed-pc) .travel-shinkansen-section .point-img img {
  display: block;
  width: 270px;
  height: 60px;
}

:where(body.device-pc, div.tss-embed-pc) /* --- サイドカラム: 天気の見出し --- */ .travel-shinkansen-section .weather-ttl {
  color: #1B6BCF;
}

:where(body.device-pc, div.tss-embed-pc) /* --- サイドカラム: 余白調整 --- */ .travel-shinkansen-section .sidearea-bnr-wrap .contents-wrap {
  margin-bottom: 15px;
}

:where(body.device-pc, div.tss-embed-pc) /* --- 並び替え --- */ .travel-shinkansen-section .plan-result-sort-label {
  margin-right: 10px;
  color: #76787D;
  font-size: 13px;
}

:where(body.device-pc, div.tss-embed-pc) /* --- サイドカラム: 参考価格 グリーン席 --- */ .travel-shinkansen-section .ref-price-table thead th:last-child {
  text-align: right;
}

:where(body.device-pc, div.tss-embed-pc) .plan-error {
  padding: 30px 10px;
}


/* --- モバイルだけ --- */
:where(body.device-sp, div.tss-embed-sp) /* ============================== 新幹線ホテルパック (travel/shinkansen/section) ============================== */ /* --- キービジュアル --- */ .travel-shinkansen-section .key-visual-pack {
  margin-bottom: 10px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .key-visual-pack img {
  display: block;
  width: 100%;
}

:where(body.device-sp, div.tss-embed-sp) /* --- ページ見出し --- */ .travel-shinkansen-section .pack-page-ttl {
  padding: 10px;
  color: #333;
  font-size: 18px;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 検索フォーム --- */ .travel-shinkansen-section .selected-condition-form-wrap {
  padding: 10px;
}

:where(body.device-sp, div.tss-embed-sp) /* SP 既定は position:absolute でセレクトの下に潜るため、通常フローに戻す。 ラベルは 58px 固定、右の中身と 8px 空ける */ .travel-shinkansen-section .selected-condition-form-wrap .form-group-ttl {
  position: static;
  display: inline-block;
  width: 58px;
  margin-top: 0;
  line-height: 32px;
  vertical-align: middle;
}

:where(body.device-sp, div.tss-embed-sp) /* 区間: ラベル 58+8 と「～」24px を除いた幅を2分割 */ .travel-shinkansen-section .form-group-section .section-select {
  width: calc((100% - 90px) / 2);
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-section .section-select .select-box-wrap,
:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-section .section-select select {
  width: 100%;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-section .section-separator {
  display: inline-block;
  width: 24px;
  color: #333;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  vertical-align: top;
}

:where(body.device-sp, div.tss-embed-sp) /* セレクト内の文字 */ .travel-shinkansen-section .selected-condition-form-wrap .select-box-wrap select {
  color: #333;
  font-size: 14px;
}

:where(body.device-sp, div.tss-embed-sp) /* 出発日 */ .travel-shinkansen-section .form-group-date .select-date-form-wide {
  width: 175px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-date .select-date-form label {
  display: block;
  padding: 6px 0 6px 10px;
  background-position: 146px 6px;
  font-size: 13px;
}

:where(body.device-sp, div.tss-embed-sp) /* 室数のラベル */ .travel-shinkansen-section .form-group-room .form-group-ttl-inline {
  display: inline-block;
  margin: 0 8px 0 20px;
  color: #76787d;
  font-size: 13px;
  line-height: 32px;
  vertical-align: top;
}

:where(body.device-sp, div.tss-embed-sp) /* 宿泊・1室人数・室数のセレクト幅 */ .travel-shinkansen-section .form-group-line:not(.form-group-section) .select-box-wrap,
:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-line:not(.form-group-section) .select-box-wrap select {
  width: 70px;
}

:where(body.device-sp, div.tss-embed-sp) /* 検索ボタンは横幅いっぱい */ .travel-shinkansen-section .select-condition .wrap-search-btn {
  width: 100%;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .select-condition .wrap-search-btn .btn-type {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 新幹線 往復料金 参考表 --- */ .travel-shinkansen-section .fare-ref {
  margin-top: 15px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .fare-ref-ttl {
  margin: 0 0 5px;
  color: #333;
  font-size: 13px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .table-style01.type-fare {
  width: 100%;
  margin: 0;
  border: 1px solid #ccc;
  background: #fff;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .table-style01.type-fare thead th {
  padding: 4px 5px;
  background: #f0f0f0;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .table-style01.type-fare thead th:not(:first-child) {
  padding: 4px 5px 4px 0;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .table-style01.type-fare tbody th {
  padding: 5px 5px 5px 10px;
  background: none;
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .table-style01.type-fare tbody td {
  padding: 5px;
  font-size: 13px;
  font-weight: bold;
}

:where(body.device-sp, div.tss-embed-sp) /* 行間の区切り線。外周の #ccc を残すため border-top のみ */ .travel-shinkansen-section .table-style01.type-fare tbody th,
:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .table-style01.type-fare tbody td {
  border-top: 1px solid #eee;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .table-style01.type-fare tbody tr:first-child th,
:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .table-style01.type-fare tbody tr:first-child td {
  border-top-color: #e6e6e6;
}

:where(body.device-sp, div.tss-embed-sp) /* 表の下の注釈 */ .travel-shinkansen-section .fare-note {
  margin: 5px 0 0;
  color: #555;
  font-size: 12px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .fare-note .text {
  display: inline-block;
  width: calc(100% - 1.3em);
  vertical-align: top;
}

:where(body.device-sp, div.tss-embed-sp) /* --- こだわり条件 --- */ .travel-shinkansen-section .accordion-contents .form-group-line {
  padding: 15px 10px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .form-group-content {
  padding-left: 0;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .form-group-line .form-group-ttl {
  position: static;
  display: block;
  width: auto;
  margin: 0 0 15px;
  color: #76787d;
  font-size: 13px;
  font-weight: bold;
  line-height: normal;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .cond-meal .form-group-ttl {
  margin-bottom: 5px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .cond-smoking .select-box-wrap,
:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .cond-smoking .select-box-wrap select,
:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .cond-meal .select-box-wrap,
:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .cond-meal .select-box-wrap select {
  width: 100%;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 15px;
  column-gap: 15px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .check-list .check-item {
  color: #333;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .select-box-wrap {
  width: 100%;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .select-box-wrap select {
  width: 100%;
  color: #333;
  font-size: 14px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .detail-cond-accordion .uk-accordion-content {
  margin: 0;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .table-style01.type-fare thead th:not(:first-child) {
  text-align: right;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 検索フォーム 崩れ修正 --- */ .travel-shinkansen-section .select-condition.in-box .selected-condition-form-wrap > .form-group-line {
  display: block;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .select-condition.in-box .selected-condition-form-wrap > .form-group-line > .form-group-content {
  display: inline-block;
  margin-left: 0;
  padding-left: 0;
  vertical-align: middle;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .select-condition.in-box .selected-condition-form-wrap > .form-group-line > .form-group-content:not(.section-select) {
  width: auto;
}

:where(body.device-sp, div.tss-embed-sp) /* --- こだわり条件 崩れ修正 --- */ .travel-shinkansen-section .select-condition.in-box .accordion-contents .form-group-line {
  display: block;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .select-condition.in-box .accordion-contents .form-group-line > .form-group-content {
  display: block;
  width: 100%;
  margin-left: 0;
  padding-left: 0;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .select-condition.in-box .accordion-contents .form-group-content.check-list {
  display: grid;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 送客リンク枠 --- */ .travel-shinkansen-section .special-discount-fare-wrap {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-top: 20px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .special-discount-fare-wrap .special-discount-btn {
  display: flex;
  border: 1px solid #1B6BCF;
  border-radius: 3px;
  margin-right: 10px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .special-discount-fare-wrap .special-discount-btn a {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 7px 20px;
  color: #333333;
  font-size: 13px;
  text-decoration: none;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 関連サービス --- */ .travel-shinkansen-section .link-item-list > li {
  padding: 0;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .link-item-list > li > a {
  height: auto;
  padding: 5px 0;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .link-item-list > li:last-child > a {
  border-bottom: none;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 新幹線ホテルパック 見出し + 注意書き --- */ .travel-shinkansen-section .plan-ttl {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #333;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-notice {
  margin-top: 0;
  padding: 8px;
  border: 1px solid #E83A22;
  color: #333;
  font-size: 12px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-notice + .plan-tooltip-links {
  margin-top: 10px;
}

:where(body.device-sp, div.tss-embed-sp) /* --- ツールチップリンク --- */ .travel-shinkansen-section .plan-tooltip-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-tooltip-links .tippy-btn {
  display: inline-block;
  height: auto;
  margin: 0;
  color: #1b6bcf;
  font-size: 12px;
  margin-left: 5px;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 料金・検索結果 --- */ .travel-shinkansen-section .plan-summary {
  margin-top: 10px;
  padding: 10px;
  background: #f4f4f4;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-summary-row {
  display: flex;
  align-items: center;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-summary-row + .plan-summary-row {
  margin-top: 5px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-summary-row .ttl {
  flex: none;
  margin-right: 10px;
  color: #313233;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-summary-row .value {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  min-width: 0;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-summary-row .price {
  flex: none;
  color: #e83a22;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-summary-row .note {
  flex: none;
  color: #313233;
  font-size: 12px;
  white-space: nowrap;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-summary-note {
  padding-top: 10px;
  margin: 0;
  font-size: 10px;
  text-align: right;
  color: #555;
}

:where(body.device-sp, div.tss-embed-sp) /* --- ツールチップ本文 (PCと同じ) --- */ .tooltip-plan {
  width: calc(100vw - 32px);
  max-width: 400px;
  border-radius: 6px;
  overflow: hidden;
}

:where(body.device-sp, div.tss-embed-sp) .tooltip-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  border-radius: 5px 5px 0 0;
  border-bottom: 3px solid #2073db;
  color: #333;
}

:where(body.device-sp, div.tss-embed-sp) .tooltip-plan-ttl {
  margin: 0 0 0 15px;
  padding: 0 6px;
  border-left: 4px solid #2073db;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

:where(body.device-sp, div.tss-embed-sp) .tooltip-plan-close-btn {
  flex: none;
  margin: 5px 15px 5px 0;
  height: 30px;
  padding: 2px 8px 1px 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  color: #333;
  font-size: 13px;
}

:where(body.device-sp, div.tss-embed-sp) .tooltip-plan-close-btn .fe:before {
  padding-right: 3px;
  font-size: 12px;
  color: #1b6bcf;
}

:where(body.device-sp, div.tss-embed-sp) .txt-marker {
  text-decoration: underline;
  text-decoration-color: #fcf686;
  text-decoration-thickness: 50%;
  text-underline-offset: -20%;
  text-decoration-skip-ink: none;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 検索結果一覧 --- */ .travel-shinkansen-section .plan-result {
  margin-top: 10px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-result-head {
  color: #333;
  text-align: right;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-result-filter {
  display: block;
  margin: 10px 0 10px;
  font-size: 13px;
  font-weight: normal;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-result-filter input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: -2px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-result-sort-wrap {
  display: block;
  margin: 0 0 5px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-result-sort-label {
  margin-right: 8px;
  color: #76787D;
  font-size: 14px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-result-sort {
  font-size: 14px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item {
  padding: 12px 0;
  border-top: 2px solid #ccc;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item:last-child {
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-result + .pagination-warp {
  margin-top: 10px;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 施設情報 --- */ .travel-shinkansen-section .plan-item-head {
  display: flex;
  padding-bottom: 10px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item-img {
  flex: 0 0 90px;
  margin-right: 8px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item-img img {
  display: block;
  width: 90px;
  height: 90px;
  object-fit: cover;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item-ttl .name {
  display: -webkit-box;
  overflow: hidden;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item-rating {
  display: flex;
  align-items: center;
  margin-top: 5px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item-rating .star-rating-5 + .rating-num {
  margin-left: 4px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item-info .provider {
  display: block;
  margin-top: 5px;
  color: #333;
  font-size: 12px;
  text-align: right;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item-addr {
  display: flex;
  margin: 0;
  padding-bottom: 6px;
  color: #313233;
  font-size: 14px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item-addr .icon-map-area {
  flex: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 2px;
  background: url(/img/common/icon-map-area.svg) center/contain no-repeat;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item-access {
  margin: 0 0 5px;
  color: #313233;
  font-size: 14px;
}

:where(body.device-sp, div.tss-embed-sp) /* --- プラン行 --- */ .travel-shinkansen-section .plan-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 8px;
  margin-top: 8px;
  padding: 8px 6px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-type {
  grid-column: 1;
  /* 料金の条件（4行目）まで含めて縦に貫く */
  grid-row: 1 / span 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  color: #333;
  font-size: 11px;
  text-align: center;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-type-plus {
  display: block;
  color: #e03b56;
  font-size: 11px;
  line-height: 1;
  margin: 5px 0;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-detail {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-size: 0;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-detail:has(.plan-tag) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-content: flex-start;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-price {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}


:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-price .price {
  margin-bottom: 5px;
  color: #e83a22;
  font-size: 13px;
}

/* 割引中。元は「ご旅行代金（大人1名様）」と金額が1行に並ぶ。
   取り消し線は入りきらないので折り返して次の行へ落とす（flex-basis: 100%）。
   右寄せのままにしたいので text-align も指定する */
:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-price.has-discount {
  flex-wrap: wrap;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-price .price-now {
  margin-bottom: 5px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-price.has-discount .price-before {
  flex-basis: 100%;
  margin-top: -3px;
  margin-bottom: 5px;
  text-align: right;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-btn {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-note {
  grid-column: 2;
  grid-row: 5;
  margin-top: 4px;
}

/* 割引の条件が入ると注記が2本になる。**行を分けないと重なる**。
   割引のほうは .plan-row-note も持っているので、**クラスを2つ重ねて**
   上の指定に負けないようにする（並び順だけに頼らない） */
:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-note.plan-row-note-discount {
  grid-row: 4;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-row-note-discount + .plan-row-note {
  margin-top: 0;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .reserve-btn {
  display: flex;
  align-items: stretch;
  width: fit-content;
  margin-left: auto;
  height: 38px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  font-weight: bold;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .reserve-btn-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 6px 0;
  background: #fff;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .reserve-btn-logo img {
  display: block;
  width: 72px;
  height: auto;
  max-height: 100%;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .reserve-btn-label {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  color: #fff;
  font-size: 12px;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 新幹線ホテルパック --- */ .travel-shinkansen-section .pack {
  margin-top: 10px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .pack-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 7px 10px 5px 10px;
  background: #eee;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .pack-badge {
  margin-left: 5px;
  padding: 1px 4px;
  background: #e67083;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .pack-row {
  margin-top: 0;
  padding: 8px 6px;
  border: 1px solid #e67083;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .pack-btn {
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.1);
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .pack-more {
  display: block;
  margin-top: 0;
  text-align: center;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .pack-more:focus,
:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .pack-more:hover {
  background: #fff;
  color: #1b6bcf;
}

:where(body.device-sp, div.tss-embed-sp) /* --- 「新幹線ホテルパック」のポイント --- */ .travel-shinkansen-section .point-accordion {
  margin-bottom: 10px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .point-accordion-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .point-accordion-title .text-open {
  display: none;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .point-accordion li.uk-open .point-accordion-title .text-closed {
  display: none;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .point-accordion li.uk-open .point-accordion-title .text-open {
  display: inline;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .point-accordion-contents {
  padding: 10px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .point-block + .point-block {
  margin-top: 15px;
}

:where(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .point-img img {
  display: block;
  width: 100%;
  height: auto;
}

:where(body.device-sp, div.tss-embed-sp) .plan-error {
  padding: 20px 5px;
}


@charset "utf-8";
/*
  travel.css（モックのデザイン）に対する差分だけを書く。
  モックに無い要素＝宿泊地の選択・子供の指定・地図・楽天トラベルの
  「宿泊のみ」行・名寄せ由来の表示（紹介文 / 要注意バッジ）がここに入る。

  クラス名と配色は travel.css に合わせてある（#0071bc 系・#ccc の区切り線）。
*/

/* ==========================================================================
   検索フォームの追加分
   ========================================================================== */

/* こだわり条件のセレクトは幅をそろえる。
   travel.css は禁煙／喫煙・食事条件だけを名指しで指定していて（PC 120px /
   SP 100%）、あとから足した部屋タイプ・並び順はそこから漏れ、
   「.form-group-line:not(.form-group-section) は一律70px」の方に当たっていた。
   ここで全部まとめて同じ幅にする。
   70px指定は詳細度 (0,4,1) なので、こちらも要素名まで入れて (0,4,1) にする */
.travel-shinkansen-section .accordion-contents .form-group-line .select-box-wrap,
.travel-shinkansen-section .accordion-contents .form-group-line .select-box-wrap select {
  width: 120px;
}

/* 行の左端をそろえる。
   .form-group-line は flex なので、既定では flex-shrink:1 でラベルが縮み、
   行によって 58px / 43px / 49px とばらついて中身の開始位置がずれる。
   travel.css の 58px をそのまま効かせる */
.travel-shinkansen-section .selected-condition-form-wrap .form-group-ttl {
  flex: none;
}

.travel-shinkansen-section .form-note {
  margin: 4px 0 0;
  color: #666;
  font-size: 11px;
  line-height: 1.5;
}

.travel-shinkansen-section .form-group-area .select-box-wrap {
  margin-right: 4px;
}

/* ---- 子供 ----
   年齢・座席のセレクトはモックの .select-box-wrap をそのまま使う。
   枠とプルダウンの矢印はあのクラスが持っているので、**行側にも select 側にも
   枠を足さない**（足すと枠が入れ子になって二重に見える）。 */

/* 行が増えてもラベルの位置を変えない。
   .form-group-line は align-items:center なので、そのままだと人数が増えるたびに
   「子供」が下がっていく。上寄せに変えて、1行目のセレクト（32px）と高さを合わせる */
.travel-shinkansen-section .form-group-child {
  align-items: flex-start;
}

.travel-shinkansen-section .form-group-child > .form-group-ttl {
  line-height: 32px;
}

/* 1行に1人。横には増やさない（人数が増えても読む向きが変わらないように） */
.travel-shinkansen-section .child-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* SP では .form-group-content が flex になるので、そのままだと
   「＋ 子供を追加」が行の横に並んで枠からはみ出す。折り返させて下に落とす
   （PC は block なので、この2つの指定は効かない） */
.travel-shinkansen-section .form-group-child > .form-group-content {
  flex-wrap: wrap;
}

.travel-shinkansen-section .form-group-child .child-rows {
  flex: 1 1 100%;
}

/* 0人のときは詰める。テンプレート側で空白を出していないので :empty が効く */
.travel-shinkansen-section .child-rows:empty {
  display: none;
}

.travel-shinkansen-section .child-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 幅。SP の travel.css に
     .travel-shinkansen-section .form-group-line:not(.form-group-section)
       .select-box-wrap select { width: 70px }   ← 詳細度 (0,4,1)
   があり、「座席あり」が入りきらないので打ち消す。
   クラスだけでは (0,4,0) で負けるため、要素名 select を足して (0,4,1) にする */
.travel-shinkansen-section .form-group-child .child-row .select-box-wrap {
  width: auto;
}

.travel-shinkansen-section .form-group-child .child-row select.child-age { width: 68px; }
.travel-shinkansen-section .form-group-child .child-row select.child-seat { width: 100px; }

.travel-shinkansen-section .child-del {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #fff;
  color: #888;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.travel-shinkansen-section .child-del:hover {
  border-color: #d0021b;
  background: #fdf3f3;
  color: #d0021b;
}

.travel-shinkansen-section .btn-child-add {
  display: block;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  color: #1b6bcf;
  font-size: 12px;
  cursor: pointer;
}

/* 子供がいるときだけ行との間を空ける。0人ならボタンだけなので詰める */
.travel-shinkansen-section .child-rows:not(:empty) + .btn-child-add {
  margin-top: 8px;
}


/* ==========================================================================
   上に戻る（フッター）
   スクロールしたときだけ右下に出す。動き方は Laravel の
   common/master-js.blade.php に合わせてある（bottom -100px → 20px / 200ms）。

   駅探の footer.css は .pagetop を通常フローに置いていて（PCは
   bottom:auto!important まで付けて）bottom が効かないため、JS の
   アニメーションが素通りしていた。ここで position:fixed にして効くようにする。
   見た目（色・角丸・余白）は駅探の sp/common/footer.css と同じ。

   一番下まで送るとフッターの「表示：モバイル｜PC」に重なるため、重なるぶんだけ
   section.js が transform で押し上げる（bottom は出し入れに使っているので触らない）。

   フッターは .travel-shinkansen-section の外なので、ここだけスコープを付けない。
   ========================================================================== */
.pagetop-wrap .pagetop-inner .pagetop {
  position: fixed;
  right: 0;
  bottom: -100px;            /* 初期値。スクロールされるまで画面の外 */
  z-index: 1000;
  display: inline-block;
  padding: 6px 10px 4px;
  border-radius: 3px 0 0 3px;
  background-color: #465879;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: bottom .2s;    /* jQuery の animate(..., 200) と同じ */
}

.pagetop-wrap .pagetop-inner .pagetop.is-shown {
  bottom: 20px;
}

.pagetop-wrap .pagetop-inner .pagetop:hover {
  background-color: #a1aec8;
}

.pagetop-wrap .pagetop-inner .pagetop .fe {
  vertical-align: top;
  font-size: 0;
}

.pagetop-wrap .pagetop-inner .pagetop .fe::before {
  padding-right: 5px;
  vertical-align: middle;
  font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
  .pagetop-wrap .pagetop-inner .pagetop { transition: none; }
}

/* 「在庫ありのプランのみを表示」を外したので、残った並び順を右に寄せる
   （travel.css は左右に振り分ける space-between を掛けている） */
.travel-shinkansen-section .plan-result .plan-result-head {
  justify-content: flex-end;
}


/* ==========================================================================
   一覧の注記（ページ送りの下）
   外部予約サイトへ移ること・情報の出どころ・予約はリンク先で、の3つ。
   文字サイズと色は travel.css の .plan-summary-note に合わせている。
   ========================================================================== */
.travel-shinkansen-section .plan-result-notes {
  margin: 20px 0 0;
  padding: 0;
  color: #555;
  font-size: 12px;
  line-height: 1.6;
}

.travel-shinkansen-section .plan-result-notes li {
  /* ※ のぶんだけ2行目以降を下げる */
  padding-left: 1em;
  text-indent: -1em;
}

.travel-shinkansen-section .plan-result-notes li + li {
  margin-top: 4px;
}


/* ==========================================================================
   最寄駅（施設カード）
   楽天トラベルの最寄駅を最大2件、「〇〇駅」から徒歩n分 を ／ で並べる。
   1件ずつ span で包んでいるが、**折り返しは止めない**（20260916_01）。
   枠に収まらないときは駅名の途中でも折り返してよい。
   ========================================================================== */


/* ==========================================================================
   日程（範囲カレンダー）
   出発日〜帰着日を1つのカレンダーで選ぶ。範囲の日数がそのまま泊数になるので、
   泊数のセレクトは置かない。配色は travel.css の青（#0071bc）に合わせている
   ========================================================================== */
.travel-shinkansen-section .daterange-box {
  position: relative;
  display: inline-block;
}

.travel-shinkansen-section .daterange {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 275px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #bfbfbf;
  border-radius: 3px;
  background: #fff;
  color: #222;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.travel-shinkansen-section .daterange:hover { border-color: #ccc; }

/* 日付はモックの .ek-datepicker-label に合わせて太字にしない
   （travel.css の .form-group-date .select-date-form label は 13px / 標準） */
.travel-shinkansen-section .daterange .dr-main { flex: 1 1 auto; }

.travel-shinkansen-section .daterange .dr-nights {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 3px;
  background: #e8f2fa;
  color: #00568f;
  font-size: 11px;
  font-weight: bold;
}

.travel-shinkansen-section .datepop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid #c8c8c8;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .16);
}

.travel-shinkansen-section .dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.travel-shinkansen-section .dp-nav {
  width: 26px;
  height: 26px;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  background: #fff;
  color: #0071bc;
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.travel-shinkansen-section .dp-nav:hover:not(:disabled) { background: #e8f2fa; }
.travel-shinkansen-section .dp-nav:disabled { color: #ccc; cursor: default; }

.travel-shinkansen-section .dp-months { display: flex; gap: 18px; }
.travel-shinkansen-section .dp-month { flex: 0 0 auto; }

.travel-shinkansen-section .dp-mtitle {
  margin-bottom: 5px;
  color: #666;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.travel-shinkansen-section .dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 30px);
  gap: 2px;
}

.travel-shinkansen-section .dp-w {
  padding-bottom: 2px;
  color: #888;
  font-size: 10px;
  text-align: center;
}

.travel-shinkansen-section .dp-w.w0 { color: #d0021b; }
.travel-shinkansen-section .dp-w.w6 { color: #0071bc; }
.travel-shinkansen-section .dp-pad { height: 28px; }

.travel-shinkansen-section .dp-d {
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: none;
  color: #222;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.travel-shinkansen-section .dp-d.w0 { color: #d0021b; }
.travel-shinkansen-section .dp-d.w6 { color: #0071bc; }
.travel-shinkansen-section .dp-d:hover:not(:disabled) { background: #e8f2fa; }
.travel-shinkansen-section .dp-d.past { color: #d5d5d5; cursor: default; }
.travel-shinkansen-section .dp-d.mid { border-radius: 0; background: #e8f2fa; }

/* 選べるが検索はできない日（出発前日16:00で受付終了）。
   押せることは変えず、下線で「ふつうの日ではない」ことだけ伝える。
   選ぶと検索ボタンが止まり、日本旅行への送客ボタンに変わる */
.travel-shinkansen-section .dp-d.nosearch {
  text-decoration: underline dotted #e83a22;
  text-underline-offset: 2px;
}

.travel-shinkansen-section .dp-d.from,
.travel-shinkansen-section .dp-d.to {
  background: #1b6bcf;
  color: #fff;
  font-weight: bold;
}

.travel-shinkansen-section .dp-d.from { border-radius: 3px 0 0 3px; }
.travel-shinkansen-section .dp-d.to { border-radius: 0 3px 3px 0; }
.travel-shinkansen-section .dp-d.from.to { border-radius: 3px; }

.travel-shinkansen-section .dp-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
}

.travel-shinkansen-section .dp-lb { color: #555; font-size: 12px; font-weight: bold; }
.travel-shinkansen-section .dp-nights { display: flex; gap: 4px; }

.travel-shinkansen-section .dp-night {
  padding: 5px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  background: #fff;
  color: #555;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.travel-shinkansen-section .dp-night:hover { background: #e8f2fa; }

.travel-shinkansen-section .dp-night.on {
  border-color: #1b6bcf;
  background: #1b6bcf;
  color: #fff;
  font-weight: bold;
}

.travel-shinkansen-section .dp-sel { margin-left: 4px; color: #666; font-size: 12px; }

.travel-shinkansen-section .dp-done {
  margin-left: auto;
  padding: 6px 16px;
  border: 1px solid #1b6bcf;
  border-radius: 3px;
  background: #1b6bcf;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.travel-shinkansen-section .dp-note { margin-top: 8px; color: #888; font-size: 11px; }

/* ==========================================================================
   検索中の状態
   ========================================================================== */
.travel-shinkansen-section .search-status {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #fafafa;
  color: #555;
  font-size: 13px;
}

.travel-shinkansen-section .search-status.is-error {
  border-color: #e5b0b0;
  background: #fdf3f3;
  color: #a33;
}

.travel-shinkansen-section .is-loading {
  opacity: .5;
  transition: opacity .15s;
}

/* ==========================================================================
   施設カードの追加分
   ========================================================================== */
.travel-shinkansen-section .plan-item {
  position: relative;
}

/* 一覧の連番。地図のピンと引き合うので色を揃える（--green-pin 相当） */
.travel-shinkansen-section .plan-item-no {
  position: absolute;
  top: 15px;
  left: 0;
  z-index: 1;
  display: inline-block;
  min-width: 22px;
  height: 22px;
  border-radius: 3px;
  background: #5B9615;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
}

.travel-shinkansen-section .plan-item-no.is-nomap {
  background: #bbb;
  cursor: default;
}

.travel-shinkansen-section .plan-item-head {
  padding-left: 28px;
}

/* 地図を切っているときは連番アイコンが無いので、そのぶんの余白も空けない
   （MAP_ENABLED=false。body の印は base.html で付ける） */
body.no-map .travel-shinkansen-section .plan-item-head {
  padding-left: 0;
}

.travel-shinkansen-section .plan-item-intro {
  margin: 4px 0 0;
  color: #555;
  font-size: 12px;
  line-height: 1.5;
}

.travel-shinkansen-section .plan-item-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
}

.travel-shinkansen-section .plan-tag.attention {
  border: 1px solid #E5A23B;
  background-color: #FFF7E6;
  color: #B86400;
}

/* セットプランが出せない施設も、宿泊プランは出るので**薄くしない**。
   カードの見た目はプランありと同じにする（20260917）。
   クラス名は .pack-soldout だったが、「売り切れ」とは限らないので改名
   （20261009。理由は macros.html の pack マクロの注記） */

.travel-shinkansen-section .pack-message {
  padding: 10px 8px;
  color: #555;
  font-size: 14px;
}

/* 一覧→地図の往復で光らせる */
.travel-shinkansen-section .plan-item.is-flash {
  box-shadow: 0 0 0 3px #ffd34d inset;
}

/* ==========================================================================
   楽天トラベル「宿泊のみ」の行
   セットプランの帯の上に出す。マークアップは plan-row をそのまま使う
   ========================================================================== */
.travel-shinkansen-section .stay-block:empty {
  display: none;
}

.travel-shinkansen-section .stay-loading {
  padding: 8px;
  color: #999;
  font-size: 12px;
}

/* ==========================================================================
   地図
   ========================================================================== */
/* 中身（見出しバー・地図・凡例・注記）が自前で余白を持っているので、
   枠の内側に padding は置かない。駅探の .contents-wrap を付けると
   結果枠の padding と二重になり、見出しバーが枠から浮いてしまう */
.travel-shinkansen-section .mapbox {
  margin: 10px 0 15px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;          /* 角丸から見出しバーの背景がはみ出さないように */
}

.travel-shinkansen-section .map-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: #f6f6f6;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.travel-shinkansen-section .map-toggle .mt-count {
  margin-left: auto;
  color: #666;
  font-weight: normal;
}

.travel-shinkansen-section .map-toggle[aria-expanded="true"] .mt-arrow {
  transform: rotate(180deg);
}

.travel-shinkansen-section .map {
  height: 420px;
}

/* Leaflet を読み込めなかったときだけ中身が入る（ふだんは空なので余白も出ない） */
.travel-shinkansen-section .map-note:empty { display: none; }

.travel-shinkansen-section .map-note {
  padding: 6px 12px 10px;
  color: #888;
  font-size: 11px;
}

/* ---- ピン ---- */
.tss-pin {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #5B9615;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
}

.tss-pin.is-flash {
  animation: tss-flash 1.6s ease-out;
}

@keyframes tss-flash {
  0%, 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
  30%      { box-shadow: 0 0 0 8px rgba(255, 211, 77, .8); }
}

.tss-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(203, 104, 104, .85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

/* 数字と「件」は下端でそろえる（sample の .pin-cluster span と同じ） */
.tss-cluster > span {
  display: inline-flex;
  align-items: baseline;
}

/* 「件」は数字より小さく添えて、連番ピンと見分けられるようにする */
.tss-cluster i {
  margin-left: 1px;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  opacity: .9;
}

.tss-cluster.s { width: 32px; height: 32px; font-size: 11px; }
.tss-cluster.m { width: 40px; height: 40px; background: rgba(192, 57, 43, .9); }
.tss-cluster.l { width: 48px; height: 48px; background: rgba(160, 40, 30, .95); font-size: 13px; }
.tss-cluster.l i { font-size: 10px; }

.tss-station {
  display: inline-block;
  padding: 3px 8px;
  border: 2px solid #fff;
  border-radius: 3px;
  background: #1b6bcf;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.tss-popup .name { font-weight: bold; }
.tss-popup .price { color: #e83a22; }
.tss-popup .jump {
  display: inline-block;
  margin-top: 4px;
  color: #0071bc;
  cursor: pointer;
  text-decoration: underline;
}

/* ==========================================================================
   SP
   ========================================================================== */
/* ==========================================================================
   モバイルだけに効かせるぶん

   section.css は PC / SP で**同じファイル**を読む（travel.css だけ pc/ sp/ に
   分かれている）。画面幅のメディアクエリで分けると、PCのテンプレートを
   狭い窓で見たときにモバイル用の指定が効いてしまうため、**サーバーが選んだ
   テンプレート**で分ける。base.html が body に device-pc / device-sp を付ける。
   ========================================================================== */
/* 並び替えは右に寄せる（SP修正依頼 2） */
:is(body.device-sp, div.tss-embed-sp) .plan-result-head .form-group-content {
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
}
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-result-sort-wrap {
  margin: 0;
}

/* ラベルはセレクトの左に置く（こだわり条件のように上へ回さない） */
:is(body.device-sp, div.tss-embed-sp) .plan-result-sort-wrap .form-group-line .form-group-ttl {
  position: static;
  margin-right: 10px;
}

/* こだわり条件の注記（モバイルは余白を詰める） */
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .detail-cond-accordion .form-note {
  margin: 0;
  padding: 5px 0;
  border-top: solid 1px #ccc;
  font-size: 10px;
}

/* こだわり条件のラベルと中身の間を詰める（SP修正依頼 3。
   sp/travel.css の同じ指定が margin 0 0 15px なので、そこだけ変える） */
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .form-group-line .form-group-ttl {
  position: static;
  display: block;
  width: auto;
  margin: 0 0 5px;
  color: #76787d;
  font-size: 13px;
  font-weight: bold;
  line-height: normal;
}

:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .map { height: 320px; }
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-result-notes { margin-top: 15px; font-size: 10px; }
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .plan-item-head { padding-left: 26px; }
body.device-sp.no-map .travel-shinkansen-section .plan-item-head { padding-left: 0; }
/* 「室数」などの行内ラベルが1文字ずつ折り返さないようにする */
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-ttl-inline { white-space: nowrap; }

/* 縦積みは共通。SPでは幅いっぱいに使い、ボタンも全幅にする
   （幅が足りないとボタンが押しつぶされて1文字ずつ縦に並ぶ） */
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-child .form-group-content { width: 100%; }
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-child .child-row { width: 100%; }
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-child .child-row select.child-age { width: 80px; }
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-child .child-row select.child-seat {
  width: 112px;    /* 「座席あり」が切れない幅 */
}
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-child .btn-child-add {
  white-space: nowrap;
}

/* SPは禁煙／喫煙と同じく幅いっぱい */
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .form-group-line .select-box-wrap,
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .accordion-contents .form-group-line .select-box-wrap select {
  width: 100%;
}

/* 宿泊地は大エリアと中エリアを2段に分ける（SP修正依頼 1-4）。
   SPの travel.css は行を display:block にしていて、そのままだとセレクトが
   中身なりの幅になって段ごとに幅が変わる。行を flex にして中身を伸ばし、
   2段の幅をそろえる。.select-box-wrap の70px固定は詳細度 (0,4,1) なので、
   こちらは body.device-sp のぶん多い */
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .select-condition .selected-condition-form-wrap
  > .form-group-line.form-group-area {
  display: flex;
  align-items: center;
}
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-line.form-group-area > .form-group-content {
  flex: 1 1 0;
  min-width: 0;
}
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-line.form-group-area .select-box-wrap,
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .form-group-line.form-group-area .select-box-wrap select {
  width: 100%;
  margin-right: 0;
}


/* 日程は行の幅いっぱいに。SPの travel.css は
     .select-condition.in-box .selected-condition-form-wrap > .form-group-line
   を display:block にしている（詳細度 0,4,0）ので、同じ数以上のクラスで
   この行だけ flex に戻し、余った幅を日付ボタンに回す */
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .select-condition .selected-condition-form-wrap
  > .form-group-line.form-group-date {
  display: flex;
  align-items: center;
}
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .select-condition .selected-condition-form-wrap
  > .form-group-line.form-group-date > .form-group-content {
  flex: 1 1 auto;
  min-width: 0;
}
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .daterange-box { display: block; }
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .daterange { width: 100%; min-width: 0; }

/* カレンダーは2か月を縦に積む。横に並べると画面に入らない */
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .datepop {
  left: 50%;
  max-width: calc(100vw - 24px);
  transform: translateX(-50%);
}
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .dp-months { flex-direction: column; gap: 10px; }
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .dp-grid { grid-template-columns: repeat(7, 1fr); }
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .dp-foot { font-size: 11px; }
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .dp-sel { flex: 1 1 100%; margin-left: 0; }


/* ==========================================================================
   修正依頼ぶん
   ========================================================================== */
.w-auto {
  width: auto !important;
}

.travel-shinkansen-section .accordion-contents .form-group-line {
  padding: 15px 20px;
}

/* こだわり条件の注記は枠の中に収める（SP修正依頼 20260915_04） */
.travel-shinkansen-section .detail-cond-accordion .form-note {
  padding: 5px 0;
  border-top: solid 1px #ccc;
  background: #F7F7F7;
  font-size: 10px;
}

/* 施設写真は切らずに枠へ収める。楽天の画像は 16:9 / 3:2 / 4:3 が混ざっていて、
   travel.css の object-fit:cover だと端が切れる。余る側は背景色で埋める
   （枠は PC 180x135・SP 90x90 で travel.css が決めている） */
.travel-shinkansen-section .plan-item-img img {
  object-fit: contain;
  background: #f5f5f5;
}

/* 子供のラベルは「＋子供を追加」ボタン（32px）と高さをそろえる（SP修正依頼 3） */
.travel-shinkansen-section .form-group-child > .form-group-ttl {
  line-height: 32px;
  vertical-align: top;
}

/* メインビジュアル下の注釈（修正前の指定は style 属性だったが、ここへ寄せる） */
.bnr-note {
  margin: 10px 0;
  color: #888;
  font-size: 10px;
  text-align: right;
}


/* ----------------------------------------------------------------------
   締め切りを過ぎた日程の送客（検索ボタンの下）
   日本旅行APIでは引けない（E029）が、日本旅行のサイトでは買える日程。
   検索ボタンを止めたままにすると行き止まりになるので、代わりを置く。
   ---------------------------------------------------------------------- */
/* 無効時の色（グレー）は駅探本体のCSSが持っているので、重ねて薄くしない。
   カーソルだけ押せないものに変える */
.travel-shinkansen-section .wrap-search-btn .btn-type:disabled { cursor: default; }

/* 理由の枠とボタンは分ける。理由はフォームの幅いっぱいまで広げ、
   ボタンだけ検索ボタンと同じ幅にそろえる */
.travel-shinkansen-section .deadline-fallback { margin-top: 12px; }

.travel-shinkansen-section .deadline-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #ffc900;
  border-radius: 4px;
  background: #fffee2;
  color: #555;
  font-size: 12px;
  line-height: 1.6;
}

/* 検索ボタンと同じ幅にそろえる（travel.css の .select-condition
   .wrap-search-btn と同じ値。PC は 250px 中央、モバイルは横いっぱい） */
.travel-shinkansen-section .deadline-fallback-btn {
  width: 250px;
  margin: 0 auto;
}

.travel-shinkansen-section .nta-fallback {
  /* 枠と余白を幅に含める。含めないと width:100% が枠からはみ出す */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 8px 16px;
  border: 1px solid #1b6bcf;
  border-radius: 4px;
  background: #fff;
  color: #1b6bcf;
  text-align: center;
}

.travel-shinkansen-section .nta-fallback:hover { background: #e8f2fa; }

.travel-shinkansen-section .nta-fallback-main {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.3;
}

.travel-shinkansen-section .nta-fallback-sub {
  color: #777;
  font-size: 11px;
  line-height: 1.3;
}

/* 飛び先が決まるまで（NTA_FALLBACK_URL が空）は押しても動かない。
   見た目の確認はできるようにしておく */
.travel-shinkansen-section .nta-fallback[data-pending] { cursor: default; }

:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .deadline-fallback-btn { width: 100%; }
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .nta-fallback-main { font-size: 14px; }


/* ----------------------------------------------------------------------
   一覧の要約に出す日程（最安代金・検索結果と同じ枠の中）
   どの日程の結果なのかを示す。代金のような結果ではなく条件なので、
   赤（.price）ではなく本文の色で出す。
   ---------------------------------------------------------------------- */
.travel-shinkansen-section .plan-summary-row .dates {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.travel-shinkansen-section .plan-summary-row .dates-sep {
  margin-right: 4px;
  color: #888;
  font-size: 12px;
}

.travel-shinkansen-section .plan-summary-row .nights {
  margin-left: 6px;
  color: #313233;
  font-size: 12px;
  font-weight: normal;
}

/* PC の .value は素の div（SP だけ travel.css で flex になる）。
   狭いときに矢印の前後で折り返せるよう、行の高さだけ揃える */
.travel-shinkansen-section .plan-summary-dates .value { line-height: 1.6; }


/* ----------------------------------------------------------------------
   クリック計測（ga-event-lbl）
   GTM の自動イベント変数は「クリックされた要素そのもの」の属性を読み、
   **祖先をたどらない**。ボタンに属性を付けても、中のロゴ画像やラベルの
   span がクリックを受けると値が取れず、トリガーに一致しない。
   飾りの中身はクリックを受け取らないようにして、必ず属性を持つ要素が
   クリック対象になるようにする。
   ---------------------------------------------------------------------- */
.travel-shinkansen-section [ga-event-lbl] * { pointer-events: none; }


/* ----------------------------------------------------------------------
   ページ送り
   モバイルは「＜ 前へ 5 / 9 次へ ＞」で 375px に収まるが、それより狭い端末
   （320px など）では溢れるので折り返せるようにしておく。
   ---------------------------------------------------------------------- */
:is(body.device-sp, div.tss-embed-sp) .travel-shinkansen-section .uk-pagination { flex-wrap: wrap; }

/* 飛ばしたところの「…」。押せないので色を落とす */
.travel-shinkansen-section .uk-pagination .page-gap span {
  color: #999;
  cursor: default;
}

/* ==========================================================================
   枠なしで貼るとき（<tss-search-form tss-frame="none">）

   貼り先がすでにパネルの中に置いている場合、こちらの枠（フォームの罫線と
   背景）が二重に見える。**マークアップは変えずに見た目だけ消す。**
   クラスを外してしまうと、本体の travel.css や上の崩れ修正が
   `.select-condition.in-box …` を前提にしているので一緒に効かなくなる。

   詳細度は「受け皿のクラス + 相手」で、本体 travel.css（0,1,0）と
   上の :where（0,1,0 相当）より1つ多い。
   ========================================================================== */
.tss-noframe .selected-condition-form-wrap {
  border: 0;
  padding: 0;
}

/* 外側の余白も落として、貼り先のパネルに直に置けるようにする */
.tss-noframe .travel-shinkansen-section,
.tss-noframe .select-condition {
  margin: 0;
  padding: 0;
}

/* **背景は塗らない。** 貼り先の色がそのまま透ける。
   `.select-condition.in-box` が白、フォームが #f7f7f7 を塗っているので、
   両方とも消す。こだわり条件の中（.accordion-contents）はフォーム自身の
   見た目なので残す */
.tss-noframe,
.tss-noframe .travel-shinkansen-section,
.tss-noframe .select-condition,
.tss-noframe .selected-condition-form-wrap {
  background: none;
}

/* 行の下余白だけは残す（詰まると読みにくい）。最後の行は要らない */
.tss-noframe .selected-condition-form-wrap > :last-child {
  margin-bottom: 0;
}