/* PG top — ranking section (5 shops) */
.pg-ranking-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 5px;
}
@media screen and (max-width: 767px) {
  .pg-ranking-wrapper {
    grid-template-columns: 1fr 1fr;
    margin: 0px 10px;
  }
}
.pg-ranking-item {
  overflow: hidden;
}
.pg-ranking-item a { display: block; }
.pg-ranking-item img {
  display: block;
  width: 100%;
  height: auto;
}
.pg-ranking-position-box > a img {
  aspect-ratio: 200 / 80;
  object-fit: cover;
}
.pg-ranking-position-box {
  padding: 5px;
  background-color: whitesmoke;
}
.pg-ranking-position-1,
.pg-ranking-position-2,
.pg-ranking-position-3,
.pg-ranking-position-4,
.pg-ranking-position-5 {
  padding: 2px;
  text-align: center;
  display: flex;
  justify-content: center;
}
.pg-ranking-position-1 { background-color: #E6E3AF; }
.pg-ranking-position-2 { background-color: #E2E2E2; }
.pg-ranking-position-3 { background-color: #BEAA98; }
.pg-ranking-position-4 { background-color: #D8EAD8; }
.pg-ranking-position-5 { background-color: #D8E4EA; }
.pg-ranking-position {
  font-size: 22px;
  font-weight: bold;
  font-style: italic;
}
.pg-ranking-position-icon img { width: 20px; }
.pg-ranking-shop-info {
  padding: 10px 8px;
}
.pg-ranking-shop-info-1 { background-color: #F6F6EB; }
.pg-ranking-shop-info-2 { background-color: #EEEEEE; }
.pg-ranking-shop-info-3 { background-color: #F1EBE6; }
.pg-ranking-shop-info-4 { background-color: #EDF4ED; }
.pg-ranking-shop-info-5 { background-color: #EBF2F5; }
.pg-ranking-shop-name {
  font-weight: bold;
  padding-bottom: 5px;
}
.pg-ranking-shop-name h3 { margin: 0; font-size: 14px; }
.pg-ranking-shop-name a { text-decoration: underline; }
.pg-ranking-shop-filter {
  color: #727272;
  font-size: 13px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.pg-ranking-shop-filter a { text-decoration: underline; }

/* pg-top banner-header */
.banner-header {
  position: relative;
  background-color: #12cf57;
  border-radius: 10px;
  overflow: hidden;
}
.banner-header--no-image {
  height: 173px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-img {
  display: block;
  width: 100%;
  height: auto;
}
.banner-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
@media screen and (max-width: 767px) {
  .banner-header { margin: 0 10px; }
  .banner-header--no-image { height: 120px; }
}
.banner-header .banner-info {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 6px #000, 0 1px 3px #000;
  p:nth-child(1) { font-size: 25px; }
  p:nth-child(2) { font-size: 17px; }
}
@media screen and (max-width: 767px) {
  .banner-header .banner-info p:nth-child(1) { font-size: 17px; }
  .banner-header .banner-info p:nth-child(2) { font-size: 13px; }
}

/* 目的別で探す — card grid */
.pg-purpose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 12px;
}
@media screen and (max-width: 767px) {
  .pg-purpose-grid { grid-template-columns: 1fr; margin: 10px 10px; }
}
.pg-purpose-card {
  border: 2px solid darkgray;
  border-radius: 6px;
  padding: 14px 16px 12px;
  background: #fff;
}
.pg-purpose-card-title {
  font-weight: bold;
  font-size: 17px;
  color: #000;
  margin: 0 0 6px;
}
.pg-purpose-card-desc {
  font-size: 15px;
  color: #444;
  margin: 0 0 10px;
}
@media screen and (max-width: 767px) {
  .pg-purpose-card-title { font-size: 14px; }
  .pg-purpose-card-desc { font-size: 12px; }
}
.pg-purpose-card-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pg-purpose-area-tag {
  display: inline-block;
  font-size: 15px;
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid #12cf57;
  text-decoration: none;
  white-space: nowrap;
  background: #fff;
  color: #12cf57;
}
.pg-purpose-area-tag--area {
  background: #12cf57;
  color: #fff;
}
.pg-purpose-area-tag--ag,
.pg-purpose-area-tag--station {
  background: #fff;
  color: #12cf57;
}
@media screen and (max-width: 767px) {
  .pg-purpose-area-tag { font-size: 11px; }
}

/* PG top — price grid cards */
.pg-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media screen and (max-width: 767px) {
  .pg-price-grid { grid-template-columns: 1fr; margin: 10px 10px; }
}
.pg-price-card {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px 12px;
  background: #fff;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .pg-price-card {
    border: 2px solid #ddd;
    border-radius: 6px;
    padding: 10px 12px 12px;
  }
}
.pg-price-tier {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 20px;
  border-radius: 3px;
  white-space: nowrap;
  color: #fff;
}
.pg-price-tier--high { background: #e74c3c; }
.pg-price-tier--mid  { background: #12cf57; }
.pg-price-tier--low  { background: #0088ec; }
.pg-price-legend {
  margin: 10px 0 0 0;
}
.pg-price-legend .pg-price-tier {
  position: static;
  display: inline-block;
  vertical-align: middle;
}
.pg-price-legend-text {
  display: inline-block;
  padding: 2px 0;
  vertical-align: middle;
}
.pg-price-last-updated {
  text-align: end;
}
.pg-price-card-area {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
}
.pg-price-card-area img {
  width: 22px !important;
  flex-shrink: 0;
}
.pg-price-area-count {
  font-weight: normal;
}
.pg-price-card-avg {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 8px;
  padding: 5px;
  background-color: #C7F8CB;
  justify-content: space-around;
  border-radius: 10px;
}
.pg-price-avg-label {
  font-size: 13px;
  color: #666;
}
.pg-price-avg-value {
  font-size: 28px;
  font-weight: bold;
  color: #0088ec;
}
.pg-price-avg-unit {
  font-size: 16px;
  color: #000;
}
.pg-price-card-range {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 15px;
  margin-bottom: 10px;
  justify-content: space-evenly;
}
.pg-price-min-badge {
  display: inline-block;
  background: #0088ec;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
}
.pg-price-max-badge {
  display: inline-block;
  background: #e74c3c;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
}
.pg-price-range-val {
  color: #333;
}
.pg-price-min-badge + .pg-price-range-val span { color: #0088ec; }
.pg-price-max-badge + .pg-price-range-val span { color: #e74c3c; }
.pg-price-card-cta {
  display: block;
  background: #12cf57;
  color: #fff;
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}
.pg-price-card-cta:hover {
  background: #0fb34a;
  color: #fff;
}
.pg-price-note {
  margin: 8px 0 0;
  font-size: 14px;
  color: #595959;
}

/* ヘッダ文章 */
.pg-top-header-text {
  margin: 12px 0 16px;
  /* line-height: 1.8; */
  font-size: 15px;
  color: #333;
  text-align: justify;
}
@media screen and (max-width: 767px) {
  .pg-top-header-text {
    margin: 12px 10px;
    font-size: 15px;
    color: #333;
    text-align: justify;
  }
}

/* PG top — section wrappers */
.pg-top-popular-area,
.pg-top-price,
.pg-top-purpose,
.pg-top-station,
.pg-top-route,
.pg-top-ranking,
.pg-top-beginner,
.pg-top-faq,
.pg-top-shop-list {
  margin: 20px 0;
}
.pg-top-popular-area img,
.pg-top-price img,
.pg-top-purpose img,
.pg-top-station img,
.pg-top-route img,
.pg-top-ranking img,
.pg-top-beginner img,
.pg-top-faq img,
.pg-top-shop-list img {
  width: 35px;
}
@media screen and (max-width: 767px) {
  .pg-top-popular-area,
  .pg-top-price,
  .pg-top-purpose,
  .pg-top-station,
  .pg-top-route,
  .pg-top-ranking,
  .pg-top-beginner,
  .pg-top-faq,
  .pg-top-shop-list {
    margin: 25px 10px;
  }
  .pg-top-popular-area img,
  .pg-top-price img,
  .pg-top-purpose img,
  .pg-top-station img,
  .pg-top-route img,
  .pg-top-ranking img,
  .pg-top-beginner img,
  .pg-top-faq img,
  .pg-top-shop-list img {
    width: 25px;
  }
}

/* PG top — section header titles */
.pg-top-popular-area-header-title,
.pg-top-price-header-title,
.pg-top-purpose-header-title,
.pg-top-station-header-title,
.pg-top-route-header-title,
.pg-top-ranking-header-title,
.pg-top-beginner-header-title,
.pg-top-faq-header-title,
.pg-top-shop-list-header-title {
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  .pg-top-popular-area-header-title,
  .pg-top-price-header-title,
  .pg-top-purpose-header-title,
  .pg-top-station-header-title,
  .pg-top-route-header-title,
  .pg-top-ranking-header-title,
  .pg-top-beginner-header-title,
  .pg-top-faq-header-title,
  .pg-top-shop-list-header-title {
    font-size: 17px;
    font-weight: bold;
  }
  .pg-top-purpose-header-sub-title {
    font-weight: normal;
  }
}

/* PG top — エリアから探す area image grid */
.pg-top-area-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pg-top-area-grid .region-top-area-card:nth-child(1) { grid-column: span 4; }
.pg-top-area-grid .region-top-area-card:nth-child(2) { grid-column: span 2; }
.pg-top-area-grid .region-top-area-card:nth-child(3) { grid-column: span 2; }
@media screen and (max-width: 767px) {
  .pg-top-area-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-top-area-grid .region-top-area-card:nth-child(1) { grid-column: span 2; }
  .pg-top-area-grid .region-top-area-card:nth-child(2) { grid-column: span 1; }
  .pg-top-area-grid .region-top-area-card:nth-child(3) { grid-column: span 1; }
}

.pg-top-extra-area-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 6px;
}
@media screen and (max-width: 767px) {
  .pg-top-extra-area-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-top-extra-area-grid a { font-size: 10px; }
}

.region-top-area-card {
  display: block;
  position: relative;
  height: 130px;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  overflow: hidden;
  border-radius: 8px;
}
@media screen and (max-width: 767px) {
  .region-top-area-card { height: 85px; }
}
.region-top-area-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  transition: background 0.25s ease;
}
.region-top-area-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease;
}
.region-top-area-card:hover::before {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.region-top-area-card:hover::after {
  background: rgba(0, 0, 0, 0.15);
}
.region-top-area-card__info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.region-top-area-card__name {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
}
.pg-top-area-grid .region-top-area-card:nth-child(n+2) .region-top-area-card__name {
  font-size: 15px;
}
@media screen and (max-width: 767px) {
  .region-top-area-card__name { font-size: 20px; }
}
.region-top-area-card__count {
  color: #fff;
  font-size: 12px;
}
.region-top-area-card__count::before { content: '('; }
.region-top-area-card__count::after  { content: ')'; }
.region-top-area-card__counts {
  display: block;
  color: #fff;
  font-size: 17px;
  font-weight: normal;
  margin-top: 4px;
  text-shadow: 0 1px 4px #000;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .region-top-area-card__counts { font-size: 11px; margin-top: 0; }
  .region-top-area-card__info { gap: 0; margin-top: 5px; }
}

/* PG top — area type badge on image card */
.pg-top-area-grid .region-top-area-card:nth-child(1) .pg-area-type-badge {
  top: 12px;
  right: 12px;
}
.pg-top-area-grid .region-top-area-card:nth-child(2) .pg-area-type-badge,
.pg-top-area-grid .region-top-area-card:nth-child(3) .pg-area-type-badge {
  top: 8px;
  right: 8px;
}
.pg-area-type-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .pg-area-type-badge { font-size: 8px; }
}


/* PG top — 主要駅から探す station grid */
.pg-top-station-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 10px;
}
@media screen and (max-width: 767px) {
  .pg-top-station-grid { grid-template-columns: repeat(2, 1fr); margin: 10px 10px; }
}

.pg-top-station-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid #12cf57;
  padding: 15px;
  border-radius: 5px;
  color: #12cf57;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
}
.pg-top-station-item span:last-child {
  font-size: 13px;
}
.pg-top-station-item:hover {
  background: #12cf57;
  color: #fff;
}
.pg-top-area-station-col .pg-top-area-station-row:nth-child(n+3) {
  display: none;
}
.pg-top-area-station-columns.pg-station-expanded .pg-top-area-station-row:nth-child(n+3) {
  display: flex;
}
.pg-top-station-list-show-button {
  position: relative;
  justify-self: center;
  display: flex;
  border: 1px solid black;
  border-radius: 10px;
  width: 170px;
  justify-content: center;
  padding: 4px;
  color: blue;
  margin-top: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

/* PG top — area station columns */
.pg-top-area-station-columns {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}
@media screen and (max-width: 767px) {
  .pg-top-area-station-columns {
    flex-direction: column;
    margin: 5px 10px;
  }
}

.pg-top-area-station-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pg-top-area-station-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pg-top-area-name {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  background: #12cf57;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #12cf57;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.pg-top-area-name:hover {
  background: #fff;
  color: #12cf57;
}

.pg-top-area-station-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pg-top-area-station-tag {
  display: inline-block;
  border: 1px solid #12cf57;
  color: #12cf57;
  background: #fff;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.pg-top-area-station-tag:hover {
  background: #12cf57;
  color: #fff;
}

.pg-purpose-card-route-label {
  padding: 3px 0px;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .pg-purpose-card-route-label { font-size: 11px; }
}

/* PG top — FAQ */
.pg-top-faq-list {
  margin-top: 10px;
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  .pg-top-faq-list { margin: 5px 10px; font-size: 15px; }
}
.pg-top-faq-item {
  margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
  .pg-top-faq-item { margin-bottom: 5px; }
}
.pg-top-faq-q {
  font-weight: bold;
  margin: 0 0 4px;
  color: #f54d31;
}
.pg-top-faq-a {
  margin: 0;
  font-size: 15px;
  color: #333;
}
@media screen and (max-width: 767px) {
  .pg-top-faq-a { font-size: 13px; }
}
.pg-top-faq-a::before {
  content: 'A. ';
  color: #00cc11;
  font-weight: bold;
}

/* PG top — section headers (icon + title inline) */
.pg-top-popular-area-header,
.pg-top-price-header,
.pg-top-purpose-header,
.pg-top-station-header,
.pg-top-route-header,
.pg-top-ranking-header,
.pg-top-beginner-header,
.pg-top-faq-header,
.pg-top-shop-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media screen and (max-width: 767px) {
  .pg-top-price-header { align-items: flex-start; }
}

/* PG top — beginner section */
.pg-top-beginner-text {
  display: block;
  margin: 8px 0 12px;
  font-size: 17px;
  /* line-height: 1.7; */
  color: #333;
}
@media screen and (max-width: 767px) {
  .pg-top-beginner-text { margin: 8px 10px 12px; font-size: 13px; }
}

.pg-top-beginner-steps {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  justify-content: center;
}
/* pull each arrow into the previous one's 24px point zone: visible channel = 24 - 20 = 4px */
.pg-top-beginner-col + .pg-top-beginner-col {
  margin-left: -20px;
}

/* column wrapper: card on top, caption below */
.pg-top-beginner-col {
  display: flex;
  flex-direction: column;
}

/* black outline: the element is the black arrow, ::before draws the fill inset by 1.5px */
.pg-top-beginner-step {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  min-height: 100px;
  padding: 10px 60px 10px 60px;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%);
  @media screen and (max-width: 767px) {
    min-height: 70px;
  }
}
.pg-top-beginner-step::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  background: #faf9f5;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%);
}
.pg-top-beginner-col:nth-child(1) .pg-top-beginner-step::before { background: #C7F8CC; }
.pg-top-beginner-col:nth-child(2) .pg-top-beginner-step::before { background: #9CF0A3; }
.pg-top-beginner-col:nth-child(3) .pg-top-beginner-step::before { background: #6EE077; }
.pg-top-beginner-col:nth-child(4) .pg-top-beginner-step::before { background: #37CA44; }
.pg-top-beginner-col:first-child .pg-top-beginner-step {
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}
.pg-top-beginner-col:first-child .pg-top-beginner-step::before {
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%);
}
.pg-step-num { font-weight: normal; font-size: 17px; }
.pg-step-sub { font-weight: normal; font-size: 17px; }
.pg-step-go  { font-size: 30px; }
@media screen and (max-width: 767px) {
  .pg-step-num { font-size: 11px; }
  .pg-step-sub { font-size: 8px; }
  .pg-step-go  { font-size: 14px; }
  .pg-top-beginner-col + .pg-top-beginner-col { margin-left: -12px; }
  .pg-top-beginner-step {
    font-size: 11px;
    min-height: 60px;
    padding: 8px 22px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  }
  .pg-top-beginner-step::before {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  }
  .pg-top-beginner-col:first-child .pg-top-beginner-step {
    padding-left: 10px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  }
  .pg-top-beginner-col:first-child .pg-top-beginner-step::before {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  }
}

/* caption under each step card */
.pg-top-beginner-caption {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #333;
  margin-top: 5px;
}
.pg-top-beginner-caption img {
  width: 20px !important;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  .pg-top-beginner-caption { font-size: 10px; }
  .pg-top-beginner-caption img { width: 14px !important; }
}

/* PG top — section header sub-titles */
.pg-top-popular-area-header-sub-title,
.pg-top-purpose-header-sub-title,
.pg-top-station-header-sub-title,
.pg-top-route-header-sub-title {
  font-size: 15px;
}
@media screen and (max-width: 767px) {
  .pg-top-popular-area-header-sub-title,
  .pg-top-purpose-header-sub-title,
  .pg-top-station-header-sub-title,
  .pg-top-route-header-sub-title {
    font-size: 13px;
  }
}