/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 21 2026 | 04:56:29 */
@charset "UTF-8";
/*=====================================================================
  ユニヴライフ高槻店 WP化 — page.scss（スタイルのソース。page.css は Live Sass で生成）

  ■ 構成（このファイルの並び順 / サイトマップ準拠）
      1. 基盤            全ページ共通のラッパ・リセット・テーマ干渉対処
      2. 共通コンポーネント  複数ページで再利用するUI（各見出しに使用ページを明記）
      3. ページ個別        TOP → 学生 → ファミリー → 住みたい街 → カテゴリTOP → プライバシー

  ■ ルール
      - 編集はこの page.scss を正とする。反映は VSCode Live Sass Compiler でリロード。
      - レイアウトはモバイルファースト。ブレイクポイントは 480px（@media (width >= 480px)）。
      - 余白（margin/padding/gap）は原則 8 の倍数、難しければ 4 の倍数。
      - テーマ側CSSとの干渉対処（h2下線の打ち消し・画像ホバー拡大の無効化・全幅背景）は
        「1. 基盤 > 共通ユーティリティ」に集約している。
=====================================================================*/
/*#####################################################################
  0. トークン & ミックスイン（色 / ブレイクポイント / ボタン）
#####################################################################*/
/* 色（サイト共通パレット） */
/* ブレイクポイント：モバイルファースト。PC = 幅480px以上 */
/* オレンジのピルボタン共通シェル（area-btn / access-button で使用。
   幅・余白・色・影・角丸・hover を共通化。min-height / font-size / アイコンは各所で個別指定） */
/*#####################################################################
  1. 基盤（全ページ共通）
#####################################################################*/
/*--

各ページ共通

====================================================== --*/
.es-page-student,
.es-page-family,
.es-page-town,
.es-page-area,
.es-page-rosen,
.es-page-university,
.es-page-kodawari,
.es-page-privacy {
  font-size: 12px;
}
@media (width >= 480px) {
  .es-page-student,
  .es-page-family,
  .es-page-town,
  .es-page-area,
  .es-page-rosen,
  .es-page-university,
  .es-page-kodawari,
  .es-page-privacy {
    font-size: 16px;
  }
}
.es-page-student,
.es-page-family,
.es-page-town,
.es-page-area,
.es-page-rosen,
.es-page-university,
.es-page-kodawari,
.es-page-privacy {
  /*-- 強制的にメインコンテンツ下の余白を消す --*/
  /*-- ここまで --*/
  /* 段落(p)の margin-bottom を 0 にする共通リセット。
     テーマ側に `.entry-content p { margin-bottom: 1.6em; }` という
     詳細度(0,1,1)のデフォルトルールが存在するため、それに勝つには
     このリセットも最低 (0,1,1) が必要。
     :where(&) で外側の .es-page-* 部分だけ詳細度0にし、.entry-content p は
     素のまま残すことで詳細度をちょうど (0,1,1) に揃え、
     後方（コンパイル後CSSで後に定義される）テーマCSSより後にこのファイルが
     読み込まれる前提でソース順により上書きする。
     コンポーネント側でこのリセットより優先させたい場合は、
     .entry-content を付けて2クラス分の詳細度 (0,2,0) にすること
     （例: .entry-content .timing-intro）。 */
}
:where(.es-page-student,
.es-page-family,
.es-page-town,
.es-page-area,
.es-page-rosen,
.es-page-university,
.es-page-kodawari,
.es-page-privacy) .entry-content p {
  margin-bottom: 0;
}
.es-page-student .es-container,
.es-page-family .es-container,
.es-page-town .es-container,
.es-page-area .es-container,
.es-page-rosen .es-container,
.es-page-university .es-container,
.es-page-kodawari .es-container,
.es-page-privacy .es-container {
  max-width: none;
}
.es-page-student .page-header,
.es-page-family .page-header,
.es-page-town .page-header,
.es-page-area .page-header,
.es-page-rosen .page-header,
.es-page-university .page-header,
.es-page-kodawari .page-header,
.es-page-privacy .page-header {
  position: relative;
  display: grid;
  place-content: center;
  width: 100%;
  height: 140px;
  margin: 0;
  padding: 0;
  max-width: none;
  border-bottom: none;
  background-image: url("/app/uploads/sites/1484/2026/07/bg_page_header_sp.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  text-align: center;
}
@media (width >= 480px) {
  .es-page-student .page-header,
  .es-page-family .page-header,
  .es-page-town .page-header,
  .es-page-area .page-header,
  .es-page-rosen .page-header,
  .es-page-university .page-header,
  .es-page-kodawari .page-header,
  .es-page-privacy .page-header {
    height: 176px;
    background-image: url("/app/uploads/sites/1484/2026/07/bg_page_header.png");
  }
}
.es-page-student .page-header .entry-header,
.es-page-family .page-header .entry-header,
.es-page-town .page-header .entry-header,
.es-page-area .page-header .entry-header,
.es-page-rosen .page-header .entry-header,
.es-page-university .page-header .entry-header,
.es-page-kodawari .page-header .entry-header,
.es-page-privacy .page-header .entry-header {
  margin: 0;
  padding: 0;
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);
}
@media (width >= 480px) {
  .es-page-student .page-header .entry-header,
  .es-page-family .page-header .entry-header,
  .es-page-town .page-header .entry-header,
  .es-page-area .page-header .entry-header,
  .es-page-rosen .page-header .entry-header,
  .es-page-university .page-header .entry-header,
  .es-page-kodawari .page-header .entry-header,
  .es-page-privacy .page-header .entry-header {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
  }
}
.es-page-student .page-header .entry-title.color_main,
.es-page-family .page-header .entry-title.color_main,
.es-page-town .page-header .entry-title.color_main,
.es-page-area .page-header .entry-title.color_main,
.es-page-rosen .page-header .entry-title.color_main,
.es-page-university .page-header .entry-title.color_main,
.es-page-kodawari .page-header .entry-title.color_main,
.es-page-privacy .page-header .entry-title.color_main {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media (width >= 480px) {
  .es-page-student .page-header .entry-title.color_main,
  .es-page-family .page-header .entry-title.color_main,
  .es-page-town .page-header .entry-title.color_main,
  .es-page-area .page-header .entry-title.color_main,
  .es-page-rosen .page-header .entry-title.color_main,
  .es-page-university .page-header .entry-title.color_main,
  .es-page-kodawari .page-header .entry-title.color_main,
  .es-page-privacy .page-header .entry-title.color_main {
    font-size: 28px;
  }
}
.es-page-student .page-header .entry-title.color_main span,
.es-page-family .page-header .entry-title.color_main span,
.es-page-town .page-header .entry-title.color_main span,
.es-page-area .page-header .entry-title.color_main span,
.es-page-rosen .page-header .entry-title.color_main span,
.es-page-university .page-header .entry-title.color_main span,
.es-page-kodawari .page-header .entry-title.color_main span,
.es-page-privacy .page-header .entry-title.color_main span {
  display: inline-block;
}
.es-page-student .site-main,
.es-page-student .entry-content,
.es-page-family .site-main,
.es-page-family .entry-content,
.es-page-town .site-main,
.es-page-town .entry-content,
.es-page-area .site-main,
.es-page-area .entry-content,
.es-page-rosen .site-main,
.es-page-rosen .entry-content,
.es-page-university .site-main,
.es-page-university .entry-content,
.es-page-kodawari .site-main,
.es-page-kodawari .entry-content,
.es-page-privacy .site-main,
.es-page-privacy .entry-content {
  margin: 0;
  padding: 0;
}

/*--

共通ユーティリティ
※ フルブリード対策 / テーマの見出し下線・画像ホバー拡大の打ち消し / SPのみ改行
　 これまで各所に分散していたが、横断的なユーティリティなのでここに集約する。

====================================================== --*/
/* フルブリード（.commitment 等）の横はみ出し対策
   100vw フルブリードがスクロールバー幅分はみ出して横スクロールが出るのを、
   全幅ラッパー .site-content でクリップして防ぐ（縦スクロール/stickyに影響しない overflow-x: clip） */
.site-content {
  overflow-x: hidden;
  overflow-x: clip;
}

/* テーマの見出し下線（.entry-content h2::after）打ち消し
   自作の見出しコンポーネントにテーマの下線が当たるのを無効化 */
.entry-content .commitment-title::after,
.entry-content .contents-title::after,
.entry-content .fee-title::after,
.entry-content .contact-cta-title::after,
.entry-content .access-title::after,
.entry-content .mansion-feature-title::after,
.entry-content .news-title::after,
.entry-content .town-name::after {
  display: none;
}

/* テーマの画像ホバー拡大（.site-content a:hover img { transform: scale(1.1) }）を無効化
   こだわり／コンテンツのカードでは画像を拡大させない */
.site-content .commitment-card a:hover img,
.site-content .contents-card a:hover img,
.site-content .spot-item a:hover img,
.site-content .related-links-banner:hover img {
  -webkit-transform: none;
          transform: none;
}

/* SPのみ改行するユーティリティ（PC>=480pxでは改行を無効化） */
@media (width >= 480px) {
  .br-sp {
    display: none;
  }
}
/*#####################################################################
  2. 共通コンポーネント（複数ページで再利用）
#####################################################################*/
/*--

導入文（カテゴリTOP共通）
※ area / rosen / university / kodawari で使い回し

====================================================== --*/
.intro-lead {
  padding-block: 8px 32px;
}

.intro-inner {
  max-width: 880px;
  margin-inline: auto;
}

.entry-content .intro-text {
  margin: 0;
  color: #333;
  font-size: 12px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.03em;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .intro-text {
    font-size: 14px;
  }
}

/*--

こだわり物件カード（TOP・こだわりページ共通 / 汎用コンポーネント）

====================================================== --*/
.commitment {
  margin-inline: min(0px, 50% - 50vw);
  padding-block: 40px;
  background-color: #ebf7fa;
}
@media (width >= 480px) {
  .commitment {
    padding-block: 64px;
  }
}
.commitment.-family {
  background-color: transparent;
}
.commitment-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
.commitment-list {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width >= 480px) {
  .commitment-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 28px;
  }
}
.commitment-card a {
  display: block;
  height: 100%;
  background-color: #fff;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  color: inherit;
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
.commitment-card a:hover {
  opacity: 0.85;
}
.commitment-card-thumb {
  position: relative;
  overflow: hidden;
}
.commitment-card-thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.commitment-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
}
.commitment-card-title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  padding: 0 16px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}
@media (width >= 480px) {
  .commitment-card-title {
    font-size: 24px;
  }
}

