@charset "utf-8";

/* ==========================================================================
   area.css — Area Subpage Styles
   ========================================================================== */

/* On this page .sub_anchor_nav lives INSIDE .main (after the intro box), and
   module.css sets `.main { overflow: hidden }`, which makes .main a scroll
   container and disables position:sticky for its descendants. `overflow: clip`
   clips identically but is NOT a scroll container, so the sticky sub-nav pins. */
.main { overflow: clip; }

/* ---------- Anchor Nav Color Override ---------- */
.sub_anchor_nav {
  max-width: 820px;
}

/* ---------- Section Title Gradient Override ---------- */
.sec_ttl::before {
  background: linear-gradient(180deg, #3CCC45 0 50%, #B3B3B3 50% 100%) !important;
}

/* ---------- Intro ---------- */
.area-intro {
  background-color: #F0F5F9;
  border-radius: 11px;
  padding: 40px;
  margin-top: 36px;
  margin-bottom: 60px;
  width: 94.93%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  border: 1px solid #D0DFEB;
}

.area-intro-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.area-intro-content {
  flex: 1;
}

.area-intro-ttl {
  font-size: 42px;
  color: #353679;
  font-family: var(--font-notoseriif);
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 1.4;
}

.area-intro-txt {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

/* Badges */
.area-intro-badges {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-shrink: 0;
}

.area-intro-badge {
  width: 139px;
  height: 139px;
  background-color: #6577d2;
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.area-intro-badge .badge-sub {
  font-size: 16px;
  margin-bottom: 2px;
}

.area-intro-badge .badge-main {
  font-size: 21px;
  font-weight: bold;
}

.area-intro-badge .num {
  font-size: 53px;
  font-weight: bold;
  margin: 0 2px;
  line-height: 1;
}

/* ---------- Section Wrapper ---------- */
.area_sec {
  width: 94.93%;
  max-width: 1200px;
  margin: 90px auto 0;
}

#section_enjoy.area_sec {
   margin-bottom: 90px;
}

.area_sec_lead {
  font-size: 20px;
  font-family: var(--font-BIZ_UDPGothic);
  color: #1B2B3F;
  line-height: 1.45;
  margin: 22px 0 34px;
}

/* ---------- Map + Feature Cards Row ---------- */
.area_maprow {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.area_map {
  flex: 1;
  min-width: 0;
}

.area_map img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.feat_cards {
  width: 334px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feat_card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: url('../images/area/bg_feat_card.png') no-repeat center / 100% 100%;
}

.feat_icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feat_icon img {
  max-width: 46px;
  max-height: 46px;
  width: auto;
  height: auto;
}

.feat_body {
  flex: 1;
}

.feat_ttl {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.4;
}

.feat_text {
  font-size: 16px;
  color: var(--sub12-color, #666666);
  line-height: 1.6;
}

/* ---------- Individual Title Colors ---------- */
.feat_card--01 .feat_ttl {
  color: #0C947E; /* Teal / Green-Blue */
}

.feat_card--02 .feat_ttl {
  color: #B478C0; /* Lavender / Purple */
}

.feat_card--03 .feat_ttl {
  color: #946BD9; /* Violet / Blue-Purple */
}


/* ---------- Place Cards Grid (3 Columns) ---------- */
.place_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 28px;
  margin-top: 48px;
}

.place_card {
  display: flex;
  flex-direction: column;
}

/* Header Wrapper to auto-align heights */
.place_header {
  display: flex;
  flex-direction: column;
}

/* Green Header Ribbon */
.place_cat {
  display: block;
  background-color: #55be61;
  font-family: var(--font-BIZ_UDPGothic);
  color: var(--sub3-color);
  font-size: 20px;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 7px;
  margin-bottom: 12px;
  text-align: left;
  line-height: 1;
}

/* Blue Catchphrase Title */
.place_ttl {
  font-size: 18px;
  font-family: var(--font-BIZ_UDPGothic);
  font-weight: 400;
  color: #1768E2;
  margin-bottom: 14px;
  line-height: 1.16;
}

.place_photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #EEF2F7;
  margin-bottom: 14px;
}

.place_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.place_text {
  font-size: 14px;
  color: #1B2B3F;
  font-family: "Meiryo", sans-serif;
  line-height: 1.92;
  margin-bottom: 16px;
  flex-grow: 1; /* Pushes access box to the bottom */
}

/* Bottom Access Time Box */
.place_access {
  background-color: #F6FEFF;
  border: 1px solid #9FC9E3;
  border-radius: 8px;
  padding: 8px 12px;
}

.place_access p {
  font-size: 12px;
  color: #1B2B3F;
  line-height: 1.6;
}

.school_info {
  background-color: #f0f5fa;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.school_info p {
  font-size: 14px;
  color: #333333;
  line-height: 1.6;
}

.place_caption {
  font-size: 12px;
  color: #666666;
  text-align: right;
  margin-top: 4px;
  margin-bottom: 12px;
  line-height: 1.3;
}

/* Hide place_photo margin when followed by caption */
.place_card--enjoy .place_photo {
  margin-bottom: 0;
}


/* ==========================================================================
   Tablet (768px - 1350px) — Converted to rem (e.g., 32px -> .32rem)
   ========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 1350px) {

  /* ---------- Anchor Nav ---------- */
  .sub_anchor_nav {
    max-width: 8.20rem;
  }

  /* ---------- Intro ---------- */
  .area-intro {
    border-radius: .11rem;
    padding: .40rem;
    margin-top: .36rem;
    margin-bottom: .60rem;
    max-width: 12.00rem;
  }

  .area-intro-inner {
    gap: .40rem;
  }

  .area-intro-ttl {
    font-size: .42rem;
    margin-bottom: .20rem;
  }

  .area-intro-txt {
    font-size: .15rem;
  }

  .area-intro-badges {
    gap: .16rem;
  }

  .area-intro-badge {
    width: 1.39rem;
    height: 1.39rem;
  }

  .area-intro-badge .badge-sub {
    font-size: .16rem;
    margin-bottom: .02rem;
  }

  .area-intro-badge .badge-main {
    font-size: .21rem;
  }

  .area-intro-badge .num {
    font-size: .53rem;
    margin: 0 .02rem;
  }

  /* ---------- Section Wrapper ---------- */
  .area_sec {
    max-width: 12.00rem;
    margin: .90rem auto 0;
  }

  #section_enjoy.area_sec {
    margin-bottom: .90rem;
  }

  .area_sec_lead {
    font-size: .20rem;
    margin: .22rem 0 .34rem;
  }

  /* ---------- Map + Feature Cards Row (Same Side-by-Side as PC) ---------- */
  .area_maprow {
    display: flex;
    flex-direction: row;
    gap: .32rem;
    align-items: flex-start;
  }

  .area_map {
    flex: 1;
    min-width: 0;
  }

  .area_map img {
    width: 100%;
    height: auto;
    border-radius: .12rem;
  }

  .feat_cards {
    width: 3.00rem;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: .16rem;
  }

  .feat_card {
    display: flex;
    align-items: center;
    gap: .14rem;
    padding: .18rem .20rem;
    background-size: 100% 100%;
  }

  .feat_icon {
    width: .46rem;
    height: .46rem;
  }

  .feat_icon img {
    max-width: .46rem;
    max-height: .46rem;
  }

  .feat_ttl {
    font-size: .20rem;
    margin-bottom: .04rem;
  }

  .feat_text {
    font-size: .16rem;
  }

  /* ---------- Place Cards Grid (3 Columns for Tablet) ---------- */
  .place_grid {
    grid-template-columns: repeat(3, 1fr);
    gap: .40rem .28rem;
    margin-top: .48rem;
  }

  .place_cat {
    font-size: .2rem;
    padding: .1rem .16rem;
    border-radius: .07rem;
    margin-bottom: .12rem;
  }

  .place_ttl {
    font-size: .18rem;
    margin-bottom: .14rem;
  }

  .place_photo {
    border-radius: .04rem;
    margin-bottom: .14rem;
  }

  .place_text {
    font-size: .14rem;
    margin-bottom: .16rem;
  }

  .place_access {
    border-radius: .08rem;
    padding: .08rem .12rem;
  }

  .place_access p {
    font-size: .12rem;
  }

  .school_info {
    border-radius: .06rem;
    padding: .10rem .12rem;
    margin-bottom: .14rem;
  }

  .school_info p {
    font-size: .14rem;
  }

  .place_caption {
    font-size: .12rem;
    margin-top: .04rem;
    margin-bottom: .12rem;
  }
}