.entry-content .commitment-title {
  margin: 0 0 40px;
  color: #222;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .commitment-title {
    font-size: 24px;
  }
}
.entry-content .commitment-title::before {
  content: "";
  display: inline-block;
  width: 27px;
  height: 43px;
  margin: -12px 12px 0 0;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_commitment.svg");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: top;
}

.entry-content .commitment-card-text {
  margin: 0;
  padding: 16px 20px 20px;
  color: #333;
  font-size: 13px;
  line-height: 1.6;
}
@media (width >= 480px) {
  .entry-content .commitment-card-text {
    font-size: 14px;
  }
}

/*--

コンテンツ紹介（TOP・カテゴリTOP共通 / 汎用コンポーネント）

====================================================== --*/
.contents {
  padding-block: 40px;
}
@media (width >= 480px) {
  .contents {
    padding-block: 48px 64px;
  }
}
.contents-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
.contents-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
@media (width >= 480px) {
  .contents-head {
    display: block;
    position: relative;
    margin-bottom: 40px;
  }
}
.contents-illust {
  width: 96px;
}
.contents-illust img {
  display: block;
  width: 100%;
  height: auto;
}
@media (width >= 480px) {
  .contents-illust {
    position: absolute;
    top: -78px;
    left: 50%;
    width: 118px;
    margin-left: -360px;
    z-index: 1;
  }
}
.contents-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width >= 480px) {
  .contents-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
.contents-card a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: 100%;
  color: inherit;
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.contents-card a:hover {
  opacity: 0.85;
}
.contents-thumb {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40%;
  max-width: 180px;
}
.contents-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.contents-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 8px;
}
@media (width >= 480px) {
  .contents-body {
    padding: 20px;
  }
}
.contents-card-title {
  display: block;
  margin-bottom: 4px;
  color: #333;
  font-size: 14px;
  font-weight: 700;
}
@media (width >= 480px) {
  .contents-card-title {
    font-size: 18px;
    margin-bottom: 8px;
  }
}
.contents-card-text {
  display: block;
  color: #333;
  line-height: 1.7;
  font-size: 12px;
}
@media (width >= 480px) {
  .contents-card-text {
    font-size: 14px;
  }
}