/* ==========================================================================
   SP (<= 767px) — Scaled to Project SP rem System
   ========================================================================== */
@media only screen and (max-width: 767px) {
  .area-intro {
    padding: .48rem .32rem;
    margin-bottom: .6rem;
    border-radius: .16rem;
    width: 90%;
  }

  .area-intro-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .24rem;
  }

  .area-intro-ttl {
    font-size: .36rem;
    margin-bottom: .24rem;
    line-height: 1.4;
  }

  .area-intro-txt {
    font-size: .26rem;
    line-height: 1.6;
  }

  .area-intro-badges {
    flex-direction: column;
    gap: .16rem;
  }

  .area-intro-badge {
    width: 1.6rem;
    height: 1.6rem;
  }

  .area-intro-badge .badge-sub {
    font-size: .2rem;
  }

  .area-intro-badge .badge-main {
    font-size: .22rem;
  }

  .area-intro-badge .num {
    font-size: .36rem;
  }

  .area_sec {
    margin-top: .8rem;
  }

  .area_sec_lead {
    font-size: .26rem;
    margin: .3rem 0 .5rem;
  }

  .area_maprow {
    flex-direction: column;
    gap: .4rem;
  }

  .area_map img {
    border-radius: .2rem;
  }

  .feat_cards {
    width: 100%;
    gap: .24rem;
  }

  .feat_card {
    padding: .3rem .34rem;
    background: url('../images/area/bg_feat_card_sp.png') no-repeat center / 100% 100%;
    background-size: 100% 100%;
  }

  .feat_icon {
    width: .8rem;
    height: .8rem;
  }

  .feat_icon img {
    max-width: .8rem;
    max-height: .8rem;
  }

  .feat_ttl {
    font-size: .3rem;
  }

  .feat_text {
    font-size: .24rem;
  }

  .place_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem .24rem;
    margin-top: .6rem;
  }

  .place_header {
    display: flex;
    flex-direction: column;
  }

  .place_cat {
    font-size: .28rem;
    padding: .1rem .16rem;
    border-radius: .08rem;
    margin-bottom: .16rem;
  }

  .place_ttl {
    font-size: .26rem;
    margin-bottom: .16rem;
    line-height: 1.4;
  }

  .place_photo {
    margin-bottom: .16rem;
    border-radius: .1rem;
  }

  .place_text {
    font-size: .24rem;
    line-height: 1.6;
    margin-bottom: .2rem;
  }

  .place_access {
    padding: .14rem .16rem;
    border-radius: .1rem;
  }

  .place_access p {
    font-size: .24rem;
    line-height: 1.5;
  }

  .school_info {
    padding: .14rem .16rem;
    border-radius: .1rem;
    margin-bottom: .16rem;
  }

  .school_info p {
    font-size: .22rem;
    line-height: 1.5;
  }

  .place_caption {
    font-size: .22rem;
    margin-top: .08rem;
    margin-bottom: .16rem;
  }
}