.entry-content .contents-title {
  margin: 0;
  color: #222;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .contents-title {
    font-size: 24px;
  }
}
.entry-content .contents-title::before {
  content: "";
  display: inline-block;
  width: 43px;
  height: 35px;
  margin: -5px 9px 0 0;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_pc.svg");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: top;
}

/* カード種別ごとの背景色（.contents-card.-student / .-family / .-town） */
.contents-card.-student .contents-body {
  background-color: #f2f9c3;
}

.contents-card.-family .contents-body {
  background-color: #faf9f7;
}

.contents-card.-town .contents-body {
  background-color: #cdebf3;
}

/*--

仲介手数料0円（TOP・カテゴリTOP共通 / 汎用コンポーネント）

====================================================== --*/
.fee {
  margin-inline: min(0px, 50% - 50vw);
  background-color: #eef2f5;
}
.fee-inner {
  max-width: 1040px;
  margin-inline: auto;
  position: relative;
  background-image: url("/app/uploads/sites/1484/2026/07/index_img_fee.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 50%;
  padding: 40px 20px 48px;
}
@media (width >= 480px) {
  .fee-inner {
    background-size: auto 300px;
    padding: 56px 20px 64px;
    background-position: right 10% bottom;
  }
}
.fee-body {
  position: relative;
}
.fee-box {
  padding: 24px;
  background-color: #fff;
  width: 74%;
}
@media (width >= 480px) {
  .fee-box {
    padding: 32px;
    width: 65%;
  }
}

.entry-content .fee-title {
  margin: 0 0 24px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}
.entry-content .fee-title::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 32px;
  margin: -7px 10px 0 0;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_heart.svg");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}
@media (width >= 480px) {
  .entry-content .fee-title {
    margin-bottom: 32px;
    font-size: 26px;
  }
}
.entry-content .fee-title span.fee-num {
  color: #e60012;
  font-size: 1.6em;
  line-height: 1;
}
.entry-content .fee-title em.fee-em {
  color: #e60012;
  font-style: normal;
}

.entry-content .fee-box .fee-copy {
  margin-bottom: 0.5em;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
@media (width >= 480px) {
  .entry-content .fee-box .fee-copy {
    font-size: 18px;
  }
}

.entry-content .fee-box .fee-text {
  margin: 0;
  color: #333;
  font-size: 12px;
  line-height: 1.8;
}
.entry-content .fee-box .fee-text:last-child {
  margin-bottom: 0;
}
@media (width >= 480px) {
  .entry-content .fee-box .fee-text {
    font-size: 14px;
  }
}

/*--

エリア/沿線/大学 一覧ボタン（カテゴリTOP共通 / 汎用コンポーネント）
※ アイコンはページごとに ::before の background-image を差し替え
※ -university 系はもともと2箇所に分裂していたのを1ブロックに統合済み

====================================================== --*/
.search-nav {
  margin-inline: min(0px, 50% - 50vw);
  padding: 40px 0 48px;
  background-color: #f1f0e5;
}
@media (width >= 480px) {
  .search-nav {
    padding: 56px 0 64px;
  }
}
.search-nav-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
.search-nav-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width >= 480px) {
  .search-nav-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}
.search-nav-item {
  font-size: 16px;
}
@media (width >= 480px) {
  .search-nav-item {
    font-size: 18px;
  }
}
.search-nav-item a {
  height: 100%;
}
.search-nav-item a:hover {
  text-decoration: none;
}
.search-nav-item {
  /* 外部リンク項目：テキスト右にマーカーアイコン（SPのボタン一覧内） */
}
.search-nav-item.-external-link .search-nav-link::after {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 12px;
  height: 9px;
  margin-left: 4px;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_blank.png");
  background-repeat: no-repeat;
  background-size: contain;
}
@media (width >= 480px) {
  .search-nav-item.-external-link .search-nav-link::after {
    width: 24px;
    height: 18px;
    margin-left: 8px;
  }
}
.search-nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 56px;
  padding: 16px 8px;
  background-color: #fff;
  color: #333;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
@media (width >= 480px) {
  .search-nav-link {
    padding: 16px;
  }
}
.search-nav-link::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 9px;
  height: 12px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (width >= 480px) {
  .search-nav-link::before {
    width: 18px;
    height: 24px;
  }
}
.search-nav-link:hover {
  opacity: 0.7;
}

.entry-content .search-nav .search-nav-lead {
  margin: 0 0 16px;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .search-nav .search-nav-lead {
    margin: 0 0 16px;
  }
}

/* アイコン・列数の出し分け（modifier） */
.-area .search-nav-link::before {
  background-image: url("/app/uploads/sites/1484/2026/07/ico_area_list.svg");
}

.-rosen .search-nav-link::before {
  background-image: url("/app/uploads/sites/1484/2026/07/ico_station.svg");
}
.-rosen .search-nav-list {
  grid-template-columns: 1fr;
}
@media (width >= 480px) {
  .-rosen .search-nav-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -university（旧 search-nav--university）: 大学マップ導線の modifier。
   アイコン／列数／SP文字サイズ／PCでの画像マップ切替えを1ブロックに集約。 */
.-university .search-nav-link {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
@media (width >= 480px) {
  .-university .search-nav-link {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.-university .search-nav-link::before {
  width: 16px;
  height: 16px;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_univ.svg");
}
@media (width >= 480px) {
  .-university .search-nav-link::before {
    width: 24px;
    height: 24px;
  }
}
.-university .search-nav-link {
  /* 文字自体は li.search-nav-item ではなく子の a.search-nav-link に
     入っており、.search-nav-link 側で font-size: 16px/18px を
     直接指定しているため、親(li)に font-size を当てても継承されず
     無視される。表示テキストを持つ .search-nav-link の方を指定する。 */
  font-size: 12px;
}
@media (width >= 480px) {
  .-university .search-nav-link {
    font-size: 14px;
  }
}
.-university .search-nav-list {
  grid-template-columns: repeat(2, 1fr);
}
@media (width >= 480px) {
  .-university .search-nav-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.-university {
  /* PC: 画像マップに差し替えるため、SP用のリード文・ボタン一覧を隠す */
}
@media (width >= 480px) {
  .-university .search-nav-lead,
  .-university .search-nav-list {
    display: none;
  }
}

/* 大学マップ：PC=画像マップ / SP=ボタン一覧 の出し分け */
.univ-map {
  display: none;
}
@media (width >= 480px) {
  .univ-map {
    display: block;
    text-align: center;
  }
}

.search-nav .univ-map img {
  max-width: none; /* 原寸970pxを維持しarea座標のズレを防ぐ */
  width: 970px;
  height: 489px;
  vertical-align: top;
}

/*--

各エリアの魅力・スポットカード（recommend / section-title / spot-* / 汎用コンポーネント）
※ town / family / student 共通

====================================================== --*/
.recommend {
  padding: 40px 0 48px;
}
@media (width >= 480px) {
  .recommend {
    padding: 56px 0 64px;
  }
}
.recommend-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}

.section-title {
  margin: 0 0 24px;
  color: #333;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media (width >= 480px) {
  .section-title {
    margin-bottom: 40px;
    font-size: 24px;
  }
}
.section-title.-spot::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 32px;
  margin-right: 8px;
  background-image: url("/app/uploads/sites/1484/2026/07/student_ico_spot.svg");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  translate: 0 -4px;
}

.spot-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width >= 480px) {
  .spot-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (width >= 768px) {
  .spot-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.spot-item a {
  display: block;
  height: 100%;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  color: inherit;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.spot-item a:hover {
  opacity: 0.85;
}

.spot-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.entry-content .spot-name {
  margin: 16px 16px 8px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
}
@media (width >= 480px) {
  .entry-content .spot-name {
    font-size: 20px;
  }
}
.entry-content .spot-name span.small {
  font-size: 0.6em;
}

.entry-content .spot-desc {
  margin: 0 16px 12px;
  font-size: 13px;
  line-height: 1.7;
}

.spot-link {
  position: relative;
  display: block;
  margin: 0.5em 16px 16px;
  font-size: 12px;
  text-decoration: underline;
  text-align: right;
}
.spot-link::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-right: 6px;
  background-image: url("/app/uploads/sites/1484/2026/07/student_ico_blank.png");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

/*--

エリアグループ見出し（recommend-group-title / リボン装飾 / family・student 共通）
※ recommend セクション内でエリアごとにグループ分けする際の見出し（town は単一エリアのため未使用）

====================================================== --*/
.recommend-group {
  margin-top: 40px;
}
.recommend-group:first-of-type {
  margin-top: 0;
}
@media (width >= 480px) {
  .recommend-group {
    margin-top: 56px;
  }
}

.entry-content .recommend-group-title {
  position: relative;
  margin: 0 0 24px;
  padding: 12px 16px 12px 28px;
  background-color: #a5a16f;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
@media (width >= 480px) {
  .entry-content .recommend-group-title {
    margin-bottom: 32px;
    padding: 15px 20px 17px 34px;
    font-size: 18px;
  }
}
.entry-content .recommend-group-title {
  /* 左右の旗先（旧サイトの student_bg_recommend_before/after.png を clip-path で再現） */
}
.entry-content .recommend-group-title::before, .entry-content .recommend-group-title::after {
  content: "";
  position: absolute;
  top: 1em;
  width: 2.3em;
  height: 2.8em;
  background-color: #78754d;
  z-index: -1;
}
.entry-content .recommend-group-title::before {
  left: -1.15em;
  clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%);
}
.entry-content .recommend-group-title::after {
  right: -1.15em;
  clip-path: polygon(0 0, 79% 0, 100% 100%, 0 100%);
}

/*--

エリアグループ内リンクボタン（recommend-group-link / 特定エリアのみ表示する補足リンク）
※ family の高槻エリアのみ「住みたい街シリーズ」への導線として使用

====================================================== --*/
.recommend-group-link {
  margin-top: 32px;
  text-align: center;
}
.recommend-group-link a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 411px;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  background-color: #e2e0cd;
  border: 1px solid #a5a16f;
  border-radius: 20px;
  color: #222;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
@media (width >= 480px) {
  .recommend-group-link a {
    font-size: 14px;
  }
}
.recommend-group-link a:hover {
  opacity: 0.75;
}

/*--

エリア物件情報（room-info）＋エリアボタン（各エリアの魅力セクション内 / 共通）
※ -university modifier（付近の大学＋エリアリンク用。旧: 遠く離れた場所に単独で存在していた）
　 もここに集約する。

====================================================== --*/
.entry-content .recommend-text {
  margin: 32px 0 0;
  color: #333;
  font-size: 14px;
  line-height: 2;
}
@media (width >= 480px) {
  .entry-content .recommend-text {
    font-size: 15px;
  }
}

.room-info {
  margin-top: 24px;
  background-color: #f1f0e5;
}
.room-info-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 16px 8px;
  list-style: none;
}
@media (width >= 480px) {
  .room-info-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
.room-info-item a {
  font-weight: bold;
  height: 100%;
}
.room-info-item a:hover {
  text-decoration: none;
}
.room-info {
  /* 付近の大学リンク（-university）は3列にそろえる
     （デフォルトの room-info-list は2/3列だが、大学名は
     短めのカードで長い名称も収まるよう常に3列にする） */
}
@media (width >= 480px) {
  .room-info.-university .room-info-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.room-info {
  /* カードの中身は左寄せのまま（.search-nav 本来のPC中央寄せは
     大学マップ導線専用の見た目のため、ここでは上書きする） */
}
@media (width >= 480px) {
  .room-info.-university .search-nav-link {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.entry-content .room-info-heading {
  margin: 0;
  padding: 8px 16px;
  background-color: #e2e0cd;
  color: #222;
  font-size: 16px;
  font-weight: 700;
}

/* エリアリンク（大学カードとは別に、下段にシンプルなテキストリンク＋
   虫眼鏡アイコンで表示する。カード化はしない） */
.room-info-arealinks {
  margin: 0;
  padding: 0 16px 16px;
  list-style: none;
}

.room-info-arealink-item + .room-info-arealink-item {
  margin-top: 8px;
}

.room-info-arealink {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #222;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.room-info-arealink::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background-image: url("/app/uploads/sites/1484/2026/07/student_ico_loupe2.svg");
  background-repeat: no-repeat;
  background-size: contain;
}
.room-info-arealink:hover {
  opacity: 0.7;
}

.area-btn {
  margin-top: 32px;
  text-align: center;
}
.area-btn a {
  position: relative;
  min-height: 62px;
  font-size: 18px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 372px;
  max-width: 100%;
  padding: 12px 24px;
  background-color: #ff5d04;
  -webkit-box-shadow: 0px 4px 0px 0px rgba(255, 93, 4, 0.35);
          box-shadow: 0px 4px 0px 0px rgba(255, 93, 4, 0.35);
  border-radius: 32px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.area-btn a:hover {
  opacity: 0.85;
}
.area-btn a::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 9px;
  background-image: url("/app/uploads/sites/1484/2026/07/student_ico_loupe.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.area-btn a::after {
  content: "";
  position: absolute;
  top: -26px;
  right: -63px;
  width: 110px;
  height: 123px;
  background-image: url("/app/uploads/sites/1484/2026/07/student_img_illust.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
@media (width < 480px) {
  .area-btn a::after {
    display: none;
  }
}

/*--

24時間365日サポート（support / family・student 共通 / 汎用コンポーネント）

====================================================== --*/
.support {
  padding-block: 40px;
}
@media (width >= 480px) {
  .support {
    padding-block: 56px 64px;
  }
}
.support-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
.support-photo {
  margin-top: 16px;
}
@media (width >= 480px) {
  .support-photo {
    margin-top: 24px;
  }
}
.support-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.support-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: -40px 0 0;
  padding: 0;
  list-style: none;
}
@media (width >= 480px) {
  .support-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: -200px;
  }
}
.support-item {
  background-color: #def1ff;
  padding-bottom: 16px;
}
.support-item-body {
  padding: 12px 8px 0;
}
.support-item-body > dl > div {
  margin-bottom: 16px;
}
.support-item-body > dl > div:last-of-type {
  margin-bottom: 0;
}
.support-box {
  padding: 12px 16px;
  background-color: #eff8ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
@media (width >= 480px) {
  .support-box {
    font-size: 16px;
  }
}
.support-box-group {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.support-box-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.support-box-list li {
  padding: 8px;
  font-size: 12px;
  background-color: #eff8ff;
  font-weight: bold;
}
.support-box-list li:nth-last-child(-n+2) {
  border-bottom: none;
}
.support-time {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
}
@media (width >= 480px) {
  .support-time {
    font-size: 12px;
  }
}
.support-notes {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.support-notes li {
  color: #666;
  margin-left: 1em;
  text-indent: -1em;
}
@media (width >= 480px) {
  .support-notes li {
    font-size: 14px;
  }
}

.entry-content .support-title {
  margin: 0 0 16px;
  color: #222;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #19a1ea;
}
@media (width >= 480px) {
  .entry-content .support-title {
    margin-bottom: 16px;
    font-size: 26px;
  }
}

.support-title .support-num {
  font-style: normal;
  font-size: 1.3em;
}

.entry-content .support-lead {
  margin: 0;
  color: #333;
  font-size: 12px;
  line-height: 1.9;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .support-lead {
    font-size: 14px;
  }
}

.entry-content .support-item-head {
  margin: 0;
  padding: 12px 8px;
  background-color: #19a1ea;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .support-item-head {
    padding: 12px;
    font-size: 20px;
  }
}

.entry-content .support-desc {
  padding: 16px 16px 0;
  line-height: 1.7;
  margin: 0;
}
@media (width >= 480px) {
  .entry-content .support-desc {
    font-size: 14px;
  }
}
.entry-content .support-desc ul.notes {
  font-size: 0.9em;
  list-style: none;
  margin-left: 1em;
  text-indent: -1em;
  margin-bottom: 0;
}

/*--

お問い合わせCTA（共通コンポーネント / 全ページ共通）

====================================================== --*/
.contact-cta {
  margin-inline: min(0px, 50% - 50vw);
  padding: 32px 0 48px;
  background-color: #eef2f5;
}
@media (width >= 480px) {
  .contact-cta {
    padding: 40px 0 64px;
  }
}
.contact-cta.-mid {
  padding: 32px 0;
}
@media (width >= 480px) {
  .contact-cta.-mid {
    padding: 40px 0;
  }
}
.contact-cta-inner {
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
.contact-cta-inner::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 72px;
  height: 72px;
  top: 60%;
  background-image: url("/app/uploads/sites/1484/2026/07/blog_takatsuki_illust02.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
@media (width >= 480px) {
  .contact-cta-inner::after {
    top: 64px;
    left: 130px;
    width: 103px;
    height: 147px;
  }
}
.contact-cta-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
@media (width >= 480px) {
  .contact-cta-body {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 32px;
  }
}
.contact-cta-tel {
  text-align: center;
  line-height: 1.4;
}
.contact-cta-tel em {
  font-style: normal;
  font-size: 16px;
  font-weight: 700;
}
.contact-cta-tel strong {
  margin-left: 4px;
  font-size: 2.25em;
  font-weight: 700;
}
.contact-cta-tel strong a {
  color: #222;
  text-decoration: none;
}
.contact-cta-tel .hours {
  display: block;
  text-align: right;
  font-weight: bold;
}
.contact-cta-btn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 210px;
  min-height: 56px;
  padding: 8px 16px;
  background-color: #fff;
  border: 1px solid #8c8cbf;
  color: #000072;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.contact-cta-btn a:hover {
  opacity: 0.7;
}
.contact-cta-btn a::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 22px;
  height: 16px;
  margin-right: 9px;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_inquiry.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.entry-content .contact-cta-title {
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #888a8b;
  color: #222;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .contact-cta-title {
    margin-bottom: 32px;
    font-size: 20px;
  }
}
.entry-content .contact-cta-title em {
  font-style: normal;
  font-size: 1.3em;
}

/*#####################################################################
  3. ページ個別（サイトマップ順）
#####################################################################*/
/*#####################################################################
  3-1. TOP（index.php）
#####################################################################*/
/*--

賃貸マンション特集（TOP / 大学別・エリア別・手数料ゼロ・キーワード検索）
※ 手数料ゼロの6リンクは専用feature IDが無いため href="#" 仮置き（元請け確認待ち）
※ 末尾イラストは ill_feature.png（要配置）

====================================================== --*/
.mansion-feature {
  margin-inline: min(0px, 50% - 50vw);
  padding: 40px 0 48px;
  background-image: url("/app/uploads/sites/1484/2026/07/bg_feature.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (width >= 480px) {
  .mansion-feature {
    padding: 60px 0 55px;
  }
}
.mansion-feature-inner {
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
.mansion-feature-list {
  margin: 0 0 24px;
  padding: 0;
}
@media (width >= 480px) {
  .mansion-feature-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 30px;
    margin-bottom: 0;
  }
}
@media (width >= 480px) {
  .mansion-feature-col.-univ {
    width: 370px;
  }
  .mansion-feature-col.-mid {
    width: 320px;
  }
  .mansion-feature-col.-search {
    width: 250px;
  }
}
.mansion-feature-group {
  margin: 0 0 20px;
}
.mansion-feature-group:last-child {
  margin-bottom: 0;
}
.mansion-feature-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mansion-feature-links li {
  margin: 0 0 2px;
}
.mansion-feature-link {
  position: relative;
  display: block;
  padding: 16px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.mansion-feature-link:hover {
  background-color: #f2f2f2;
  text-decoration: none;
  opacity: 0.7;
}
.mansion-feature-link[target=_blank]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 14px;
  margin-top: -7px;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_blank.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
}
.mansion-feature-search {
  padding: 10px;
  background-color: #fff;
}
.mansion-feature-search form.gsc-search-box,
.mansion-feature-search table.gsc-search-box {
  width: 100% !important;
  margin: 0 !important;
}
.mansion-feature-search .gsc-search-box td {
  border: 0 !important;
}
.mansion-feature-search td.gsc-input {
  width: 100% !important;
  padding-right: 0 !important;
}
.mansion-feature-search .gsc-input-box {
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  width: 100% !important;
}
.mansion-feature-search .gsc-input-box table {
  margin-bottom: 0;
}
.mansion-feature-search .gsc-search-button {
  display: none !important;
}
.mansion-feature-illust {
  margin: 24px 0 0;
  text-align: center;
}
@media (width >= 480px) {
  .mansion-feature-illust {
    position: absolute;
    right: -10px;
    bottom: 0;
    margin: 0;
  }
}
.mansion-feature-illust img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.entry-content .mansion-feature-title {
  margin: 0 0 24px;
  color: #333;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}
.entry-content .mansion-feature-title::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 9px;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_loupe.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
  translate: 0 -2px;
}
@media (width >= 480px) {
  .entry-content .mansion-feature-title {
    margin-bottom: 35px;
    font-size: 24px;
  }
  .entry-content .mansion-feature-title::before {
    width: 33px;
    height: 32px;
  }
}

.entry-content .mansion-feature-group-title {
  margin: 0 0 2px;
  padding: 8px;
  background-color: #03a7de;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.mansion-feature-group.-area .mansion-feature-group-title {
  background-color: #ed4747;
}

.mansion-feature-group.-zero .mansion-feature-group-title {
  background-color: #ff960e;
}

.mansion-feature-group.-search .mansion-feature-group-title {
  background-color: #00a0eb;
}

/*#####################################################################
  最新情報（news / お知らせ ＋ Twitter・Blog）
  ※ 日付・タイトルは WP(acf/infos-embed) 生成。生成クラスをCSSでレイアウト調整
#####################################################################*/
.news {
  padding: 40px 0 48px;
}
@media (width >= 480px) {
  .news {
    padding: 56px 0 64px;
  }
}
.news-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
@media (width >= 480px) {
  .news-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 40px;
  }
}
.news-main {
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
@media (width >= 480px) {
  .news-main {
    width: 700px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
.entry-content .news-heading {
  margin: 0;
  padding: 16px 20px 16px 24px;
  background-color: #f8f8f8;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
@media (width >= 480px) {
  .entry-content .news-heading {
    padding: 18px 20px 19px 40px;
    font-size: 18px;
  }
}
.news-body {
  padding: 0 16px 0 20px;
}
@media (width >= 480px) {
  .news-body {
    padding: 0 20px 0 40px;
  }
}
.news-sns {
  margin-top: 24px;
}
@media (width >= 480px) {
  .news-sns {
    width: 260px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-top: 0;
  }
}
.news-twitter, .news-blog {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 56px;
  padding: 12px 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.news-twitter:hover, .news-blog:hover {
  opacity: 0.85;
  color: #fff;
  text-decoration: none;
}
.news-twitter::before, .news-blog::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.news-twitter {
  background-color: #1da1f2;
}
.news-twitter::before {
  width: 26px;
  height: 22px;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_twitter2.svg");
}
.news-blog {
  margin-top: 30px;
  background-color: #ff9e04;
}
.news-blog::before {
  width: 22px;
  height: 22px;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_pencile.svg");
}
.news-twitter-widget {
  min-height: 132px;
  overflow: auto;
}

/* WP(acf/infos-embed)生成リストのレイアウト調整（日付=左固定幅 / タイトル=右, 箱内スクロール） */
.news-body .es-list-wrapper,
.news-body .es-list {
  margin: 0;
  padding: 0;
  border: 0;
}

.news-body .es-list-items {
  display: block;
  height: 214px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-body .es-list-item {
  border-bottom: 1px solid #eeeeee;
}

.news-body .es-list-item:last-child {
  border-bottom: none;
  margin-bottom: 0 !important;
}

.news-body .es-list-item a {
  display: block;
  color: #266dc5;
  text-decoration: none;
}

.news-body .es-list-content,
.news-body .list_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 12px;
  padding: 14px 4px;
}

.news-body .date {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 96px;
  color: #333;
  font-size: 13px;
  line-height: 1.7;
}
@media (width >= 480px) {
  .news-body .date {
    width: 110px;
    font-size: 14px;
  }
}

.entry-content .news-body .wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  margin: 0;
  color: #266dc5;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  text-decoration: underline;
  word-break: break-word;
}
@media (width >= 480px) {
  .entry-content .news-body .wrap {
    font-size: 14px;
  }
}

.entry-content .news-title {
  margin: 0 0 32px;
  color: #333;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}
.entry-content .news-title::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 27px;
  margin-right: 12px;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_news.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
  translate: 0 -2px;
}
@media (width >= 480px) {
  .entry-content .news-title {
    margin-bottom: 40px;
    font-size: 24px;
  }
  .entry-content .news-title::before {
    width: 28px;
    height: 32px;
  }
}

/*--

ユニヴライフ高槻店への行き方（TOP / YouTube＋地図）

====================================================== --*/
.access {
  padding: 40px 0 48px;
}
@media (width >= 480px) {
  .access {
    padding: 56px 0 64px;
  }
}
.access-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
.access-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
@media (width >= 480px) {
  .access-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
.access-item {
  position: relative;
  margin: 0;
}
.access-frame {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: #eef2f5;
}
.access-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.access-item.-map .access-frame iframe {
  top: 0;
  bottom: auto;
  height: calc(100% - 60px);
}
.access-button {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  z-index: 2;
}
.access-button a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  background-color: #5f84f2;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.access-button a::before {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 30px;
  height: 33px;
  margin-right: 13px;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_map.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.access-button a:hover {
  opacity: 0.85;
}
@media (width >= 480px) {
  .access-button a {
    font-size: 18px;
  }
}

.entry-content .access-title {
  margin: 0 0 16px;
  color: #333;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}
.entry-content .access-title::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-image: url("/app/uploads/sites/1484/2026/07/ico_access.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
  translate: 0 -2px;
}
@media (width >= 480px) {
  .entry-content .access-title {
    margin-bottom: 24px;
    font-size: 24px;
  }
  .entry-content .access-title::before {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
}

.entry-content .access-lead {
  margin: 0 0 24px;
  color: #333;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .access-lead {
    margin-bottom: 40px;
    font-size: 18px;
  }
}

/*--

関連リンク（バナー＋外部リンク集 / TOP最下部）
※ バナー画像は index_img_banner01/02/03/05/06/08/09.png（08は非リンクのロゴ）

====================================================== --*/
.related-links {
  margin-inline: min(0px, 50% - 50vw);
  padding: 40px 0 48px;
  background-color: #f8f8f8;
}
@media (width >= 480px) {
  .related-links {
    padding: 56px 0 64px;
  }
}
.related-links-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
.related-links-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  gap: 8px;
}
@media (width >= 480px) {
  .related-links-list {
    margin-bottom: 25px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
.related-links-item {
  margin: 0 0 16px;
}
.related-links-banner {
  display: block;
  color: #333;
  text-decoration: none;
}
.related-links-banner:hover {
  text-decoration: none;
  opacity: 0.7;
}
.related-links-thumb {
  display: block;
  margin-bottom: 7px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.related-links-thumb img {
  display: block;
  width: 100%;
  height: auto;
}
.related-links-caption {
  display: block;
  color: #333;
  font-size: 13px;
  line-height: 1.85;
}
@media (width >= 480px) {
  .related-links-caption {
    font-size: 14px;
  }
}
.related-links-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.related-links-subitem {
  display: inline;
  font-size: 13px;
  line-height: 1.85;
}
.related-links-subitem::after {
  content: " / ";
  color: #999;
}
.related-links-subitem:last-child::after {
  content: "";
}
@media (width >= 480px) {
  .related-links-subitem {
    font-size: 14px;
  }
}
.related-links-sublink {
  color: #333;
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.related-links-sublink:hover {
  opacity: 0.7;
}

/*#####################################################################
  3-2. 学生・親御様へ（student.html）
#####################################################################*/
/* student 固有: timing / anshin。ほかは 2.共通コンポーネント（intro / search-nav -university / support / recommend系 / room-info -university / contact-cta）を流用。 */
/*--

お部屋探しのタイミング（timing / student固有）

====================================================== --*/
.timing {
  padding: 40px 0 16px;
}
@media (width >= 480px) {
  .timing {
    padding: 56px 0 16px;
  }
}
.timing-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
.timing-box {
  margin-bottom: 24px;
  padding: 20px 16px;
  background-color: #d1e6f5;
}
@media (width >= 480px) {
  .timing-box {
    padding: 32px;
  }
}
.timing-image {
  text-align: center;
}
.timing-image img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.entry-content .timing-heading {
  margin: 0 0 16px;
  color: #19a1ea;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .timing-heading {
    font-size: 24px;
  }
}

.entry-content .timing-intro {
  margin-bottom: 24px;
  line-height: 1.8;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .timing-intro {
    margin-bottom: 40px;
    font-size: 14px;
  }
}

.entry-content .timing-box-title {
  margin: 0 0 16px;
  color: #222;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .timing-box-title {
    font-size: 20px;
  }
}

.entry-content .timing-lead {
  margin: 0;
  color: #333;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .timing-lead {
    font-size: 15px;
  }
}

/*--

3つの安心（anshin / student固有）

====================================================== --*/
.anshin {
  padding: 40px 0 48px;
}
@media (width >= 480px) {
  .anshin {
    padding: 56px 0 64px;
  }
}
.anshin-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}
.anshin-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width >= 480px) {
  .anshin-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
.anshin-card {
  padding: 24px 20px;
  background-color: #d1e6f5;
}
.anshin-card-icon {
  margin: 0 0 16px;
  background-color: #fff;
  padding: 32px 16px;
  text-align: center;
}
.anshin-card-icon img {
  display: inline-block;
  max-width: 100%;
  height: 64px;
  width: auto;
}
@media (width >= 480px) {
  .anshin-card-icon img {
    height: 100px;
  }
}
.anshin-card-note {
  display: block;
  margin-top: 0.5em;
  font-size: 0.9em;
  text-align: right;
}

.entry-content .anshin-lead {
  margin: 0 0 16px;
  color: #333;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .anshin-lead {
    font-size: 15px;
  }
}

.entry-content .anshin-title {
  margin: 0 0 24px;
  color: #333;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #19a1ea;
}
@media (width >= 480px) {
  .entry-content .anshin-title {
    margin-bottom: 40px;
    font-size: 24px;
  }
}
.entry-content .anshin-title em.anshin-num {
  font-size: 1.6em;
  font-style: normal;
  font-weight: bold;
}

.entry-content .anshin-card-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
@media (width >= 480px) {
  .entry-content .anshin-card-title {
    font-size: 20px;
  }
}

.entry-content .anshin-card-text {
  margin: 0;
  color: #333;
  font-size: 12px;
  line-height: 1.8;
}
@media (width >= 480px) {
  .entry-content .anshin-card-text {
    font-size: 14px;
  }
}

/*#####################################################################
  3-3. ファミリーの方へ（family.html）
#####################################################################*/
/* family 固有CSSなし。2.共通コンポーネント（intro / search-nav.-area / commitment -family / support / recommend系 / recommend-group-link / room-info / contact-cta）のみで構成。 */
/*#####################################################################
  3-4. 住みたい街シリーズ（town.html）
#####################################################################*/
/*--

住みたい街シリーズ（town）

====================================================== --*/
.town-inner {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}

.entry-content .town-name {
  margin: 0 0 24px;
  padding-bottom: 24px;
  color: #333;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  background-image: url("/app/uploads/sites/1484/2026/07/town_bg_name.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
}
@media (width >= 480px) {
  .entry-content .town-name {
    font-size: 50px;
  }
}

.town-name rt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.entry-content .town-lead {
  margin: 0;
  color: #333;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .town-lead {
    font-size: 14px;
  }
}

.town-eyecatch {
  margin-top: 32px;
  margin-inline: min(0px, 50% - 50vw);
}
@media (width >= 480px) {
  .town-eyecatch {
    margin-top: 48px;
  }
}
.town-eyecatch img {
  display: block;
  width: 100%;
  height: auto;
}

/* トピック（good-points） */
.good-points {
  margin-inline: min(0px, 50% - 50vw);
  padding: 40px 0 48px;
  background-color: #f1f0e5;
}
@media (width >= 480px) {
  .good-points {
    padding: 56px 0 64px;
  }
}
.good-points-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
@media (width >= 480px) {
  .good-points-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 0 0 64px;
  }
}
.good-points-item {
  padding: 24px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.good-points-item dl {
  margin: 0;
}
.good-points-item dt {
  margin: 0 0 8px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
}
@media (width >= 480px) {
  .good-points-item dt {
    font-size: 20px;
  }
}
.good-points-item dt i {
  margin-right: 8px;
}
.good-points-item dd {
  margin: 0;
  color: #333;
  font-size: 13px;
  line-height: 1.8;
}

.entry-content .good-points-title {
  margin-bottom: 24px;
  color: #19a1ea;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.68;
  text-align: center;
}
@media (width >= 480px) {
  .entry-content .good-points-title {
    margin-bottom: 40px;
    font-size: 24px;
  }
}

/*#####################################################################
  3-5. カテゴリTOP（search/area・rosen・university・kodawari）
#####################################################################*/
/* 固有CSSなし。intro / search-nav（+ modifier .-area / .-rosen / .-university, univ-map）/ commitment / contents / fee など 2.共通コンポーネントで構成。 */
/*#####################################################################
  3-6. プライバシーポリシー（privacy.html）
#####################################################################*/
/*--

プライバシーポリシー

====================================================== --*/
.es-page-privacy .privacy-section {
  max-width: 880px;
  margin-inline: auto;
  padding: 48px 20px 0;
}
@media (width >= 480px) {
  .es-page-privacy .privacy-section {
    padding-top: 80px;
  }
}
.es-page-privacy .privacy-section:last-child {
  padding-bottom: 0;
}
.es-page-privacy .privacy-title {
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media (width >= 480px) {
  .es-page-privacy .privacy-title {
    font-size: 20px;
  }
}
.es-page-privacy p.privacy-description {
  margin-bottom: 24px;
}
.es-page-privacy .privacy-content.privacy-box {
  padding: 5%;
  background-color: #f2f2f2;
}
.es-page-privacy .privacy-text {
  margin: 0;
  color: #333;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.es-page-privacy .privacy-text:last-child {
  margin-bottom: 0;
}
.es-page-privacy .privacy-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.es-page-privacy .privacy-text a:hover {
  text-decoration: none;
}
.es-page-privacy .privacy-list {
  margin: 0;
  padding-left: 1.5em;
}
.es-page-privacy .privacy-list li {
  margin: 0 0 16px;
  padding-left: 0.3em;
  color: #333;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.es-page-privacy .privacy-list li:last-child {
  margin-bottom: 0;
}
.es-page-privacy .privacy-date {
  margin-top: 1em;
}
@media (width >= 480px) {
  .es-page-privacy .privacy-date {
    font-size: 14px;
  }
}
.es-page-privacy .privacy-signature {
  text-align: right;
}
.es-page-privacy .privacy-buttons {
  display: grid;
  gap: 16px;
  margin: 32px 0 0;
}
@media (width >= 480px) {
  .es-page-privacy .privacy-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
  }
}
.es-page-privacy .privacy-button a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 56px;
  padding: 16px 48px;
  border: 1px solid #d6d6d6;
  background-color: #000072;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
@media (width >= 480px) {
  .es-page-privacy .privacy-button a {
    min-height: 64px;
    font-size: 16px;
  }
}
.es-page-privacy .privacy-button a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (width >= 480px) {
  .es-page-privacy .privacy-button a::after {
    right: 24px;
  }
}
.es-page-privacy .privacy-button a:hover {
  opacity: 0.75;
}
.es-page-privacy .privacy-button span.arrow {
  position: relative;
}
.es-page-privacy .privacy-button span.arrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: -16px;
  bottom: 0;
  margin: auto;
}
@media (width >= 480px) {
  .es-page-privacy .privacy-button span.arrow::before {
    left: -24px;
  }
}
.es-page-privacy .privacy-button-blank a::after {
  background-image: url("/app/uploads/sites/1484/2026/07/privacy_ico_blank.png");
}
.es-page-privacy .privacy-button-pdf a::after {
  background-image: url("/app/uploads/sites/1484/2026/07/privacy_ico_pdf.png");
}